客户管理-前端代码首次开发。

src/api/business/spd/cm/customers.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询客户列表
+export function listCustomers(query) {
+  return request({
+    url: '/cm/customers/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询客户详细
+export function getCustomers(id) {
+  return request({
+    url: '/cm/customers/' + id,
+    method: 'get'
+  })
+}
+
+// 新增客户
+export function addCustomers(data) {
+  return request({
+    url: '/cm/customers',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改客户
+export function updateCustomers(data) {
+  return request({
+    url: '/cm/customers',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除客户
+export function delCustomers(id) {
+  return request({
+    url: '/cm/customers/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询客户联系人信息
+export function getContactInfo() {
+  return request({
+    url: '/cm/customers/getContactInfo',
+    method: 'get'
+  })
+}

src/api/business/spd/cm/customersDepartment.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询客户科室列表
+export function listCustomersDepartment(query) {
+  return request({
+    url: '/cm/customersDepartment/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询客户科室详细
+export function getCustomersDepartment(id) {
+  return request({
+    url: '/cm/customersDepartment/' + id,
+    method: 'get'
+  })
+}
+
+// 新增客户科室
+export function addCustomersDepartment(data) {
+  return request({
+    url: '/cm/customersDepartment',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改客户科室
+export function updateCustomersDepartment(data) {
+  return request({
+    url: '/cm/customersDepartment',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除客户科室
+export function delCustomersDepartment(id) {
+  return request({
+    url: '/cm/customersDepartment/' + id,
+    method: 'delete'
+  })
+}

src/api/business/spd/cm/customersResponsiblePerson.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询客户负责人列表
+export function listCustomersResponsiblePerson(query) {
+  return request({
+    url: '/cm/customersResponsiblePerson/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询客户负责人详细
+export function getCustomersResponsiblePerson(id) {
+  return request({
+    url: '/cm/customersResponsiblePerson/' + id,
+    method: 'get'
+  })
+}
+
+// 新增客户负责人
+export function addCustomersResponsiblePerson(data) {
+  return request({
+    url: '/cm/customersResponsiblePerson',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改客户负责人
+export function updateCustomersResponsiblePerson(data) {
+  return request({
+    url: '/cm/customersResponsiblePerson',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除客户负责人
+export function delCustomersResponsiblePerson(id) {
+  return request({
+    url: '/cm/customersResponsiblePerson/' + id,
+    method: 'delete'
+  })
+}

src/views/business/spd/cm/customers/index.vue

@@ -0,0 +1,942 @@
+<template>
+  <div id="Customers" class="app-container">
+    <div v-if="!isAdd1 && !isAdd2">
+      <div v-if="isList">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-row :gutter="10" justify="space-between">
+            <el-col :span="5">
+              <el-form-item label="销售组织" prop="orgName">
+                <el-popover-select-v2 v-model="queryParams.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
+                  :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="queryParams" placeholder="请输入销售组织" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户编码" prop="code">
+                <el-input v-model="queryParams.code" placeholder="请输入客户编码" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户名称" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户分类" prop="classification">
+                <el-select clearable v-model="queryParams.classification">
+                  <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-col>
+          </el-row>
+
+          <!-- 下拉盒子 -->
+          <CollapseTransition>
+            <div v-show="expanded">
+              <el-row :gutter="20" justify="space-between">
+                <el-col :span="5">
+                  <el-form-item label="企业类型" prop="enterpriseType">
+                    <el-select clearable v-model="queryParams.enterpriseType">
+                      <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
+                        :value="dict.value" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="负责人" prop="responsiblePersonName">
+                    <el-popover-select-v2 v-model="queryParams.responsiblePersonName" title="负责人" valueKey="name"
+                      referName="CONTACTS_PARAM"
+                      :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}"
+                      :source.sync="queryParams" placeholder="请输入负责人" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </CollapseTransition>
+        </el-form>
+
+        <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'"
+            @click="drop"></i></el-divider>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="6" :offset="20">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
+              删除
+            </el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+
+        <el-table v-loading="loading" :data="customersList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <!-- <el-table-column label="销售组织" align="center" prop="orgName" min-width="300" /> -->
+          <el-table-column label="客户编码" align="center" prop="code" min-width="100" />
+          <el-table-column label="客户名称" align="center" prop="name" min-width="200" />
+          <el-table-column label="客户分类" align="center" prop="classification" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_classification" :value="scope.row.classification" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户行业" align="center" prop="industry" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_industry" :value="scope.row.industry" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户类型" align="center" prop="type" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_type" :value="scope.row.type" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户类别" align="center" prop="category" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_category" :value="scope.row.category" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户首营" align="center" prop="firstBattalion" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.firstBattalion" />
+            </template>
+          </el-table-column>
+          <el-table-column label="销售渠道" align="center" prop="channel" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_channel" :value="scope.row.channel" />
+            </template>
+          </el-table-column>
+          <el-table-column label="业务类型" align="center" prop="businessType" min-width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_business_type" :value="scope.row.businessType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="纳税类别" align="center" prop="taxType" min-width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_tax_type" :value="scope.row.taxType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="是否潜客" align="center" prop="potential" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.potential" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="销售区域" align="center" prop="marketingAreaName" min-width="80" /> -->
+          <el-table-column label="负责人" align="center" prop="responsiblePersonName" min-width="80" />
+          <!-- <el-table-column label="负责部门" align="center" prop="responsibleDeptName" min-width="80" /> -->
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheck(scope.row)">查看</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
+      </div>
+      <!-- 添加或修改客户对话框 -->
+      <div v-if="!isList">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <div>
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="基本信息" name="first">
+                <el-divider content-position="left">基本信息</el-divider>
+                <el-row :gutter="20">
+                  <!-- <el-col :span="6">
+                  <el-form-item label="销售组织" prop="orgName">
+                    <el-popover-select-v2 v-model="form.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
+                      :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="form" placeholder="请输入销售组织"  :disabled="openState == 'check'">
+                    </el-popover-select-v2>
+                  </el-form-item>
+                </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="客户编码" prop="code">
+                      <el-input v-model="form.code" placeholder="编码系统自动生成" disabled />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户名称" prop="name">
+                      <el-input v-model="form.name" placeholder="请输入客户名称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户简称" prop="abbreviation">
+                      <el-input v-model="form.abbreviation" placeholder="请输入客户简称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户分类" prop="classification">
+                      <el-select clearable v-model="form.classification" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="客户类型" prop="type">
+                      <el-select clearable v-model="form.type" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户类别" prop="category">
+                      <el-select clearable v-model="form.category" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_category" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户首营" prop="firstBattalion">
+                      <el-select clearable v-model="form.firstBattalion" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="销售渠道" prop="channel">
+                      <el-select clearable v-model="form.channel" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_channel" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="业务类型" prop="businessType">
+                      <el-select clearable v-model="form.businessType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_business_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户行业" prop="industry">
+                      <el-select clearable v-model="form.industry" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_industry" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="纳税类别" prop="taxType">
+                      <el-select clearable v-model="form.taxType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_tax_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="是否潜客" prop="potential">
+                      <el-select clearable v-model="form.potential" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                  <el-form-item label="地区分类" prop="areaClassification">
+                    <el-input v-model="form.areaClassification" placeholder="请输入地区分类" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="证照号码" prop="licenseNumber">
+                      <el-input v-model="form.licenseNumber" placeholder="请输入证照号码" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <!-- <el-divider content-position="left">销售区域</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="销售区域" prop="marketingAreaName">
+                    <el-popover-select-v2 v-model="form.marketingAreaName" title="销售区域" valueKey="name"
+                      referName="MK_SALESAREA_PARAM" :dataMapping="{ marketingArea: 'id', marketingAreaName: 'name'}"
+                      :source.sync="form" placeholder="请输入销售区域" :disabled="openState == 'check'">
+                    </el-popover-select-v2>
+                  </el-form-item>
+                </el-col>
+              </el-row> -->
+                <el-divider content-position="left">负责人</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="负责人" prop="responsiblePersonName">
+                      <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
+                        referName="CONTACTS_PARAM"
+                        :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}" :source.sync="form"
+                        placeholder="请输入负责人" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                  <el-form-item label="负责部门" prop="responsibleDeptName">
+                    <el-popover-select-v2 v-model="form.responsibleDeptName" title="负责部门" valueKey="name"
+                      referName="DEPT_PARAM" :dataMapping="{ responsibleDept: 'id', responsibleDeptName: 'name'}"
+                      :source.sync="form" placeholder="请输入负责部门" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col> -->
+                </el-row>
+                <!-- <el-divider content-position="left">开票客户</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="开票客户" prop="billingCustomerName">
+                    <el-popover-select-v2 v-model="form.billingCustomerName" title="开票客户" valueKey="name"
+                      referName="CUSTOMER_PARAM_ZT" :dataMapping="{ billingCustomer: 'id', billingCustomerName: 'name'}"
+                      :source.sync="form" placeholder="请输入开票客户" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col>
+              </el-row> -->
+                <el-divider content-position="left">其他信息</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="创建人" prop="createBy">
+                      <el-input v-model="form.createBy" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="创建时间" prop="createTime">
+                      <el-input v-model="form.createTime" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="修改人" prop="updateBy">
+                      <el-input v-model="form.updateBy" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="修改时间" prop="updateTime">
+                      <el-input v-model="form.updateTime" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="资质信息" name="second">
+                <el-divider content-position="left">资质信息</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="企业类型" prop="enterpriseType">
+                      <el-select clearable v-model="form.enterpriseType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="企业名称" prop="enterpriseName">
+                      <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                  <el-form-item label="注册地区" prop="registrationArea">
+                    <el-input v-model="form.registrationArea" placeholder="请输入注册地区" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="经度" prop="longitude">
+                      <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="纬度" prop="latitude">
+                      <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="详细地址" prop="detailedAddress">
+                      <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+
+              <el-tab-pane label="联系人信息" name="third" v-if="openState == 'check'">
+                <el-table :data="mkCmCustomersContactList" ref="mkCmCustomersContact">
+                  
+                </el-table>
+              </el-tab-pane>
+
+              <el-tab-pane label="负责人信息" name="fourth" v-if="openState == 'check'">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini"
+                      @click="handleAddMkCmCustomersResponsiblePerson">添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteMkCmCustomersResponsiblePerson">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersResponsiblePersonList" :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
+                  @selection-change="handleMkCmCustomersResponsiblePersonSelectionChange" ref="mkCmCustomersResponsiblePerson">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column label="人员姓名" align="center" prop="personName" min-width="150" />
+                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
+                  <el-table-column label="关系类型" align="center" prop="relationshipType" min-width="150"
+                    show-overflow-tooltip>
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_cm_relationship_type" :value="scope.row.relationshipType"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="产线" align="center" prop="productionLine" min-width="150">
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_cm_production_line" :value="scope.row.productionLine"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="开始日期" align="center" prop="startDate" min-width="150" />
+                  <el-table-column label="结束日期" align="center" prop="endDate" min-width="150" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
+                    fixed="right">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '1')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '1')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '1')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+
+              <el-tab-pane label="科室信息" name="fifth" v-if="openState == 'check'">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersDepartment">
+                      添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteMkCmCustomersDepartment">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersDepartmentList" :row-class-name="rowMkCmCustomersDepartmentIndex"
+                  @selection-change="handleMkCmCustomersDepartmentSelectionChange" ref="mkCmCustomersDepartment">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column label="科室名称" align="center" prop="name" min-width="150" />
+                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
+                  <el-table-column label="负责人姓名" align="center" prop="responsiblePersonName" min-width="150" />
+                  <el-table-column label="联系人手机" align="center" prop="phone" min-width="150" />
+                  <el-table-column label="科室位置" align="center" prop="address" min-width="150" />
+                  <el-table-column label="常规治疗" align="center" prop="conventionalTherapy" min-width="150" />
+                  <el-table-column label="科室特色" align="center" prop="characteristic" min-width="150" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
+                    fixed="right">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '2')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '2')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '2')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+
+            <div slot="footer" class="dialog-footer" style="margin-left: 88%; margin-top: 1%">
+              <el-button type="primary" @click="submitForm" :disabled="openState == 'check'">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+
+    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
+      @refresh="searchList" />
+
+    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
+      :customersId="form.id" @refresh="searchList" />
+  </div>
+</template>
+
+<script>
+  // 客户接口
+  import {
+    listCustomers,
+    getCustomers,
+    delCustomers,
+    addCustomers,
+    updateCustomers,
+    getContactInfo,
+  } from "@/api/business/spd/cm/customers";
+  // 客户负责人接口
+  import {
+    delCustomersResponsiblePerson,
+  } from "@/api/business/spd/cm/customersResponsiblePerson";
+  // 客户科室接口
+  import {
+    delCustomersDepartment,
+  } from "@/api/business/spd/cm/customersDepartment";
+  import CollapseTransition from '@/components/MyCollapse/collapse.vue';
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+  // 新建客户负责人信息页面
+  import AddPerson from "@/views/business/spd/cm/customersResponsiblePerson/index.vue";
+  // 新建客户科室信息页面
+  import AddDepartment from "@/views/business/spd/cm/customersDepartment/index.vue";
+
+  export default {
+    name: "Customers",
+    components: {
+      CollapseTransition,
+      ElPopoverSelectV2,
+      AddPerson,
+      AddDepartment,
+    },
+    dicts: ['mk_cm_yes_no', 'mk_cm_classification', 'mk_cm_type', 'mk_cm_category', 'mk_cm_channel',
+      'mk_cm_business_type', 'mk_cm_industry', 'mk_cm_tax_type', 'mk_cm_enterprise_type', 'mk_cm_relationship_type',
+      'mk_cm_production_line'
+    ],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 子表选中数据
+        checkedMkCmCustomersResponsiblePerson: [],
+        checkedMkCmCustomersDepartment: [],
+        // 子表选中主键
+        checkedMkCmCustomersResponsiblePersonIds: [],
+        checkedMkCmCustomersDepartmentIds: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户表格数据
+        customersList: [],
+        // 客户联系人表格数据
+        mkCmCustomersContactList: [],
+        // 客户负责人表格数据
+        mkCmCustomersResponsiblePersonList: [],
+        // 客户科室表格数据
+        mkCmCustomersDepartmentList: [],
+        // 弹出层标题
+        title: "",
+        // 首次进入标签页的显示
+        activeName: 'first',
+        // 下拉收起配置
+        expanded: false,
+        // 页面打开状态
+        openState: null,
+        // 列表页面
+        isList: true,
+        // 添加页面
+        isAdd1: false,
+        isAdd2: false,
+        rowDetail: {},
+        disable: false,
+        // 页面状态
+        page: null,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          org: null,
+          orgName: null,
+          code: null,
+          name: null,
+          abbreviation: null,
+          classification: null,
+          type: null,
+          category: null,
+          firstBattalion: null,
+          channel: null,
+          businessType: null,
+          industry: null,
+          taxType: null,
+          potential: null,
+          areaClassification: null,
+          licenseNumber: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          enterpriseType: null,
+          enterpriseName: null,
+          registrationArea: null,
+          longitude: null,
+          latitude: null,
+          detailedAddress: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          name: [{
+            required: true,
+            message: '客户名称不能为空',
+            trigger: 'blur'
+          }],
+          classification: [{
+            required: true,
+            message: '客户分类不能为空',
+            trigger: 'blur'
+          }],
+          taxType: [{
+            required: true,
+            message: '纳税类别不能为空',
+            trigger: 'blur'
+          }],
+          licenseNumber: [{
+            required: true,
+            message: '证照号码不能为空',
+            trigger: 'blur'
+          }],
+          enterpriseType: [{
+            required: true,
+            message: '企业类型不能为空',
+            trigger: 'blur'
+          }],
+          enterpriseName: [{
+            required: true,
+            message: '企业名称不能为空',
+            trigger: 'blur'
+          }],
+        },
+      };
+    },
+    created() {
+      this.reset();
+      this.getList();
+    },
+    methods: {
+      /** 查询客户列表 */
+      getList() {
+        this.loading = true;
+        listCustomers(this.queryParams).then(response => {
+          this.customersList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.isList = true;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          org: null,
+          orgName: null,
+          code: null,
+          name: null,
+          abbreviation: null,
+          classification: null,
+          type: null,
+          category: null,
+          firstBattalion: null,
+          channel: null,
+          businessType: null,
+          industry: null,
+          taxType: null,
+          potential: null,
+          areaClassification: null,
+          licenseNumber: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          enterpriseType: null,
+          enterpriseName: null,
+          registrationArea: null,
+          longitude: null,
+          latitude: null,
+          detailedAddress: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          delFlag: null
+        };
+        this.activeName = 'first';
+        this.mkCmCustomersResponsiblePersonList = [];
+        this.mkCmCustomersDepartmentList = [];
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.isList = false;
+        this.openState = 'add';
+        this.title = "添加客户";
+      },
+      /** 查看按钮操作 */
+      handleCheck(row) {
+        this.isList = false;
+        this.reset();
+        const id = row.id || this.ids
+        getCustomers(id).then(response => {
+          this.form = response.data;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'check';
+          this.title = "查看客户";
+          console.log(response, 'response');
+        });
+        getContactInfo().then(response => {
+          this.mkCmCustomersContactList = response.data;
+        });
+      },
+      /** Add查看按钮操作 */
+      handleCheckAdd(row, type) {
+        if (type == '1') {
+          this.isAdd1 = true;
+          this.page = 'check';
+          this.rowDetail = row;
+          this.disable = true;
+        } else if (type == '2') {
+          this.isAdd2 = true;
+          this.page = 'check';
+          this.rowDetail = row;
+          this.disable = true;
+        }
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.isList = false;
+        this.reset();
+        const id = row.id || this.ids
+        getCustomers(id).then(response => {
+          this.form = response.data;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'update';
+          this.title = "修改客户";
+        });
+      },
+      /** Add修改按钮操作 */
+      handleUpdateAdd(row, type) {
+        if (type == '1') {
+          this.isAdd1 = true;
+          this.page = 'update';
+          this.rowDetail = row;
+          this.disable = false;
+        } else if (type == '2') {
+          this.isAdd2 = true;
+          this.page = 'update';
+          this.rowDetail = row;
+          this.disable = false;
+        }
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomers(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.getList();
+              });
+            } else {
+              addCustomers(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.getList();
+              });
+            }
+          } else {
+            this.$modal.msgError("校验失败");
+          }
+        });
+        this.isList = true;
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除客户编码为"' + row.code + '"的数据项？').then(function () {
+          return delCustomers(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      /** Add删除按钮操作 */
+      handleDeleteAdd(row, type) {
+        const ids = row.id || this.ids;
+        if (type == '1') {
+          this.$modal.confirm('是否确认删除人员姓名为"' + row.personName + '"的数据项？').then(function () {
+            return delCustomersResponsiblePerson(ids);
+          }).then(() => {
+            getCustomers(row.customersId).then(res => {
+              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        } else if (type == '2') {
+          this.$modal.confirm('是否确认删除科室名称为"' + row.name + '"的数据项？').then(function () {
+            return delCustomersDepartment(ids);
+          }).then(() => {
+            getCustomers(row.customersId).then(res => {
+              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        }
+      },
+      /** 客户负责人序号 */
+      rowMkCmCustomersResponsiblePersonIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户科室序号 */
+      rowMkCmCustomersDepartmentIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户负责人添加按钮操作 */
+      handleAddMkCmCustomersResponsiblePerson() {
+        this.isList = false;
+        this.isAdd1 = true;
+        this.page = 'add';
+        this.disable = false;
+      },
+      /** 客户科室添加按钮操作 */
+      handleAddMkCmCustomersDepartment() {
+        this.isList = false;
+        this.isAdd2 = true;
+        this.page = 'add';
+        this.disable = false;
+      },
+      /** 客户负责人删除按钮操作 */
+      handleDeleteMkCmCustomersResponsiblePerson() {
+        if (this.checkedMkCmCustomersResponsiblePerson.length == 0) {
+          this.$modal.msgError("请先选择要删除的客户负责人数据");
+        } else {
+          this.$modal.confirm('是否确认删除序号为"' + this.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
+            return delCustomersResponsiblePerson(this.checkedMkCmCustomersResponsiblePersonIds);
+          }).then(() => {
+            getCustomers(this.form.id).then(res => {
+              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        }
+      },
+      /** 客户科室删除按钮操作 */
+      handleDeleteMkCmCustomersDepartment() {
+        if (this.checkedMkCmCustomersDepartment.length == 0) {
+          this.$modal.msgError("请先选择要删除的客户科室数据");
+        } else {
+          this.$modal.confirm('是否确认删除序号为"' + this.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
+            return delCustomersDepartment(this.checkedMkCmCustomersDepartmentIds);
+          }).then(() => {
+            getCustomers(this.form.id).then(res => {
+              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        }
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersResponsiblePersonSelectionChange(selection) {
+        this.checkedMkCmCustomersResponsiblePerson = selection.map(item => item.index)
+        this.checkedMkCmCustomersResponsiblePersonIds = selection.map(item => item.id)
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersDepartmentSelectionChange(selection) {
+        this.checkedMkCmCustomersDepartment = selection.map(item => item.index)
+        this.checkedMkCmCustomersDepartmentIds = selection.map(item => item.id)
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('cm/customers/export', {
+          ...this.queryParams
+        }, `customers_${new Date().getTime()}.xlsx`)
+      },
+      /** 标签页切换 */
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      /** 搜索条件下拉 */
+      drop() {
+        this.expanded = !this.expanded
+      },
+      /** 弹出框关闭确认 */
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      searchList() {
+        console.og('1111')
+        getCustomers(this.form.id).then(res => {
+          this.form = res.data;
+          this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+        })
+      },
+    }
+  };
+
+</script>
+
+<style>
+  .btn_group {
+    width: 100%;
+    margin: 20px -10px;
+    display: flex;
+    justify-content: right;
+  }
+
+  .lines {
+    margin-top: 0;
+  }
+
+</style>

src/views/business/spd/cm/customersDepartment/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div id="CustomersDepartment" class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
+      <el-divider content-position="left">科室信息</el-divider>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="科室名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入科室名称" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="客户名称" prop="customersName">
+            <el-input v-model="form.customersName" placeholder="请输入客户名称" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="负责人姓名" prop="responsiblePersonName">
+            <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
+              referName="CONTACTS_PARAM" :dataMapping="{responsiblePerson: 'id', responsiblePersonName: 'name'}"
+              :source.sync="form" placeholder="请选择负责人" :disabled="disable" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="联系人手机" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系人手机" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="科室位置" prop="address">
+            <el-input v-model="form.address" placeholder="请输入科室位置" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="常规治疗" prop="conventionalTherapy">
+            <el-input v-model="form.conventionalTherapy" placeholder="请输入常规治疗" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="科室特色" prop="characteristic">
+            <el-input v-model="form.characteristic" placeholder="请输入科室特色" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="业务员名称" prop="salesmanName">
+            <el-input v-model="form.salesmanName" placeholder="请输入业务员名称" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注" prop="memo">
+            <el-input v-model="form.memo" placeholder="请输入备注" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="单据状态" prop="state">
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {
+    listCustomersDepartment,
+    getCustomersDepartment,
+    delCustomersDepartment,
+    addCustomersDepartment,
+    updateCustomersDepartment
+  } from "@/api/business/spd/cm/customersDepartment";
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+
+  export default {
+    name: "CustomersDepartment",
+    props: ['pageStu', 'row', 'disable', 'customersId'],
+    model: {
+      prop: 'isAdd2',
+      event: 'jugislist'
+    },
+    components: {
+      ElPopoverSelectV2,
+    },
+    data() {
+      return {
+        // 不能直接改变props传来的值
+        sonPageStu: this.pageStu,
+        sonDisable: this.disable,
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户科室表格数据
+        customersDepartmentList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: null,
+          customersName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          phone: null,
+          address: null,
+          conventionalTherapy: null,
+          characteristic: null,
+          salesman: null,
+          salesmanName: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          memo: null,
+          state: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          name: [{
+            required: true,
+            message: '科室名称不能为空',
+            trigger: 'blur'
+          }],
+        }
+      };
+    },
+    created() {
+      this.reset();
+      // 客户主键赋值
+      this.form.customersId = this.customersId;
+      if (this.pageStu == 'check' || this.pageStu == 'update') {
+        this.getDetails(this.row);
+      }
+    },
+    methods: {
+      // 取消按钮
+      cancel() {
+        this.$emit('jugislist', false);
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          name: null,
+          customersName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          phone: null,
+          address: null,
+          conventionalTherapy: null,
+          characteristic: null,
+          salesman: null,
+          salesmanName: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          memo: null,
+          state: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          delFlag: null
+        };
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomersDepartment(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.cancel();
+              });
+            } else {
+              addCustomersDepartment(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.cancel();
+              });
+            }
+          }
+        });
+      },
+      /** 获取详情 */
+      getDetails(row) {
+        getCustomersDepartment(row.id).then(res => {
+          if (res.code == 200) {
+            this.form = res.data;
+          }
+        })
+      },
+    }
+  };
+
+</script>

src/views/business/spd/cm/customersResponsiblePerson/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div id="CustomersResponsiblePerson" class="app-container">
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto">
+      <el-divider content-position="left">负责人信息</el-divider>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="人员姓名" prop="personName">
+            <el-popover-select-v2 v-model="form.personName" title="负责人" valueKey="name" referName="CONTACTS_PARAM"
+              :dataMapping="{person: 'id', personName: 'name'}" :source.sync="form" placeholder="请选择负责人"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="客户名称" prop="customersName">
+            <el-input v-model="form.customersName" placeholder="请输入客户名称" clearable :disabled="disable" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="关系类型" prop="relationshipType">
+            <el-select clearable v-model="form.relationshipType" :disabled="disable">
+              <el-option v-for="dict in dict.type.mk_cm_relationship_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="产线" prop="productionLine">
+            <el-select clearable v-model="form.productionLine" :disabled="disable">
+              <el-option v-for="dict in dict.type.mk_cm_production_line" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开始日期" prop="startDate">
+            <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="请选择开始日期"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期" prop="endDate">
+            <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="请选择结束日期"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {
+    listCustomersResponsiblePerson,
+    getCustomersResponsiblePerson,
+    delCustomersResponsiblePerson,
+    addCustomersResponsiblePerson,
+    updateCustomersResponsiblePerson
+  } from "@/api/business/spd/cm/customersResponsiblePerson";
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+
+  export default {
+    name: "CustomersResponsiblePerson",
+    props: ['pageStu', 'row', 'disable', 'customersId'],
+    model: {
+      prop: 'isAdd1',
+      event: 'jugislist'
+    },
+    dicts: ['mk_cm_relationship_type', 'mk_cm_production_line'],
+    components: {
+      ElPopoverSelectV2,
+    },
+    data() {
+      return {
+        // 不能直接改变props传来的值
+        sonPageStu: this.pageStu,
+        sonDisable: this.disable,
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户负责人表格数据
+        customersResponsiblePersonList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          person: null,
+          personName: null,
+          customersName: null,
+          relationshipType: null,
+          productionLine: null,
+          startDate: null,
+          endDate: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          personName: [{
+            required: true,
+            message: '人员名称不能为空',
+            trigger: 'blur'
+          }],
+          relationshipType: [{
+            required: true,
+            message: '关系类型不能为空',
+            trigger: 'blur'
+          }],
+          startDate: [{
+            required: true,
+            message: '开始日期不能为空',
+            trigger: 'blur'
+          }],
+        },
+      };
+    },
+    created() {
+      this.reset();
+      // 客户主键赋值
+      this.form.customersId = this.customersId;
+      if (this.pageStu == 'check' || this.pageStu == 'update') {
+        this.getDetails(this.row);
+      }
+    },
+    methods: {
+      // 取消按钮
+      cancel() {
+        this.$emit('jugislist', false);
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          person: null,
+          personName: null,
+          customersName: null,
+          relationshipType: null,
+          productionLine: null,
+          startDate: null,
+          endDate: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          delFlag: null
+        };
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomersResponsiblePerson(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.cancel();
+              });
+            } else {
+              addCustomersResponsiblePerson(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.cancel();
+              });
+            }
+          }
+        });
+      },
+      /** 获取详情 */
+      getDetails(row) {
+        getCustomersResponsiblePerson(row.id).then(res => {
+          if (res.code == 200) {
+            this.form = res.data;
+          }
+        })
+      },
+    }
+  }
+
+</script>