【营销管理-客户管理-客户】界面以及数据结构优化

src/views/business/spd/cm/customers/columns.js

@@ -0,0 +1,283 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "orgName", title: "销售组织" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          org: 'id', orgName: 'name'
+        },
+        placeholder: "请输入销售组织",
+      },
+    },
+    {
+      item: { key: "code", title: "客户编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入客户编码",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "name", title: "客户名称" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入客户名称",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "classification", title: "客户分类" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_classification",
+      },
+    },
+    {
+      item: { key: "enterpriseType", title: "企业类型" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_enterprise_type",
+      },
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          responsiblePerson: 'id',
+          responsiblePersonName: 'name'
+        },
+      },
+    },
+
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "orgName", title: "销售组织" },
+      attr: {},
+    },
+    {
+      item: { key: "code", title: "客户编码" },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "classification", title: "客户分类" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_classification",
+      },
+    },
+    {
+      item: { key: "industry", title: "客户行业" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_industry",
+      },
+    },
+    {
+      item: { key: "type", title: "客户类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_type",
+      },
+    },
+    {
+      item: { key: "category", title: "客户类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_category",
+      },
+    },
+    {
+      item: { key: "firstBattalion", title: "客户首营" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_yes_no",
+      },
+    },
+    {
+      item: { key: "channel", title: "销售渠道" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_channel",
+      },
+    },
+    {
+      item: { key: "businessType", title: "业务类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_business_type",
+      },
+    },
+    {
+      item: { key: "taxType", title: "纳税类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_tax_type",
+      },
+    },
+    {
+      item: { key: "potential", title: "是否潜客" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_yes_no",
+      },
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人" },
+      attr: {},
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+
+  // 联系人信息
+  const ContactColumns = [
+    {
+      item: { key: "code", title: "编号", width: 300 },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "gander", title: "性别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_user_sex",
+      },
+    },
+    {
+      item: { key: "telephone", title: "联系电话" },
+      attr: {},
+    },
+    {
+      item: { key: "customerName", title: "所属客户" },
+      attr: {},
+    },
+    {
+      item: { key: "departmentName", title: "部门名称", width: 200 },
+      attr: {},
+    },
+    {
+      item: { key: "position", title: "职务" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_position",
+      },
+    },
+    {
+      item: { key: "power", title: "决策力" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_power",
+      },
+    },
+    {
+      item: { key: "hobby", title: "兴趣爱好" },
+      attr: {},
+    },
+    {
+      item: { key: "address", title: "家庭地址", width: 200 },
+      attr: {},
+    },
+    {
+      item: { key: "state", title: "状态" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_contact_state",
+      },
+    },
+
+  ];
+
+  // 负责人信息
+  const PrincipalColumns = [
+    {
+      item: { key: "personName", title: "人员姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "relationshipType", title: "关系类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_relationship_type",
+      },
+    },
+    {
+      item: { key: "productionLine", title: "产线" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_production_line",
+      },
+    },
+    {
+      item: { key: "startDate", title: "开始日期" },
+      attr: {},
+    },
+    {
+      item: { key: "endDate", title: "结束日期" },
+      attr: {},
+    },
+  ];
+
+
+  // 科室信息
+  const DepartmentInfoColumns = [
+    {
+      item: { key: "name", title: "科室名称" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_section",
+      },
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "phone", title: "联系人手机" },
+      attr: {},
+    },
+    {
+      item: { key: "address", title: "科室位置" },
+      attr: {},
+    },
+    {
+      item: { key: "conventionalTherapy", title: "常规治疗" },
+      attr: {},
+    },
+    {
+      item: { key: "characteristic", title: "科室特色" },
+      attr: {},
+    },
+  ];
+  return { SearchColumns, TableColumns, ContactColumns, PrincipalColumns, DepartmentInfoColumns }
+}

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

@@ -0,0 +1,1137 @@
+<template>
+  <div id="Customers" class="app-container">
+    <div v-if="!isAdd0 && !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 type="index" label="序号" min-width="50" 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.id)">查看</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-row>
+                <el-row :gutter="20">
+                  <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-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-row>
+                <el-row :gutter="20">
+                  <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-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.createByName" :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.updateByName" :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-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersContact">添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteTab('0')">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersContactList" :row-class-name="rowMkCmCustomersContactIndex"
+                  @selection-change="handleMkCmCustomersContactSelectionChange" ref="mkCmCustomersContact">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column type="index" label="序号" min-width="50" align="center" />
+                  <el-table-column width="300" label="编号" align="center" prop="code" />
+                  <el-table-column label="姓名" align="center" prop="name" min-width="150" />
+                  <el-table-column label="性别" align="center" prop="gander" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.gander"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="联系电话" align="center" prop="telephone" min-width="150" />
+                  <el-table-column label="所属客户" align="center" prop="customerName" min-width="150" />
+                  <el-table-column width="200" show-overflow-tooltip label="部门名称" align="center" prop="departmentName" />
+                  <el-table-column label="职务" align="center" prop="position" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_position" :value="scope.row.position"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="决策力" align="center" prop="power" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_power" :value="scope.row.power"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="200" show-overflow-tooltip label="兴趣爱好" align="center" prop="hobby" />
+                  <el-table-column width="200" show-overflow-tooltip label="家庭地址" align="center" prop="address" />
+                  <el-table-column label="状态" align="center" prop="state" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_contact_state" :value="scope.row.state"/>
+                    </template>
+                  </el-table-column>
+                  <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, '0')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '0')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '0')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </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="handleDeleteTab('1')">
+                      删除
+                    </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 type="index" label="序号" min-width="50" 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="handleDeleteTab('2')">
+                      删除
+                    </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 type="index" label="序号" min-width="50" align="center" />
+                  <el-table-column label="科室名称" align="center" prop="name" min-width="150">
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_section" :value="scope.row.name"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <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" 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>
+    <AddContact v-model="isAdd0" v-if="isAdd0" :operatingState="operatingSta" :state="state" :row="rowDetail" :customersId="form.id"
+      :customersName="form.name" :customersCode="form.code" />
+
+    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
+      :customersName="form.name" />
+
+    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
+      :customersId="form.id" :customersName="form.name" />
+  </div>
+</template>
+
+<script>
+  // 客户接口
+  import {
+    listCustomers,
+    getCustomers,
+    delCustomers,
+    addCustomers,
+    updateCustomers,
+    getContactInfo,
+    delContact,
+  } 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 AddContact from "@/views/business/spd/cm/customersContact/index.vue";
+  // 新建客户负责人信息页面
+  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,
+      AddContact,
+      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', 'mk_bo_section', 'sys_user_sex', 'mk_bo_position', 'mk_bo_power', 'mk_bo_contact_state'
+    ],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 选中数组中的客户编码
+        codes: [],
+        // 子表选中数据
+        checkedMkCmCustomersContact: [],
+        checkedMkCmCustomersResponsiblePerson: [],
+        checkedMkCmCustomersDepartment: [],
+        // 子表选中主键
+        checkedMkCmCustomersContactIds: [],
+        checkedMkCmCustomersResponsiblePersonIds: [],
+        checkedMkCmCustomersDepartmentIds: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户表格数据
+        customersList: [],
+        // 客户联系人表格数据
+        mkCmCustomersContactList: [],
+        // 客户负责人表格数据
+        mkCmCustomersResponsiblePersonList: [],
+        // 客户科室表格数据
+        mkCmCustomersDepartmentList: [],
+        // 首次进入标签页的显示
+        activeName: 'first',
+        // 下拉收起配置
+        expanded: false,
+        // 页面打开状态
+        openState: null,
+        // 列表页面
+        isList: true,
+        // 添加页面
+        isAdd0: false,
+        operatingSta: null,
+        state: null,
+        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: {
+          orgName: [{
+            required: true,
+            message: '销售组织不能为空',
+            trigger: 'blur'
+          }],
+          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,
+          createByName: null,
+          updateBy: null,
+          updateTime: null,
+          updateByName: null,
+          delFlag: null
+        };
+        this.activeName = 'first';
+        this.mkCmCustomersContactList = [];
+        this.mkCmCustomersResponsiblePersonList = [];
+        this.mkCmCustomersDepartmentList = [];
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetQueryParams();
+        this.handleQuery();
+      },
+      /** 查询参数重置 */
+      resetQueryParams() {
+        this.queryParams = {
+          abbreviation: null,
+          areaClassification: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          businessType: null,
+          category: null,
+          channel: null,
+          classification: null,
+          code: null,
+          detailedAddress: null,
+          enterpriseName: null,
+          enterpriseType: null,
+          firstBattalion: null,
+          industry: null,
+          latitude: null,
+          licenseNumber: null,
+          longitude: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          name: null,
+          org: null,
+          orgName: null,
+          pageNum: 1,
+          pageSize: 10,
+          potential: null,
+          registrationArea: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          taxType: null,
+          type: null
+        };
+        this.resetForm("queryForm");
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.codes = selection.map(item => item.code)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.isList = false;
+        this.openState = 'add';
+      },
+      /** 查看按钮操作 */
+      handleCheck(id) {
+        this.isList = false;
+        const id1 = id || this.ids
+        getCustomers(id1).then(response => {
+          this.form = response.data;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'check';
+        });
+        getContactInfo(id1).then(response => {
+          this.mkCmCustomersContactList = response.data;
+        });
+      },
+      /** Add查看按钮操作 */
+      handleCheckAdd(row, type) {
+        if (type == '0') {
+          this.isAdd0 = true;
+          this.operatingSta = 'Browse';
+          this.rowDetail = row;
+          this.disable = true;
+        } else 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.form.oldName = response.data.name;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'update';
+        });
+      },
+      /** Add修改按钮操作 */
+      handleUpdateAdd(row, type) {
+        if (type == '0') {
+          this.isAdd0 = true;
+          this.operatingSta = 'Update';
+          this.rowDetail = row;
+          this.disable = false;
+        } else 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.reset();
+                this.getList();
+                this.isList = true;
+              });
+            } else {
+              addCustomers(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.reset();
+                this.getList();
+                this.isList = true;
+              });
+            }
+          } else {
+            this.checkout();
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const codes = row.code || this.codes;
+        let ids = [];
+        if (row.isTrusted != null && row.isTrusted != '' && row.isTrusted != undefined) {
+          ids = this.ids;
+        } else {
+          ids[0] = row.id;
+        }
+        this.$modal.confirm('是否确认删除客户编码为"' + codes + '"的数据项？').then(function () {
+          return delCustomers(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      /** Add删除按钮操作 */
+      handleDeleteAdd(row, type) {
+        let ids = [];
+        ids[0] = row.id;
+        if (type == '0') {
+          console.log(row, 'row')
+          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+            return delContact(ids);
+          }).then(() => {
+            getContactInfo(this.form.id).then(res => {
+              this.mkCmCustomersContactList = res.data;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        } else if (type == '1') {
+          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').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.index + '"的数据项？').then(function () {
+            return delCustomersDepartment(ids);
+          }).then(() => {
+            getCustomers(row.customersId).then(res => {
+              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        }
+      },
+      /** 客户联系人序号 */
+      rowMkCmCustomersContactIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户负责人序号 */
+      rowMkCmCustomersResponsiblePersonIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户科室序号 */
+      rowMkCmCustomersDepartmentIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户联系人添加按钮操作 */
+      handleAddMkCmCustomersContact() {
+        this.isList = false;
+        this.isAdd0 = true;
+        this.operatingSta = 'Insert';
+        this.disable = false;
+        this.state = '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;
+      },
+      /** 客户页签删除按钮操作 */
+      handleDeleteTab(type) {
+        let that = this;
+        if (type == '0') {
+          if (that.checkedMkCmCustomersContact.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户联系人数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersContact + '"的数据项？').then(function () {
+              return delContact(that.checkedMkCmCustomersContactIds);
+            }).then(() => {
+              getContactInfo(that.form.id).then(res => {
+                that.mkCmCustomersContactList = res.data;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch((e) => {
+              console.log(e, 'e');
+            });
+          }
+        } else if (type == '1') {
+          if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户负责人数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
+              return delCustomersResponsiblePerson(that.checkedMkCmCustomersResponsiblePersonIds);
+            }).then(() => {
+              getCustomers(that.form.id).then(res => {
+                that.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+          }
+        } else if (type == '2') {
+          if (that.checkedMkCmCustomersDepartment.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户科室数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
+              return delCustomersDepartment(that.checkedMkCmCustomersDepartmentIds);
+            }).then(() => {
+              getCustomers(that.form.id).then(res => {
+                that.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+          }
+        }
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersContactSelectionChange(selection) {
+        this.checkedMkCmCustomersContact = selection.map(item => item.index)
+        this.checkedMkCmCustomersContactIds = selection.map(item => item.id)
+      },
+      /** 复选框选中数据 */
+      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(_ => {});
+      },
+      /** 必填项校验 */
+      checkout() {
+        if (!(this.form.orgName != null && this.form.orgName != '' && this.form.orgName != undefined &&
+            this.form.name != null && this.form.name != '' && this.form.name != undefined &&
+            this.form.classification != null && this.form.classification != '' && this.form.classification !=
+            undefined &&
+            this.form.taxType != null && this.form.taxType != '' && this.form.taxType != undefined &&
+            this.form.licenseNumber != null && this.form.licenseNumber != '' && this.form.licenseNumber != undefined)) {
+          return this.$modal.msgError("基本信息中存在必填项未填！");
+        }
+        if (!(this.form.enterpriseType != null && this.form.enterpriseType != '' && this.form.enterpriseType !=
+            undefined &&
+            this.form.enterpriseName != null && this.form.enterpriseName != '' && this.form.enterpriseName != undefined
+          )) {
+          return this.$modal.msgError("资质信息中存在必填项未填！");
+        }
+      },
+    }
+  };
+
+</script>
+
+<style>
+  .btn_group {
+    width: 100%;
+    margin: 20px -10px;
+    display: flex;
+    justify-content: right;
+  }
+
+  .lines {
+    margin-top: 0;
+  }
+
+</style>

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

@@ -1,268 +1,323 @@
 <template>
-  <div id="Customers" class="app-container">
+  <div id="Customers">
     <div v-if="!isAdd0 && !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>
+      <el-card
+        v-if="isList"
+        v-loading="loading"
+        :body-style="{
+          height: '100%',
+          padding: 0,
+          display: 'flex',
+          'flex-direction': 'column',
+        }"
+      >
+        <el-super-search
+          v-model="params"
+          :size="size"
+          :dict="dict"
+          :columns="SearchColumns"
+          @reset="resetQuery"
+          @submit="getList(params, page)"
+        ></el-super-search>
 
-          <!-- 下拉盒子 -->
-          <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-row
+          :gutter="10"
+          class="mb10"
+          type="flex"
+          justify="end"
+          style="margin-top: 20px"
+        >
+          <el-col :span="1.5">
+            <el-button type="primary" :size="size" @click="handleAdd"
+              >新增</el-button
+            >
+            <el-button :size="size" :disabled="multiple" @click="handleDelete">
               删除
             </el-button>
-            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+            <el-button :size="size" @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 type="index" label="序号" min-width="50" 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>
+        <el-super-ux-table
+          v-model="customersList"
+          :size="size"
+          :dict="dict"
+          :page="page"
+          :columns="TableColumns"
+          index
+          checkbox
+          pagination
+          convenitentOperation
+          highlight-current-row
+          storage-key="CustomersSuperTable"
+          @selection-change="handleSelectionChange"
+          @pagination="getList({ ...page, ...params })"
+          style="margin: 16px 0 0"
+        >
+          <ux-table-column
+            fixed="right"
+            title="操作"
+            align="center"
+            width="120"
+          >
             <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_tax_type" :value="scope.row.taxType" />
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleCheck(scope.row.id)"
+                >查看</el-button
+              >
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleUpdate(scope.row)"
+                >修改</el-button
+              >
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleDelete(scope.row)"
+                >删除</el-button
+              >
             </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.id)">查看</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>
+          </ux-table-column>
+        </el-super-ux-table>
+      </el-card>
       <!-- 添加或修改客户对话框 -->
-      <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-row>
-                <el-row :gutter="20">
-                  <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-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-row>
-                <el-row :gutter="20">
-                  <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-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>
+      <div v-if="!isList" style="padding: 16px">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="80px"
+          :size="size"
+        >
+          <div style="text-align: right">
+            <el-button
+              type="primary"
+              :size="size"
+              @click="submitForm"
+              :disabled="openState == 'check'"
+              >确 定</el-button
+            >
+            <el-button :size="size" @click="cancel">取 消</el-button>
+          </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-row>
+              <el-row :gutter="20">
+                <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-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-row>
+              <el-row :gutter="20">
+                <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-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">
@@ -273,25 +328,34 @@
                   </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-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>
+              <!-- <el-divider content-position="left">开票客户</el-divider>
               <el-row :gutter="20">
                 <el-col :span="6">
                   <el-form-item label="开票客户" prop="billingCustomerName">
@@ -301,837 +365,954 @@
                   </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.createByName" :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.updateByName" :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-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.createByName" :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.updateByName" :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-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-row :gutter="10" class="mb8">
-                  <el-col :span="6" :offset="21">
-                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersContact">添加
+            <el-tab-pane
+              label="联系人信息"
+              name="third"
+              v-if="openState == 'check'"
+            >
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="6" :offset="21">
+                  <el-button
+                    type="primary"
+                    :size="size"
+                    @click="handleAddMkCmCustomersContact"
+                    >添加
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    :size="size"
+                    @click="handleDeleteTab('0')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
+
+              <el-super-ux-table
+                v-model="mkCmCustomersContactList"
+                :size="size"
+                :dict="dict"
+                :columns="ContactColumns"
+                :height="height"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersContact"
+                :row-class-name="rowMkCmCustomersContactIndex"
+                @selection-change="handleMkCmCustomersContactSelectionChange"
+                @pagination="getList({ ...page, ...params })"
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-search"
+                      @click="handleCheckAdd(scope.row, '0')"
+                    >
+                      查看
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="handleUpdateAdd(scope.row, '0')"
+                      >修改
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('0')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-delete"
+                      @click="handleDeleteAdd(scope.row, '0')"
+                    >
                       删除
                     </el-button>
-                  </el-col>
-                </el-row>
-                <el-table :data="mkCmCustomersContactList" :row-class-name="rowMkCmCustomersContactIndex"
-                  @selection-change="handleMkCmCustomersContactSelectionChange" ref="mkCmCustomersContact">
-                  <el-table-column type="selection" width="55" align="center" />
-                  <el-table-column type="index" label="序号" min-width="50" align="center" />
-                  <el-table-column width="300" label="编号" align="center" prop="code" />
-                  <el-table-column label="姓名" align="center" prop="name" min-width="150" />
-                  <el-table-column label="性别" align="center" prop="gander" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.gander"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="联系电话" align="center" prop="telephone" min-width="150" />
-                  <el-table-column label="所属客户" align="center" prop="customerName" min-width="150" />
-                  <el-table-column width="200" show-overflow-tooltip label="部门名称" align="center" prop="departmentName" />
-                  <el-table-column label="职务" align="center" prop="position" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_position" :value="scope.row.position"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="决策力" align="center" prop="power" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_power" :value="scope.row.power"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column width="200" show-overflow-tooltip label="兴趣爱好" align="center" prop="hobby" />
-                  <el-table-column width="200" show-overflow-tooltip label="家庭地址" align="center" prop="address" />
-                  <el-table-column label="状态" align="center" prop="state" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_contact_state" :value="scope.row.state"/>
-                    </template>
-                  </el-table-column>
-                  <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, '0')">
-                        查看
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '0')">修改
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '0')">
-                        删除
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-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-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"
+                    :size="size"
+                    @click="handleAddMkCmCustomersResponsiblePerson"
+                    >添加
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    :size="size"
+                    @click="handleDeleteTab('1')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
+              <el-super-ux-table
+                v-model="mkCmCustomersResponsiblePersonList"
+                :size="size"
+                :dict="dict"
+                :columns="PrincipalColumns"
+                :height="height"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersResponsiblePerson"
+                :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
+                @selection-change="
+                  handleMkCmCustomersResponsiblePersonSelectionChange
+                "
+                @pagination="getList({ ...page, ...params })"
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleCheckAdd(scope.row, '1')"
+                    >
+                      查看
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('1')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleUpdateAdd(scope.row, '1')"
+                      >修改
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleDeleteAdd(scope.row, '1')"
+                    >
                       删除
                     </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 type="index" label="序号" min-width="50" 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>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-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"
+                    :size="size"
+                    @click="handleAddMkCmCustomersDepartment"
+                  >
+                    添加
+                  </el-button>
+                  <el-button
+                    :size="size"
+                    type="danger"
+                    @click="handleDeleteTab('2')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
 
-              <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-super-ux-table
+                v-model="mkCmCustomersDepartmentList"
+                :size="size"
+                :dict="dict"
+                :height="height"
+                :columns="DepartmentInfoColumns"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersDepartment"
+                :row-class-name="rowMkCmCustomersDepartmentIndex"
+                @selection-change="handleMkCmCustomersDepartmentSelectionChange"
+                @pagination="getList({ ...page, ...params })"
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleCheckAdd(scope.row, '1')"
+                    >
+                      查看
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('2')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleUpdateAdd(scope.row, '1')"
+                      >修改
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleDeleteAdd(scope.row, '1')"
+                    >
                       删除
                     </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 type="index" label="序号" min-width="50" align="center" />
-                  <el-table-column label="科室名称" align="center" prop="name" min-width="150">
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_section" :value="scope.row.name"
-                        show-overflow-tooltip />
-                    </template>
-                  </el-table-column>
-                  <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" 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>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-table>
+            </el-tab-pane>
+          </el-tabs>
         </el-form>
       </div>
     </div>
-    <AddContact v-model="isAdd0" v-if="isAdd0" :operatingState="operatingSta" :state="state" :row="rowDetail" :customersId="form.id"
-      :customersName="form.name" :customersCode="form.code" />
 
-    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
-      :customersName="form.name" />
+    <AddContact
+      v-model="isAdd0"
+      v-if="isAdd0"
+      :operatingState="operatingSta"
+      :state="state"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+      :customersCode="form.code"
+    />
+
+    <AddPerson
+      v-model="isAdd1"
+      v-if="isAdd1"
+      :pageStu="pageStu"
+      :disable="disable"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+    />
 
-    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
-      :customersId="form.id" :customersName="form.name" />
+    <AddDepartment
+      v-model="isAdd2"
+      v-if="isAdd2"
+      :pageStu="pageStu"
+      :disable="disable"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+    />
   </div>
 </template>
 
 <script>
-  // 客户接口
-  import {
-    listCustomers,
-    getCustomers,
-    delCustomers,
-    addCustomers,
-    updateCustomers,
-    getContactInfo,
-    delContact,
-  } 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 AddContact from "@/views/business/spd/cm/customersContact/index.vue";
-  // 新建客户负责人信息页面
-  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,
-      AddContact,
-      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', 'mk_bo_section', 'sys_user_sex', 'mk_bo_position', 'mk_bo_power', 'mk_bo_contact_state'
-    ],
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 选中数组中的客户编码
-        codes: [],
-        // 子表选中数据
-        checkedMkCmCustomersContact: [],
-        checkedMkCmCustomersResponsiblePerson: [],
-        checkedMkCmCustomersDepartment: [],
-        // 子表选中主键
-        checkedMkCmCustomersContactIds: [],
-        checkedMkCmCustomersResponsiblePersonIds: [],
-        checkedMkCmCustomersDepartmentIds: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 客户表格数据
-        customersList: [],
-        // 客户联系人表格数据
-        mkCmCustomersContactList: [],
-        // 客户负责人表格数据
-        mkCmCustomersResponsiblePersonList: [],
-        // 客户科室表格数据
-        mkCmCustomersDepartmentList: [],
-        // 首次进入标签页的显示
-        activeName: 'first',
-        // 下拉收起配置
-        expanded: false,
-        // 页面打开状态
-        openState: null,
-        // 列表页面
-        isList: true,
-        // 添加页面
-        isAdd0: false,
-        operatingSta: null,
-        state: null,
-        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: {
-          orgName: [{
+// 客户接口
+import {
+  listCustomers,
+  getCustomers,
+  delCustomers,
+  addCustomers,
+  updateCustomers,
+  getContactInfo,
+  delContact,
+} from "@/api/business/spd/cm/customers";
+// 客户负责人接口
+import { delCustomersResponsiblePerson } from "@/api/business/spd/cm/customersResponsiblePerson";
+// 客户科室接口
+import { delCustomersDepartment } from "@/api/business/spd/cm/customersDepartment";
+import useColumns from "./columns";
+import { dicts } from "../dicts";
+export default {
+  name: "Customers",
+  components: {
+    CollapseTransition: () => import("@/components/MyCollapse/collapse.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2"),
+    // 新建客户联系人信息页面
+    AddContact: () =>
+      import("@/views/business/spd/cm/customersContact/index.vue"),
+    // 新建客户负责人信息页面
+    AddPerson: () =>
+      import("@/views/business/spd/cm/customersResponsiblePerson/index.vue"),
+    // 新建客户科室信息页面
+    AddDepartment: () =>
+      import("@/views/business/spd/cm/customersDepartment/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
+  dicts: [...dicts],
+  data() {
+    const {
+      SearchColumns,
+      TableColumns,
+      ContactColumns,
+      PrincipalColumns,
+      DepartmentInfoColumns,
+    } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
+    return {
+      page,
+      params,
+      size: "mini",
+      SearchColumns,
+      TableColumns,
+      ContactColumns,
+      PrincipalColumns,
+      DepartmentInfoColumns,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 选中数组中的客户编码
+      codes: [],
+      // 子表选中数据
+      checkedMkCmCustomersContact: [],
+      checkedMkCmCustomersResponsiblePerson: [],
+      checkedMkCmCustomersDepartment: [],
+      // 子表选中主键
+      checkedMkCmCustomersContactIds: [],
+      checkedMkCmCustomersResponsiblePersonIds: [],
+      checkedMkCmCustomersDepartmentIds: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 客户表格数据
+      customersList: [],
+      // 客户联系人表格数据
+      mkCmCustomersContactList: [],
+      // 客户负责人表格数据
+      mkCmCustomersResponsiblePersonList: [],
+      // 客户科室表格数据
+      mkCmCustomersDepartmentList: [],
+      // 首次进入标签页的显示
+      activeName: "first",
+      // 下拉收起配置
+      expanded: false,
+      // 页面打开状态
+      openState: null,
+      // 列表页面
+      isList: true,
+      // 添加页面
+      isAdd0: false,
+      operatingSta: null,
+      state: null,
+      isAdd1: false,
+      isAdd2: false,
+      rowDetail: {},
+      disable: false,
+      // 页面状态
+      pageStu: null,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        orgName: [
+          {
             required: true,
-            message: '销售组织不能为空',
-            trigger: 'blur'
-          }],
-          name: [{
+            message: "销售组织不能为空",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
             required: true,
-            message: '客户名称不能为空',
-            trigger: 'blur'
-          }],
-          classification: [{
+            message: "客户名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        classification: [
+          {
             required: true,
-            message: '客户分类不能为空',
-            trigger: 'blur'
-          }],
-          taxType: [{
+            message: "客户分类不能为空",
+            trigger: "blur",
+          },
+        ],
+        taxType: [
+          {
             required: true,
-            message: '纳税类别不能为空',
-            trigger: 'blur'
-          }],
-          licenseNumber: [{
+            message: "纳税类别不能为空",
+            trigger: "blur",
+          },
+        ],
+        licenseNumber: [
+          {
             required: true,
-            message: '证照号码不能为空',
-            trigger: 'blur'
-          }],
-          enterpriseType: [{
+            message: "证照号码不能为空",
+            trigger: "blur",
+          },
+        ],
+        enterpriseType: [
+          {
             required: true,
-            message: '企业类型不能为空',
-            trigger: 'blur'
-          }],
-          enterpriseName: [{
+            message: "企业类型不能为空",
+            trigger: "blur",
+          },
+        ],
+        enterpriseName: [
+          {
             required: true,
-            message: '企业名称不能为空',
-            trigger: 'blur'
-          }],
-        },
+            message: "企业名称不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    height: {
+      get() {
+        return window.innerHeight - 220;
+      },
+      set() {},
+    },
+  },
+  created() {
+    this.reset();
+    this.getList(this.params, this.page);
+  },
+  methods: {
+    /** 查询客户列表 */
+    getList(params, page) {
+      this.loading = true;
+      listCustomers({ ...params, ...page }).then((response) => {
+        this.customersList = response.rows;
+        this.page.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,
+        createByName: null,
+        updateBy: null,
+        updateTime: null,
+        updateByName: null,
+        delFlag: null,
       };
+      this.activeName = "first";
+      this.mkCmCustomersContactList = [];
+      this.mkCmCustomersResponsiblePersonList = [];
+      this.mkCmCustomersDepartmentList = [];
+      this.resetForm("form");
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
+      this.resetForm("queryForm");
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.codes = selection.map((item) => item.code);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.isList = false;
+      this.openState = "add";
+    },
+    /** 查看按钮操作 */
+    handleCheck(id) {
+      this.isList = false;
+      const id1 = id || this.ids;
+      getCustomers(id1).then((response) => {
+        this.form = response.data;
+        this.mkCmCustomersResponsiblePersonList =
+          response.data.mkCmCustomersResponsiblePersonList;
+        this.mkCmCustomersDepartmentList =
+          response.data.mkCmCustomersDepartmentList;
+        this.openState = "check";
+      });
+      getContactInfo(id1).then((response) => {
+        this.mkCmCustomersContactList = response.data;
+      });
+    },
+    /** Add查看按钮操作 */
+    handleCheckAdd(row, type) {
+      if (type == "0") {
+        this.isAdd0 = true;
+        this.operatingSta = "Browse";
+        this.rowDetail = row;
+        this.disable = true;
+      } else if (type == "1") {
+        this.isAdd1 = true;
+        this.pageStu = "check";
+        this.rowDetail = row;
+        this.disable = true;
+      } else if (type == "2") {
+        this.isAdd2 = true;
+        this.pageStu = "check";
+        this.rowDetail = row;
+        this.disable = true;
+      }
     },
-    created() {
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.isList = false;
       this.reset();
-      this.getList();
+      const id = row.id || this.ids;
+      getCustomers(id).then((response) => {
+        this.form = response.data;
+        this.form.oldName = response.data.name;
+        this.mkCmCustomersResponsiblePersonList =
+          response.data.mkCmCustomersResponsiblePersonList;
+        this.mkCmCustomersDepartmentList =
+          response.data.mkCmCustomersDepartmentList;
+        this.openState = "update";
+      });
     },
-    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,
-          createByName: null,
-          updateBy: null,
-          updateTime: null,
-          updateByName: null,
-          delFlag: null
-        };
-        this.activeName = 'first';
-        this.mkCmCustomersContactList = [];
-        this.mkCmCustomersResponsiblePersonList = [];
-        this.mkCmCustomersDepartmentList = [];
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetQueryParams();
-        this.handleQuery();
-      },
-      /** 查询参数重置 */
-      resetQueryParams() {
-        this.queryParams = {
-          abbreviation: null,
-          areaClassification: null,
-          billingCustomer: null,
-          billingCustomerName: null,
-          businessType: null,
-          category: null,
-          channel: null,
-          classification: null,
-          code: null,
-          detailedAddress: null,
-          enterpriseName: null,
-          enterpriseType: null,
-          firstBattalion: null,
-          industry: null,
-          latitude: null,
-          licenseNumber: null,
-          longitude: null,
-          marketingArea: null,
-          marketingAreaName: null,
-          name: null,
-          org: null,
-          orgName: null,
-          pageNum: 1,
-          pageSize: 10,
-          potential: null,
-          registrationArea: null,
-          responsibleDept: null,
-          responsibleDeptName: null,
-          responsiblePerson: null,
-          responsiblePersonName: null,
-          taxType: null,
-          type: null
-        };
-        this.resetForm("queryForm");
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.codes = selection.map(item => item.code)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.isList = false;
-        this.openState = 'add';
-      },
-      /** 查看按钮操作 */
-      handleCheck(id) {
-        this.isList = false;
-        const id1 = id || this.ids
-        getCustomers(id1).then(response => {
-          this.form = response.data;
-          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
-          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
-          this.openState = 'check';
-        });
-        getContactInfo(id1).then(response => {
-          this.mkCmCustomersContactList = response.data;
-        });
-      },
-      /** Add查看按钮操作 */
-      handleCheckAdd(row, type) {
-        if (type == '0') {
-          this.isAdd0 = true;
-          this.operatingSta = 'Browse';
-          this.rowDetail = row;
-          this.disable = true;
-        } else 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.form.oldName = response.data.name;
-          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
-          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
-          this.openState = 'update';
-        });
-      },
-      /** Add修改按钮操作 */
-      handleUpdateAdd(row, type) {
-        if (type == '0') {
-          this.isAdd0 = true;
-          this.operatingSta = 'Update';
-          this.rowDetail = row;
-          this.disable = false;
-        } else 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.reset();
-                this.getList();
-                this.isList = true;
-              });
-            } else {
-              addCustomers(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.reset();
-                this.getList();
-                this.isList = true;
-              });
+    /** Add修改按钮操作 */
+    handleUpdateAdd(row, type) {
+      if (type == "0") {
+        this.isAdd0 = true;
+        this.operatingSta = "Update";
+        this.rowDetail = row;
+        this.disable = false;
+      } else if (type == "1") {
+        this.isAdd1 = true;
+        this.pageStu = "update";
+        this.rowDetail = row;
+        this.disable = false;
+      } else if (type == "2") {
+        this.isAdd2 = true;
+        this.pageStu = "update";
+        this.rowDetail = row;
+        this.disable = false;
+      }
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(async (valid, obj) => {
+        if (valid) {
+          try {
+            let { code, msg } =
+              this.form.id != null
+                ? await updateCustomers(this.form)
+                : await addCustomers(this.form);
+
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.reset();
+              this.getList(this.params, this.page);
+              this.isList = true;
             }
-          } else {
-            this.checkout();
-          }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const codes = row.code || this.codes;
-        let ids = [];
-        if (row.isTrusted != null && row.isTrusted != '' && row.isTrusted != undefined) {
-          ids = this.ids;
+          } catch (error) {}
         } else {
-          ids[0] = row.id;
+          this.checkout();
         }
-        this.$modal.confirm('是否确认删除客户编码为"' + codes + '"的数据项？').then(function () {
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const codes = row.code || this.codes;
+      let ids = [];
+      if (
+        row.isTrusted != null &&
+        row.isTrusted != "" &&
+        row.isTrusted != undefined
+      ) {
+        ids = this.ids;
+      } else {
+        ids[0] = row.id;
+      }
+      this.$modal
+        .confirm('是否确认删除客户编码为"' + codes + '"的数据项？')
+        .then(function () {
           return delCustomers(ids);
-        }).then(() => {
-          this.getList();
+        })
+        .then(() => {
+          this.getList(this.params, this.page);
           this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      /** Add删除按钮操作 */
-      handleDeleteAdd(row, type) {
-        let ids = [];
-        ids[0] = row.id;
-        if (type == '0') {
-          console.log(row, 'row')
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+        })
+        .catch(() => {});
+    },
+    /** Add删除按钮操作 */
+    handleDeleteAdd(row, type) {
+      let ids = [];
+      ids[0] = row.id;
+      if (type == "0") {
+        console.log(row, "row");
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delContact(ids);
-          }).then(() => {
-            getContactInfo(this.form.id).then(res => {
+          })
+          .then(() => {
+            getContactInfo(this.form.id).then((res) => {
               this.mkCmCustomersContactList = res.data;
-            })
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        } else if (type == '1') {
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      } else if (type == "1") {
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delCustomersResponsiblePerson(ids);
-          }).then(() => {
-            getCustomers(row.customersId).then(res => {
-              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
-            })
+          })
+          .then(() => {
+            getCustomers(row.customersId).then((res) => {
+              this.mkCmCustomersResponsiblePersonList =
+                res.data.mkCmCustomersResponsiblePersonList;
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        } else if (type == '2') {
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      } else if (type == "2") {
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delCustomersDepartment(ids);
-          }).then(() => {
-            getCustomers(row.customersId).then(res => {
-              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
-            })
+          })
+          .then(() => {
+            getCustomers(row.customersId).then((res) => {
+              this.mkCmCustomersDepartmentList =
+                res.data.mkCmCustomersDepartmentList;
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        }
-      },
-      /** 客户联系人序号 */
-      rowMkCmCustomersContactIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户负责人序号 */
-      rowMkCmCustomersResponsiblePersonIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户科室序号 */
-      rowMkCmCustomersDepartmentIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户联系人添加按钮操作 */
-      handleAddMkCmCustomersContact() {
-        this.isList = false;
-        this.isAdd0 = true;
-        this.operatingSta = 'Insert';
-        this.disable = false;
-        this.state = '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;
-      },
-      /** 客户页签删除按钮操作 */
-      handleDeleteTab(type) {
-        let that = this;
-        if (type == '0') {
-          if (that.checkedMkCmCustomersContact.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户联系人数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersContact + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      }
+    },
+    /** 客户联系人序号 */
+    rowMkCmCustomersContactIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户负责人序号 */
+    rowMkCmCustomersResponsiblePersonIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户科室序号 */
+    rowMkCmCustomersDepartmentIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户联系人添加按钮操作 */
+    handleAddMkCmCustomersContact() {
+      this.isList = false;
+      this.isAdd0 = true;
+      this.operatingSta = "Insert";
+      this.disable = false;
+      this.state = "1";
+    },
+    /** 客户负责人添加按钮操作 */
+    handleAddMkCmCustomersResponsiblePerson() {
+      this.isList = false;
+      this.isAdd1 = true;
+      this.pageStu = "add";
+      this.disable = false;
+    },
+    /** 客户科室添加按钮操作 */
+    handleAddMkCmCustomersDepartment() {
+      this.isList = false;
+      this.isAdd2 = true;
+      this.pageStu = "add";
+      this.disable = false;
+    },
+    /** 客户页签删除按钮操作 */
+    handleDeleteTab(type) {
+      let that = this;
+      if (type == "0") {
+        if (that.checkedMkCmCustomersContact.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户联系人数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersContact +
+                '"的数据项？'
+            )
+            .then(function () {
               return delContact(that.checkedMkCmCustomersContactIds);
-            }).then(() => {
-              getContactInfo(that.form.id).then(res => {
+            })
+            .then(() => {
+              getContactInfo(that.form.id).then((res) => {
                 that.mkCmCustomersContactList = res.data;
-              })
+              });
               that.$modal.msgSuccess("删除成功");
-            }).catch((e) => {
-              console.log(e, 'e');
+            })
+            .catch((e) => {
+              console.log(e, "e");
             });
-          }
-        } else if (type == '1') {
-          if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户负责人数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
-              return delCustomersResponsiblePerson(that.checkedMkCmCustomersResponsiblePersonIds);
-            }).then(() => {
-              getCustomers(that.form.id).then(res => {
-                that.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
-              })
-              that.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
-          }
-        } else if (type == '2') {
-          if (that.checkedMkCmCustomersDepartment.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户科室数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
-              return delCustomersDepartment(that.checkedMkCmCustomersDepartmentIds);
-            }).then(() => {
-              getCustomers(that.form.id).then(res => {
-                that.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
-              })
-              that.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
-          }
         }
-      },
-      /** 复选框选中数据 */
-      handleMkCmCustomersContactSelectionChange(selection) {
-        this.checkedMkCmCustomersContact = selection.map(item => item.index)
-        this.checkedMkCmCustomersContactIds = selection.map(item => item.id)
-      },
-      /** 复选框选中数据 */
-      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(_ => {});
-      },
-      /** 必填项校验 */
-      checkout() {
-        if (!(this.form.orgName != null && this.form.orgName != '' && this.form.orgName != undefined &&
-            this.form.name != null && this.form.name != '' && this.form.name != undefined &&
-            this.form.classification != null && this.form.classification != '' && this.form.classification !=
-            undefined &&
-            this.form.taxType != null && this.form.taxType != '' && this.form.taxType != undefined &&
-            this.form.licenseNumber != null && this.form.licenseNumber != '' && this.form.licenseNumber != undefined)) {
-          return this.$modal.msgError("基本信息中存在必填项未填！");
+      } else if (type == "1") {
+        if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户负责人数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersResponsiblePerson +
+                '"的数据项？'
+            )
+            .then(function () {
+              return delCustomersResponsiblePerson(
+                that.checkedMkCmCustomersResponsiblePersonIds
+              );
+            })
+            .then(() => {
+              getCustomers(that.form.id).then((res) => {
+                that.mkCmCustomersResponsiblePersonList =
+                  res.data.mkCmCustomersResponsiblePersonList;
+              });
+              that.$modal.msgSuccess("删除成功");
+            })
+            .catch(() => {});
         }
-        if (!(this.form.enterpriseType != null && this.form.enterpriseType != '' && this.form.enterpriseType !=
-            undefined &&
-            this.form.enterpriseName != null && this.form.enterpriseName != '' && this.form.enterpriseName != undefined
-          )) {
-          return this.$modal.msgError("资质信息中存在必填项未填！");
+      } else if (type == "2") {
+        if (that.checkedMkCmCustomersDepartment.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户科室数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersDepartment +
+                '"的数据项？'
+            )
+            .then(function () {
+              return delCustomersDepartment(
+                that.checkedMkCmCustomersDepartmentIds
+              );
+            })
+            .then(() => {
+              getCustomers(that.form.id).then((res) => {
+                that.mkCmCustomersDepartmentList =
+                  res.data.mkCmCustomersDepartmentList;
+              });
+              that.$modal.msgSuccess("删除成功");
+            })
+            .catch(() => {});
         }
-      },
-    }
-  };
-
+      }
+    },
+    /** 复选框选中数据 */
+    handleMkCmCustomersContactSelectionChange(selection) {
+      this.checkedMkCmCustomersContact = selection.map((item) => item.index);
+      this.checkedMkCmCustomersContactIds = selection.map((item) => item.id);
+    },
+    /** 复选框选中数据 */
+    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.params,
+          ...this.page,
+        },
+        `customers_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 标签页切换 */
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    /** 必填项校验 */
+    checkout() {
+      if (
+        !(
+          this.form.orgName != null &&
+          this.form.orgName != "" &&
+          this.form.orgName != undefined &&
+          this.form.name != null &&
+          this.form.name != "" &&
+          this.form.name != undefined &&
+          this.form.classification != null &&
+          this.form.classification != "" &&
+          this.form.classification != undefined &&
+          this.form.taxType != null &&
+          this.form.taxType != "" &&
+          this.form.taxType != undefined &&
+          this.form.licenseNumber != null &&
+          this.form.licenseNumber != "" &&
+          this.form.licenseNumber != undefined
+        )
+      ) {
+        return this.$modal.msgError("基本信息中存在必填项未填！");
+      }
+      if (
+        !(
+          this.form.enterpriseType != null &&
+          this.form.enterpriseType != "" &&
+          this.form.enterpriseType != undefined &&
+          this.form.enterpriseName != null &&
+          this.form.enterpriseName != "" &&
+          this.form.enterpriseName != undefined
+        )
+      ) {
+        return this.$modal.msgError("资质信息中存在必填项未填！");
+      }
+    },
+  },
+};
 </script>
 
-<style>
-  .btn_group {
-    width: 100%;
-    margin: 20px -10px;
-    display: flex;
-    justify-content: right;
-  }
-
-  .lines {
-    margin-top: 0;
-  }
-
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 </style>

src/views/business/spd/cm/customersContact/columns.js

@@ -0,0 +1,231 @@
+export default function useColumns() {
+  // 基本信息
+  const BasicColumns = [
+    {
+      item: { key: "code", title: "编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "系统自动生成编码",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "name", title: "姓名" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "gander", title: "性别" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_user_sex",
+      },
+    },
+    {
+      item: { key: "customerName", title: "所属客户" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CUSTOMER_PARAM_ZT",
+        valueKey: "name",
+        dataMapping: {
+          customer: 'id',
+        },
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "contactClassification", title: "联系人分类" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_contact_type",
+      },
+    },
+    {
+      item: { key: "birthday", title: "生日" },
+      attr: {
+        is: "el-date-picker",
+        clearable: true,
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+      },
+    },
+    {
+      item: { key: "birthplace", title: "籍贯" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "hobby", title: "兴趣爱好" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "state", title: "状态" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_contact_state",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 工作信息
+  const WorkColumns = [
+    {
+      item: { key: "superiorContactName", title: "上级联系人" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "LINKMAN_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          superiorContact: 'id',
+        },
+        queryParams: (params) => ({
+          parame: {
+            customer: params.customer ? params.customer : 'xxx'
+          }
+        }),
+      },
+    },
+    {
+      item: { key: "section", title: "任职科室" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_section",
+        filterable: true,
+      },
+    },
+    {
+      item: { key: "position", title: "职务" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_position",
+      },
+    },
+    {
+      item: { key: "jobTitle", title: "职称" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_job_title",
+      },
+    },
+    {
+      item: { key: "power", title: "决策力" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_power",
+      },
+    },
+    {
+      item: { key: "support", title: "支持度" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_support",
+      },
+    },
+    {
+      item: { key: "fieldExpertise", title: "擅长领域" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_field_expertise",
+      },
+    },
+    {
+      item: { key: "decisionMaker", title: "关键决策人" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_yes_no",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 联系信息
+  const CancatColumns = [
+    {
+      item: { key: "telephone", title: "联系电话" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "mail", title: "微信" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "address", title: "家庭地址" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "visitTime", title: "最佳拜访时间" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "visitPlace", title: "最佳拜访地点" },
+      attr: {
+        is: "el-input",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 其他信息
+  const OtherColumns = [
+    {
+      item: { key: "createByName", title: "创建人" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "updateByName", title: "修改人" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "updateTime", title: "修改时间" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+  ]
+  return { BasicColumns, WorkColumns, CancatColumns, OtherColumns };
+}

src/views/business/spd/cm/customersResponsiblePerson/columns.js

@@ -0,0 +1,56 @@
+export default function useColumns() {
+  // 负责人信息
+  const PrincipalCloumns = [
+    {
+      item: { key: "personName", title: "人员姓名" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        placeholder: "请选择负责人",
+        dataMapping: {
+          person: 'id',
+        },
+      },
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "relationshipType", title: "关系类型" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_relationship_type",
+      },
+    },
+    {
+      item: { key: "productionLine", title: "产线" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_production_line",
+      },
+    },
+    {
+      item: { key: "startDate", title: "开始日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        placeholder: "请选择开始日期",
+      },
+    },
+    {
+      item: { key: "endDate", title: "结束日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        placeholder: "请选择结束日期",
+      },
+    },
+   
+  ];
+
+  return { PrincipalCloumns }
+}

src/views/business/spd/cm/dicts.js

@@ -0,0 +1,14 @@
+import { initDicts } from "@/utils/init.js";
+const modules = require.context("./", true, /columns.js$/);
+const columns = [];
+modules.keys().forEach((fileName) => {
+  const data = modules(fileName).default();
+  for (const key in data) {
+    if (key === "TabColumns") {
+      columns.push(...data[key].map((item) => item.TableColumns).flat());
+    } else {
+      columns.push(...data[key]);
+    }
+  }
+});
+export const dicts = initDicts(columns);