联系人表格

src/utils/dict.js

@@ -82,7 +82,10 @@ export const DICT_TYPE = {
   BRAND_REG_TYPE: 'brand_registry_type',
   BRAND_AUTH_STATUS: 'brand_authorization_status',
   BRAND_CUSTOMER_CHARGING_MODEL: 'customer_charging_model',
-  COUNTRY: 'country',
+  COUNTRY: 'country', // 国家地区
+  AREA_CODE: 'area_code', // 区号
+  SOCIAL: 'customer_social_tools', // 社交软件
+  IS_DEFAULT: 'is_default', // 默认联系人
 
 }
 

src/views/ecw/customer/index.vue

@@ -103,7 +103,7 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="150px">
         <el-row :gutter="10">
           <el-col :span="12">
@@ -262,7 +262,7 @@
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>联系人</span>
-            <el-button style="float: right;" size="small" type="primary">+</el-button>
+            <el-button style="float: right;" size="small" type="primary" @click="form.customerContacts.push({department: undefined})">+</el-button>
           </div>
           <el-table
             :data="form.customerContacts"
@@ -273,27 +273,45 @@
               label="部门"
               width=""
             >
+              <template v-slot="{ row, column, $index }">
+                <el-input v-model="row.department" placeholder="请输入部门" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop="position"
               label="职位"
               width=""
             >
+              <template v-slot="{row}">
+                <el-input v-model="row.position" placeholder="请输入职位" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop="name"
               label="联系人"
             >
+              <template v-slot="{row}">
+                <el-input v-model="row.name" placeholder="请输入联系人" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop="areaCode"
               label="区号"
             >
+              <template v-slot="{row}">
+                <el-select v-model="row.areaCode" placeholder="请选择区号">
+                  <el-option v-for="dict in getDictDatas(DICT_TYPE.AREA_CODE)"
+                             :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
+                </el-select>
+              </template>
             </el-table-column>
             <el-table-column
-              prop=""
+              prop="phoneNew"
               label="联系方式"
             >
+              <template v-slot="{row}">
+                <el-input v-model="row.phoneNew" placeholder="请输入联系方式" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop=""
@@ -304,26 +322,47 @@
               prop="social"
               label="社交软件"
             >
+              <template v-slot="{row}">
+                <el-select v-model="row.social" placeholder="请选择社交软件">
+                  <el-option v-for="dict in getDictDatas(DICT_TYPE.SOCIAL)"
+                             :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
+                </el-select>
+              </template>
             </el-table-column>
             <el-table-column
               prop="socialNumber"
               label="社交软件号码"
             >
+              <template v-slot="{row}">
+                <el-input v-model="row.socialNumber" placeholder="请输入社交软件号码" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop="email"
               label="邮箱"
             >
+              <template v-slot="{row}">
+                <el-input v-model="row.email" placeholder="请输入邮箱" size="mini"/>
+              </template>
             </el-table-column>
             <el-table-column
               prop="isDefault"
               label="设为默认"
             >
+              <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)" />
+                </el-select>
+              </template>
             </el-table-column>
             <el-table-column
               prop="name"
               label="操作"
             >
+              <template v-slot="{ row, column, $index }">
+                <el-button type="danger" @click="form.customerContacts.splice($index, 1)">删除</el-button>
+              </template>
             </el-table-column>
           </el-table>
         </el-card>
@@ -405,9 +444,7 @@ export default {
         department: null,
       },
       // 表单参数
-      form: {
-        customerContacts: []
-      },
+      form: {},
       // 表单校验
       rules: {
         name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
@@ -458,6 +495,7 @@ export default {
         source: undefined,
         picture: undefined,
         customerService: undefined,
+        customerContacts: [],
         promoter: undefined,
         status: undefined,
         founder: undefined,
@@ -498,7 +536,7 @@ export default {
       this.reset();
       const id = row.id;
       getCustomer(id).then(response => {
-        this.form = response.data;
+        this.form = { ...this.form, ...response.data };
         this.open = true;
         this.title = "修改客户";
       });