客户线路表格组件封装

src/components/CustomerLineTable/index.vue

+<template>
+  <el-table
+    border
+    :data="tableData"
+    style="">
+    <el-table-column
+      width="250px"
+      label="始发地">
+      <template v-slot="{ row, column, $index }">
+        <el-checkbox v-model="row.checked" @change="updateValue(true)">{{ warehouseList[$index].titleZh }}</el-checkbox>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop="objectiveId"
+      label="目的地">
+      <template v-slot="{ row, column, $index }">
+        <el-select v-model="tableData[$index].objectiveIds" multiple placeholder="请选择" style="width:100%" @change="updateValue(row.checked)">
+          <el-option
+            v-for="item in importCityList"
+            :key="item.id"
+            :label="item.titleZh"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'CustomerLineTable',
+  props: {
+    warehouseList: Array,
+    importCityList: Array,
+    value: Array,
+    zhongPaoType: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  mounted() {
+    this.freshTableData()
+  },
+  methods: {
+    /**
+     * 解析 value
+     */
+    freshTableData(){
+      const foo = []
+      let index = 0
+      this.warehouseList.forEach(e => {
+        let bar = this.tableData.length > 0 ? this.tableData[index] : {
+          departureId: e.id,
+          objectiveIds: [],
+          checked: false
+        }
+        const valueIndex = this.value.findIndex(v => v.departureId === e.id)
+        if(valueIndex !== -1) {
+          bar = { ...this.value[valueIndex], checked: true }
+
+          if(bar.objectiveIds.length === 0) {
+            bar.objectiveIds = []
+          } else {
+            bar.objectiveIds = bar.objectiveIds.split(',').map(m => parseInt(m))
+          }
+        }
+        foo.push(bar)
+        index++
+      })
+      this.tableData = foo
+    },
+    /**
+     * 更新 value
+     */
+    updateValue(really = true){
+      if (!really) return
+      const result = []
+      this.tableData.forEach(e => {
+        if(e.checked){
+          const { departureId } = e
+          let objectiveIds = e.objectiveIds.join(',')
+          result.push({ departureId, objectiveIds, zhongPaoType: this.zhongPaoType })
+        }
+      })
+      this.$emit('input', result)
+    }
+  },
+  watch: {
+    value() {
+      this.freshTableData()
+    },
+    warehouseList() {
+      this.freshTableData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ecw/customer/edit.vue

@@ -149,7 +149,7 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="备注" prop="remarks">
-                <el-input v-model="form.remarks" placeholder="请输入备注" />
+                <el-input v-model="form.remarks" placeholder="请输入备注"/>
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -157,39 +157,30 @@
                 <el-switch v-model="form.arrivalConfirm" :active-value="0" :inactive-value="1" />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="重货标准" prop="weightUnit">
+                <el-input v-model="form.weightUnit" placeholder="请输入重货标准">
+                  <template slot="append">kg/cbm</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
             <el-col :span="24">
-              <el-form-item label="重货标准(CBM)" prop="weightUnit">
-                <el-input v-model="form.weightUnit" placeholder="请输入重货标准(CBM)" />
+              <el-form-item label="指定线路" prop="line">
+                <el-switch v-model="showZhong"></el-switch>
+                <customer-line-table v-show="showZhong" :warehouse-list="warehouseList" :import-city-list="importCityList" v-model="zhongLines" :zhong-pao-type="0"></customer-line-table>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="泡货标准" prop="weightUnit">
+                <el-input v-model="form.lightUnit" placeholder="请输入泡货标准">
+                  <template slot="append">kg/cbm</template>
+                </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="指定线路" prop="line">
-                <el-switch v-model="showLine"></el-switch>
-                <el-table
-                  v-show="showLine"
-                  border
-                  :data="warehouseList"
-                  style="width: 500px">
-                  <el-table-column
-                    prop="departureId"
-                    label="始发地">
-                    <template v-slot="{row}">
-                      <el-checkbox>{{ row.titleZh }}</el-checkbox>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="objectiveId"
-                    label="目的地">
-                    <el-select multiple placeholder="请选择">
-                      <el-option
-                        v-for="item in importCityList"
-                        :key="item.id"
-                        :label="item.titleZh"
-                        :value="item.id">
-                      </el-option>
-                    </el-select>
-                  </el-table-column>
-                </el-table>
+                <el-switch v-model="showPao"></el-switch>
+                <customer-line-table v-show="showPao" :warehouse-list="warehouseList" :import-city-list="importCityList" v-model="paoLines" :zhong-pao-type="1"></customer-line-table>
               </el-form-item>
             </el-col>
           </el-row>
@@ -197,7 +188,7 @@
           <el-card class="box-card">
             <div slot="header" class="clearfix">
               <span>联系人</span>
-              <el-button style="float: right;" size="small" type="primary" @click="form.customerContacts.push({department: undefined})">+</el-button>
+              <el-button style="float: right;" size="small" type="primary" @click="handleAddContact">+</el-button>
             </div>
             <el-table
               :data="form.customerContacts"
@@ -296,7 +287,7 @@
                 <template v-slot="{row}">
                   <el-select v-model="row.isDefault" placeholder="设为默认">
                     <el-option v-for="dict in getDictDatas(DICT_TYPE.IS_DEFAULT)"
-                               :key="dict.value" :label="dict.label" :value="parseInt(dict.isDefault)" />
+                               :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
                   </el-select>
                 </template>
               </el-table-column>
@@ -373,6 +364,7 @@ import { getProductTypeList } from '@/api/ecw/productType'
 import { getProductList } from '@/api/ecw/product'
 import {getTradeCityList} from "@/api/ecw/region"
 import {getWarehouseList} from "@/api/ecw/warehouse"
+import CustomerLineTable from '@/components/CustomerLineTable'
 
 export default {
   name: "edit",
@@ -380,7 +372,8 @@ export default {
     customerId: String
   },
   components: {
-    upload
+    upload,
+    CustomerLineTable
   },
   created() {
     this.reset()
@@ -416,7 +409,7 @@ export default {
         country: [{ required: true, message: "国家不能为空", trigger: "blur" }],
         level: [{ required: true, message: "客户等级不能为空", trigger: "blur" }],
         type: [{ required: true, message: "客户类别不能为空", trigger: "blur" }],
-        // createTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
+        createTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
         source: [{ required: true, message: "客户来源不能为空", trigger: "blur" }],
         customerService: [{ required: true, message: "跟进客服不能为空", trigger: "blur" }],
         status: [{ required: true, message: "客户状态不能为空", trigger: "blur" }],
@@ -426,17 +419,16 @@ export default {
       nodeList: [],
       productTypeList: [],
       productList: [],
-      showLine: false,
-      warehouseList: [],
-      importCityList: []
+      showZhong: false,
+      showPao: false,
+      warehouseList: [], // 仓库列表
+      importCityList: [], // 进口地址
+
+      zhongLines: [], // 重货线路
+      paoLines: [], // 泡货线路
     }
   },
   methods: {
-    lazyLoad(node, resolve) {
-      const r = this.productList.filter((p) => p.typeId === node.value)
-      console.log(r)
-      resolve(r)
-    },
     /** 取消按钮 */
     cancel() {
       this.open = false;
@@ -488,6 +480,7 @@ export default {
         customerService: undefined,
         customerContacts: [],
         customerLines: [],
+        lightUnit: undefined,
         promoter: undefined,
         status: undefined,
         founder: undefined,
@@ -513,12 +506,48 @@ export default {
         this.open = true;
         this.title = "修改客户";
       });
+    },
+    updateCustomerLines() {
+      let zhongLines = [], paoLines = []
+      if (this.zhongLines.length > 0) {
+        zhongLines = this.zhongLines
+      }
+      if (this.paoLines.length > 0) {
+        paoLines = this.paoLines
+      }
+      this.form.customerLines = [...zhongLines, ...paoLines]
+    },
+    handleAddContact() {
+      this.form.customerContacts.push({
+        "areaCode": "",
+        // "customerId": 0,
+        "department": "",
+        "email": "",
+        "isDefault": undefined,
+        "name": "",
+        "phoneNew": "",
+        "position": "",
+        "social": undefined,
+        "socialNumber": "",
+        // "userid": 0,
+        // "username": ""
+      })
     }
   },
   computed: {
     productListFilter(){
       return this.productList.filter((p) => p.typeId === this.form.productType)
     }
+  },
+  watch: {
+    zhongLines() {
+      console.log('zhongLines')
+      this.updateCustomerLines()
+    },
+    paoLines() {
+      console.log('paoLines')
+      this.updateCustomerLines()
+    }
   }
 }
 </script>