平台发票管理头部替换成header-bar组件

front-vue/src/views/service/invoice/invoice.vue

@@ -1,43 +1,33 @@
 <template>
 <div class="app-container zap-main">
-    <el-row class="zap-table-search">
-        <div class="zap-padding-end">
-            <right-toolbar class="zap-right-toolbar" :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
-            <span class="zap-padding-start zap-font-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: ;">重置</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-if="showSearch" label-width="68px">
-                <el-form-item label="发票编码" prop="ziiNo" size="large">
-                    <el-input v-model.trim="queryParams.ziiNo" placeholder="请输入发票编码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item label="购方识别" prop="ziiPurchaserNo"  size="large">
-                    <el-input v-model.trim="queryParams.ziiPurchaserNo" placeholder="请输入购方识别码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item label="销方识别" prop="ziiSellerNo"  size="large">
-                    <el-input v-model.trim="queryParams.ziiSellerNo" placeholder="请输入销方识别码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item label="开票日期" prop="ziiDate"  size="large">
-                    <el-date-picker v-model="queryParams.ziiDate" unlink-panels value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item label="发票类型" prop="ziiType"  size="large">
-                    <el-select v-model="queryParams.ziiType" placeholder="请选择发票类型" clearable>
-                        <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="购方" prop="ziiPurchaserName"  size="large">
-                    <el-input v-model.trim="queryParams.ziiPurchaserName" placeholder="请输入购方名称" clearable maxlength="25" @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item label="销方" prop="ziiSellerName"  size="large">
-                    <el-input v-model.trim="queryParams.ziiSellerName" placeholder="请输入销方名称" clearable maxlength="25" @keyup.enter.native="handleQuery" />
-                </el-form-item>
-            </el-form>
-        </div>
-    </el-row>
+    <search-bar :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-if="showSearch" label-width="68px">
+          <el-form-item label="发票编码" prop="ziiNo">
+              <el-input v-model.trim="queryParams.ziiNo" placeholder="请输入发票编码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="购方识别" prop="ziiPurchaserNo">
+              <el-input v-model.trim="queryParams.ziiPurchaserNo" placeholder="请输入购方识别码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="销方识别" prop="ziiSellerNo">
+              <el-input v-model.trim="queryParams.ziiSellerNo" placeholder="请输入销方识别码" clearable maxlength="25" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="开票日期" prop="ziiDate">
+              <el-date-picker v-model="queryParams.ziiDate" unlink-panels value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+          </el-form-item>
+          <el-form-item label="发票类型" prop="ziiType">
+              <el-select v-model="queryParams.ziiType" placeholder="请选择发票类型" clearable>
+                  <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+              </el-select>
+          </el-form-item>
+          <el-form-item label="购方" prop="ziiPurchaserName">
+              <el-input v-model.trim="queryParams.ziiPurchaserName" placeholder="请输入购方名称" clearable maxlength="25" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="销方" prop="ziiSellerName">
+              <el-input v-model.trim="queryParams.ziiSellerName" placeholder="请输入销方名称" clearable maxlength="25" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+      </el-form>
+    </search-bar>
     <el-row class="zap-table zap-margin-top zap-padding-top zap-bg">
       <el-table  v-loading="loading" :data="infList" @selection-change="handleSelectionChange" stripe border>
         <el-table-column label="序号" type="index" width="50" align="center">
@@ -56,8 +46,8 @@
         <el-table-column label="发票类型" :formatter="typeFormat" align="center" prop="ziiType" :show-overflow-tooltip="true" v-if="uncheckList.ziiType" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right">
             <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)" v-hasPermi="['invoice:invoice:query']">详情</el-button>
-                <el-button :disabled="!scope.row.ziiFile" style="font-size:12px" type="text" icon="el-icon-download" @click="handleDownload(scope.row)" v-hasPermi="['invoice:invoice:download']">下载</el-button>
+                <el-button class="zap-button-plain" size="mini" @click="handleDetail(scope.row)" v-hasPermi="['invoice:invoice:query']">详情</el-button>
+                <el-button class="zap-button-success" size="mini" :disabled="!scope.row.ziiFile" @click="handleDownload(scope.row)" v-hasPermi="['invoice:invoice:download']">下载</el-button>
             </template>
         </el-table-column>
     </el-table>
@@ -65,36 +55,38 @@
 
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="cancel">
-        <el-form ref="form" :disabled="true" :model="form" v-if="open" label-width="110px" class="demo-form-inline" :inline="true">
-            <el-form-item label="发票编号" prop="ziiNo" size="large">
-                <el-input v-model.trim="form.ziiNo" maxlength="30" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="购方" prop="ziiPurchaserName" size="large">
-                <el-input v-model.trim="form.ziiPurchaserName" maxlength="30" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="购方识别码" prop="ziiPurchaserNo" size="large">
-                <el-input v-model.trim="form.ziiPurchaserNo" maxlength="30" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="销方" prop="ziiSellerName" size="large">
-                <el-input v-model.trim="form.ziiSellerName" maxlength="30" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="销方识别码" prop="ziiSellerNo" size="large">
-                <el-input v-model.trim="form.ziiSellerNo" maxlength="30" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="开票日期" prop="ziiDate" size="large">
-                <el-date-picker clearable style="width: 200px" v-model="form.ziiDate" type="date" value-format="yyyy-MM-dd">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item label="开票金额" prop="ziiAmount" size="large">
-                <el-input v-model="form.ziiAmount" :max="9999999999.99" :precision="2" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="合计金额" prop="ziiTotalAmount" size="large">
-                <el-input v-model="form.ziiTotalAmount" :max="9999999999.99" :precision="2" style="width: 200px" />
-            </el-form-item>
-            <el-form-item label="发票类型" prop="ziiType" size="large">
-                <el-input v-model.trim="form.ziiType" style="width: 200px" />
-            </el-form-item>
-        </el-form>
+        <el-row class="zap-form">
+            <el-form ref="form" :disabled="true" :model="form" v-if="open" label-width="110px" class="demo-form-inline" :inline="true">
+              <el-form-item label="发票编号" prop="ziiNo">
+                  <el-input v-model.trim="form.ziiNo" maxlength="30" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="购方" prop="ziiPurchaserName">
+                  <el-input v-model.trim="form.ziiPurchaserName" maxlength="30" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="购方识别码" prop="ziiPurchaserNo">
+                  <el-input v-model.trim="form.ziiPurchaserNo" maxlength="30" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="销方" prop="ziiSellerName">
+                  <el-input v-model.trim="form.ziiSellerName" maxlength="30" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="销方识别码" prop="ziiSellerNo">
+                  <el-input v-model.trim="form.ziiSellerNo" maxlength="30" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="开票日期" prop="ziiDate">
+                  <el-date-picker clearable style="width: 200px" v-model="form.ziiDate" type="date" value-format="yyyy-MM-dd">
+                  </el-date-picker>
+              </el-form-item>
+              <el-form-item label="开票金额" prop="ziiAmount">
+                  <el-input v-model="form.ziiAmount" :max="9999999999.99" :precision="2" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="合计金额" prop="ziiTotalAmount">
+                  <el-input v-model="form.ziiTotalAmount" :max="9999999999.99" :precision="2" style="width: 200px" />
+              </el-form-item>
+              <el-form-item label="发票类型" prop="ziiType">
+                  <el-input v-model.trim="form.ziiType" style="width: 200px" />
+              </el-form-item>
+            </el-form>
+        </el-row>
         <div slot="footer" class="dialog-footer">
             <el-button @click="cancel">取 消</el-button>
         </div>