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';

export default defineComponent({
    name: 'custom-detail-desc',
    components: { Des },
    props: {
        selectedRow: {
            type: Object as PropType<QueryCustomInfoType>,
            default: {},
        },
    },
    setup(props) {
        function isPersonal() {
            return props.selectedRow.userinfotype === 1;
        }
        const { desList, getDesList } = handleDesList();
        // 预览附件
        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
        //
        function imgClick({ label }: DescriptionsList) {
            const { attachment1, cardfrontphotourl, cardbackphotourl } = props.selectedRow;
            switch (label) {
                case '营业执照':
                    previewImg(attachment1);
                    break;
                case '身份证正面照':
                    previewImg(cardfrontphotourl);
                    break;
                case '身份证反面照':
                    previewImg(cardbackphotourl);
                    break;
            }
        }
        watchEffect(() => {
            // if (props.selectedRow.customername) {
                const data = props.selectedRow;
                // 个人
                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.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.attachment1)), 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.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>;