| | |
| | | <script lang="ts" setup> |
| | | import type { MesPdArchiveApi } from '#/api/mes/pd/archive'; |
| | | |
| | | import { ref } from 'vue'; |
| | | import { ref, watch } from 'vue'; |
| | | |
| | | import { Modal, Descriptions, Table, Tabs, message } from 'ant-design-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>(), { |
| | | 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(); |
| | | |
| | | const archiveColumns = [ |
| | | { title: '归档编号', dataIndex: 'archiveCode', key: 'archiveCode' }, |
| | |
| | | { |
| | | title: '操作', |
| | | key: 'action', |
| | | width: 80, |
| | | width: 120, |
| | | }, |
| | | ]; |
| | | |
| | | async function handleOpen(productCode?: string) { |
| | | if (!productCode) { |
| | | message.warning('产品编码为空,无法查看归档'); |
| | | return; |
| | | watch(() => props.visible, async (newVal) => { |
| | | if (newVal && props.productCode) { |
| | | open.value = true; |
| | | loading.value = true; |
| | | detailList.value = []; |
| | | activeProject.value = '0'; |
| | | try { |
| | | detailList.value = await getPdArchiveDetailByProduct(props.productCode); |
| | | } catch { |
| | | message.error('获取归档详情失败'); |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | } else if (!newVal) { |
| | | open.value = false; |
| | | detailList.value = []; |
| | | } |
| | | open.value = true; |
| | | detailList.value = []; |
| | | activeProject.value = '0'; |
| | | loading.value = true; |
| | | try { |
| | | detailList.value = await getPdArchiveDetailByProduct(productCode); |
| | | } catch { |
| | | message.error('获取归档详情失败'); |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | } |
| | | }); |
| | | |
| | | function handleClose() { |
| | | open.value = false; |
| | | detailList.value = []; |
| | | emit('update:visible', false); |
| | | } |
| | | |
| | | defineExpose({ open: handleOpen }); |
| | | </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"> |
| | | <a-spin /> |
| | | <Spin /> |
| | | </div> |
| | | <template v-else> |
| | | <Tabs v-if="detailList.length > 0" v-model:active-key="activeProject" type="card"> |
| | |
| | | > |
| | | <template #bodyCell="{ column, record }"> |
| | | <template v-if="column.key === 'action'"> |
| | | <a v-if="record.fileUrl" :href="record.fileUrl" target="_blank" class="text-primary">下载</a> |
| | | <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> |