添加客户主营类别选择优化

src/views/ecw/customer/edit.vue

@@ -213,22 +213,27 @@
             </el-col>
 
             <el-col :span="12">
-              <el-form-item :label="$t('主营类别')">
-                <el-row :gutter="10" v-for="(ITEM, INDEX) in form.products" :key="INDEX">
-                  <el-col :span="10">
+              <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="10">
+                      <el-col :span="9">
                         <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="10">
+                      <el-col :span="9">
                         <el-select @change="productIdsChange(INDEX, $event)" multiple filterable clearable v-model="form.products[INDEX].productIds" :placeholder="$t('请选择')">
                           <el-option :label="`${isChinese ? item.typeTitleZh : item.typeTitleEn}: ${item.titleZh}`" :value="parseInt(item.id)" v-for="item in form.products[INDEX].productList" :key="item.id" />
                         </el-select>
                       </el-col>
-                  <el-col :span="2">
-                    <el-button size="small" type="default" @click="handleAddProduct">+</el-button>
+                      <el-col :span="6">
+                        <el-button type="default" @click="form.products.splice(INDEX, 1)" style="padding: 10px" :disabled="!INDEX"><i class="el-icon-minus"></i></el-button>
+                        <el-button type="default" @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-col>
 
@@ -810,6 +815,13 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        products: [
+          {
+            required: true,
+            trigger: "blur",
+            validator: this.productsValidator
+          }
+        ],
         name: [
           {
             required: true,
@@ -946,20 +958,18 @@ export default {
       row.splice(index, 1)
     },
     change(INDEX, val) {
-      this.form.productIds = []
+      this.form.products[INDEX].productIds = []
       this.getProductListFn(INDEX, [val])
+      this.$refs["form"].validateField("products")
     },
     getProductListFn(INDEX, val) {
-      console.log(INDEX, val, 11111111111111)
-
       getProductList({ typeIds: !val[0] ? [] : val }).then((r) => {
-        console.log(r, 2222)
         this.form.products[INDEX].productList = r.data
       })
     },
-    handleAddProduct(){
+    handleAddProduct() {
       this.form.products.push({ typeId: undefined, productIds: [], productList: [] })
-      this.getProductListFn(this.form.products.length-1, [undefined])
+      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)
@@ -1004,6 +1014,17 @@ export default {
         this.customerSelect = res.data.list
       })
     },
+    productsValidator(rule, value, callback) {
+      let r = this.form.products.some((item) => {
+        if (!item.typeId) {
+          callback(new Error(this.$t("主营类别不能为空")))
+          return true
+        }
+      })
+      if (!r) {
+        callback()
+      }
+    },
     phoneValidator(rule, value, callback) {
       if (!value) {
         return callback(new Error(this.$t("请输入联系方式")))
@@ -1117,6 +1138,9 @@ export default {
               this.$modal.msgError(this.$t("请重新选择主要竞争对手"))
               return
             }
+            if (this.form.competitorIds == 0 && !this.potential) {
+              return
+            }
 
             // 重货标准和泡货标准，未打开就不传，提交前清空一下
             if (!this.showZhong) {