费用列表头部搜索栏使用search-bar组件

front-vue/src/views/service/cost/costManage.vue

@@ -1,171 +1,131 @@
 <template>
   <el-row class="app-container zap-main">
-    <el-row v-if="activeIndex === '0'" class="zap-table-search">
-      <el-row style="padding-top: 16px;">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getList"
-        >收起</right-toolbar>
-        <span class="zap-table-search__title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetQuery" style="float: ;">重置00</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
-        <el-form
-          :model="queryParams"
-          ref="queryForm"
-          :inline="true"
-          v-show="showSearch"
-          label-width="auto"
-        >
-          <el-form-item label="融资编号" prop="zfrNumber" size="large">
-            <el-input
-              maxlength="30"
-              v-model="queryParams.zfrNumber"
-              placeholder="请输入融资编号"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="开立企业" prop="coreScyName" size="large">
-            <el-input
-              maxlength="30"
-              v-model="queryParams.coreScyName"
-              placeholder="请输入开立企业名称"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="融资企业" prop="supScyName" size="large">
-            <el-input
-              maxlength="30"
-              v-model="queryParams.supScyName"
-              placeholder="请输入融资企业名称"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="融资状态" prop="zfrStatus" size="large">
-            <el-select v-model="queryParams.zfrStatus" placeholder="融资状态" clearable>
-              <el-option
-                v-for="dict in zfrStatusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="费用状态" prop="zciStatus" size="large">
-            <el-select v-model="queryParams.zciStatus" placeholder="费用状态" clearable>
-              <el-option
-                v-for="dict in zciStatusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="发票状态" prop="zciInvoiceStatus" size="large">
-            <el-select v-model="queryParams.zciInvoiceStatus" placeholder="发票状态" clearable>
-              <el-option
-                v-for="dict in invoiceStatusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间" size="large">
-            <el-date-picker
-              v-model="dateRange"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-        </el-form>
-      </el-row>
-    </el-row>
-    <el-row v-if="activeIndex === '1'" class="zap-table-search">
-      <el-row style="padding-top: 16px;">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getInvoice"
-        >收起</right-toolbar>
-        <span class="zap-table-search__title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="handleInvoiceQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetInvoiceQuery" style="float: ;">重置</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
-        <el-form
-          :model="invoiceParams"
-          ref="queryInvoiceForm"
-          :inline="true"
-          v-show="showSearch"
-          label-width="auto"
-        >
-          <el-form-item label="融资编号" prop="zfrNumber" size="large">
-            <el-input
-              maxlength="30"
-              v-model="invoiceParams.zfrNumber"
-              placeholder="请输入融资编号"
-              clearable
-              @keyup.enter.native="handleInvoiceQuery"
-            />
-          </el-form-item>
-          <el-form-item label="开立企业" prop="coreScyName" size="large">
-            <el-input
-              maxlength="30"
-              v-model="invoiceParams.coreScyName"
-              placeholder="请输入开立企业名称"
-              clearable
-              @keyup.enter.native="handleInvoiceQuery"
-            />
-          </el-form-item>
-          <el-form-item label="融资企业" prop="supScyName" size="large">
-            <el-input
-              maxlength="30"
-              v-model="invoiceParams.supScyName"
-              placeholder="请输入融资企业名称"
-              clearable
-              @keyup.enter.native="handleInvoiceQuery"
-            />
-          </el-form-item>
-          <el-form-item label="创建时间" size="large">
-            <el-date-picker
-              v-model="dateInvoiceRange"
-              size="small"
-              style="width: 225px"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-        </el-form>
-      </el-row>
-    </el-row>
+    <search-bar v-if="activeIndex === '0'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="auto"
+      >
+        <el-form-item label="融资编号" prop="zfrNumber">
+          <el-input
+            maxlength="30"
+            v-model="queryParams.zfrNumber"
+            placeholder="请输入融资编号"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="开立企业" prop="coreScyName">
+          <el-input
+            maxlength="30"
+            v-model="queryParams.coreScyName"
+            placeholder="请输入开立企业名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="融资企业" prop="supScyName">
+          <el-input
+            maxlength="30"
+            v-model="queryParams.supScyName"
+            placeholder="请输入融资企业名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="融资状态" prop="zfrStatus">
+          <el-select v-model="queryParams.zfrStatus" placeholder="融资状态" clearable>
+            <el-option
+              v-for="dict in zfrStatusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="费用状态" prop="zciStatus">
+          <el-select v-model="queryParams.zciStatus" placeholder="费用状态" clearable>
+            <el-option
+              v-for="dict in zciStatusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发票状态" prop="zciInvoiceStatus">
+          <el-select v-model="queryParams.zciInvoiceStatus" placeholder="发票状态" clearable>
+            <el-option
+              v-for="dict in invoiceStatusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="dateRange"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </search-bar>
+    <search-bar v-if="activeIndex === '1'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" @query="handleInvoiceQuery" @reset="resetInvoiceQuery">
+      <el-form
+        :model="invoiceParams"
+        ref="queryInvoiceForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="auto"
+      >
+        <el-form-item label="融资编号" prop="zfrNumber">
+          <el-input
+            maxlength="30"
+            v-model="invoiceParams.zfrNumber"
+            placeholder="请输入融资编号"
+            clearable
+            @keyup.enter.native="handleInvoiceQuery"
+          />
+        </el-form-item>
+        <el-form-item label="开立企业" prop="coreScyName">
+          <el-input
+            maxlength="30"
+            v-model="invoiceParams.coreScyName"
+            placeholder="请输入开立企业名称"
+            clearable
+            @keyup.enter.native="handleInvoiceQuery"
+          />
+        </el-form-item>
+        <el-form-item label="融资企业" prop="supScyName">
+          <el-input
+            maxlength="30"
+            v-model="invoiceParams.supScyName"
+            placeholder="请输入融资企业名称"
+            clearable
+            @keyup.enter.native="handleInvoiceQuery"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="dateInvoiceRange"
+            size="small"
+            style="width: 225px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </search-bar>
     <!-- ________________________________________平台用________________________________________________ -->
     <el-row class="zap-form zap-margin-top">
       <el-tabs v-model="activeIndex">
@@ -435,25 +395,25 @@
       <!-- 发票框 -->
       <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="auto" :inline="true">
-          <el-form-item label="企业名称" prop="scyName" size="large">
+          <el-form-item label="企业名称" prop="scyName">
             <el-input v-model="form.scyName" disabled />
           </el-form-item>
-          <el-form-item label="企业统一代码" prop="scySocialCode" size="large">
+          <el-form-item label="企业统一代码" prop="scySocialCode">
             <el-input v-model="form.scySocialCode" disabled />
           </el-form-item>
-          <el-form-item label="企业注册电话" prop="scyPhone" size="large">
+          <el-form-item label="企业注册电话" prop="scyPhone">
             <el-input v-model="form.scyPhone" disabled />
           </el-form-item>
-          <el-form-item label="收件人" prop="ziaContacts" size="large">
+          <el-form-item label="收件人" prop="ziaContacts">
             <el-input v-model="form.ziaContacts" disabled />
           </el-form-item>
-          <el-form-item label="收件人电话" prop="ziaContactsPhone" size="large">
+          <el-form-item label="收件人电话" prop="ziaContactsPhone">
             <el-input v-model="form.ziaContactsPhone" disabled />
           </el-form-item>
-          <el-form-item label="邮寄地址" prop="ziaAddress" size="large">
+          <el-form-item label="邮寄地址" prop="ziaAddress">
             <el-input v-model="form.ziaAddress" disabled />
           </el-form-item>
-          <el-form-item label="快递单号" prop="zciExpressNo" size="large">
+          <el-form-item label="快递单号" prop="zciExpressNo">
             <el-input
               v-model="form.zciExpressNo"
               placeholder="请输入快递单号"
@@ -477,25 +437,25 @@
           label-width="auto"
           :inline="true"
         >
-          <el-form-item label="企业名称" prop="scyName" size="large">
+          <el-form-item label="企业名称" prop="scyName">
             <el-input v-model="formInvoice.scyName" disabled />
           </el-form-item>
-          <el-form-item label="企业统一代码" prop="scySocialCode" size="large">
+          <el-form-item label="企业统一代码" prop="scySocialCode">
             <el-input v-model="formInvoice.scySocialCode" disabled />
           </el-form-item>
-          <el-form-item label="企业注册电话" prop="scyPhone" size="large">
+          <el-form-item label="企业注册电话" prop="scyPhone">
             <el-input v-model="formInvoice.scyPhone" disabled />
           </el-form-item>
-          <el-form-item label="收件人" prop="ziaContacts" size="large">
+          <el-form-item label="收件人" prop="ziaContacts">
             <el-input v-model="formInvoice.ziaContacts" disabled />
           </el-form-item>
-          <el-form-item label="收件人电话" prop="ziaContactsPhone" size="large">
+          <el-form-item label="收件人电话" prop="ziaContactsPhone">
             <el-input v-model="formInvoice.ziaContactsPhone" disabled />
           </el-form-item>
-          <el-form-item label="邮寄地址" prop="ziaAddress" size="large">
+          <el-form-item label="邮寄地址" prop="ziaAddress">
             <el-input v-model="formInvoice.ziaAddress" disabled />
           </el-form-item>
-          <el-form-item label="快递单号" prop="zciExpressNo" size="large">
+          <el-form-item label="快递单号" prop="zciExpressNo">
             <el-input
               v-model="formInvoice.zciExpressNo"
               placeholder="请输入快递单号"