From 473a0d901796823d811218ebfe60018c09290ddd Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Feb 2026 12:35:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E7=A7=BB=E9=99=A4=E4=B8=8D?=
 =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E5=AD=97=E6=AE=B5=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=B5=81=E8=BD=AC=E5=8D=A1=E5=92=8C=E5=B7=A5=E5=BA=8F?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=9A=84=E6=A0=A1=E9=AA=8C=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=BA=8F=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/pro/task/index.ts              |   5 +
 src/views/mes/pro/card/CardForm.vue        |  36 +--
 src/views/mes/pro/card/CardProcessList.vue | 253 +++++++++++++++++++++
 src/views/mes/pro/card/index.vue           |  13 +-
 4 files changed, 277 insertions(+), 30 deletions(-)
 create mode 100644 src/views/mes/pro/card/CardProcessList.vue

diff --git a/src/api/mes/pro/task/index.ts b/src/api/mes/pro/task/index.ts
index 6b405bbbf..2a3cc5a84 100644
--- a/src/api/mes/pro/task/index.ts
+++ b/src/api/mes/pro/task/index.ts
@@ -67,5 +67,10 @@ export const ProTaskApi = {
   // 导出生产任务 Excel
   exportTask: async (params: any) => {
     return await request.download({ url: `/mes/pro/task/export-excel`, params })
+  },
+
+  // 获得任务精简列表（下拉选项）
+  getTaskSimpleList: async (workOrderId?: number) => {
+    return await request.get({ url: `/mes/pro/task/simple-list`, params: { workOrderId } })
   }
 }
diff --git a/src/views/mes/pro/card/CardForm.vue b/src/views/mes/pro/card/CardForm.vue
index e39887e32..1461511ce 100644
--- a/src/views/mes/pro/card/CardForm.vue
+++ b/src/views/mes/pro/card/CardForm.vue
@@ -22,13 +22,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="生产工单" prop="workOrderId">
-            <el-input-number
-              v-model="formData.workOrderId"
-              placeholder="请输入工单编号"
-              class="!w-1/1"
-              :disabled="isDetail"
-            />
-            <!-- TODO @芋艿：替换为 WorkOrderSelect 组件（工单选择器） -->
+            <ProWorkOrderSelect v-model="formData.workOrderId" :disabled="isDetail" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -66,11 +60,7 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="规格型号" prop="specification">
-            <el-input
-              v-model="formData.specification"
-              placeholder="请输入规格型号"
-              :disabled="isDetail"
-            />
+            <el-input v-model="formData.specification" placeholder="选择产品后自动填充" disabled />
           </el-form-item>
         </el-col>
         <el-col :span="8" v-if="formType !== 'create'">
@@ -95,11 +85,7 @@
     <!-- 工序记录子表：编辑/详情时显示 -->
     <el-tabs v-if="formType !== 'create'" v-model="activeTab" class="mt-15px">
       <el-tab-pane label="工序记录" name="process">
-        <CardProcessList
-          v-if="formData.id"
-          :card-id="formData.id"
-          :disabled="isDetail"
-        />
+        <CardProcessList v-if="formData.id" :card-id="formData.id" :disabled="isDetail" />
       </el-tab-pane>
     </el-tabs>
     <template #footer v-if="!isDetail">
@@ -115,6 +101,7 @@ import { ProCardApi, ProCardVO } from '@/api/mes/pro/card'
 import { MdItemVO } from '@/api/mes/md/item'
 import { generateRandomStr } from '@/utils'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 import CardProcessList from './CardProcessList.vue'
 
 defineOptions({ name: 'CardForm' })
@@ -133,8 +120,8 @@ const formData = ref({
   workOrderId: undefined,
   batchCode: undefined,
   itemId: undefined,
-  specification: undefined,
-  unitMeasureId: undefined,
+  // TODO @AI：specification 不用展示；
+  specification: undefined, // 仅展示，不存储（从 item 获取）
   barcodeUrl: undefined,
   transferedQuantity: undefined,
   status: undefined,
@@ -176,15 +163,9 @@ const open = async (type: string, id?: number) => {
 
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-/** 产品变更：自动填充单位和规格 */
-// TODO @AI：这 2 个字段，不用存储，通过 item 查询即可。
+/** 产品变更：自动填充规格型号（仅展示） */
 const handleItemChange = (item: MdItemVO) => {
-  if (item?.unitMeasureId) {
-    formData.value.unitMeasureId = item.unitMeasureId
-  }
-  if (item?.specification) {
-    formData.value.specification = item.specification
-  }
+  formData.value.specification = item?.specification
 }
 
 /** 提交表单 */
@@ -217,7 +198,6 @@ const resetForm = () => {
     batchCode: undefined,
     itemId: undefined,
     specification: undefined,
-    unitMeasureId: undefined,
     barcodeUrl: undefined,
     transferedQuantity: undefined,
     status: undefined,
diff --git a/src/views/mes/pro/card/CardProcessList.vue b/src/views/mes/pro/card/CardProcessList.vue
new file mode 100644
index 000000000..e6c17375d
--- /dev/null
+++ b/src/views/mes/pro/card/CardProcessList.vue
@@ -0,0 +1,253 @@
+<!-- MES 流转卡工序记录列表子组件 -->
+<template>
+  <div>
+    <!-- 操作按钮 -->
+    <div class="mb-10px" v-if="!disabled">
+      <el-button type="primary" plain @click="openProcessForm('create')">
+        <Icon icon="ep:plus" class="mr-5px" /> 新增
+      </el-button>
+    </div>
+
+    <!-- 工序记录列表 -->
+    <el-table v-loading="loading" :data="processList" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="序号" align="center" prop="sort" width="60" />
+      <el-table-column label="工序编码" align="center" prop="processCode" width="120" />
+      <el-table-column label="工序名称" align="center" prop="processName" min-width="120" />
+      <el-table-column label="进入工序时间" align="center" prop="inputTime" :formatter="dateFormatter" width="180" />
+      <el-table-column label="出工序时间" align="center" prop="outputTime" :formatter="dateFormatter" width="180" />
+      <el-table-column label="投入数量" align="center" prop="inputQuantity" width="100" />
+      <el-table-column label="产出数量" align="center" prop="outputQuantity" width="100" />
+      <el-table-column label="不合格数量" align="center" prop="unqualifiedQuantity" width="100" />
+      <el-table-column label="工位编码" align="center" prop="workstationCode" width="120" />
+      <el-table-column label="工位名称" align="center" prop="workstationName" min-width="120" />
+      <el-table-column label="操作人" align="center" prop="nickname" width="100" />
+      <el-table-column label="操作" align="center" width="160" v-if="!disabled">
+        <template #default="scope">
+          <el-button link type="primary" @click="openProcessForm('update', scope.row)">编辑</el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="processTotal"
+      v-model:page="processQueryParams.pageNo"
+      v-model:limit="processQueryParams.pageSize"
+      @pagination="getProcessList"
+    />
+
+    <!-- 工序记录编辑弹窗（内联） -->
+    <Dialog :title="processDialogTitle" v-model="processDialogVisible" width="960px">
+      <el-form
+        ref="processFormRef"
+        :model="processFormData"
+        :rules="processFormRules"
+        label-width="120px"
+        v-loading="processFormLoading"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="序号" prop="sort">
+              <el-input-number v-model="processFormData.sort" :min="0" class="!w-1/1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工序" prop="processId">
+              <ProProcessSelect v-model="processFormData.processId" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="进入工序时间" prop="inputTime">
+              <el-date-picker
+                v-model="processFormData.inputTime"
+                type="datetime"
+                placeholder="请选择时间"
+                value-format="x"
+                class="!w-1/1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="出工序时间" prop="outputTime">
+              <el-date-picker
+                v-model="processFormData.outputTime"
+                type="datetime"
+                placeholder="请选择时间"
+                value-format="x"
+                class="!w-1/1"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="投入数量" prop="inputQuantity">
+              <el-input-number v-model="processFormData.inputQuantity" :min="0" :precision="2" class="!w-1/1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产出数量" prop="outputQuantity">
+              <el-input-number v-model="processFormData.outputQuantity" :min="0" :precision="2" class="!w-1/1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="不合格数量" prop="unqualifiedQuantity">
+              <el-input-number v-model="processFormData.unqualifiedQuantity" :min="0" :precision="2" class="!w-1/1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="工位" prop="workstationId">
+              <MdWorkstationSelect v-model="processFormData.workstationId" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input type="textarea" v-model="processFormData.remark" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button @click="submitProcessForm" type="primary" :disabled="processFormLoading">确 定</el-button>
+        <el-button @click="processDialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import { ProCardProcessApi, ProCardProcessVO } from '@/api/mes/pro/card/process'
+import ProProcessSelect from '@/views/mes/pro/process/components/ProProcessSelect.vue'
+import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
+
+defineOptions({ name: 'CardProcessList' })
+
+const props = defineProps<{
+  cardId: number
+  disabled?: boolean
+}>()
+
+const message = useMessage()
+const { t } = useI18n()
+
+// ==================== 工序记录列表 ====================
+const loading = ref(false)
+const processList = ref<ProCardProcessVO[]>([])
+const processTotal = ref(0)
+const processQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  cardId: undefined as number | undefined
+})
+
+/** 查询工序记录列表 */
+const getProcessList = async () => {
+  loading.value = true
+  try {
+    processQueryParams.cardId = props.cardId
+    const data = await ProCardProcessApi.getCardProcessPage(processQueryParams)
+    processList.value = data.list
+    processTotal.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 删除工序记录 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await ProCardProcessApi.deleteCardProcess(id)
+    message.success(t('common.delSuccess'))
+    await getProcessList()
+  } catch {}
+}
+
+// ==================== 工序记录编辑表单（内联） ====================
+const processDialogVisible = ref(false)
+const processDialogTitle = ref('')
+const processFormLoading = ref(false)
+const processFormRef = ref()
+const processFormData = ref({
+  id: undefined as number | undefined,
+  cardId: undefined as number | undefined,
+  sort: undefined as number | undefined,
+  processId: undefined as number | undefined,
+  inputTime: undefined as any,
+  outputTime: undefined as any,
+  inputQuantity: undefined as number | undefined,
+  outputQuantity: undefined as number | undefined,
+  unqualifiedQuantity: undefined as number | undefined,
+  workstationId: undefined as number | undefined,
+  remark: undefined as string | undefined
+})
+const processFormRules = reactive({})
+
+/** 打开工序记录表单 */
+const openProcessForm = (type: string, row?: any) => {
+  processDialogVisible.value = true
+  processDialogTitle.value = type === 'create' ? '新增工序记录' : '编辑工序记录'
+  if (type === 'create') {
+    processFormData.value = {
+      id: undefined,
+      cardId: props.cardId,
+      sort: undefined,
+      processId: undefined,
+      inputTime: undefined,
+      outputTime: undefined,
+      inputQuantity: undefined,
+      outputQuantity: undefined,
+      unqualifiedQuantity: undefined,
+      workstationId: undefined,
+      remark: undefined
+    }
+  } else {
+    processFormData.value = {
+      id: row.id,
+      cardId: row.cardId,
+      sort: row.sort,
+      processId: row.processId,
+      inputTime: row.inputTime,
+      outputTime: row.outputTime,
+      inputQuantity: row.inputQuantity,
+      outputQuantity: row.outputQuantity,
+      unqualifiedQuantity: row.unqualifiedQuantity,
+      workstationId: row.workstationId,
+      remark: row.remark
+    }
+  }
+  processFormRef.value?.resetFields()
+}
+
+/** 提交表单 */
+const submitProcessForm = async () => {
+  await processFormRef.value.validate()
+  processFormLoading.value = true
+  try {
+    const data = processFormData.value as unknown as ProCardProcessVO
+    if (processFormData.value.id) {
+      await ProCardProcessApi.updateCardProcess(data)
+      message.success(t('common.updateSuccess'))
+    } else {
+      await ProCardProcessApi.createCardProcess(data)
+      message.success(t('common.createSuccess'))
+    }
+    processDialogVisible.value = false
+    await getProcessList()
+  } finally {
+    processFormLoading.value = false
+  }
+}
+
+// ==================== 初始化 ====================
+onMounted(async () => {
+  await getProcessList()
+})
+</script>
diff --git a/src/views/mes/pro/card/index.vue b/src/views/mes/pro/card/index.vue
index 770ba4e32..42ec57406 100644
--- a/src/views/mes/pro/card/index.vue
+++ b/src/views/mes/pro/card/index.vue
@@ -18,8 +18,14 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!-- TODO @AI：生产工单编号 select 组件 -->
-      <!-- TODO @AI：批次号 -->
+      <el-form-item label="生产工单" prop="workOrderId">
+        <ProWorkOrderSelect
+          v-model="queryParams.workOrderId"
+          placeholder="请选择工单"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <!-- TODO @芋艿：批次号 -->
       <el-form-item label="产品" prop="itemId">
         <MdItemSelect v-model="queryParams.itemId" placeholder="请选择产品" class="!w-240px" />
       </el-form-item>
@@ -103,6 +109,7 @@
       />
       <el-table-column label="操作" align="center" width="200" fixed="right">
         <template #default="scope">
+          <!-- TODO @AI：状态怎么流转？是不是不用 status？ -->
           <!-- TODO @芋艿：打印 -->
           <el-button
             link
@@ -152,6 +159,7 @@ import { ProCardApi, ProCardVO } from '@/api/mes/pro/card'
 import CardForm from './CardForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 
 defineOptions({ name: 'MesProCard' })
 
@@ -165,6 +173,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   code: undefined,
+  workOrderId: undefined,
   itemId: undefined,
   batchCode: undefined,
   status: undefined,