1.个人客户管理-新增与修改开发

2.企业客户管理优化

src/views/customer/customerCompany.vue

@@ -83,7 +83,7 @@
         </el-table-column>
       </parentTable>
     </y-page-list-layout>
-    <el-dialog title="新增客户" :visible.sync="companyFormDialogVisible" width="50%" @close="clearCompanyForm">
+    <el-dialog :visible.sync="companyFormDialogVisible" width="50%" @close="clearCompanyForm">
       <el-form :model="companyForm" :rules="companyFormRules" ref="companyForm">
         <el-row>
           <el-col>

src/views/customer/customerPersonal.vue

@@ -16,7 +16,7 @@
         <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList" round>搜索</el-button>
         <el-button class="filter-item" style="float: left;" round type="success" @click="resetParams()">重置</el-button>
         <el-button class="filter-item" style="float: left;" round type="warning" @click="exportPage()">导出</el-button>
-        <PermissionButton menu-code="_views_customer_company_add" class-name="filter-item" name round type="danger" @click="openCompanyFormDialog()" />
+        <PermissionButton menu-code="_views_customer_personal_add" class-name="filter-item" name round type="danger" @click="openPersonalFormDialog()" />
       </template>
       <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
         <el-table-column label="姓名" align="center" prop="name">
@@ -97,6 +97,121 @@
         </el-table-column>
       </parentTable>
     </y-page-list-layout>
+    <el-dialog :visible.sync="personalFromDialogVisible" width="50%" @close="clearPersonalForm">
+      <el-form :model="personalFrom" :rules="personalFromRules" ref="personalFrom">
+        <el-row>
+          <el-col>
+            <el-form-item label="姓名:" prop="name" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.name" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="手机号:" prop="mobile" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.mobile" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="座机号:" prop="phone" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.phone" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="性别:" prop="sex" label-width="140px" class="postInfo-container-item">
+              <el-select v-model="personalFrom.sex" style="width: 100%;" clearable>
+                <el-option label="男" value="男"></el-option>
+                <el-option label="女" value="女"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="身份证号码:" prop="idNo" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.idNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="微信号:" prop="wechatNo" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.wechatNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="QQ号:" prop="qqNo" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.qqNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="部门:" prop="department" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.department" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="职位:" prop="duty" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.duty" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="终端客户:" prop="terminal" label-width="140px" class="postInfo-container-item">
+              <el-select v-model="personalFrom.terminal" style="width: 100%;" clearable>
+                <el-option label="是" :value="true"></el-option>
+                <el-option label="否" :value="false"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="毕业院校:" prop="school" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.school" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="毕业专业:" prop="industry" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.industry" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="备注:" prop="description" label-width="140px" class="postInfo-container-item">
+              <el-input v-model.trim="personalFrom.description" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="维护人:" prop="clientManagerId" label-width="140px" class="postInfo-container-item">
+              <el-select v-model="personalFrom.clientManagerId" filterable style="width: 100%;" clearable>
+                <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="clearPersonalForm()">取 消</el-button>
+        <el-button v-if="!personalFrom.id" type="primary" @click="addCustomer()">新 增</el-button>
+        <el-button v-if="personalFrom.id" type="primary" @click="editCustomer()">修 改</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -105,6 +220,7 @@ import YPageListLayout from '@/components/YPageListLayout';
 import Breadcrumb from '@/components/Breadcrumb';
 import PermissionButton from '@/components/PermissionButton/PermissionButton';
 import { getCookie, setCookie, removeCookie } from '@/utils/auth';
+import { isNumber, phoneNumber, postiveInteger, isIdNumber } from '@/utils/validate';
 
 export default {
   name: 'CustomerPersonalList',
@@ -124,6 +240,34 @@ export default {
       },
       // 用户下拉列表
       allUsers: [],
+      personalFromDialogVisible: false,
+      personalFrom: {
+        id: null,
+        ccId: null, // 个人客户都为1
+        name: null,
+        mobile: null,
+        phone: null,
+        sex: null,
+        idNo: null,
+        wechatNo: null,
+        qqNo: null,
+        department: null,
+        duty: null,
+        terminal: null,
+        school: null,
+        industry: null,
+        description: null,
+        clientManagerId: null,
+      },
+      personalFromRules: {
+        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { required: true, validator: phoneNumber, trigger: 'blur' },
+        ],
+        terminal: [{ required: true, message: '请选择是否终端客户', trigger: 'change' }],
+        clientManagerId: [{ required: true, message: '请选择维护人', trigger: 'change' }],
+      },
     };
   },
   created() {
@@ -172,6 +316,70 @@ export default {
     exportPage() {
       this.$utils.exportUtil('/customerLinkman/getCustomerPersonalPage/export', this.listQuery, '导出');
     },
+    // 打开新增/修改客户弹窗
+    openPersonalFormDialog() {
+      this.personalFromDialogVisible = true;
+    },
+    // 关闭新增/修改客户弹窗
+    clearPersonalForm() {
+      this.personalFrom = {
+        id: null,
+        ccId: null, // 个人客户都为1
+        name: null,
+        mobile: null,
+        phone: null,
+        sex: null,
+        idNo: null,
+        wechatNo: null,
+        qqNo: null,
+        department: null,
+        duty: null,
+        terminal: null,
+        school: null,
+        industry: null,
+        description: null,
+        clientManagerId: null,
+      };
+      this.$refs.personalFrom.resetFields();
+      this.personalFromDialogVisible = false;
+    },
+    // 新增个人客户
+    addCustomer() {
+      this.$refs.personalFrom.validate((valid) => {
+        if (valid) {
+          this.personalFrom.ccId = 1;
+          this.$api.customerLinkman.add(this.personalFrom).then((res) => {
+            if (res.code === 200) {
+              this.clearPersonalForm();
+              this.resetParams();
+            }
+          });
+        }
+      });
+    },
+    // 获取客户详情
+    getDetail(id) {
+      this.$api.customerLinkman.detail(id).then((res) => {
+        if (res.code === 200 && res.data) {
+          this.personalFrom = res.data;
+          this.openPersonalFormDialog();
+        }
+      });
+    },
+    // 修改个人客户
+    editCustomer() {
+      this.$refs.personalFrom.validate((valid) => {
+        if (valid) {
+          this.personalFrom.ccId = 1;
+          this.$api.customerLinkman.edit(this.personalFrom).then((res) => {
+            if (res.code === 200) {
+              this.clearPersonalForm();
+              this.resetParams();
+            }
+          });
+        }
+      });
+    },
   },
 };
 </script>