合同管理头部搜索栏换成search-bar

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

@@ -1,30 +1,20 @@
 <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: ;margin-right: 20px;">重置</el-button>
-                <column-setting class="zap-column-setting"  :checkList="checkList"  :tableList="tableList"  :selfDom="selfDom"  :tableId="tableId"></column-setting>
-            </div>
-        </div>
-        <hr style="margin-top: 16px;">
-        <el-form class="zap-table-search__form" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
-            <el-form-item label="资金方" prop="scyName">
-                <el-input v-model="queryParams.scyName" placeholder="请输入资金方" clearable size="small" maxlength="30" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item label="合同模板名称" prop="zfcName">
-                <el-input v-model="queryParams.zfcName" placeholder="请输入模板名称" clearable size="small" maxlength="20" />
-            </el-form-item>
-            <el-form-item label="合同模板状态" prop="zfcStatus">
-                <el-select v-model="queryParams.zfcStatus" placeholder="请选择合同模板状态" clearable size="small">
-                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-                </el-select>
-            </el-form-item>
-        </el-form>
-    </el-row>
+    <search-bar :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
+      <el-form class="zap-table-search__form" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+          <el-form-item label="资金方" prop="scyName">
+              <el-input v-model="queryParams.scyName" placeholder="请输入资金方" clearable size="small" maxlength="30" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="合同模板名称" prop="zfcName">
+              <el-input v-model="queryParams.zfcName" placeholder="请输入模板名称" clearable size="small" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="合同模板状态" prop="zfcStatus">
+              <el-select v-model="queryParams.zfcStatus" placeholder="请选择合同模板状态" clearable size="small">
+                  <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+              </el-select>
+          </el-form-item>
+      </el-form>
+    </search-bar>
     <div class="zap-content zap-margin-top">
         <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['service:contract:add']">新增</el-button>
     </div>
@@ -44,11 +34,11 @@
         <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" v-if="uncheckList.createTime" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width='250px'>
             <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:edit']">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '00'" v-hasPermi="['service:contract:change']">停用</el-button>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:change']">启用</el-button>
-                <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:contract:query']">详情</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:delete']">删除</el-button>
+                <el-button class="zap-button-success" size="mini" @click="handleUpdate(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:edit']">修改</el-button>
+                <el-button class="zap-button-confirmation" size="mini" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '00'" v-hasPermi="['service:contract:change']">停用</el-button>
+                <el-button class="zap-button-primary" size="mini" @click="handleChange(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:change']">启用</el-button>
+                <el-button class="zap-button-plain" size="mini" @click="handleInfo(scope.row)" v-hasPermi="['service:contract:query']">详情</el-button>
+                <el-button class="zap-button-confirmation" size="mini" @click="handleDel(scope.row)" v-if="scope.row.zfcStatus == '01'" v-hasPermi="['service:contract:delete']">删除</el-button>
             </template>
         </el-table-column>
     </el-table>