<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';
|
|
interface Props {
|
visible?: boolean;
|
productCode?: string;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
visible: false,
|
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');
|
/** 当前查看的产品编码（命令式 open(code) 传入或取自 prop） */
|
const currentCode = ref('');
|
|
const { openPreview, previewState } = useFilePreview();
|
|
const archiveColumns = [
|
{ title: '归档编号', dataIndex: 'archiveCode', key: 'archiveCode' },
|
{ title: '归档人', dataIndex: 'archiverNickname', key: 'archiverNickname' },
|
{ title: '归档状态', dataIndex: 'archiveStatus', key: 'archiveStatus' },
|
{ title: '归档时间', dataIndex: 'archiveTime', key: 'archiveTime' },
|
{ title: '备注', dataIndex: 'remark', key: 'remark', ellipsis: true },
|
];
|
|
const documentColumns = [
|
{ title: '资料名称', dataIndex: 'documentName', key: 'documentName' },
|
{ title: '资料类型', dataIndex: 'documentType', key: 'documentType' },
|
{ 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,
|
},
|
];
|
|
/** 打开弹窗并加载指定产品编码的归档详情；编码为空时直接展示空态 */
|
async function showDetail(code: string) {
|
currentCode.value = code || '';
|
open.value = true;
|
detailList.value = [];
|
activeProject.value = '0';
|
if (!currentCode.value) {
|
return;
|
}
|
loading.value = true;
|
try {
|
detailList.value = await getPdArchiveDetailByProduct(currentCode.value);
|
} catch {
|
message.error('获取归档详情失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
watch(
|
() => props.visible,
|
(newVal) => {
|
if (newVal) {
|
// 即使产品编码为空也打开弹窗（展示空态），避免父组件 visible 卡在 true 后再也无法触发
|
showDetail(props.productCode || '');
|
} else {
|
open.value = false;
|
detailList.value = [];
|
}
|
},
|
);
|
|
function handleClose() {
|
open.value = false;
|
detailList.value = [];
|
emit('update:visible', false);
|
}
|
|
/** 兼容命令式调用：archiveDetailRef.value?.open(productCode) */
|
function handleOpen(code?: string) {
|
showDetail(code ?? props.productCode ?? '');
|
}
|
|
defineExpose({ open: handleOpen });
|
</script>
|
|
<template>
|
<FilePreviewModal
|
:visible="previewState.visible.value"
|
:file-url="previewState.fileUrl.value"
|
:file-name="previewState.fileName.value"
|
/>
|
<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">
|
{{ currentCode ? '暂无归档记录' : '该工单未设置产品编码，暂无归档记录' }}
|
</div>
|
</template>
|
</Modal>
|
</template>
|
