平台资方管理头部搜索栏使用search-bar组件

front-vue/src/views/system/fundSide/fundSide.vue

@@ -1,40 +1,37 @@
 <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>
-            </div>
-        </div>
-        <hr style="margin-top: 16px" />
+    <search-bar :hiddenSetting="true" @query="handleQuery" @reset="resetQuery">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
-            <el-form-item label="资金方名称" prop="scyName" size="large">
+            <el-form-item label="资金方名称" prop="scyName">
                 <el-input v-model="queryParams.scyName" placeholder="请输入资金方名称" clearable @keyup.enter.native="handleQuery" maxlength="15" />
             </el-form-item>
-            <el-form-item label="资金方类型" align="center" prop="smiType" size="large">
+            <el-form-item label="资金方类型" align="center" prop="smiType">
                 <el-select v-model="queryParams.smiType" clearable>
                     <el-option v-for="(item, index) in formulaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="客户经理" prop="smiManager" size="large">
+            <el-form-item label="客户经理" prop="smiManager">
                 <el-input v-model="queryParams.smiManager" placeholder="请输入客户经理" clearable @keyup.enter.native="handleQuery" maxlength="15" />
             </el-form-item>
-            <el-form-item label="联系人姓名" prop="smiContract" size="large">
+            <el-form-item label="联系人姓名" prop="smiContract">
                 <el-input v-model="queryParams.smiContract" placeholder="请输入联系人姓名" clearable @keyup.enter.native="handleQuery" maxlength="15" />
             </el-form-item>
-            <el-form-item label="联系人电话" prop="smiContractPhone" size="large">
+            <el-form-item label="联系人电话" prop="smiContractPhone">
                 <el-input v-model="queryParams.smiContractPhone" placeholder="请输入联系人电话" clearable @keyup.enter.native="handleQuery" maxlength="15" />
             </el-form-item>
         </el-form>
-    </el-row>
+    </search-bar>
     <div class="zap-content zap-margin-top">
         <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['fundSide:fundSide:add']">新增</el-button>
     </div>
 
-    <el-table class="zap-table" v-loading="loading" :data="fundList" @selection-change="handleSelectionChange" stripe border>
+    <el-table
+        class="zap-table"
+        v-loading="loading"
+        :data="fundList"
+        @selection-change="handleSelectionChange"
+        stripe
+        border>
         <el-table-column label="序号" type="index" width="55" align="center" />
         <el-table-column label="资金方编号" align="center" prop="scyId" />
         <el-table-column label="资金方名称" align="center" prop="scyName" />
@@ -43,12 +40,6 @@
         <el-table-column label="联系人名称" align="center" prop="smiContract" />
         <el-table-column label="联系人电话" align="center" prop="smiContractPhone" />
         <el-table-column label="客户经理" align="center" prop="smiManager" />
-        <!-- <el-table-column
-        label="资金方状态"
-        :formatter="formulaFormatSend"
-        align="center"
-        prop="scyStatus"
-      /> -->
         <el-table-column label="资金方状态" align="center">
             <template slot-scope="scope">
                 <el-switch v-model="scope.row.scyStatus" active-value="00" inactive-value="01" @change="handleStatusChange(scope.row)"></el-switch>
@@ -56,8 +47,8 @@
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
             <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['fundSide:fundSide:update']" v-if="scope.row.scyStatus=='01'">修改</el-button>
+                <el-button class="zap-button-plain" size="mini" @click="handleDetail(scope.row)">详情</el-button>
+                <el-button class="zap-button-primary" size="mini" @click="handleUpdate(scope.row)" v-hasPermi="['fundSide:fundSide:update']" v-if="scope.row.scyStatus=='01'">修改</el-button>
             </template>
         </el-table-column>
     </el-table>
@@ -66,50 +57,86 @@
 
     <!-- 添加或修改资金方对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="140px" :inline="true" :disabled="disableds">
-            <el-row type="flex" align="middle" class="zap-title"><span class="zap-title__prefix"></span>渠道信息</el-row>
-            <el-form-item label="资金方名称" prop="scyName" size="large">
-                <el-input v-model="form.scyName" clearable style="width: 215px" placeholder="请输入资金方名称" maxlength="15" />
-            </el-form-item>
-            <el-form-item prop="smiType" label="资金方类型" size="large">
-                <el-select v-model="form.smiType" clearable>
-                    <el-option v-for="(item, index) in formulaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
-                </el-select>
-            </el-form-item>
+        <el-row type="flex" align="middle" class="zap-title"><span class="zap-title__prefix"></span>渠道信息</el-row>
+        <el-row class="zap-form">
+            <el-form
+                ref="form"
+                :model="form"
+                :rules="rules"
+                label-width="140px"
+                :inline="true"
+                :disabled="disableds">
+                <el-form-item label="资金方名称" prop="scyName" size="large">
+                    <el-input v-model="form.scyName" clearable style="width: 215px" placeholder="请输入资金方名称" maxlength="15" />
+                </el-form-item>
+                <el-form-item prop="smiType" label="资金方类型" size="large">
+                    <el-select v-model="form.smiType" clearable>
+                        <el-option v-for="(item, index) in formulaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
+                    </el-select>
+                </el-form-item>
 
-            <el-form-item label="合作协议签署" align="center" prop="smiAgreementType" size="large">
-                <el-select v-model="form.smiAgreementType" clearable>
-                    <el-option v-for="(item, index) in formulaOptionsSend" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="资金方网点" prop="smiAddress" size="large">
-                <el-input v-model="form.smiAddress" clearable style="width: 215px" placeholder="请输入资金方网点" maxlength="15" />
-            </el-form-item>
-            <el-form-item label="社会统一信用代码" prop="scySocialCode" size="large" >
-                <el-input v-model="form.scySocialCode" clearable style="width: 215px" placeholder="请输入社会统一信用代码" maxlength="18" />
-            </el-form-item>
-            <el-form-item label="客户经理" prop="smiManager" size="large">
-                <el-input v-model="form.smiManager" clearable style="width: 215px" placeholder="请输入客户经理" maxlength="15" />
-            </el-form-item>
-            <el-form-item label="联系人姓名" prop="smiContract" size="large">
-                <el-input v-model="form.smiContract" clearable style="width: 215px" placeholder="请输入联系人姓名" maxlength="15" :disabled="disabled" />
-            </el-form-item>
-            <el-form-item label="联系人电话" prop="smiContractPhone" size="large">
-                <el-input v-model="form.smiContractPhone" clearable style="width: 215px" placeholder="请输入联系人电话" maxlength="11" :disabled="disabled" />
-            </el-form-item>
-            <el-form-item label="补充描述" size="large">
-                <el-input v-model="form.smiDesc" type="textarea" placeholder="请输入内容" maxlength="100" style="width: 558px"></el-input>
-            </el-form-item>
-            <el-form-item label="合作协议" size="large">
-                <el-upload ref="upload" class="upload-demo" :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }" action="" accept=".jpg, .jpeg, .png" :http-request="sfzRequest" :on-preview="handlePictureCardPreview" :on-remove="beforeRemove" :on-change="dealImgChange" :before-upload="beforeAvatarUpload" multiple :limit="12" :on-exceed="handleExceed" list-type="picture-card" :file-list="sfzList" :auto-upload="true">
-                    <!-- 触发文件选择框的内容 -->
-                    <div slot="trigger" class="zap-contract-add__upload">
-                        <i class="el-icon-upload"></i>
-                        <div class="zap-upload__text">上传文件</div>
-                    </div>
-                </el-upload>
-            </el-form-item>
-        </el-form>
+                <el-form-item label="合作协议签署" align="center" prop="smiAgreementType" size="large">
+                    <el-select v-model="form.smiAgreementType" clearable>
+                        <el-option v-for="(item, index) in formulaOptionsSend" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="资金方网点" prop="smiAddress" size="large">
+                    <el-input v-model="form.smiAddress" clearable style="width: 215px" placeholder="请输入资金方网点" maxlength="15" />
+                </el-form-item>
+                <el-form-item label="社会统一信用代码" prop="scySocialCode" size="large">
+                    <el-input v-model="form.scySocialCode" clearable style="width: 215px" placeholder="请输入社会统一信用代码" maxlength="18" />
+                </el-form-item>
+                <el-form-item label="客户经理" prop="smiManager" size="large">
+                    <el-input v-model="form.smiManager" clearable style="width: 215px" placeholder="请输入客户经理" maxlength="15" />
+                </el-form-item>
+                <el-form-item label="联系人姓名" prop="smiContract" size="large">
+                    <el-input
+                        v-model="form.smiContract"
+                        clearable
+                        style="width: 215px"
+                        placeholder="请输入联系人姓名"
+                        maxlength="15"
+                        :disabled="disabled" />
+                </el-form-item>
+                <el-form-item label="联系人电话" prop="smiContractPhone" size="large">
+                    <el-input
+                        v-model="form.smiContractPhone"
+                        clearable
+                        style="width: 215px"
+                        placeholder="请输入联系人电话"
+                        maxlength="11"
+                        :disabled="disabled" />
+                </el-form-item>
+                <el-form-item label="补充描述" size="large">
+                    <el-input v-model="form.smiDesc" type="textarea" placeholder="请输入内容" maxlength="100" style="width: 558px"></el-input>
+                </el-form-item>
+                <el-form-item label="合作协议" size="large">
+                    <el-upload
+                        ref="upload"
+                        class="upload-demo"
+                        :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
+                        action=""
+                        accept=".jpg, .jpeg, .png"
+                        :http-request="sfzRequest"
+                        :on-preview="handlePictureCardPreview"
+                        :on-remove="beforeRemove"
+                        :on-change="dealImgChange"
+                        :before-upload="beforeAvatarUpload"
+                        multiple
+                        :limit="12"
+                        :on-exceed="handleExceed"
+                        list-type="picture-card"
+                        :file-list="sfzList"
+                        :auto-upload="true">
+                        <!-- 触发文件选择框的内容 -->
+                        <div slot="trigger" class="zap-contract-add__upload">
+                            <i class="el-icon-upload"></i>
+                            <div class="zap-upload__text">上传文件</div>
+                        </div>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+        </el-row>
         <el-row style="height: 109px;" type="flex" align="middle" justify="center">
             <el-button type="primary" plain @click="cancel">取 消</el-button>
             <el-button type="primary" v-show="!disableds" @click="submitForm">确 定</el-button>