digital-medicine-front/src/views/cdt/models/menuInfo.vue

<template>
    <div class="flex1 over-auto">
        <div class="pd-16">
            <div class="info-title">套餐基本信息</div>
            <el-descriptions :column="4">
                <el-descriptions-item label="套餐名称:">{{ form?.name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="套餐类型:">{{ selectDictLabel(dm_package_type, form?.publicFlag) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="制定规则:">{{ selectDictLabel(dm_permit_type,form?.permitType ) }}</el-descriptions-item>
                <el-descriptions-item v-if="form?.permitType === '1'" label="适用类型:">{{ selectDictLabels(vip_level, form?.permit, ',') || '-' }}</el-descriptions-item>
                <el-descriptions-item v-if="form?.permitType === '2'" label="适用企业:">{{ form?.permitCpyNames.toString()|| '-' }}</el-descriptions-item>
                <el-descriptions-item label="检测周期:">{{ form?.period || '-' }}工作日</el-descriptions-item>
                <el-descriptions-item label="上架数量:">{{ form?.totalCount || '-' }}</el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <el-descriptions-item label="执行标准:" :span="2">{{ form?.standard || '-' }}</el-descriptions-item>
                <el-descriptions-item label="送样信息:" :span="2">{{ form?.description || '-' }}</el-descriptions-item>
                <el-descriptions-item label="购买须知:" :span="2">{{ form?.purchaseNotes || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建人:">{{ form?.createName || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建时间:">{{ form?.createTime || '-' }}</el-descriptions-item>
            </el-descriptions>
            <el-divider />
            <el-descriptions :column="4" direction="vertical">
                <el-descriptions-item label="封面图:">
                    <el-image style="width: 100px; height: 100px" :src="form?.coverImg" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[form?.coverImg]" fit="cover"></el-image>
                </el-descriptions-item>
                <el-descriptions-item v-if="form?.proImg" label="产品图:">
                    <template v-for="(item, index) in form?.proImg.split(',')" :key="index">
                        <el-image style="width: 100px; height: 100px;margin-right: 12px;" :src="item" fit="cover" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="index" :preview-src-list="[item]"></el-image>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
            <el-divider />
            <div class="info-title mb-16 d-flex">
                <span>检测项目明细</span>
                <span class="f-s-14">（共{{itemsInfo?.length}}项, 合计{{ totalCountPrice }}元）</span>
            </div>
            <vxe-table ref="tableRightRef" border :data="itemsInfo" :column-config="{ resizable: true }">
                <vxe-column type="seq" width="60" title="序号" align="center" />
                <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
                <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100" :formatter="colNoData" />
                <vxe-column title="备注" align="center" field="description" min-width="100" :formatter="colNoData" />
            </vxe-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';

import NP from 'number-precision';
import { colNoData } from '@/utils/noData';
import { debounce } from 'lodash';
import { getTestPackage, getTestPackageItems } from '@/api/cdt/menus';
const props = defineProps({
    info: propTypes.any.def({})
});
const { query }: any = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_package_type, dm_permit_type, vip_level } = toRefs<any>(proxy?.useDict('dm_package_type', 'dm_permit_type', 'vip_level'));
const router = useRouter();
const form = ref<any>({
   items: [],
   priceDetail: [],
   permitCpys: [],
});
const getDetail = async () => {
    proxy?.$modal.loading('加载中...');
    const res = await getTestPackage(props?.info?.packageId).finally(() => {
        proxy?.$modal.closeLoading();
    });
    if (!res || res.code !== 200) return;
    console.log(res);
    form.value = {
        ...res.data
    };
};
const itemsInfo = ref<any>([]);
const getItems = async () => {
    const res = await getTestPackageItems({
        pageNum: 1,
        pageSize: 1000,
        packageId: props?.info?.packageId
    });
    if (!res || res.code !== 200) return;
    itemsInfo.value = res.rows;
};
// 合计价格
const totalCountPrice = computed(() => {
    return itemsInfo.value.reduce((total: number, item: any) => {
        return NP.plus(total, item.price);
    }, 0);
});
onMounted(() => {
    getDetail()
    getItems()
});
</script>