MES 生产工单审批集成

涉及页面

• 生产工单列表页面 (views/mes/pro/workorder/index.vue)
• 生产工单详情/编辑页面 (views/mes/pro/workorder/WorkOrderForm.vue)

API

请求参数：

响应： { "code": 200, "msg": "操作成功", "data": true }

工单状态变更说明

前端修改点

1. 列表页面 - 添加"提交审批"按钮

位置： views/mes/pro/workorder/index.vue

<!-- 在操作列中添加提交审批按钮 -->
<el-table-column label="操作" align="center" width="200">
  <template #default="scope">
    <el-button
      v-if="scope.row.status === 0"
      link
      type="primary"
      @click="handleSubmit(scope.row.id)"
      v-hasPermi="['mes:pro-work-order:update']"
    >
      提交审批
    </el-button>
    <el-button
      v-if="scope.row.status === 0"
      link
      type="primary"
      @click="handleUpdate(scope.row.id)"
      v-hasPermi="['mes:pro-work-order:update']"
    >
      编辑
    </el-button>
    <el-button
      v-if="scope.row.status === 0"
      link
      type="danger"
      @click="handleDelete(scope.row.id)"
      v-hasPermi="['mes:pro-work-order:delete']"
    >
      删除
    </el-button>
    <!-- 已确认状态显示完成、取消按钮 -->
    <el-button
      v-if="scope.row.status === 2"
      link
      type="success"
      @click="handleFinish(scope.row.id)"
      v-hasPermi="['mes:pro-work-order:update']"
    >
      完成
    </el-button>
    <el-button
      v-if="scope.row.status === 2"
      link
      type="warning"
      @click="handleCancel(scope.row.id)"
      v-hasPermi="['mes:pro-work-order:update']"
    >
      取消
    </el-button>
  </template>
</el-table-column>

2. data 数据

// 状态字典
const statusDict = ref([
  { label: '草稿', value: 0, tagType: 'info' },
  { label: '审批中', value: 1, tagType: 'warning' },
  { label: '已确认', value: 2, tagType: 'success' },
  { label: '已完成', value: 3, tagType: 'primary' },
  { label: '已取消', value: 4, tagType: 'danger' },
  { label: '审批不通过', value: 5, tagType: 'danger' }
])

3. 方法

import { submitWorkOrder } from '@/api/mes/pro/workorder'

// 提交审批
const handleSubmit = async (id: number) => {
  try {
    await message.confirm('确认提交该工单进行审批？')
    await submitWorkOrder(id)
    message.success('提交成功')
    await getList()
  } catch (error) {
    console.error(error)
  }
}

4. API 方法

文件： api/mes/pro/workorder/index.ts

// 提交工单审批
export const submitWorkOrder = (id: number) => {
  return request.put({ url: '/mes/pro/work-order/submit', params: { id } })
}

5. 状态标签显示

<dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="scope.row.status" />

6. 表单状态禁用逻辑

编辑表单： 只有草稿状态(0)和审批不通过状态(5)才能编辑

// 判断是否可编辑
const isEditable = computed(() => {
  return formData.value.status === 0 || formData.value.status === 5
})

<el-form-item label="工单编码" prop="code">
  <el-input v-model="formData.code" :disabled="!isEditable" />
</el-form-item>

注意事项

1. 状态流转：草稿 → 提交审批 → 审批中 → 审批通过(已确认) / 审批不通过
2. 审批不通过后：工单状态变为"审批不通过"(5)，可以重新编辑后再次提交审批
3. 权限控制：提交审批使用 mes:pro-work-order:update 权限，与编辑权限一致
4. 按钮显示：根据工单状态动态显示操作按钮，避免误操作
5. 字典数据：确保系统字典 mes_pro_work_order_status 已添加审批中(1)和审批不通过(5)状态