drp-ui/src/views/business/spd/cm/customers/index.vue

<template>
  <div id="Customers">
    <div v-if="!isAdd0 && !isAdd1 && !isAdd2">
      <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>

        <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 :size="size" @click="handleExport">导出</el-button>
          </el-col>
        </el-row>

        <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">
              <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>
          </ux-table-column>
        </el-super-ux-table>
      </el-card>
      <!-- 添加或修改客户对话框 -->
      <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">
                    <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"
                    :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
                      :size="size"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDeleteAdd(scope.row, '0')"
                    >
                      删除
                    </el-button>
                  </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"
                    :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
                      :size="size"
                      type="text"
                      @click="handleUpdateAdd(scope.row, '1')"
                      >修改
                    </el-button>
                    <el-button
                      :size="size"
                      type="text"
                      @click="handleDeleteAdd(scope.row, '1')"
                    >
                      删除
                    </el-button>
                  </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-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
                      :size="size"
                      type="text"
                      @click="handleUpdateAdd(scope.row, '1')"
                      >修改
                    </el-button>
                    <el-button
                      :size="size"
                      type="text"
                      @click="handleDeleteAdd(scope.row, '1')"
                    >
                      删除
                    </el-button>
                  </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="pageStu"
      :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 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: [
          {
            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",
          },
        ],
      },
    };
  },
  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;
      }
    },
    /** 修改按钮操作 */
    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.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;
            }
          } catch (error) {}
        } 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.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 () {
            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.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) => {
                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.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 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>