From b15fea10b5b4c1376156660b7a041347d0630fac Mon Sep 17 00:00:00 2001
From: ywk <317226901@qq.com>
Date: Mon, 7 Apr 2025 16:19:06 +0800
Subject: [PATCH] feat(businessHanding): add filterable

---
 .../configManage/businesshandling/index.vue   | 203 +++++++++---------
 1 file changed, 101 insertions(+), 102 deletions(-)

diff --git a/src/views/configManage/businesshandling/index.vue b/src/views/configManage/businesshandling/index.vue
index b51e4f9..b15fdff 100644
--- a/src/views/configManage/businesshandling/index.vue
+++ b/src/views/configManage/businesshandling/index.vue
@@ -7,8 +7,8 @@
           <el-col :span="4">
             <el-form-item :label="'业务名称'" prop="type">
               <el-autocomplete
-                class="inline-input"
                 v-model="queryParams.typeName"
+                class="inline-input"
                 :fetch-suggestions="querySearch"
                 placeholder="请输入内容或选择"
                 @select="handleSelect"
@@ -21,11 +21,9 @@
           </el-col>
           <el-col :span="4">
             <el-button class="my_search" @click="getHandelWorkList()">
-              {{ '搜索' }}</el-button
-            >
+              {{ '搜索' }}</el-button>
             <el-button class="my_reset" @click="reChongzhi">
-              {{ '重置' }}</el-button
-            >
+              {{ '重置' }}</el-button>
           </el-col>
         </el-row>
       </el-form>
@@ -36,14 +34,14 @@
           <el-button class="thebtn1" @click="adddate()">{{
             '添加'
           }}</el-button>
-          <el-button   @click="handleExport" class="thebtn2"> {{ '导出' }}</el-button>
+          <el-button class="thebtn2" @click="handleExport"> {{ '导出' }}</el-button>
         </div>
       </div>
       <div class="maintable">
         <el-table
           ref="table1"
-          height="700px"
           v-loading="loading"
+          height="700px"
           style="width: 100%"
           :header-cell-style="{ background: '#EEEEEE' }"
           :row-class-name="tableRowClassName"
@@ -163,6 +161,7 @@
                 v-model="form.type"
                 clearable
                 :placeholder="'请选择'"
+                filterable
               >
                 <el-option
                   v-for="item in approbalBusinessList"
@@ -223,7 +222,7 @@
             circle
             icon="el-icon-plus"
             @click="addList(i)"
-        /></el-col>
+          /></el-col>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button class="cancels" @click="handleClose">{{
@@ -238,7 +237,7 @@
 </template>
 
 <script>
-import topBar from "@/components/topBar";
+import topBar from '@/components/topBar'
 import {
   getApprobalBusiness,
   getPubEnumsAccount,
@@ -246,203 +245,203 @@ import {
   deletHandelWork,
   getOneHandelWorkList,
   saveHandleWork,
-  updateHandleWork,
-} from "@/api/businesshandling";
+  updateHandleWork
+} from '@/api/businesshandling'
 export default {
-  name: "Ywblsxf",
+  name: 'Ywblsxf',
   components: {
-    topBar,
+    topBar
   },
   data() {
     return {
-      moren: "ywblsxf",
+      moren: 'ywblsxf',
       topList: [
         {
           name: '业务办理手续费',
-          path: "ywblsxf",
-        },
+          path: 'ywblsxf'
+        }
       ],
       tableData: [],
-      loading:false,
+      loading: false,
       multipleSelection: [],
       total: 0,
       queryParams: {
         pageNum: 1,
         pageSize: 50,
-        type: "", // 业务名称
+        type: '' // 业务名称
       },
       updateShow: false,
-      addOrEdit: "", // 添加还是修改 true添加 false修改
-      updateTitle: "",
+      addOrEdit: '', // 添加还是修改 true添加 false修改
+      updateTitle: '',
       form: {
-        type: "", // 业务名称
+        type: '', // 业务名称
         // handleCount: "", //办理次数
-        pkAccount: "", // 币种
+        pkAccount: '', // 币种
         serviceChargeDetailsList: [
           {
-            quantity: "",
-            cost: "",
-          },
-        ],
+            quantity: '',
+            cost: ''
+          }
+        ]
       },
       rules: {
         type: [
           {
             required: true,
             message: '请选择业务',
-            trigger: "change",
-          },
+            trigger: 'change'
+          }
         ],
         pkAccount: [
           {
             required: true,
             message: '请选择币种',
-            trigger: "change",
-          },
-        ],
+            trigger: 'change'
+          }
+        ]
       },
       approbalBusinessList: [],
-      pubEnumsAccountList: [],
-    };
+      pubEnumsAccountList: []
+    }
   },
   created() {
-    this.getHandelWorkList();
-    this.getApprobalBusiness();
-    this.getPubEnumsAccount();
+    this.getHandelWorkList()
+    this.getApprobalBusiness()
+    this.getPubEnumsAccount()
   },
   methods: {
-    //带输入建议的产品名称
+    // 带输入建议的产品名称
     querySearch(queryString, cb) {
-      var restaurants = this.approbalBusinessList;
+      var restaurants = this.approbalBusinessList
       var results = queryString
         ? restaurants.filter(this.createFilter(queryString))
-        : restaurants;
+        : restaurants
       // 调用 callback 返回建议列表的数据
 
-      cb(results);
+      cb(results)
     },
     createFilter(queryString) {
       return (restaurant) => {
         return (
           restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
           0
-        );
-      };
+        )
+      }
     },
     handleSelect(item) {
-      this.queryParams.type = item.value;
+      this.queryParams.type = item.value
       this.queryParams.typeName = item.label
     },
     changeQuantity(item, i) {
-      item.quantity = i + 1;
+      item.quantity = i + 1
     },
     addList(i) {
       this.form.serviceChargeDetailsList.push({
-        quantity: "",
-        cost: "",
-      });
+        quantity: '',
+        cost: ''
+      })
     },
     getApprobalBusiness() {
       // 业务名称下拉选
       getApprobalBusiness().then((res) => {
-        this.approbalBusinessList = res.data;
-      });
+        this.approbalBusinessList = res.data
+      })
     },
     getPubEnumsAccount() {
       // 币种下拉选
       getPubEnumsAccount().then((res) => {
-        this.pubEnumsAccountList = res.rows;
-      });
+        this.pubEnumsAccountList = res.rows
+      })
     },
     // 点击保存
     onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          let url = "";
+          let url = ''
           if (this.addOrEdit == true) {
-            url = saveHandleWork;
+            url = saveHandleWork
           } else {
-            url = updateHandleWork;
+            url = updateHandleWork
           }
           url(this.form).then((res) => {
             if (res.code == 200) {
-              this.updateShow = false;
+              this.updateShow = false
               this.$message({
                 message: res.msg,
-                type: "success",
-              });
-              this.getHandelWorkList();
+                type: 'success'
+              })
+              this.getHandelWorkList()
             }
-          });
+          })
         }
-      });
+      })
     },
     // 重置
     reChongzhi() {
-      this.queryParams.type = "";
-      this.queryParams.typeName = ""
-      this.getHandelWorkList();
+      this.queryParams.type = ''
+      this.queryParams.typeName = ''
+      this.getHandelWorkList()
     },
     // 添加
     adddate() {
-      this.updateShow = true;
-      this.updateTitle = '添加';
-      this.addOrEdit = true;
-      this.form.pkId = null;
+      this.updateShow = true
+      this.updateTitle = '添加'
+      this.addOrEdit = true
+      this.form.pkId = null
       this.form = {
-        type: "", // 业务名称
+        type: '', // 业务名称
         // handleCount: "", //办理次数
-        pkAccount: "", // 币种
+        pkAccount: '', // 币种
         serviceChargeDetailsList: [
           {
-            quantity: "",
-            cost: "",
-          },
-        ],
-      };
+            quantity: '',
+            cost: ''
+          }
+        ]
+      }
     },
     // 修改
     update(row) {
-      this.updateTitle = '修改';
-      this.updateShow = true;
-      this.addOrEdit = false;
+      this.updateTitle = '修改'
+      this.updateShow = true
+      this.addOrEdit = false
       getOneHandelWorkList(row.pkId).then((res) => {
-        this.form = res.data;
-      });
+        this.form = res.data
+      })
     },
     // 删除
     deleteRow(row) {
       this.$confirm('确认删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: "warning",
+        type: 'warning'
       }).then(() => {
         deletHandelWork(row.pkId).then((res) => {
           if (res.code == 200) {
             this.$message({
               message: res.msg,
-              type: "success",
-            });
-            this.getHandelWorkList();
+              type: 'success'
+            })
+            this.getHandelWorkList()
           }
-        });
-      });
+        })
+      })
     },
     // 获取业务办理手续费列表
     getHandelWorkList() {
       this.loading = true
       getHandelWorkList(this.queryParams).then((res) => {
-        this.tableData = res.rows;
-        this.total = res.total;
+        this.tableData = res.rows
+        this.total = res.total
         this.loading = false
-      });
+      })
     },
-      /** 导出按钮操作 */
-      handleExport() {
-      this.$confirm( '是否确认导出所有数据项?', '警告', {
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       }).then((_) => {
         this.download(
           'system/manage/service-charge/export',
@@ -452,23 +451,23 @@ export default {
       })
     },
     handleClose() {
-      this.updateShow = false;
-      this.$refs["form"].clearValidate();
-      this.$refs["form"].resetFields();
+      this.updateShow = false
+      this.$refs['form'].clearValidate()
+      this.$refs['form'].resetFields()
     },
     handleSelectionChange(val) {
-      this.multipleSelection = val;
+      this.multipleSelection = val
     },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 == 1) {
-        return "warning-row";
+        return 'warning-row'
       } else if (rowIndex % 2 == 0) {
-        return "success-row";
+        return 'success-row'
       }
-      return "";
-    },
-  },
-};
+      return ''
+    }
+  }
+}
 </script>
 
     <style lang="scss" scoped>