客户列表查询竞争对手动态添加

src/api/ecw/customer.js

@@ -552,10 +552,20 @@ export function addCompetitor(data){
   })
 }
 
-export function competitorListAll(){
+
+// 获得客户
+export function getCompetitor(id) {
+  return request({
+    url: '/customer/competitor/get?id=' + id,
+    method: 'get'
+  })
+}
+
+export function competitorListAll(params){
   return request({
     url:'customer/competitor/listAll',
-    method:'get'
+    method:'get',
+    params
   })
 }
 

src/components/CompetitorSelector/index.vue

+<template>
+  <el-select
+    v-model="valueSync"
+    filterable
+    :clearable="clearable"
+    :multiple="multiple"
+    remote
+    reserve-keyword
+    :placeholder="$t('请输入关键词')"
+    @change="(val) => $emit('change', val)"
+    :remote-method="remoteMethod"
+    @focus="onFocus"
+    @clear="onClear"
+    :loading="loading">
+    <el-option
+      v-for="(item, index) in list"
+      :key="item.id"
+      :label="`${item.name}`"
+      :value="index">
+    </el-option>
+  </el-select>
+</template>
+<script>
+import {competitorListAll, getCompetitor} from '@/api/ecw/customer'
+
+export default {
+  props: {
+    value: [String, Number, Array, Boolean],
+    multiple: Boolean,
+    clearable: Boolean,
+    placeholder: String,
+  },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      valueSync: this.value
+    }
+  },
+  watch: {
+    index(val) {
+      let id = null
+      if (val){
+        let data = this.list[val]
+        console.log('选中的竞争对手', data)
+        id = data.id
+      }
+
+      // let id = val !== '' && val !== null ? this.list[val].id : null
+      this.$emit('input',  id)
+
+    },
+    value(val) {
+      // console.log('初始化内容', val)
+      this.init()
+    },
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (!this.value) {
+        this.index = null
+        return
+      }
+      let index = this.list.findIndex(item => item.id == this.value)
+      if (index < 0) {
+        getCompetitor(this.value).then(res => {
+          this.list.unshift(res.data)
+          this.$nextTick(() => {
+            this.index = 0
+          })
+        })
+      } else this.index = index
+    },
+    onFocus() {
+      this.$emit('focus')
+      if (!this.list.length) {
+        this.remoteMethod()
+      }
+    },
+    onClear() {
+      this.list = []
+    },
+    remoteMethod(keyword) {
+      let params = {}
+      params.searchKey = keyword
+      this.loading = true
+      competitorListAll(params)
+        .then(res => {
+          console.log('初始化内容', res),
+            this.list = res.data
+        })
+        .finally(() => this.loading = false)
+    }
+  }
+}
+</script>

src/views/ecw/customer/index.vue

@@ -90,9 +90,7 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('主要竞争对手')" v-show="showSearch">
-          <el-select clearable multiple v-model="queryParams.competitorIds" :placeholder="$t('请选择')" @change="handleQuery">
-            <el-option v-for="item in competitorList" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
+          <competitor-selector v-model="queryParams.competitorIds" multiple clearable @change="handleQuery" />
         </el-form-item>
         <el-form-item :label="$t('年度发货次数')" v-show="showSearch">
           <el-input v-model.trim="numYearly.value" :placeholder="$t('请输入数字')" clearable @keyup.enter.native="handleQuery" @input="numYearly.value = numYearly.value.replace(/\s+/g, '')">
@@ -721,9 +719,13 @@ import { getProductList } from "@/api/ecw/product"
 import { listMySimpleDepts } from "@/api/system/dept"
 import UserSelector from "@/components/UserSelector/index.vue";
 import CustomerFollow from "@/views/ecw/customer/components/customerFollow.vue";
+import ProductSelector from "@/components/ProductSelector/index.vue";
+import CompetitorSelector from "@/components/CompetitorSelector/index.vue";
 export default {
   name: "EcwCustomerIndex",
   components: {
+    ProductSelector,
+    CompetitorSelector,
     Contacts,
     AddPotentialCustom,
     Template,
@@ -1007,6 +1009,21 @@ export default {
     this.getList()
   },
   methods: {
+
+    onCompetitorChange(row, competitor) {
+      // row.goodsType = product ? product.typeId : null
+      row.id = !competitor
+        ? []
+        : competitor.id
+          .split(",")
+          .filter((item) => item !== "")
+          .map((item) => +item)
+      if (competitor) {
+        this.$set(this.names, competitor.id, {
+          name: competitor.name
+        })
+      }
+    },
     //合并客户
     handleMergeCus() {
       this.customerMergeVisible = true

src/views/ecw/customerConfirm/index.vue

@@ -265,20 +265,7 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('主要竞争对手')" v-show="showSearch">
-        <el-select
-          clearable
-          multiple
-          v-model="queryParams.competitorIds"
-          :placeholder="$t('请选择')"
-          @change="handleQuery"
-        >
-          <el-option
-            v-for="item in competitorList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <competitor-selector v-model="queryParams.competitorIds" multiple clearable @change="handleQuery" />
       </el-form-item>
       <el-form-item :label="$t('年度发货次数')" v-show="showSearch">
         <el-input
@@ -860,6 +847,7 @@ import { getProductList } from "@/api/ecw/product";
 import { listMySimpleDepts } from "@/api/system/dept";
 import Template from "@/views/cms/template/index.vue";
 import CustomerFollow from "@/views/ecw/customer/components/customerFollow.vue";
+import CompetitorSelector from "@/components/CompetitorSelector/index.vue";
 export default {
   name: "EcwCustomerconfirmIndex",
   activated() {
@@ -936,6 +924,7 @@ export default {
     },
   },
   components: {
+    CompetitorSelector,
     Template,
     Contacts,
     transferCustomer,

src/views/ecw/customerToBeAssigned/index.vue

@@ -266,20 +266,7 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('主要竞争对手')" v-show="showSearch">
-        <el-select
-          clearable
-          multiple
-          v-model="queryParams.competitorIds"
-          :placeholder="$t('请选择')"
-          @change="handleQuery"
-        >
-          <el-option
-            v-for="item in competitorList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <competitor-selector v-model="queryParams.competitorIds" multiple clearable @change="handleQuery" />
       </el-form-item>
       <el-form-item :label="$t('年度发货次数')" v-show="showSearch">
         <el-input
@@ -647,6 +634,7 @@ import Contacts from "@/views/ecw/customer/components/contacts.vue";
 import CustomerSetting from "../customer/components/customerSetting.vue";
 import AreaCodeSelector from "@/components/AreaCodeSelector/index.vue";
 import CustomerFollow from "@/views/ecw/customer/components/customerFollow.vue";
+import CompetitorSelector from "@/components/CompetitorSelector/index.vue";
 import { getNodeList } from "@/api/ecw/node";
 import { getCustomerSelect, changeCustomerDefaultPay, changeCustomerNoConsignee,changeCustomerDefaultBilling } from "@/api/ecw/customer";
 import { getProductTypeList } from "@/api/ecw/productType";
@@ -659,6 +647,7 @@ export default {
      this.getList()
     },
   components: {
+    CompetitorSelector,
     Contacts,
     Template,
     upload,

src/views/ecw/myCustomerService/index.vue

@@ -105,9 +105,7 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('主要竞争对手')" v-show="showSearch">
-        <el-select clearable multiple v-model="queryParams.competitorIds" :placeholder="$t('请选择')" @change="handleQuery">
-          <el-option v-for="item in competitorList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
+        <competitor-selector v-model="queryParams.competitorIds" multiple clearable @change="handleQuery" />
       </el-form-item>
       <el-form-item :label="$t('年度发货次数')" v-show="showSearch">
         <el-input v-model.trim="numYearly.value" :placeholder="$t('请输入数字')" clearable @keyup.enter.native="handleQuery" @input="numYearly.value = numYearly.value.replace(/\s+/g, '')">
@@ -397,9 +395,11 @@ import { getNodeList } from "@/api/ecw/node"
 import { getCustomerSelect, changeCustomerDefaultPay, changeCustomerNoConsignee, changeCustomerDefaultBilling } from "@/api/ecw/customer"
 import { getProductTypeList } from "@/api/ecw/productType"
 import { getProductList } from "@/api/ecw/product"
+import CompetitorSelector from "@/components/CompetitorSelector/index.vue";
 export default {
   name: "EcwMyCustomerServiceIndex",
   components: {
+    CompetitorSelector,
     Contacts,
     Template,
     upload,

src/views/ecw/oceanCustomer/index.vue

@@ -272,20 +272,7 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('主要竞争对手')" v-show="showSearch">
-        <el-select
-          clearable
-          multiple
-          v-model="queryParams.competitorIds"
-          :placeholder="$t('请选择')"
-          @change="handleQuery"
-        >
-          <el-option
-            v-for="item in competitorList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <competitor-selector v-model="queryParams.competitorIds" multiple clearable @change="handleQuery" />
       </el-form-item>
       <el-form-item :label="$t('年度发货次数')" v-show="showSearch">
         <el-input
@@ -721,6 +708,7 @@ import Template from "@/views/cms/template/index.vue";
 import Contacts from "@/views/ecw/customer/components/contacts.vue";
 import CustomerSetting from "../customer/components/customerSetting.vue";
 import AreaCodeSelector from "@/components/AreaCodeSelector/index.vue";
+import CompetitorSelector from "@/components/CompetitorSelector/index.vue";
 import { getNodeList } from "@/api/ecw/node";
 import { getCustomerSelect, changeCustomerDefaultPay, changeCustomerNoConsignee,changeCustomerDefaultBilling } from "@/api/ecw/customer";
 import { getProductTypeList } from "@/api/ecw/productType";
@@ -732,6 +720,7 @@ export default {
     this.getList();
   },
   components: {
+    CompetitorSelector,
     Contacts,
     Template,
     upload,