模糊查询获取下拉选

src/api/crm/customer.js

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

src/views/crm/customer/line.vue

@@ -12,13 +12,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
@@ -267,7 +279,7 @@
 
 <script>
  import store from "@/store";
-import { importLineTemplate,getLineCustomerList ,assignToUser,getCustomerDetails,exportCustomer } from "@/api/crm/customer";
+import { getCustName,importLineTemplate,getLineCustomerList ,assignToUser,getCustomerDetails,exportCustomer } from "@/api/crm/customer";
 import customerDetails from '../components/customerDetails.vue';
 import { treeselect } from "@/api/company/companyDept";
 import Treeselect from "@riophae/vue-treeselect";
@@ -282,6 +294,8 @@ export default {
   components: { assignUser,customerAssignList,addOrEditCustomer,customerDetails,Treeselect,editSource },
   data() {
     return {
+      customerNameOptions: [], // 客户名称
+      customerNameLoading: false,
       companyUser:store.getters.user,
       exportLoading:null,
       exportInteval:null,
@@ -679,6 +693,26 @@ export default {
     submitFileForm() {
       this.$refs.upload.submit();
     },
+    // 远程搜索客户名称
+    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 = [];
+      }
+    },
 
     getCustomerName(customerName){
        if(customerName==null || customerName==""){