feat(mes): 新增员工排班明细页面，修复计划排程菜单404

liu

2026-09-17 749cb2f4ad815c5a68c19fe961d5ca2149a84dd4

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

@@ -1,16 +1,37 @@
<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>(), {
  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' },
@@ -30,21 +51,22 @@
  {
    title: '操作',
    key: 'action',
    width: 80,
    width: 120,
  },
];

async function handleOpen(productCode?: string) {
  if (!productCode) {
    message.warning('产品编码为空，无法查看归档');
    return;
  }
/** 打开弹窗并加载指定产品编码的归档详情；编码为空时直接展示空态 */
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(productCode);
    detailList.value = await getPdArchiveDetailByProduct(currentCode.value);
  } catch {
    message.error('获取归档详情失败');
  } finally {
@@ -52,18 +74,42 @@
  }
}

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">
      <a-spin />
      <Spin />
    </div>
    <template v-else>
      <Tabs v-if="detailList.length > 0" v-model:active-key="activeProject" type="card">
@@ -110,7 +156,10 @@
            >
              <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>
@@ -119,7 +168,7 @@
        </Tabs.TabPane>
      </Tabs>
      <div v-else class="py-8 text-center text-gray-400">
        暂无归档记录
        {{ currentCode ? '暂无归档记录' : '该工单未设置产品编码，暂无归档记录' }}
      </div>
    </template>
  </Modal>