kd-aiot-frontend-eom/src/views/saleManage/contact/components/contactDetailDialog.vue

<template>
  <ele-modal
  custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="80%"
    @close="cancel"
  >

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="base">
        <el-form
          label-width="160px"
          ref="formRef"
          :model="form"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="客户分类："
                prop="categoryId"
              >
                {{form.categoryName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称：" prop="name">
                {{form.name}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户代号：" prop="serialNo">
                {{form.serialNo}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户简称：" prop="simpleName">
                {{form.simpleName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度：" prop="authorizationLimit">
                {{form.authorizationLimit}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位电话：" prop="phone">
                {{form.phone}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址：" prop="addressId">
                {{form.addressName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址：" prop="address">
                {{form.address}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="统一社会信用代码："
                prop="unifiedSocialCreditCode"
              >
                {{form.unifiedSocialCreditCode}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业：" prop="industry">
                {{form.industryFullName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业类型：" prop="companyCategoryId">
                {{form.companyCategoryName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期：" prop="registerDate">
                {{form.registerDate}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围：" prop="businessScope">
                {{form.businessScope}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主营产品：" prop="mainProduct">
                {{form.mainProduct}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="上级单位："
                prop="hasParentGroup"
              >
                {{ form.parentName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="businessLicenseFile" label="营业执照附件：">
                <el-link v-if="form.businessLicenseFile && form.businessLicenseFile !== ''"
                         type="primary" :underline="false"
                         @click="downloadFile(form.businessLicenseFile)"> {{ form.businessLicenseFile.name }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注：" prop="remark">
                {{form.remark}}
              </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: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="other">
        <el-form
          label-width="160px"
          ref="otherFormRef"
          :model="otherForm"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式：" prop="settlementMode">
                {{otherForm.settlementModeName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率：" prop="taxRate">
                {{otherForm.taxRate}} %
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣率：" prop="discount">
                {{otherForm.discount}} %
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="分管部门："
                prop="deptId"
                style="margin-bottom: 22px"
              >
                {{otherForm.deptName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员：" prop="salesmanId">
                {{otherForm.salesmanName}}
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="收件人：" prop="sender">
                {{otherForm.sender}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人电话：" prop="senderPhone">
                {{otherForm.senderPhone}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人地址：" prop="addressId">
                {{otherForm.addressName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人详细地址：" prop="address" >
                {{otherForm.address}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {contactDetail} from '@/api/saleManage/contact';
import {getFile} from '@/api/system/file';
import {getInfoById as getCategoryInfo} from '@/api/classifyManage/index';
import fileUpload from '@/components/upload/fileUpload';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
import {copyObj} from '@/utils/util';


export default {
    props: {
      categoryTreeList: Array
    },
    mixins: [dictMixins],
    components: {
      fileUpload,
      deptSelect,
      personSelect
    },
    data() {
      let formDef = {
          address: '',
          addressId: 0,
          addressName: '',
          authorizationLimit: 0,
          businessLicenseFile: {},
          businessScope: '',
          categoryId: '',
          categoryName: '',
          companyCategoryId: '',
          companyCategoryName: '',
          hasParentGroup: 0,
          industry: '',
          industryCode: '',
          industryFullName: '',
          mainProduct: '',
          name: '',
          officialIndustry: '',
          phone: '',
          registerDate: '',
          remark: '',
          serialNo: '',
          simpleName: '',
          type: 1,
          unifiedSocialCreditCode: ''
        };
      let otherFormDef = {
        settlementMode: '',
        settlementModeName: '',
        taxRate: 0,
        address: '',
        addressId: '',
        deptId: '',
        deptName: '',
        discount: 0,
        salesmanId: '',
        salesmanName: '',
        sender: '',
        senderPhone: ''
      };
      return {
        visible: 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: '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'
          },
        ],
      };
    },
    methods: {
      async open(row) {
        this.row = row;
        this.visible = true;
        await this._getById(row.id);
      },

      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          this.form = copyObj(this.formDef),
          this.otherForm = copyObj(this.otherFormDef),
          this.tableBankData = []
          this.tableLinkData = []
          this.visible = false;
        })
      },

      async _getById(id) {
        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+"");
        }

        await getCategoryInfo(this.form.categoryId).then((res) => {
          this.$set(this.form,'categoryName', res.data.name)
        });
      },

      downloadFile(file){
        getFile({ objectName: file.storePath }, file.name);
      },

    }
  };
</script>