物料管理/物料分类/计量单位增加 Excel 导入功能

liu

5 天以前 08b86cccfc8227ab065ee913f809609ef708486d

 src/views/mes/pd/archive/modules/detail.vue

@@ -1,18 +1,34 @@
<script lang="ts" setup>
import type { MesPdArchiveApi } from '#/api/mes/pd/archive';

import { ref } from 'vue';
import { ref, watch } from 'vue';

import { useVbenModal } from '#/packages/effects/common-ui/src';
import { DICT_TYPE } from '#/packages/constants/src';

import { Descriptions, Table, Tabs } 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' },
@@ -32,89 +48,99 @@
  {
    title: '操作',
    key: 'action',
    width: 80,
    width: 120,
  },
];

const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      detailList.value = [];
      activeProject.value = '0';
      return;
    }
    const data = modalApi.getData<{ productCode: number }>();
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(data.productCode);
      activeProject.value = '0';
      detailList.value = await getPdArchiveDetailByProduct(props.productCode);
    } catch {
      message.error('获取归档详情失败');
    } finally {
      loading.value = false;
    }
  },
  } else if (!newVal) {
    open.value = false;
    detailList.value = [];
  }
});

defineExpose({
  open: (productCode: number) => modalApi.setData({ productCode }).open(),
});
function handleClose() {
  emit('update:visible', false);
}
</script>

<template>
  <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>

        <!-- 归档记录 -->
        <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'">
                <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">
      暂无归档记录
  <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>