MTP2.0_WEB/src/views/information/custom/compoments/common-detail/index.vue

<template>
  <div>
    <Des :list="desList" @onClick="imgClick" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelImg">
      <img alt="预览附件" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>

</template>

<script lang="ts">
import { defineComponent, PropType, watchEffect } from 'vue';
import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
import { getStatusName } from '@/common/constants/enumsName';
import { formatValue } from '@/common/methods';
import { getCardTypeEnumItemName } from '@/common/constants/enumsName';
import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
import { handlePreviewImg } from '@/common/setup/upload';
import { isPingAnOem, isQianHaiJin } from '@/common/config/projectName';
import { QhjCustomer } from '@/services/go/ermcp/qhj/interface';
import { formatTime } from '@/common/methods';

export default defineComponent({
  name: 'custom-detail-desc',
  components: { Des },
  props: {
    selectedRow: {
      type: Object as PropType<QhjCustomer>,
      default: {},
    },
  },
  setup(props) {
    console.log('dddd', props.selectedRow);
    function isPersonal() {
      return props.selectedRow.userinfotype === 1;
    }
    const { desList, getDesList } = handleDesList();
    // 预览附件
    const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
    //
    function imgClick({ label }: DescriptionsList) {
      const { proxystatementurl, cardfrontphotourl, cardbackphotourl } = props.selectedRow;
      switch (label) {
        case '营业执照':
          previewImg(proxystatementurl);
          break;
        case '身份证正面照':
          previewImg(cardfrontphotourl);
          break;
        case '身份证反面照':
          previewImg(cardbackphotourl);
          break;
      }
    }
    watchEffect(() => {
      // if (props.selectedRow.customername) {
      const data = props.selectedRow;
      if (isPingAnOem()) {
        const person = [
          { label: '客户类型', value: '个人' },
          { label: '姓名', value: formatValue(data.username) },
          { label: '点价联系人', value: formatValue(data.contactname) },
          { label: '联系人手机号', value: formatValue(data.mobile) },
          { label: '状态', value: getStatusName(data.status), className: 'green' },
        ];
        const company = [
          { label: '客户类型', value: '企业' },
          { label: '企业名称', value: formatValue(data.customername) },
          { label: '点价联系人', value: formatValue(data.contactname) },
          { label: '联系人手机号', value: formatValue(data.mobile) },
          { label: '状态', value: getStatusName(data.status), className: 'green' },
        ];
        getDesList(isPersonal() ? person : company);
      } else if (isQianHaiJin()) {
        // 个人
        const person = [
          { label: '所属机构', value: formatValue(data.parentusername) },
          { label: '所属客户经理', value: formatValue(data.brokername) },
          { label: '客户类型', value: '个人' },
          { label: '姓名', value: formatValue(data.username) },
          { label: '性别', value: data.sex === 1 ? '男' : data.sex === 0 ? '女' : '--' },
          { label: '生日', value: formatValue(formatTime(data.birthday, 'd')) },
          { label: '身份证号码', value: formatValue(data.cardnum) },
          { label: '手机号码', value: formatValue(data.mobile) },
          { label: '身份证正面照', value: formatValue(getImgName(data.cardfrontphotourl)), className: 'blue' },
          { label: '身份证反面照', value: formatValue(getImgName(data.cardbackphotourl)), className: 'blue' },
          { label: '邮箱', value: formatValue(data.email) },
          { label: '联系电话', value: formatValue(data.telphone) },
          { label: '通讯地址', value: formatValue(data.provincename + data.cityname + data.districtname + data.address) },
          { label: '备注', value: formatValue(data.remark) },
        ];
        // 企业
        const company = [
          { label: '所属机构', value: formatValue(data.parentusername) },
          { label: '所属客户经理', value: formatValue(data.brokername) },
          { label: '客户类型', value: '企业' },
          { label: '企业名称', value: data.customername },
          { label: '企业简称', value: formatValue(data.nickname) },
          { label: '证件类型', value: getCardTypeEnumItemName(data.cardtype) },
          { label: '法定代表人', value: formatValue(data.legalpersonname) },
          { label: '证件号码', value: formatValue(data.cardnum) },
          { label: '纳税人识别号', value: formatValue(data.taxpayernum) },
          { label: '营业执照', value: formatValue(getImgName(data.proxystatementurl)), className: 'blue' },
          { label: '联系人', value: formatValue(data.contactname) },
          { label: '联系人手机号', value: formatValue(data.mobile) },
          { label: '联系电话', value: formatValue(data.telphone) },
          { label: '状态', value: getStatusName(data.status), className: 'green' },
          { label: '通讯地址', value: formatValue(data.provincename + data.cityname + data.districtname + data.address) },
          { label: '备注', value: formatValue(data.remark) },
        ];
        getDesList(isPersonal() ? person : company);
      } else {
        // 个人
        const person = [
          { label: '客户类型', value: '个人' },
          { label: '姓名', value: formatValue(data.username) },
          { label: '身份证号码', value: formatValue(data.cardnum) },
          { label: '手机号码', value: formatValue(data.mobile) },
          { label: '身份证正面照', value: formatValue(getImgName(data.cardfrontphotourl)), className: 'blue' },
          { label: '身份证反面照', value: formatValue(getImgName(data.cardbackphotourl)), className: 'blue' },
          { label: '邮箱', value: formatValue(data.email) },
          { label: '联系电话', value: formatValue(data.telphone) },
          { label: '通讯地址', value: formatValue(data.provincename + data.cityname + data.districtname + data.address) },
          { label: '备注', value: formatValue(data.remark) },
        ];
        // 企业
        const company = [
          { label: '客户类型', value: '企业' },
          { label: '企业名称', value: data.customername },
          { label: '企业简称', value: formatValue(data.nickname) },
          { label: '证件类型', value: getCardTypeEnumItemName(data.cardtype) },
          { label: '法定代表人', value: formatValue(data.legalpersonname) },
          { label: '证件号码', value: formatValue(data.cardnum) },
          { label: '纳税人识别号', value: formatValue(data.taxpayernum) },
          { label: '营业执照', value: formatValue(getImgName(data.proxystatementurl)), className: 'blue' },
          { label: '联系人', value: formatValue(data.contactname) },
          { label: '联系人手机号', value: formatValue(data.mobile) },
          { label: '联系电话', value: formatValue(data.telphone) },
          { label: '状态', value: getStatusName(data.status), className: 'green' },
          { label: '通讯地址', value: formatValue(data.provincename + data.cityname + data.districtname + data.address) },
          { label: '备注', value: formatValue(data.remark) },
        ];
        getDesList(isPersonal() ? person : company);
        // }
      }
    });
    return {
      desList,
      previewVisible,
      previewImage,
      cancelImg,
      imgClick,
    };
  },
});
</script>

<style lang="less">
.custom-detail {
    .ant-form.inlineForm {
        margin-top: 20px;
    }
    .upload {
        .look {
            margin-left: 0;
        }
    }
}
</style>;