客户列表封装即修改

src/components/customerComplaints/index.vue

@@ -5,13 +5,7 @@
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="客户名称" prop="customerId">
-          <el-select v-model="form.customerId" placeholder="请选择客户名称" :disabled="!!customerId">
-            <el-option
-              v-for="item in customerSelect"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"></el-option>
-          </el-select>
+          <customer-select  v-model="form.customerId" ></customer-select>
         </el-form-item>
         <el-form-item label="投诉类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择投诉类型">
@@ -113,6 +107,7 @@ import {getCustomerSelect} from '@/api/ecw/customer'
 import DictSelector from '@/components/DictSelector'
 import { DICT_TYPE, getDictDatas, getDictDataLabel } from '@/utils/dict'
 import {getBillNoSearch, getOrderNoSearch} from "@/api/ecw/order"
+import customerSelect from "@/views/ecw/customer/customerSelect";
 
 export default {
   name: "customerComplaints",
@@ -124,7 +119,8 @@ export default {
     customerId: Number
   },
   components: {
-    DictSelector
+    DictSelector,
+    customerSelect
   },
   data() {
     return {

src/views/ecw/customer/customerSelect.vue

+<template>
+  <el-select @change="$emit('input',customer)" v-model="customer" filterable remote
+             :remote-method="getCustomerSelectFn" :placeholder="$t('请选择客户名称')">
+    <el-option v-for="item in getCustomerList" :label="item.name" :value="Number(item.id)" :key="item.id"></el-option>
+  </el-select>
+</template>
+
+<script>
+import {getCustomerList, getCustomerSelect} from "@/api/ecw/customer";
+
+export default {
+  props:{
+   value:{
+     type:Number,
+     default:undefined,
+   },
+  },
+  name: "customerSelect",
+  mounted() {
+    this.getCustomerSelectFn();
+    this.$nextTick(()=>{
+      this.customer = this.value;
+      if(!(this.customerList.some(i => i.id === this.value)) && this.value !== undefined){
+        getCustomerList({ids:this.value}).then(r => {
+          this.recommended = r.data;
+        })
+      }
+    })
+  },
+  computed:{
+    getCustomerList(){
+      let index = this.customerList.findIndex(item => item.id !== this.recommended[0])
+       if(index > -1) return this.customerList
+        else return [...this.customerList,...this.recommended]
+    }
+  },
+  data(){
+    return {
+      customer:'',
+      customerList:[],
+      recommended:[],
+    }
+  },
+  methods:{
+    getCustomerSelectFn(val){
+      getCustomerSelect({pageNo:1,pageSize:100,searchKey:val}).then(r => {
+        this.customerList = r.data.list;
+      })
+    }
+  },
+  watch:{
+    value(val){
+      console.log(val,'val')
+      this.customer = val;
+      if(!(this.customerList.some(i => i.id === val)) && val !== undefined){
+        getCustomerList({ids:val}).then(r => {
+          this.recommended = r.data;
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ecw/customerComplaint/index.vue

@@ -4,10 +4,7 @@
     <!-- 搜索工作栏 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch && !!!customerId" label-width="68px">
       <el-form-item :label="$t('客户名称')" prop="customerId">
-        <el-select v-model="queryParams.customerId" :placeholder="$t('请选择客户名称')" clearable size="small">
-          <el-option v-for="customer in myFollowCustomerList" :key="customer.id" :value="customer.id"
-                     :label="customer.name.join('|').join(customer.name)"/>
-        </el-select>
+       <customer-select v-model="queryParams.customerId" ></customer-select>
       </el-form-item>
       <el-form-item :label="$t('投诉类型')" prop="type">
         <el-select v-model="queryParams.type" :placeholder="$t('请选择投诉类型')" clearable size="small">
@@ -100,13 +97,7 @@
         <div class="formShow">
           <div>
           <el-form-item :label="$t('客户名称')" prop="customerId">
-            <el-select v-model="form.customerId" :placeholder="$t('请选择客户名称')" :disabled="!!customerId" filterable>
-              <el-option
-                v-for="item in customerSelect"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"></el-option>
-            </el-select>
+            <customer-select v-model="form.customerId" ></customer-select>
           </el-form-item>
           <el-form-item :label="$t('投诉类型')" prop="type">
             <el-select v-model="form.type" :placeholder="$t('请选择投诉类型')">
@@ -205,7 +196,6 @@
     <el-dialog :title="title" :visible.sync="openCustomer" width="900px" append-to-body>
       <el-form ref="form" :model="form" label-width="80px">
         <div class="formShow">
-          <div>
           <el-form-item :label="$t('客户名称')+':'">
             <div>{{ formatCustomerName(form.customerId) }}</div>
           </el-form-item>
@@ -218,7 +208,6 @@
           <el-form-item label="提单号:" prop="ladingbillId" >
             <div>{{form.ladingbillId|| $t('无')}}</div>
           </el-form-item>
-          </div>
           <div>
             <el-form-item :label="$t('投诉时间')+':'">
                 <span>{{parseTime(form.createTime)}}</span>
@@ -248,9 +237,7 @@
           <span>{{parseTime(form.handleAt)}}</span>
         </el-form-item>
       </el-form>
-
       <customer-follow v-if="!!this.form.id" :id="form.id" :customer-id="form.customerId"></customer-follow>
-
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="openCustomer=false">{{$t('确 定')}}</el-button>
       </div>
@@ -301,12 +288,12 @@
 
 <script>
 import { createCustomerComplaint, updateCustomerComplaint, deleteCustomerComplaint, getCustomerComplaint, getCustomerComplaintPage, exportCustomerComplaintExcel } from "@/api/ecw/customerComplaint";
-import {getCustomerSelect} from '@/api/ecw/customer'
+import {getCustomerList, getCustomerSelect} from '@/api/ecw/customer'
 import CustomerFollow from "../../../components/CustomerFollow"
 import DictSelector from '@/components/DictSelector'
 import { DICT_TYPE, getDictDataLabel, getDictDatas } from '@/utils/dict'
 import { getBillNoSearch, getOrderNoSearch } from '@/api/ecw/order'
-
+import customerSelect from '@/views/ecw/customer/customerSelect'
 export default {
   name: "CustomerComplaint",
   /**
@@ -318,7 +305,8 @@ export default {
   },
   components: {
     CustomerFollow,
-    DictSelector
+    DictSelector,
+    customerSelect
   },
   data() {
     return {
@@ -378,9 +366,6 @@ export default {
   created() {
     this.getList();
 
-    getCustomerSelect().then(r => {
-      this.customerSelect = r.data
-    })
   },
   methods: {
 
@@ -410,6 +395,9 @@ export default {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
+        getCustomerList({ids:this.list.map(i => i.customerId).join(',')}).then(r => {
+          this.customerSelect = r.data
+        })
       });
     },
     /** 取消按钮 */