kd-aiot-frontend-wt/src/views/bpm/handleTask/components/contact/contactDetailDialog.vue

<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="base">
        <el-form
          label-width="140px"
          class="el-form-box"
          ref="formRef"
          :model="form"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户分类：" prop="categoryId">
                <el-input v-model="form.categoryName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分管部门：" prop="fgDeptId">
                <el-input v-model="form.fgDeptName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员：" prop="salesmanId">
                <el-input v-model="form.salesmanName" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="客户名称：" prop="name">
                <el-input v-model="form.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户代号：" prop="serialNo">
                <el-input v-model="form.serialNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户简称：" prop="simpleName">
                <el-input v-model="form.simpleName" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="法定代表人：" prop="legalPerson">
                <el-input v-model="form.legalPerson" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册资金：" prop="registeredCapital">
                <el-input v-model="form.registeredCapital" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度：" prop="authorizationLimit">
                <el-input v-model="form.authorizationLimit" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="单位电话：" prop="phone">
                <el-input v-model="form.phone" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                class="form_item_label"
                label="统一社会信用代码："
                prop="unifiedSocialCreditCode"
              >
                <el-input
                  v-model="form.unifiedSocialCreditCode"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业：" prop="industry">
                <el-input v-model="form.industryFullName" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="注册地址：" prop="addressId">
                <el-input
                  v-model="form.addressName"
                  disabled
                  style="width: 35%"
                ></el-input>
                <el-input
                  v-model="form.address"
                  disabled
                  style="width: 65%"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="联系地址：" prop="addressId">
                <el-input
                  v-model="otherForm.addressName"
                  disabled
                  style="width: 35%"
                ></el-input>
                <el-input
                  v-model="otherForm.address"
                  disabled
                  style="width: 65%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业类型：" prop="companyCategoryId">
                <el-input
                  v-model="form.companyCategoryName"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业类型：" prop="companyCategoryId">
                <el-input v-model="form.enterpriseTypeName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期：" prop="registerDate">
                <el-input v-model="form.registerDate" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围：" prop="businessScope">
                <el-input v-model="form.businessScope" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="主营产品：" prop="mainProduct">
                <el-input v-model="form.mainProduct" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上级单位：" prop="hasParentGroup">
                <el-input v-model="form.parentName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="级别：">
                <DictSelection
                  dictName="供应商级别"
                  disabled
                  clearable
                  v-model="form.level"
                >
                </DictSelection>
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input
                  disabled
                  type="textarea"
                  maxlength="500"
                  placeholder="请输入"
                  v-model="form.businessScope"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item label="备注：" prop="remark">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="银行信息" name="bank">
        <ele-pro-table
          ref="table"
          :columns="bankColumns"
          :datasource="tableBankData"
          height="350px"
          :toolkit="[]"
          :need-page="false"
        >
          <template v-slot:accountNameHeader="{ column }">
            <span>{{ column.label }}</span
            ><span style="color: red">*</span>
          </template>

          <template v-slot:accountName="{ row }">
            {{ row.accountName }}
          </template>
          <template v-slot:accountNo="{ row }">
            {{ row.accountNo }}
          </template>
          <template v-slot:bankName="{ row }">
            {{ row.bankName }}
          </template>
          <template v-slot:interbankNo="{ row }">
            {{ row.interbankNo }}
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="联系人信息" name="link">
        <ele-pro-table
          ref="linkTable"
          :columns="linkColumns"
          :datasource="tableLinkData"
          :toolkit="[]"
          height="350px"
          :need-page="false"
        >
          <template v-slot:linkNameHeader="{ column }">
            <span>{{ column.label }}</span
            ><span style="color: red">*</span>
          </template>
          <template v-slot:mobilePhoneHeader="{ column }">
            <span>{{ column.label }}</span
            ><span style="color: red">*</span>
          </template>
          <template v-slot:statusHeader="{ column }">
            <span>{{ column.label }}</span
            ><span style="color: red">*</span>
          </template>

          <template v-slot:linkName="{ row }">
            {{ row.linkName }}
          </template>
          <template v-slot:mobilePhone="{ row }">
            {{ row.mobilePhone }}
          </template>
          <template v-slot:phone="{ row }">
            {{ row.phone }}
          </template>
          <template v-slot:email="{ row }">
            {{ row.email }}
          </template>
          <template v-slot:deptName="{ row }">
            {{ row.deptName }}
          </template>
          <template v-slot:post="{ row }">
            {{ row.post }}
          </template>
          <template v-slot:ifChief="{ row, $index }">
            <el-select v-model="row.ifChief" class="w100" disabled>
              <el-option
                v-for="item in ifChiefList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-slot:status="{ row }">
            <DictSelection
              dictName="客户联系人状态"
              v-model="row.status"
              :disabled="true"
            ></DictSelection>
          </template>
          <template v-slot:remark="{ row }">
            {{ row.remark }}
          </template>
        </ele-pro-table>
      </el-tab-pane>

      <el-tab-pane label="证书资质" name="certificate"> 
        <certificateManagement
          ref="certificateManagementRef"
        ></certificateManagement>


      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import {
    contactDetail,
    getInfoByIds
  } from '@/api/bpm/components/saleManage/contact';
  import { getFile } from '@/api/system/file';
  import dictMixins from '@/mixins/dictMixins';
  import { copyObj } from '@/utils/util';
  import {
    contactQcPackPageAPI
  } from '@/api/bpm/components/supplierManage/contact';
  import fileMain from '@/components/addDoc/index.vue';
  import certificateManagement from '@/views/bpm/handleTask/components/certificateQualifications/index.vue';
  export default {
    props: {
      businessId: {
        default: ''
      }
    },
    mixins: [dictMixins],
    components: { fileMain, certificateManagement },
    data() {
      let formDef = {
        address: '',
        addressId: 0,
        addressName: '',
        authorizationLimit: 0,
        businessLicenseFile: [],
        businessScope: '',
        categoryId: '',
        categoryName: '',
        companyCategoryId: '',
        companyCategoryName: '',
        enterpriseTypeName: '',
        enterpriseTypeId: '',
        hasParentGroup: 0,
        industry: '',
        industryCode: '',
        industryFullName: '',
        mainProduct: '',
        name: '',
        officialIndustry: '',
        phone: '',
        registerDate: '',
        remark: '',
        serialNo: '',
        simpleName: '',
        legalPerson: '',
        registeredCapital: '',
        type: 1,
        unifiedSocialCreditCode: ''
      };
      let otherFormDef = {
        settlementMode: '',
        settlementModeName: '',
        taxRate: 0,
        address: '',
        addressId: '',
        deptId: '',
        deptName: '',
        discount: 0,
        salesmanId: '',
        salesmanName: '',
        sender: '',
        senderPhone: ''
      };
      return {
        visible: false,
        certificateQualificationsDialogFlag: false,
        title: '客户详情',
        row: {},
        activeName: 'base',
        formDef,
        otherFormDef,
        form: copyObj(formDef),
        otherForm: copyObj(otherFormDef),
        tableBankData: [],
        tableLinkData: [],
        ifChiefList: [
          {
            value: 0,
            label: '否'
          },
          {
            value: 1,
            label: '是'
          }
        ],
        bankColumns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '单位名称',
            prop: 'accountName',
            slot: 'accountName',
            action: 'accountName',
            headerSlot: 'accountNameHeader'
          },
          {
            label: '银行账号',
            prop: 'accountNo',
            slot: 'accountNo',
            action: 'accountNo'
          },
          {
            label: '开户行',
            prop: 'bankName',
            slot: 'bankName',
            action: 'bankName'
          },
          {
            label: '银行银联号',
            prop: 'interbankNo',
            slot: 'interbankNo',
            action: 'interbankNo'
          }
        ],
        linkColumns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '姓名',
            prop: 'linkName',
            slot: 'linkName',
            action: 'linkName',
            headerSlot: 'linkNameHeader'
          },
          {
            label: '手机',
            prop: 'mobilePhone',
            slot: 'mobilePhone',
            action: 'mobilePhone',
            headerSlot: 'mobilePhoneHeader'
          },
          {
            label: '电话',
            prop: 'phone',
            slot: 'phone',
            action: 'phone'
          },
          {
            label: '微信号',
            prop: 'wechat',
            slot: 'wechat',
            action: 'wechat'
          },
          {
            label: '邮箱',
            prop: 'email',
            slot: 'email',
            action: 'email'
          },
          {
            label: '部门',
            prop: 'deptName',
            slot: 'deptName',
            action: 'deptName'
          },
          {
            label: '职务',
            prop: 'post',
            slot: 'post',
            action: 'post'
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            action: 'status',
            headerSlot: 'statusHeader'
          },
          {
            label: '是否首要',
            prop: 'ifChief',
            slot: 'ifChief',
            action: 'ifChief'
          },
          {
            label: '备注',
            prop: 'remark',
            slot: 'remark',
            action: 'remark'
          }
        ],
      };
    },
    created() {
      this._getById(this.businessId);
    },
    methods: {
      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          (this.form = copyObj(this.formDef)),
            (this.otherForm = copyObj(this.otherFormDef)),
            (this.tableBankData = []);
          this.tableLinkData = [];
          this.visible = false;
        });
      },
    
      async _getById(id) {
        if (!id) {
          return;
        }
        const data = await contactDetail(id);
        this.form = data.base;
        this.otherForm = data.other;
        this.tableBankData = data.bankList;
        this.tableLinkData = data.linkList;

        if (this.tableLinkData && this.tableLinkData.length > 0) {
          this.tableLinkData.forEach((e) => (e.status = e.status + ''));
        }
        this.$nextTick(()=>{
          this.$refs.certificateManagementRef.getTable(this.form.id,4)
        })

        await getInfoByIds(this.form.categoryId).then((res) => {
          let categoryName = res.data.map((item) => item.name)?.join(',');
          this.$set(this.form, 'categoryName', categoryName);
        });
      },

      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      }
    }
  };
</script>
<style scoped lang="scss">
  :deep .isGreen {
    background: #ffd16c;
  }
</style>