归档台账（按产品聚合）前端对接文档

涉及页面

• 归档台账列表页（修改）
• 归档台账详情弹窗/页面（新增）

API

1. 分页查询（按项目/产品聚合）

请求参数：

响应结构：

{
  "code": 200,
  "data": {
    "list": [
      {
        "id": 3,
        "archiveCode": "ARC20240003",
        "projectId": 1,
        "taskCode": "PD20240001",
        "taskName": "新产品设计任务",
        "productCode": "P001",
        "productName": "注塑产品A",
        "archiveCount": 3,
        "archiver": 1,
        "archiverNickname": "王五",
        "archiveStatus": 1,
        "archiveTime": "2024-01-03 10:00:00",
        "remark": "",
        "createTime": "2024-01-01 00:00:00",
        "updater": "1",
        "updaterNickname": "张三",
        "updateTime": "2024-01-03 15:30:00"
      }
    ],
    "total": 5
  }
}

字段说明：

2. 详情查询（按产品编码）

请求参数：

响应结构：

返回 List<MesPdArchiveDetailRespVO>，同一产品编码可能关联多个设计项目，每个项目一条详情。

{
  "code": 200,
  "data": [
    {
      "project": {
        "id": 1,
        "taskCode": "PD20240001",
        "taskName": "新产品设计任务",
        "productCode": "P001",
        "productName": "注塑产品A",
        "version": "V1.0",
        "status": 4,
        "chiefDesigner": 1,
        "chiefDesignerNickname": "张三",
        "reviewer": 2,
        "reviewerNickname": "李四",
        "planFinishTime": "2024-12-31 00:00:00",
        "remark": "",
        "createTime": "2024-01-01 00:00:00"
      },
      "archives": [
        {
          "id": 1,
          "archiveCode": "ARC20240001",
          "archiver": 1,
          "archiverNickname": "王五",
          "archiveStatus": 1,
          "archiveTime": "2024-01-01 10:00:00",
          "remark": "",
          "createTime": "2024-01-01 10:00:00"
        },
        {
          "id": 2,
          "archiveCode": "ARC20240002",
          "archiver": 1,
          "archiverNickname": "王五",
          "archiveStatus": 1,
          "archiveTime": "2024-01-02 10:00:00",
          "remark": "",
          "createTime": "2024-01-02 10:00:00"
        }
      ],
      "documents": [
        {
          "id": 1,
          "documentType": "1",
          "documentName": "产品设计图",
          "documentVersion": "V1.0",
          "fileName": "design.pdf",
          "fileUrl": "/files/design.pdf",
          "uploadUserId": 1,
          "uploadUserNickname": "赵六",
          "uploadTime": "2024-01-01 09:00:00",
          "remark": "",
          "createTime": "2024-01-01 09:00:00"
        }
      ]
    }
  ]
}

ProjectInfo 字段说明：

ArchiveInfo 字段说明：

DocumentInfo 字段说明：

前端修改点

1. 列表页 - 搜索栏新增

<el-form :model="queryParams" ref="queryFormRef" :inline="true">
  <el-form-item label="产品编码" prop="productCode">
    <el-input v-model="queryParams.productCode" placeholder="请输入产品编码" clearable />
  </el-form-item>
  <el-form-item label="产品名称" prop="productName">
    <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable />
  </el-form-item>
  <el-form-item label="归档状态" prop="archiveStatus">
    <el-select v-model="queryParams.archiveStatus" placeholder="请选择归档状态" clearable>
      <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MES_PD_ARCHIVE_STATUS)"
        :key="dict.value" :label="dict.label" :value="dict.value" />
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
    <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
  </el-form-item>
</el-form>

2. 列表页 - 表格新增列

<el-table v-loading="loading" :data="list">
  <el-table-column label="产品编码" align="center" prop="productCode" />
  <el-table-column label="产品名称" align="center" prop="productName" />
  <el-table-column label="归档数量" align="center" prop="archiveCount" width="100" />
  <el-table-column label="更新人" align="center" prop="updaterNickname" />
  <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
  <el-table-column label="操作" align="center" width="100">
    <template #default="scope">
      <el-button link type="primary" @click="handleDetail(scope.row.productCode)"
        v-hasPermi="['mes:pd-archive:query']">详情</el-button>
    </template>
  </el-table-column>
</el-table>

3. 详情弹窗/页面 - 新增

<!-- 按产品编码可能返回多个项目，用 tab 或手风琴展示 -->
<el-tabs v-model="activeProject" type="border-card">
  <el-tab-pane v-for="(detail, index) in detailList" :key="detail.project.id"
    :label="detail.project.taskName" :name="String(index)">

    <!-- 项目信息 -->
    <el-descriptions :column="3" border>
      <el-descriptions-item label="任务编码">{{ detail.project.taskCode }}</el-descriptions-item>
      <el-descriptions-item label="任务名称">{{ detail.project.taskName }}</el-descriptions-item>
      <el-descriptions-item label="产品编码">{{ detail.project.productCode }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{ detail.project.productName }}</el-descriptions-item>
      <el-descriptions-item label="版本号">{{ detail.project.version }}</el-descriptions-item>
      <el-descriptions-item label="主设计师">{{ detail.project.chiefDesignerNickname }}</el-descriptions-item>
      <el-descriptions-item label="审核人">{{ detail.project.reviewerNickname }}</el-descriptions-item>
      <el-descriptions-item label="计划完成时间">{{ detail.project.planFinishTime }}</el-descriptions-item>
    </el-descriptions>

    <!-- 归档记录列表 -->
    <el-card header="归档记录" style="margin-top: 16px">
      <el-table :data="detail.archives" border>
        <el-table-column label="归档编号" prop="archiveCode" />
        <el-table-column label="归档人" prop="archiverNickname" />
        <el-table-column label="归档状态" prop="archiveStatus">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.MES_PD_ARCHIVE_STATUS" :value="scope.row.archiveStatus" />
          </template>
        </el-table-column>
        <el-table-column label="归档时间" prop="archiveTime" width="180" />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
      </el-table>
    </el-card>

    <!-- 设计资料列表 -->
    <el-card header="设计资料" style="margin-top: 16px">
      <el-table :data="detail.documents" border>
        <el-table-column label="资料名称" prop="documentName" />
        <el-table-column label="资料类型" prop="documentType">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.MES_PD_DOCUMENT_TYPE" :value="scope.row.documentType" />
          </template>
        </el-table-column>
        <el-table-column label="版本" prop="documentVersion" width="80" />
        <el-table-column label="文件名" prop="fileName" />
        <el-table-column label="上传人" prop="uploadUserNickname" />
        <el-table-column label="上传时间" prop="uploadTime" width="180" />
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button v-if="scope.row.fileUrl" link type="primary" @click="handleDownload(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </el-tab-pane>
</el-tabs>

4. API 接口定义

文件路径：src/api/mes/pd/archive/index.ts

import request from '@/config/axios'

// 获得归档台账分页（按项目/产品聚合）
export const getArchivePage = (params) => {
  return request.get({ url: '/mes/pd/archive/page', params })
}

// 获得归档台账详情（按产品编码）
export const getArchiveDetailByProduct = (productCode: string) => {
  return request.get({ url: '/mes/pd/archive/detail-by-product', params: { productCode } })
}

// 创建归档台账
export const createArchive = (data) => {
  return request.post({ url: '/mes/pd/archive/create', data })
}

// 更新归档台账
export const updateArchive = (data) => {
  return request.put({ url: '/mes/pd/archive/update', data })
}

// 删除归档台账
export const deleteArchive = (id: number) => {
  return request.delete({ url: '/mes/pd/archive/delete?id=' + id })
}

// 获得归档台账
export const getArchive = (id: number) => {
  return request.get({ url: '/mes/pd/archive/get?id=' + id })
}

// 导出归档台账 Excel
export const exportArchiveExcel = (params) => {
  return request.download({ url: '/mes/pd/archive/export-excel', params })
}

5. data 数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  archiveCode: undefined,
  projectId: undefined,
  archiveStatus: undefined,
  productCode: undefined,
  productName: undefined,
})

const detailList = ref([])
const detailVisible = ref(false)
const activeProject = ref('0')

6. 方法

// 查看详情（按产品编码）
const handleDetail = async (productCode) => {
  const res = await ArchiveApi.getArchiveDetailByProduct(productCode)
  detailList.value = res
  activeProject.value = '0'
  detailVisible.value = true
}

注意事项

• 分页聚合逻辑：/page 接口按 project_id 分组，每组取最新一条归档记录（MAX(id)），所以 updater 和 updateTime 是该组最新归档的更新信息
• 详情接口参数变化：从 projectId 改为 productCode，因为前端列表展示的是产品维度，点击详情时传产品编码更自然
• 详情返回列表：detail-by-product 返回 List，因为同一产品编码可能关联多个设计项目（如不同版本），前端用 tab 切换展示
• 字典类型：
• 归档状态：mes_pd_archive_status（0=待归档 1=已归档）
• 项目状态：mes_pd_project_status（0=待发布 1=待上传 2=待审核 3=待归档 4=已归档）
• 资料类型：mes_pd_document_type