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

<template>
  <div id="Customers" class="app-container">
    <div v-if="!isAdd1 && !isAdd2">
      <div v-if="isList">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-row :gutter="10" justify="space-between">
            <el-col :span="5">
              <el-form-item label="销售组织" prop="orgName">
                <el-popover-select-v2 v-model="queryParams.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
                  :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="queryParams" placeholder="请输入销售组织" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户编码" prop="code">
                <el-input v-model="queryParams.code" placeholder="请输入客户编码" clearable
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户分类" prop="classification">
                <el-select clearable v-model="queryParams.classification">
                  <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-col>
          </el-row>

          <!-- 下拉盒子 -->
          <CollapseTransition>
            <div v-show="expanded">
              <el-row :gutter="20" justify="space-between">
                <el-col :span="5">
                  <el-form-item label="企业类型" prop="enterpriseType">
                    <el-select clearable v-model="queryParams.enterpriseType">
                      <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="负责人" prop="responsiblePersonName">
                    <el-popover-select-v2 v-model="queryParams.responsiblePersonName" title="负责人" valueKey="name"
                      referName="CONTACTS_PARAM"
                      :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}"
                      :source.sync="queryParams" placeholder="请输入负责人" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </CollapseTransition>
        </el-form>

        <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'"
            @click="drop"></i></el-divider>

        <el-row :gutter="10" class="mb8">
          <el-col :span="6" :offset="20">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
              删除
            </el-button>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="customersList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <!-- <el-table-column label="销售组织" align="center" prop="orgName" min-width="300" /> -->
          <el-table-column label="客户编码" align="center" prop="code" min-width="100" />
          <el-table-column label="客户名称" align="center" prop="name" min-width="200" />
          <el-table-column label="客户分类" align="center" prop="classification" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_classification" :value="scope.row.classification" />
            </template>
          </el-table-column>
          <el-table-column label="客户行业" align="center" prop="industry" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_industry" :value="scope.row.industry" />
            </template>
          </el-table-column>
          <el-table-column label="客户类型" align="center" prop="type" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column label="客户类别" align="center" prop="category" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_category" :value="scope.row.category" />
            </template>
          </el-table-column>
          <el-table-column label="客户首营" align="center" prop="firstBattalion" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.firstBattalion" />
            </template>
          </el-table-column>
          <el-table-column label="销售渠道" align="center" prop="channel" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_channel" :value="scope.row.channel" />
            </template>
          </el-table-column>
          <el-table-column label="业务类型" align="center" prop="businessType" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_business_type" :value="scope.row.businessType" />
            </template>
          </el-table-column>
          <el-table-column label="纳税类别" align="center" prop="taxType" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_tax_type" :value="scope.row.taxType" />
            </template>
          </el-table-column>
          <el-table-column label="是否潜客" align="center" prop="potential" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.potential" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="销售区域" align="center" prop="marketingAreaName" min-width="80" /> -->
          <el-table-column label="负责人" align="center" prop="responsiblePersonName" min-width="80" />
          <!-- <el-table-column label="负责部门" align="center" prop="responsibleDeptName" min-width="80" /> -->
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheck(scope.row)">查看</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
      <!-- 添加或修改客户对话框 -->
      <div v-if="!isList">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="first">
                <el-divider content-position="left">基本信息</el-divider>
                <el-row :gutter="20">
                  <!-- <el-col :span="6">
                  <el-form-item label="销售组织" prop="orgName">
                    <el-popover-select-v2 v-model="form.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
                      :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="form" placeholder="请输入销售组织"  :disabled="openState == 'check'">
                    </el-popover-select-v2>
                  </el-form-item>
                </el-col> -->
                  <el-col :span="6">
                    <el-form-item label="客户编码" prop="code">
                      <el-input v-model="form.code" placeholder="编码系统自动生成" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户名称" prop="name">
                      <el-input v-model="form.name" placeholder="请输入客户名称" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户简称" prop="abbreviation">
                      <el-input v-model="form.abbreviation" placeholder="请输入客户简称" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户分类" prop="classification">
                      <el-select clearable v-model="form.classification" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="客户类型" prop="type">
                      <el-select clearable v-model="form.type" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户类别" prop="category">
                      <el-select clearable v-model="form.category" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_category" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户首营" prop="firstBattalion">
                      <el-select clearable v-model="form.firstBattalion" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="销售渠道" prop="channel">
                      <el-select clearable v-model="form.channel" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_channel" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="业务类型" prop="businessType">
                      <el-select clearable v-model="form.businessType" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_business_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户行业" prop="industry">
                      <el-select clearable v-model="form.industry" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_industry" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="纳税类别" prop="taxType">
                      <el-select clearable v-model="form.taxType" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_tax_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="是否潜客" prop="potential">
                      <el-select clearable v-model="form.potential" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="6">
                  <el-form-item label="地区分类" prop="areaClassification">
                    <el-input v-model="form.areaClassification" placeholder="请输入地区分类" :disabled="openState == 'check'" />
                  </el-form-item>
                </el-col> -->
                  <el-col :span="6">
                    <el-form-item label="证照号码" prop="licenseNumber">
                      <el-input v-model="form.licenseNumber" placeholder="请输入证照号码" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-divider content-position="left">销售区域</el-divider>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="销售区域" prop="marketingAreaName">
                    <el-popover-select-v2 v-model="form.marketingAreaName" title="销售区域" valueKey="name"
                      referName="MK_SALESAREA_PARAM" :dataMapping="{ marketingArea: 'id', marketingAreaName: 'name'}"
                      :source.sync="form" placeholder="请输入销售区域" :disabled="openState == 'check'">
                    </el-popover-select-v2>
                  </el-form-item>
                </el-col>
              </el-row> -->
                <el-divider content-position="left">负责人</el-divider>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="负责人" prop="responsiblePersonName">
                      <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
                        referName="CONTACTS_PARAM"
                        :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}" :source.sync="form"
                        placeholder="请输入负责人" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="6">
                  <el-form-item label="负责部门" prop="responsibleDeptName">
                    <el-popover-select-v2 v-model="form.responsibleDeptName" title="负责部门" valueKey="name"
                      referName="DEPT_PARAM" :dataMapping="{ responsibleDept: 'id', responsibleDeptName: 'name'}"
                      :source.sync="form" placeholder="请输入负责部门" :disabled="openState == 'check'" />
                  </el-form-item>
                </el-col> -->
                </el-row>
                <!-- <el-divider content-position="left">开票客户</el-divider>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="开票客户" prop="billingCustomerName">
                    <el-popover-select-v2 v-model="form.billingCustomerName" title="开票客户" valueKey="name"
                      referName="CUSTOMER_PARAM_ZT" :dataMapping="{ billingCustomer: 'id', billingCustomerName: 'name'}"
                      :source.sync="form" placeholder="请输入开票客户" :disabled="openState == 'check'" />
                  </el-form-item>
                </el-col>
              </el-row> -->
                <el-divider content-position="left">其他信息</el-divider>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="创建人" prop="createBy">
                      <el-input v-model="form.createBy" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="创建时间" prop="createTime">
                      <el-input v-model="form.createTime" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="修改人" prop="updateBy">
                      <el-input v-model="form.updateBy" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="修改时间" prop="updateTime">
                      <el-input v-model="form.updateTime" :disabled="true" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="资质信息" name="second">
                <el-divider content-position="left">资质信息</el-divider>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="企业类型" prop="enterpriseType">
                      <el-select clearable v-model="form.enterpriseType" :disabled="openState == 'check'">
                        <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="企业名称" prop="enterpriseName">
                      <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="6">
                  <el-form-item label="注册地区" prop="registrationArea">
                    <el-input v-model="form.registrationArea" placeholder="请输入注册地区" :disabled="openState == 'check'" />
                  </el-form-item>
                </el-col> -->
                  <el-col :span="6">
                    <el-form-item label="经度" prop="longitude">
                      <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="纬度" prop="latitude">
                      <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="详细地址" prop="detailedAddress">
                      <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" :disabled="openState == 'check'" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>

              <el-tab-pane label="联系人信息" name="third" v-if="openState == 'check'">
                <el-table :data="mkCmCustomersContactList" ref="mkCmCustomersContact">
                  <el-table-column label="姓名" align="center" prop="name" min-width="150" />
                  <el-table-column label="客户" align="center" prop="customerName" min-width="150" />
                  <el-table-column label="手机" align="center" prop="telephone" min-width="150" />
                  <el-table-column label="邮箱" align="center" prop="mail" min-width="150" />
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="负责人信息" name="fourth" v-if="openState == 'check'">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="6" :offset="21">
                    <el-button type="primary" icon="el-icon-plus" size="mini"
                      @click="handleAddMkCmCustomersResponsiblePerson">添加
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="handleDeleteMkCmCustomersResponsiblePerson">
                      删除
                    </el-button>
                  </el-col>
                </el-row>
                <el-table :data="mkCmCustomersResponsiblePersonList"
                  :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
                  @selection-change="handleMkCmCustomersResponsiblePersonSelectionChange"
                  ref="mkCmCustomersResponsiblePerson">
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="人员姓名" align="center" prop="personName" min-width="150" />
                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
                  <el-table-column label="关系类型" align="center" prop="relationshipType" min-width="150"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.mk_cm_relationship_type" :value="scope.row.relationshipType"
                        show-overflow-tooltip />
                    </template>
                  </el-table-column>
                  <el-table-column label="产线" align="center" prop="productionLine" min-width="150">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.mk_cm_production_line" :value="scope.row.productionLine"
                        show-overflow-tooltip />
                    </template>
                  </el-table-column>
                  <el-table-column label="开始日期" align="center" prop="startDate" min-width="150" />
                  <el-table-column label="结束日期" align="center" prop="endDate" min-width="150" />
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
                    fixed="right">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '1')">
                        查看
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '1')">修改
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '1')">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="科室信息" name="fifth" v-if="openState == 'check'">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="6" :offset="21">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersDepartment">
                      添加
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="handleDeleteMkCmCustomersDepartment">
                      删除
                    </el-button>
                  </el-col>
                </el-row>
                <el-table :data="mkCmCustomersDepartmentList" :row-class-name="rowMkCmCustomersDepartmentIndex"
                  @selection-change="handleMkCmCustomersDepartmentSelectionChange" ref="mkCmCustomersDepartment">
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="科室名称" align="center" prop="name" min-width="150" />
                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
                  <el-table-column label="负责人姓名" align="center" prop="responsiblePersonName" min-width="150" />
                  <el-table-column label="联系人手机" align="center" prop="phone" min-width="150" />
                  <el-table-column label="科室位置" align="center" prop="address" min-width="150" />
                  <el-table-column label="常规治疗" align="center" prop="conventionalTherapy" min-width="150" />
                  <el-table-column label="科室特色" align="center" prop="characteristic" min-width="150" />
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
                    fixed="right">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '2')">
                        查看
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '2')">修改
                      </el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '2')">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>

            <div slot="footer" style="margin-left: 88%; margin-top: 1%">
              <el-button type="primary" @click="submitForm" :disabled="openState == 'check'">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </div>

    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
      @refresh="searchList" />

    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
      :customersId="form.id" @refresh="searchList" />
  </div>
</template>

<script>
  // 客户接口
  import {
    listCustomers,
    getCustomers,
    delCustomers,
    addCustomers,
    updateCustomers,
    getContactInfo,
  } from "@/api/business/spd/cm/customers";
  // 客户负责人接口
  import {
    delCustomersResponsiblePerson,
  } from "@/api/business/spd/cm/customersResponsiblePerson";
  // 客户科室接口
  import {
    delCustomersDepartment,
  } from "@/api/business/spd/cm/customersDepartment";
  import CollapseTransition from '@/components/MyCollapse/collapse.vue';
  // 参照弹出框
  import ElPopoverSelectV2 from "@/components/popover-select-v2";
  // 新建客户负责人信息页面
  import AddPerson from "@/views/business/spd/cm/customersResponsiblePerson/index.vue";
  // 新建客户科室信息页面
  import AddDepartment from "@/views/business/spd/cm/customersDepartment/index.vue";

  export default {
    name: "Customers",
    components: {
      CollapseTransition,
      ElPopoverSelectV2,
      AddPerson,
      AddDepartment,
    },
    dicts: ['mk_cm_yes_no', 'mk_cm_classification', 'mk_cm_type', 'mk_cm_category', 'mk_cm_channel',
      'mk_cm_business_type', 'mk_cm_industry', 'mk_cm_tax_type', 'mk_cm_enterprise_type', 'mk_cm_relationship_type',
      'mk_cm_production_line'
    ],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 子表选中数据
        checkedMkCmCustomersResponsiblePerson: [],
        checkedMkCmCustomersDepartment: [],
        // 子表选中主键
        checkedMkCmCustomersResponsiblePersonIds: [],
        checkedMkCmCustomersDepartmentIds: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 客户表格数据
        customersList: [],
        // 客户联系人表格数据
        mkCmCustomersContactList: [],
        // 客户负责人表格数据
        mkCmCustomersResponsiblePersonList: [],
        // 客户科室表格数据
        mkCmCustomersDepartmentList: [],
        // 弹出层标题
        title: "",
        // 首次进入标签页的显示
        activeName: 'first',
        // 下拉收起配置
        expanded: false,
        // 页面打开状态
        openState: null,
        // 列表页面
        isList: true,
        // 添加页面
        isAdd1: false,
        isAdd2: false,
        rowDetail: {},
        disable: false,
        // 页面状态
        page: null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          org: null,
          orgName: null,
          code: null,
          name: null,
          abbreviation: null,
          classification: null,
          type: null,
          category: null,
          firstBattalion: null,
          channel: null,
          businessType: null,
          industry: null,
          taxType: null,
          potential: null,
          areaClassification: null,
          licenseNumber: null,
          marketingArea: null,
          marketingAreaName: null,
          responsiblePerson: null,
          responsiblePersonName: null,
          responsibleDept: null,
          responsibleDeptName: null,
          billingCustomer: null,
          billingCustomerName: null,
          enterpriseType: null,
          enterpriseName: null,
          registrationArea: null,
          longitude: null,
          latitude: null,
          detailedAddress: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: '客户名称不能为空',
            trigger: 'blur'
          }],
          classification: [{
            required: true,
            message: '客户分类不能为空',
            trigger: 'blur'
          }],
          taxType: [{
            required: true,
            message: '纳税类别不能为空',
            trigger: 'blur'
          }],
          licenseNumber: [{
            required: true,
            message: '证照号码不能为空',
            trigger: 'blur'
          }],
          enterpriseType: [{
            required: true,
            message: '企业类型不能为空',
            trigger: 'blur'
          }],
          enterpriseName: [{
            required: true,
            message: '企业名称不能为空',
            trigger: 'blur'
          }],
        },
      };
    },
    created() {
      this.reset();
      this.getList();
    },
    methods: {
      /** 查询客户列表 */
      getList() {
        this.loading = true;
        listCustomers(this.queryParams).then(response => {
          this.customersList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.isList = true;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          org: null,
          orgName: null,
          code: null,
          name: null,
          abbreviation: null,
          classification: null,
          type: null,
          category: null,
          firstBattalion: null,
          channel: null,
          businessType: null,
          industry: null,
          taxType: null,
          potential: null,
          areaClassification: null,
          licenseNumber: null,
          marketingArea: null,
          marketingAreaName: null,
          responsiblePerson: null,
          responsiblePersonName: null,
          responsibleDept: null,
          responsibleDeptName: null,
          billingCustomer: null,
          billingCustomerName: null,
          enterpriseType: null,
          enterpriseName: null,
          registrationArea: null,
          longitude: null,
          latitude: null,
          detailedAddress: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          delFlag: null
        };
        this.activeName = 'first';
        this.mkCmCustomersResponsiblePersonList = [];
        this.mkCmCustomersDepartmentList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.isList = false;
        this.openState = 'add';
        this.title = "添加客户";
      },
      /** 查看按钮操作 */
      handleCheck(row) {
        this.isList = false;
        this.reset();
        const id = row.id || this.ids
        getCustomers(id).then(response => {
          this.form = response.data;
          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
          this.openState = 'check';
          this.title = "查看客户";
          console.log(response, 'response');
        });
        getContactInfo().then(response => {
          this.mkCmCustomersContactList = response.data;
        });
      },
      /** Add查看按钮操作 */
      handleCheckAdd(row, type) {
        if (type == '1') {
          this.isAdd1 = true;
          this.page = 'check';
          this.rowDetail = row;
          this.disable = true;
        } else if (type == '2') {
          this.isAdd2 = true;
          this.page = 'check';
          this.rowDetail = row;
          this.disable = true;
        }
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.isList = false;
        this.reset();
        const id = row.id || this.ids
        getCustomers(id).then(response => {
          this.form = response.data;
          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
          this.openState = 'update';
          this.title = "修改客户";
        });
      },
      /** Add修改按钮操作 */
      handleUpdateAdd(row, type) {
        if (type == '1') {
          this.isAdd1 = true;
          this.page = 'update';
          this.rowDetail = row;
          this.disable = false;
        } else if (type == '2') {
          this.isAdd2 = true;
          this.page = 'update';
          this.rowDetail = row;
          this.disable = false;
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          console.log(this.isList, 'this.isList');
          if (valid) {
            if (this.form.id != null) {
              updateCustomers(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.getList();
                this.isList = true;
              });
            } else {
              addCustomers(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.getList();
                this.isList = true;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除客户编码为"' + row.code + '"的数据项？').then(function () {
          return delCustomers(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** Add删除按钮操作 */
      handleDeleteAdd(row, type) {
        const ids = row.id || this.ids;
        if (type == '1') {
          this.$modal.confirm('是否确认删除人员姓名为"' + row.personName + '"的数据项？').then(function () {
            return delCustomersResponsiblePerson(ids);
          }).then(() => {
            getCustomers(row.customersId).then(res => {
              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
            })
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        } else if (type == '2') {
          this.$modal.confirm('是否确认删除科室名称为"' + row.name + '"的数据项？').then(function () {
            return delCustomersDepartment(ids);
          }).then(() => {
            getCustomers(row.customersId).then(res => {
              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
            })
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        }
      },
      /** 客户负责人序号 */
      rowMkCmCustomersResponsiblePersonIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      /** 客户科室序号 */
      rowMkCmCustomersDepartmentIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      /** 客户负责人添加按钮操作 */
      handleAddMkCmCustomersResponsiblePerson() {
        this.isList = false;
        this.isAdd1 = true;
        this.page = 'add';
        this.disable = false;
      },
      /** 客户科室添加按钮操作 */
      handleAddMkCmCustomersDepartment() {
        this.isList = false;
        this.isAdd2 = true;
        this.page = 'add';
        this.disable = false;
      },
      /** 客户负责人删除按钮操作 */
      handleDeleteMkCmCustomersResponsiblePerson() {
        if (this.checkedMkCmCustomersResponsiblePerson.length == 0) {
          this.$modal.msgError("请先选择要删除的客户负责人数据");
        } else {
          this.$modal.confirm('是否确认删除序号为"' + this.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
            return delCustomersResponsiblePerson(this.checkedMkCmCustomersResponsiblePersonIds);
          }).then(() => {
            getCustomers(this.form.id).then(res => {
              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
            })
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        }
      },
      /** 客户科室删除按钮操作 */
      handleDeleteMkCmCustomersDepartment() {
        if (this.checkedMkCmCustomersDepartment.length == 0) {
          this.$modal.msgError("请先选择要删除的客户科室数据");
        } else {
          this.$modal.confirm('是否确认删除序号为"' + this.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
            return delCustomersDepartment(this.checkedMkCmCustomersDepartmentIds);
          }).then(() => {
            getCustomers(this.form.id).then(res => {
              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
            })
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        }
      },
      /** 复选框选中数据 */
      handleMkCmCustomersResponsiblePersonSelectionChange(selection) {
        this.checkedMkCmCustomersResponsiblePerson = selection.map(item => item.index)
        this.checkedMkCmCustomersResponsiblePersonIds = selection.map(item => item.id)
      },
      /** 复选框选中数据 */
      handleMkCmCustomersDepartmentSelectionChange(selection) {
        this.checkedMkCmCustomersDepartment = selection.map(item => item.index)
        this.checkedMkCmCustomersDepartmentIds = selection.map(item => item.id)
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('cm/customers/export', {
          ...this.queryParams
        }, `customers_${new Date().getTime()}.xlsx`)
      },
      /** 标签页切换 */
      handleClick(tab, event) {
        console.log(tab, event);
      },
      /** 搜索条件下拉 */
      drop() {
        this.expanded = !this.expanded
      },
      /** 弹出框关闭确认 */
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      searchList() {
        console.og('1111')
        getCustomers(this.form.id).then(res => {
          this.form = res.data;
          this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
          this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
        })
      },
    }
  };

</script>

<style>
  .btn_group {
    width: 100%;
    margin: 20px -10px;
    display: flex;
    justify-content: right;
  }

  .lines {
    margin-top: 0;
  }

</style>