需求46 潜在客户新增客户角色字段和主营类别修改成多选

src/views/ecw/customer/addPotentialCustom.vue

@@ -2,8 +2,8 @@
   <div>
     <el-dialog :title="$t('新建潜在客户信息')" :visible.sync="dialogTableVisible">
       <el-form ref="form" :rules="rules" :model="form" label-width="100px" style="padding: 0 20px;">
-        <el-form-item prop="name" :label="$t('客户姓名')">
-          <el-input v-model="form.name" :placeholder="$t('请输入客户姓名')"></el-input>
+        <el-form-item prop="name" :label="$t('姓名')">
+          <el-input v-model="form.name" :placeholder="$t('请输入姓名')"></el-input>
         </el-form-item>
         <el-form-item required :label="$t('联系方式')">
           <el-row :gutter="20">
@@ -41,16 +41,21 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item prop="source" :label="$t('客户来源')">
-          <el-select v-model="form.source" :placeholder="$t('请选择客户来源')">
+        <el-form-item prop="source" :label="$t('来源')">
+          <el-select v-model="form.source" :placeholder="$t('请选择来源')">
             <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
                        :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('客户类别')" prop="type">
+        <el-form-item :label="$t('类别')" prop="type">
           <dict-selector v-model="form.type" :type="DICT_TYPE.CUSTOMER_TYPE" form-type="checkbox"
                          multiple></dict-selector>
         </el-form-item>
+
+        <el-form-item :label="$t('角色')">
+          <dict-selector :type="DICT_TYPE.CUSTOMER_ROLE" form-type="checkbox" multiple v-model="form.roles"></dict-selector>
+        </el-form-item>
+
         <el-form-item prop="customerService" :label="$t('客户经理')">
           <el-select v-model="form.customerService" :placeholder="$t('请选择客户经理')">
             <el-option v-for="item in serviceUserList"
@@ -63,22 +68,47 @@
         <el-form-item :label="$t('公司英文名称')">
           <el-input v-model="form.companyEn"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('主营类别')" prop="productType">
-          <el-row :gutter="10">
-            <el-col :span="11">
-              <el-select v-model="form.productType" style="width: 100%" @change="getProductListFn"
-                         :placeholder="$t('请选择产品类别')">
-                <el-option :label="item.titleZh" :value="item.id" v-for="(item) in productTypeList" :key="item.id"/>
+
+<!--        <el-form-item :label="$t('主营类别')" prop="productType">-->
+<!--          <el-row :gutter="10">-->
+<!--            <el-col :span="11">-->
+<!--              <el-select v-model="form.productType" style="width: 100%" @change="getProductListFn"-->
+<!--                         :placeholder="$t('请选择产品类别')">-->
+<!--                <el-option :label="item.titleZh" :value="item.id" v-for="(item) in productTypeList" :key="item.id"/>-->
+<!--              </el-select>-->
+<!--            </el-col>-->
+<!--            <el-col :span="11">-->
+<!--              <el-select v-model="form.productId" style="width: 100%" :placeholder="$t('请选择')">-->
+<!--                <el-option :label="item.titleZh" :value="parseInt(item.id)" v-for="(item) in productList"-->
+<!--                           :key="item.id"/>-->
+<!--              </el-select>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+<!--        </el-form-item>-->
+
+        <el-form-item :label="$t('主营类别')" prop="products">
+          <div style="overflow: hidden">
+            <div style="margin-bottom: 10px" v-for="(ITEM, INDEX) in form.products" :key="INDEX">
+              <el-row :gutter="2">
+                <el-col :span="9" style="width: auto">
+                  <el-select @change="change(INDEX, $event)" v-model="form.products[INDEX].typeId" filterable :placeholder="$t('请选择产品类别')">
+                    <el-option :label="isChinese ? item.titleZh : item.titleEn" :value="item.id" v-for="item in productTypeList" :key="item.id" />
                   </el-select>
                 </el-col>
-            <el-col :span="11">
-              <el-select v-model="form.productId" style="width: 100%" :placeholder="$t('请选择')">
-                <el-option :label="item.titleZh" :value="parseInt(item.id)" v-for="(item) in productList"
-                           :key="item.id"/>
+                <el-col :span="6">
+                  <el-select @change="productIdsChange(INDEX, $event)" multiple filterable clearable v-model="form.products[INDEX].productIds" :placeholder="$t('请选择')">
+                    <el-option :label="`${item.titleZh}`" :value="parseInt(item.id)" v-for="item in form.products[INDEX].productList" :key="item.id" />
                   </el-select>
                 </el-col>
+                <el-col :span="6">
+                  <el-button type="danger" @click="form.products.splice(INDEX, 1)" style="padding: 10px" :disabled="!INDEX"><i class="el-icon-minus"></i></el-button>
+                  <el-button type="primary" @click="handleAddProduct" style="padding: 10px" v-if="INDEX === form.products.length - 1"><i class="el-icon-plus"></i></el-button>
+                </el-col>
               </el-row>
+            </div>
+          </div>
         </el-form-item>
+
         <el-form-item :label="$t('图片')" prop="picture">
           <upload v-model="form.picture" :limit="1"></upload>
         </el-form-item>
@@ -112,10 +142,47 @@ export default {
   name: "addPotentialCustom",
   methods: {
     getDictDatas,
-    getProductListFn(val) {
-      getProductList({typeId: val}).then(r => {
-        this.productList = r.data
+    change(INDEX, val) {
+      this.form.products[INDEX].productIds = []
+      this.getProductListFn(INDEX, [val])
+      this.$refs["form"].validateField("products")
+    },
+    getProductListFn(INDEX, val) {
+      getProductList({ typeIds: !val[0] ? [] : val }).then((r) => {
+        this.form.products[INDEX].productList = r.data
+      })
+    },
+    handleAddProduct() {
+      this.form.products.push({ typeId: undefined, productIds: [], productList: [] })
+      this.getProductListFn(this.form.products.length - 1, [undefined])
+    },
+    productIdsChange(INDEX, val) {
+      let typeIds = this.form.products[INDEX].productList.filter((item) => val.indexOf(item.id) > -1).map((item) => item.typeId)
+      typeIds = [...new Set(typeIds)]
+      let typeId = undefined
+      if (typeIds.length) {
+        typeId = typeIds[0]
+      }
+      if (typeId !== this.form.products[INDEX].typeId) {
+        this.form.products[INDEX].typeId = typeId
+        this.getProductListFn(INDEX, [typeId])
+      }
+    },
+    productsValidator(rule, value, callback) {
+      let r = this.form.products.some((item) => {
+        if (!item.typeId) {
+          callback(new Error(this.$t("主营类别不能为空")))
+          return true
+        }
       })
+      let typeIds = this.form.products.map((item) => item.typeId)
+      if (new Set(typeIds).size !== typeIds.length) {
+        callback(new Error(this.$t("主营类别不能重复")))
+        return
+      }
+      if (!r) {
+        callback()
+      }
     },
     reset() {
       this.form = {
@@ -135,8 +202,9 @@ export default {
         company: undefined,
         companyEn: undefined,
         inquiry: undefined,
-        productType: undefined,
-        productId: undefined,
+        productTypes: [],
+        productIds: [],
+        products: [],
         picture: undefined,
       }
     },
@@ -145,6 +213,9 @@ export default {
         if (valId) {
           let p = {...this.form}
           p.type = p.type.join(',')
+          p.roles = (p.roles || [])?.join(",")
+          p.productIds = (p.productIds || [])?.join(",")
+          p.productTypes = (p.productTypes || [])?.join(",")
           p.customerContacts[0].name = p.name
           createPotential(p).then(r => {
             if (r.code === 0) {
@@ -170,22 +241,37 @@ export default {
       this.productTypeList = r.data
     })
 
+    this.form.products.push({ typeId: undefined, productIds: [], productList: [] })
+    this.getProductListFn(0, [undefined])
 
+    console.log('this.form.products :')
+    console.log(this.form.products)
   },
   computed: {
+    isChinese() {
+      return this.$i18n.locale === "zh_CN"
+    },
     DICT_TYPE() {
       return DICT_TYPE
     },
     rules() {
+
       return {
+        products: [
+          {
+            required: true,
+            trigger: "blur",
+            validator: this.productsValidator
+          }
+        ],
         name: {required: true, message: this.$t('请输入名称'), target: 'blur'},
         customerService: {required: true, message: this.$t('请选择客户经理。'), target: ['blur'], type: 'number'},
         customerContacts: [{
           areaCode: {required: true, message: this.$t('请输入区号。'), target: 'blur'},
           phoneNew: {required: true, message: this.$t('请输入电话号码。'), target: 'blur'}
         },],
-        type: {type: 'array', message: this.$t('请输入客户类别。'), required: true, target: ['blur', 'change']},
-        source: {message: this.$t('前请输入客户来源'), required: true, target: 'change', type: 'number'}
+        type: {type: 'array', message: this.$t('请输入类别。'), required: true, target: ['blur', 'change']},
+        source: {message: this.$t('前请输入来源'), required: true, target: 'change', type: 'number'}
       }
     }
   },