<script lang="ts" setup>
|
import type { MesPdArchiveApi } from '#/api/mes/pd/archive';
|
|
import { ref, watch } from 'vue';
|
|
import { Modal, Descriptions, Table, Tabs, Spin, message } from 'ant-design-vue';
|
|
import { getPdArchiveDetailByProduct } from '#/api/mes/pd/archive';
|
import { FilePreviewModal, useFilePreview } from '#/components/file-preview';
|
import { DICT_TYPE } from '#/packages/constants/src';
|
import { getDictOptions } from '#/packages/effects/hooks/src';
|
|
import { getPdDocumentTypeOptions } from '../../project/data';
|
|
interface Props {
|
visible: boolean;
|
productCode?: string;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
productCode: '',
|
});
|
|
interface Emits {
|
(e: 'update:visible', value: boolean): void;
|
}
|
|
const emit = defineEmits<Emits>();
|
|
const open = ref(false);
|
const loading = ref(false);
|
const detailList = ref<MesPdArchiveApi.DetailItem[]>([]);
|
const activeProject = ref('0');
|
|
const { openPreview, previewState } = useFilePreview();
|
|
/** 资料类型中文名：复用项目资料列表的同一份映射（getPdDocumentTypeOptions），避免两处维护 */
|
function documentTypeText(value?: string) {
|
if (!value) return '-';
|
return (
|
getPdDocumentTypeOptions().find((item) => item.value === value)?.label ??
|
String(value)
|
);
|
}
|
|
/** 归档状态中文名：字典 mes_pd_archive_status */
|
function archiveStatusText(value?: number) {
|
if (value === undefined || value === null || value === '') return '-';
|
return (
|
getDictOptions(DICT_TYPE.MES_PD_ARCHIVE_STATUS, 'number').find(
|
(item) => Number(item.value) === Number(value),
|
)?.label ?? String(value)
|
);
|
}
|
|
const archiveColumns = [
|
{ title: '归档编号', dataIndex: 'archiveCode', key: 'archiveCode' },
|
{ title: '归档人', dataIndex: 'archiverNickname', key: 'archiverNickname' },
|
{
|
title: '归档状态',
|
dataIndex: 'archiveStatus',
|
key: 'archiveStatus',
|
customRender: ({ text }: { text: number }) => archiveStatusText(text),
|
},
|
{ title: '归档时间', dataIndex: 'archiveTime', key: 'archiveTime' },
|
{ title: '备注', dataIndex: 'remark', key: 'remark', ellipsis: true },
|
];
|
|
const documentColumns = [
|
{ title: '资料名称', dataIndex: 'documentName', key: 'documentName' },
|
{
|
title: '资料类型',
|
dataIndex: 'documentType',
|
key: 'documentType',
|
customRender: ({ text }: { text: string }) => documentTypeText(text),
|
},
|
{ title: '版本', dataIndex: 'documentVersion', key: 'documentVersion', width: 80 },
|
{ title: '文件名', dataIndex: 'fileName', key: 'fileName' },
|
{ title: '上传人', dataIndex: 'uploadUserNickname', key: 'uploadUserNickname' },
|
{ title: '上传时间', dataIndex: 'uploadTime', key: 'uploadTime' },
|
{
|
title: '操作',
|
key: 'action',
|
width: 120,
|
},
|
];
|
|
watch(() => props.visible, async (newVal) => {
|
if (newVal && props.productCode) {
|
loadData(props.productCode);
|
} else if (!newVal) {
|
open.value = false;
|
detailList.value = [];
|
}
|
});
|
|
async function loadData(code: string) {
|
open.value = true;
|
loading.value = true;
|
detailList.value = [];
|
activeProject.value = '0';
|
try {
|
detailList.value = await getPdArchiveDetailByProduct(code);
|
} catch {
|
message.error('获取归档详情失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function openModal(code: string) {
|
loadData(code);
|
}
|
|
defineExpose({ open: openModal });
|
|
function handleClose() {
|
emit('update:visible', false);
|
}
|
</script>
|
|
<template>
|
<FilePreviewModal v-bind="previewState" />
|
<Modal v-model:open="open" title="归档详情" width="80%" :footer="null" @cancel="handleClose">
|
<div v-if="loading" class="flex justify-center py-8">
|
<Spin />
|
</div>
|
<template v-else>
|
<Tabs v-if="detailList.length > 0" v-model:active-key="activeProject" type="card">
|
<Tabs.TabPane
|
v-for="(detail, index) in detailList"
|
:key="String(index)"
|
:tab="detail.project.taskName || '项目'"
|
>
|
<!-- 项目信息 -->
|
<Descriptions :column="3" bordered size="small" class="mb-4">
|
<Descriptions.Item label="任务编码">{{ detail.project.taskCode }}</Descriptions.Item>
|
<Descriptions.Item label="任务名称">{{ detail.project.taskName }}</Descriptions.Item>
|
<Descriptions.Item label="产品编码">{{ detail.project.productCode }}</Descriptions.Item>
|
<Descriptions.Item label="产品名称">{{ detail.project.productName }}</Descriptions.Item>
|
<Descriptions.Item label="版本号">{{ detail.project.version }}</Descriptions.Item>
|
<Descriptions.Item label="主设计师">{{ detail.project.chiefDesignerNickname }}</Descriptions.Item>
|
<Descriptions.Item label="审核人">{{ detail.project.reviewerNickname }}</Descriptions.Item>
|
<Descriptions.Item label="计划完成">{{ detail.project.planFinishTime }}</Descriptions.Item>
|
</Descriptions>
|
|
<!-- 归档记录 -->
|
<div class="mb-4">
|
<h4 class="mb-2 text-sm font-medium">归档记录</h4>
|
<Table
|
:columns="archiveColumns"
|
:data-source="detail.archives"
|
:pagination="false"
|
bordered
|
row-key="id"
|
size="small"
|
/>
|
</div>
|
|
<!-- 设计资料 -->
|
<div>
|
<h4 class="mb-2 text-sm font-medium">设计资料</h4>
|
<Table
|
:columns="documentColumns"
|
:data-source="detail.documents"
|
:pagination="false"
|
bordered
|
row-key="id"
|
size="small"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'action'">
|
<template v-if="record.fileUrl">
|
<a class="mr-2" @click="openPreview(record.fileUrl, record.fileName)">预览</a>
|
<a :href="record.fileUrl" target="_blank">下载</a>
|
</template>
|
<span v-else class="text-gray-400">-</span>
|
</template>
|
</template>
|
</Table>
|
</div>
|
</Tabs.TabPane>
|
</Tabs>
|
<div v-else class="py-8 text-center text-gray-400">
|
暂无归档记录
|
</div>
|
</template>
|
</Modal>
|
</template>
|
