gaoluyang
4 天以前 787ccc59ba89bacc075562a161ecf02bc76ebadc
src/views/mes/pd/archive/modules/detail.vue
@@ -1,104 +1,120 @@
<script lang="ts" setup>
import type { MesPdArchiveApi } from '#/api/mes/pd/archive';
import type { MesPdVersionChangeApi } from '#/api/mes/pd/version-change';
import { ref } from 'vue';
import { useVbenModal } from '#/packages/effects/common-ui/src';
import { DICT_TYPE } from '#/packages/constants/src';
import { Alert, Descriptions, Tabs } from 'ant-design-vue';
import { Descriptions, Table, Tabs } from 'ant-design-vue';
import { getPdArchive } from '#/api/mes/pd/archive';
import { getPdArchiveDetailByProduct } from '#/api/mes/pd/archive';
import MaterialPanel from '#/views/mes/pd/project/modules/material-panel.vue';
import VersionChangeList from '#/views/mes/pd/project/modules/version-change/version-change-list.vue';
const loading = ref(false);
const detailList = ref<MesPdArchiveApi.DetailItem[]>([]);
const activeProject = ref('0');
const detail = ref<MesPdArchiveApi.Archive>();
const activeTab = ref('version-change');
const materialVersion = ref<string>();
const materialVersionHint = ref<string>();
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 },
];
function handleViewMaterials(row: MesPdVersionChangeApi.VersionChange) {
  materialVersion.value = row.toVersion;
  materialVersionHint.value = `变更单 ${row.code}:${row.fromVersion} → ${row.toVersion}`;
  activeTab.value = 'material';
}
function clearMaterialVersionFilter() {
  materialVersion.value = detail.value?.version;
  materialVersionHint.value = undefined;
}
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: 80,
  },
];
const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      detail.value = undefined;
      activeTab.value = 'version-change';
      materialVersion.value = undefined;
      materialVersionHint.value = undefined;
      detailList.value = [];
      activeProject.value = '0';
      return;
    }
    const data = modalApi.getData<{ id: number }>();
    modalApi.lock();
    const data = modalApi.getData<{ productCode: number }>();
    loading.value = true;
    try {
      detail.value = await getPdArchive(data.id);
      materialVersion.value = detail.value.version;
      detailList.value = await getPdArchiveDetailByProduct(data.productCode);
      activeProject.value = '0';
    } finally {
      modalApi.unlock();
      loading.value = false;
    }
  },
});
defineExpose({
  open: (id: number) => modalApi.setData({ id }).open(),
  open: (productCode: number) => modalApi.setData({ productCode }).open(),
});
</script>
<template>
  <Modal class="w-4/5" title="归档详情">
    <Descriptions v-if="detail" :column="3" bordered class="mx-4 mb-4" size="small">
      <Descriptions.Item label="归档编号">{{ detail.code }}</Descriptions.Item>
      <Descriptions.Item label="产品编码">{{ detail.productCode }}</Descriptions.Item>
      <Descriptions.Item label="产品名称">{{ detail.productName }}</Descriptions.Item>
      <Descriptions.Item label="设计版本">{{ detail.version }}</Descriptions.Item>
      <Descriptions.Item label="任务编码">{{ detail.projectCode }}</Descriptions.Item>
      <Descriptions.Item label="任务名称">{{ detail.projectName }}</Descriptions.Item>
      <Descriptions.Item label="资料数">{{ detail.documentCount ?? '-' }}</Descriptions.Item>
      <Descriptions.Item label="归档人">{{ detail.archiverName || '-' }}</Descriptions.Item>
      <Descriptions.Item label="归档路径" :span="3">
        {{ detail.storagePath || '-' }}
      </Descriptions.Item>
      <Descriptions.Item label="备注" :span="3">{{ detail.remark || '-' }}</Descriptions.Item>
    </Descriptions>
  <Modal class="w-4/5" title="归档详情" :loading="loading">
    <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>
    <template v-if="detail?.projectId">
      <Tabs v-model:active-key="activeTab" class="mx-4">
        <Tabs.TabPane key="version-change" tab="版本变更记录">
          <VersionChangeList
            form-type="detail"
            :project-id="detail.projectId"
            :project-version="detail.version"
            @view-materials="handleViewMaterials"
        <!-- 归档记录 -->
        <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"
          />
        </Tabs.TabPane>
        <Tabs.TabPane key="material" tab="版本资料">
          <Alert
            v-if="materialVersionHint"
            class="mb-3"
            closable
            show-icon
            type="info"
            :message="`正在查看 ${materialVersion} 版本资料(${materialVersionHint})`"
            @close="clearMaterialVersionFilter"
          />
          <MaterialPanel
            form-type="detail"
            :project-id="detail.projectId"
            table-title="版本资料"
            :version="materialVersion"
          />
        </Tabs.TabPane>
      </Tabs>
    </template>
        </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'">
                <a v-if="record.fileUrl" :href="record.fileUrl" target="_blank" class="text-primary">下载</a>
                <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>
  </Modal>
</template>