✨ feat(mes): 新增生产流转卡状态管理功能

- 添加状态字段到 MesProCardRespVO 和相关的前端组件 - 实现提交、执行和取消生产流转卡的 API 接口 - 更新 MesProCardService 和 MesProCardServiceImpl 以支持新功能 - 更新前端表单和列表以显示和操作流转卡状态
2026-04-04 20:07:56 +08:00 · 2026-04-04 20:07:56 +08:00 · 0c4ee24dd3
parent 8e91178726
commit 0c4ee24dd3
5 changed files with 192 additions and 52 deletions
--- a/src/api/mes/pro/card/index.ts
+++ b/src/api/mes/pro/card/index.ts
@ -14,6 +14,7 @@ export interface ProCardVO {
  specification: string // 规格型号
  unitMeasureName: string // 单位名称
  transferedQuantity: number // 流转数量
+  status: number // 状态
  remark: string // 备注
 }

@ -49,6 +50,21 @@ export const ProCardApi = {
    return await request.download({ url: `/mes/pro/card/export-excel`, params })
  },

+  // 提交生产流转卡
+  submitCard: async (id: number) => {
+    return await request.put({ url: `/mes/pro/card/submit?id=` + id })
+  },
+
+  // 执行生产流转卡
+  executeCard: async (id: number) => {
+    return await request.put({ url: `/mes/pro/card/execute?id=` + id })
+  },
+
+  // 取消生产流转卡
+  cancelCard: async (id: number) => {
+    return await request.put({ url: `/mes/pro/card/cancel?id=` + id })
+  },
+
  // 获取生产流转卡精简列表
  getCardSimpleList: async () => {
    return await request.get<ProCardVO[]>({ url: `/mes/pro/card/simple-list` })
--- a/src/views/mes/pro/card/CardForm.vue
+++ b/src/views/mes/pro/card/CardForm.vue
@ -7,11 +7,16 @@
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
+      :disabled="isDetail"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="流转卡编码" prop="code">
-            <el-input v-model="formData.code" placeholder="请输入流转卡编码" :disabled="isDetail">
+            <el-input
+              v-model="formData.code"
+              placeholder="请输入流转卡编码"
+              :disabled="isHeaderReadonly"
+            >
              <template #append>
                <el-button @click="generateCode"> 生成 </el-button>
              </template>
@ -20,14 +25,14 @@
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产工单" prop="workOrderId">
-            <ProWorkOrderSelect v-model="formData.workOrderId" :disabled="isDetail" />
+            <ProWorkOrderSelect v-model="formData.workOrderId" :disabled="isHeaderReadonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品" prop="itemId">
-            <MdItemSelect v-model="formData.itemId" :disabled="isDetail" />
+            <MdItemSelect v-model="formData.itemId" :disabled="isHeaderReadonly" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
@ -37,7 +42,7 @@
              :min="0"
              :precision="2"
              class="!w-1/1"
-              :disabled="isDetail"
+              :disabled="isHeaderReadonly"
            />
          </el-form-item>
        </el-col>
@ -46,7 +51,7 @@
            <el-input
              v-model="formData.batchCode"
              placeholder="请输入批次号"
-              :disabled="isDetail"
+              :disabled="isHeaderReadonly"
            />
          </el-form-item>
        </el-col>
@ -58,21 +63,33 @@
              type="textarea"
              v-model="formData.remark"
              placeholder="请输入备注"
-              :disabled="isDetail"
+              :disabled="isHeaderReadonly"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
-    <!-- 工序记录子表：编辑/详情时显示 -->
-    <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" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer v-if="!isDetail">
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+    <!-- 工序记录子表：非新建模式显示 -->
+    <template v-if="formData.id">
+      <el-divider content-position="center">工序记录</el-divider>
+      <CardProcessList :card-id="formData.id" :disabled="!isEditable" />
+    </template>
+    <template #footer>
+      <el-button v-if="isEditable" @click="submitForm" type="primary" :disabled="formLoading">
+        保 存
+      </el-button>
+      <el-button
+        v-if="isEditable && formData.status === MesProCardStatusEnum.PREPARE"
+        @click="handleSubmit"
+        type="warning"
+        :disabled="formLoading"
+      >
+        提 交
+      </el-button>
+      <el-button v-if="isExecute" @click="handleExecute" type="success" :disabled="formLoading">
+        执 行
+      </el-button>
+      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
 </template>
@ -83,25 +100,37 @@ 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'
+import { MesProCardStatusEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'CardForm' })
+const emit = defineEmits(['success'])

-const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中
-const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
-const activeTab = ref('process') // 活跃的 Tab
+const formType = ref<string>('create') // 表单的类型：create / update / execute / detail
+const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
+const isExecute = computed(() => formType.value === 'execute') // 是否为执行模式
+const isDetail = computed(() => ['detail', 'execute'].includes(formType.value)) // 是否为详情模式（表单只读）
+const isHeaderReadonly = computed(() => ['execute', 'detail'].includes(formType.value)) // 头部是否只读
+const dialogTitle = computed(() => {
+  const titles: Record<string, string> = {
+    create: '新增流转卡',
+    update: '编辑流转卡',
+    execute: '执行流转卡',
+    detail: '流转卡详情'
+  }
+  return titles[formType.value] || formType.value
+})
 const formData = ref({
-  id: undefined,
-  code: undefined,
-  workOrderId: undefined,
-  batchCode: undefined,
-  itemId: undefined,
-  transferedQuantity: undefined,
-  remark: undefined
+  id: undefined as number | undefined,
+  code: undefined as string | undefined,
+  workOrderId: undefined as number | undefined,
+  batchCode: undefined as string | undefined,
+  itemId: undefined as number | undefined,
+  transferedQuantity: undefined as number | undefined,
+  status: undefined as number | undefined,
+  remark: undefined as string | undefined
 })
 const formRules = reactive({
  code: [{ required: true, message: '流转卡编码不能为空', trigger: 'blur' }],
@ -110,9 +139,7 @@ const formRules = reactive({
  transferedQuantity: [{ required: true, message: '流转数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-
-/** 是否为详情模式 */
-const isDetail = computed(() => formType.value === 'detail')
+const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查

 /** 生成流转卡编码 */
 const generateCode = () => {
@ -122,11 +149,9 @@ const generateCode = () => {
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
  dialogVisible.value = true
-  dialogTitle.value = type === 'detail' ? '流转卡详情' : t('action.' + type)
  formType.value = type
-  activeTab.value = 'process'
  resetForm()
-  // 修改/详情时，设置数据
+  // 修改/执行/详情时，加载数据
  if (id) {
    formLoading.value = true
    try {
@ -135,26 +160,67 @@ const open = async (type: string, id?: number) => {
      formLoading.value = false
    }
  }
+  // 保存原始数据快照
+  originalFormData.value = JSON.stringify(formData.value)
 }

-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success'])
+/** 提交表单（create/update 模式） */
 const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as ProCardVO
    if (formType.value === 'create') {
-      await ProCardApi.createCard(data)
-      message.success(t('common.createSuccess'))
+      const res = await ProCardApi.createCard(data)
+      message.success('新增成功')
+      // 创建成功后，更新表单数据和状态为编辑模式
+      formData.value.id = res
+      formData.value.status = MesProCardStatusEnum.PREPARE
+      formType.value = 'update'
    } else {
      await ProCardApi.updateCard(data)
-      message.success(t('common.updateSuccess'))
+      message.success('修改成功')
    }
+    // 更新快照
+    originalFormData.value = JSON.stringify(formData.value)
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 提交操作：表单修改过则先保存，再提交 */
+const handleSubmit = async () => {
+  await formRef.value.validate()
+  try {
+    await message.confirm('确认提交该流转卡？【提交后将不能修改】')
+    formLoading.value = true
+    // 1. 表单有修改时，先保存
+    if (JSON.stringify(formData.value) !== originalFormData.value) {
+      const data = formData.value as unknown as ProCardVO
+      await ProCardApi.updateCard(data)
+    }
+    // 2. 提交流转卡
+    await ProCardApi.submitCard(formData.value.id!)
+    message.success('提交成功')
    dialogVisible.value = false
    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 执行流转卡 */
+const handleExecute = async () => {
+  try {
+    await message.confirm('确认执行该流转卡？')
+    formLoading.value = true
+    await ProCardApi.executeCard(formData.value.id!)
+    message.success('执行成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
  } finally {
    formLoading.value = false
  }
@ -169,8 +235,11 @@ const resetForm = () => {
    batchCode: undefined,
    itemId: undefined,
    transferedQuantity: undefined,
+    status: undefined,
    remark: undefined
  }
  formRef.value?.resetFields()
 }
+
+defineExpose({ open })
 </script>
--- a/src/views/mes/pro/card/CardProcessList.vue
+++ b/src/views/mes/pro/card/CardProcessList.vue
@ -133,6 +133,11 @@
              <MdWorkstationSelect v-model="processFormData.workstationId" />
            </el-form-item>
          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作人" prop="userId">
+              <UserSelect v-model="processFormData.userId" />
+            </el-form-item>
+          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
@ -143,9 +148,9 @@
        </el-row>
      </el-form>
      <template #footer>
-        <el-button @click="submitProcessForm" type="primary" :disabled="processFormLoading"
-          >确 定</el-button
-        >
+        <el-button @click="submitProcessForm" type="primary" :disabled="processFormLoading">
+          确 定
+        </el-button>
        <el-button @click="processDialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
@ -157,6 +162,7 @@ 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'
+import UserSelect from '@/views/system/user/components/UserSelect.vue'

 defineOptions({ name: 'CardProcessList' })

@ -201,7 +207,7 @@ const handleDelete = async (id: number) => {
  } catch {}
 }

-// ==================== 工序记录编辑表单（内联） ====================
+// ==================== 工序记录编辑表单 ====================
 const processDialogVisible = ref(false)
 const processDialogTitle = ref('')
 const processFormLoading = ref(false)
@ -217,6 +223,7 @@ const processFormData = ref({
  outputQuantity: undefined as number | undefined,
  unqualifiedQuantity: undefined as number | undefined,
  workstationId: undefined as number | undefined,
+  userId: undefined as number | undefined,
  remark: undefined as string | undefined
 })
 const processFormRules = reactive({})
@ -237,6 +244,7 @@ const openProcessForm = (type: string, row?: any) => {
      outputQuantity: undefined,
      unqualifiedQuantity: undefined,
      workstationId: undefined,
+      userId: undefined,
      remark: undefined
    }
  } else {
@ -251,6 +259,7 @@ const openProcessForm = (type: string, row?: any) => {
      outputQuantity: row.outputQuantity,
      unqualifiedQuantity: row.unqualifiedQuantity,
      workstationId: row.workstationId,
+      userId: row.userId,
      remark: row.remark
    }
  }
--- a/src/views/mes/pro/card/index.vue
+++ b/src/views/mes/pro/card/index.vue
@ -37,7 +37,6 @@
          class="!w-240px"
        />
      </el-form-item>
-      <!-- DONE @AI：前后端都去掉 status、createTime 筛选 -->
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@ -80,14 +79,20 @@
      <el-table-column label="规格型号" align="center" prop="specification" width="120" />
      <el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
      <el-table-column label="流转数量" align="center" prop="transferedQuantity" width="100" />
-      <el-table-column label="操作" align="center" width="160" fixed="right">
+      <el-table-column label="单据状态" align="center" prop="status" min-width="100">
        <template #default="scope">
-          <!-- TODO @芋艿：打印 -->
+          <dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="240" fixed="right">
+        <template #default="scope">
+          <!-- 草稿：编辑、提交、删除 -->
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['mes:pro-card:update']"
+            v-if="scope.row.status === MesProCardStatusEnum.PREPARE"
          >
            编辑
          </el-button>
@ -96,9 +101,29 @@
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['mes:pro-card:delete']"
+            v-if="scope.row.status === MesProCardStatusEnum.PREPARE"
          >
            删除
          </el-button>
+          <!-- 已确认：执行、取消 -->
+          <el-button
+            link
+            type="success"
+            @click="openForm('execute', scope.row.id)"
+            v-hasPermi="['mes:pro-card:update']"
+            v-if="scope.row.status === MesProCardStatusEnum.CONFIRMED"
+          >
+            执行
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleCancel(scope.row.id)"
+            v-hasPermi="['mes:pro-card:update']"
+            v-if="scope.row.status === MesProCardStatusEnum.CONFIRMED"
+          >
+            取消
+          </el-button>
        </template>
      </el-table-column>
    </el-table>
@ -116,11 +141,13 @@
 </template>

 <script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
 import download from '@/utils/download'
 import { ProCardApi, ProCardVO } from '@/api/mes/pro/card'
 import CardForm from './CardForm.vue'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
+import { MesProCardStatusEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'MesProCard' })

@ -130,6 +157,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ProCardVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const exportLoading = ref(false) // 导出的加载中
 const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
@ -139,7 +167,7 @@ const queryParams = reactive({
  batchCode: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const formRef = ref() // 表单弹窗

 /** 查询列表 */
 const getList = async () => {
@ -166,11 +194,20 @@ const resetQuery = () => {
 }

 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
 }

+/** 取消按钮操作 */
+const handleCancel = async (id: number) => {
+  try {
+    await message.confirm('确认取消该流转卡？取消后不可恢复。')
+    await ProCardApi.cancelCard(id)
+    message.success('取消成功')
+    await getList()
+  } catch {}
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
  try {
@ -188,13 +225,14 @@ const handleExport = async () => {
    exportLoading.value = true
    const data = await ProCardApi.exportCard(queryParams)
    download.excel(data, '生产流转卡.xls')
+  } catch {
  } finally {
    exportLoading.value = false
  }
 }

-/** 初始化 **/
-onMounted(async () => {
-  await getList()
+/** 初始化 */
+onMounted(() => {
+  getList()
 })
 </script>
--- a/src/views/mes/utils/constants.ts
+++ b/src/views/mes/utils/constants.ts
@ -66,6 +66,14 @@ export const MesProWorkOrderStatusEnum = {
  CANCELED: 3 // 已取消
 }

+/** MES 生产流转卡状态枚举（复用工单状态值） */
+export const MesProCardStatusEnum = {
+  PREPARE: 0, // 草稿
+  CONFIRMED: 1, // 已确认
+  FINISHED: 2, // 已完成
+  CANCELED: 3 // 已取消
+}
+
 /** MES 工单类型枚举 */
 export const MesProWorkOrderTypeEnum = {
  SELF: 1, // 自行生产