下拉选优化

src/api/crm/customer.js

@@ -151,3 +151,12 @@ export function delCustomer(customerId) {
     method: 'delete'
   })
 }
+
+// 模糊查询客户姓名
+export function getCustName(query) {
+  return request({
+    url: '/crm/customer/getCustName',
+    method: 'get',
+    params: query
+  })
+}

src/views/crm/customer/index.vue

@@ -21,13 +21,25 @@
         />
       </el-form-item>
       <el-form-item label="客户名称" prop="customerName">
-        <el-input
+        <el-select
           v-model="queryParams.customerName"
-          placeholder="请输入客户名称"
+          filterable
+          remote
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+          placeholder="请输入客户名称"
+          :remote-method="remoteCustomerNameQuery"
+          :loading="customerNameLoading"
+          @change="handleQuery"
+          @clear="handleClearCustomerName"
+        >
+          <el-option
+            v-for="item in customerNameOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="手机" prop="mobile">
         <el-input
@@ -323,7 +335,7 @@
 </template>
 
 <script>
-import { listCustomer,getCustomer,addCustomer,updateCustomer,delCustomer,exportCustomer  } from "@/api/crm/customer";
+import { getCustName,listCustomer,getCustomer,addCustomer,updateCustomer,delCustomer,exportCustomer  } from "@/api/crm/customer";
 import { getCompanyList } from "@/api/company/company";
 import customerDetails from '../components/customerDetails.vue';
 import editCustomerSource from '../components/editCustomerSource.vue';
@@ -338,6 +350,8 @@ export default {
         title:"修改客户来源",
         open:false,
       },
+      customerNameOptions: [], // 客户名称
+      customerNameLoading: false,
       tagId:null,
       tagsOptions:[],
       ctsTypeArr:[],
@@ -689,6 +703,26 @@ export default {
           this.msgSuccess("删除成功");
         }).catch(function() {});
     },
+    // 远程搜索客户名称
+    remoteCustomerNameQuery(query) {
+      if (query !== '') {
+        this.customerNameLoading = true;
+        // 防抖处理，避免频繁请求
+        clearTimeout(this.customerNameTimer);
+        this.customerNameTimer = setTimeout(() => {
+          getCustName({ customerName: query })
+            .then(response => {
+              this.customerNameOptions = response
+              this.customerNameLoading = false;
+            })
+            .catch(() => {
+              this.customerNameLoading = false;
+            });
+        }, 300);
+      } else {
+        this.customerNameOptions = [];
+      }
+    },
     /** 导出按钮操作 */
     handleExport() {
       //const queryParams = this.queryParams;

src/views/crm/customer/line.vue

@@ -11,13 +11,25 @@
         />
       </el-form-item>
       <el-form-item label="客户名称" prop="customerName">
-        <el-input
+        <el-select
           v-model="queryParams.customerName"
-          placeholder="请输入客户名称"
+          filterable
+          remote
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+          placeholder="请输入客户名称"
+          :remote-method="remoteCustomerNameQuery"
+          :loading="customerNameLoading"
+          @change="handleQuery"
+          @clear="handleClearCustomerName"
+        >
+          <el-option
+            v-for="item in customerNameOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="手机" prop="mobile">
         <el-input
@@ -315,7 +327,7 @@
 </template>
 
 <script>
-import { assignCustomer,importLineTemplate,listLineCustomer, getLineCustomer, delLineCustomer, addLineCustomer, updateLineCustomer, exportLineCustomer } from "@/api/crm/customer";
+import { getCustName,assignCustomer,importLineTemplate,listLineCustomer, getLineCustomer, delLineCustomer, addLineCustomer, updateLineCustomer, exportLineCustomer } from "@/api/crm/customer";
 import {getCitys} from "@/api/store/city";
 import { getToken } from "@/utils/auth";
 import { isAdmin } from "@/api/system/user";
@@ -328,6 +340,8 @@ export default {
   components: { customerAssignList,assignCompany },
   data() {
     return {
+      customerNameOptions: [], // 客户名称
+      customerNameLoading: false,
       assignList:{
         title:"分配历史记录",
         open:false,
@@ -669,6 +683,26 @@ export default {
         this.title = "修改线索客户";
       });
     },
+    // 远程搜索客户名称
+    remoteCustomerNameQuery(query) {
+      if (query !== '') {
+        this.customerNameLoading = true;
+        // 防抖处理，避免频繁请求
+        clearTimeout(this.customerNameTimer);
+        this.customerNameTimer = setTimeout(() => {
+          getCustName({ customerName: query })
+            .then(response => {
+              this.customerNameOptions = response
+              this.customerNameLoading = false;
+            })
+            .catch(() => {
+              this.customerNameLoading = false;
+            });
+        }, 300);
+      } else {
+        this.customerNameOptions = [];
+      }
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {