# MES 生产工单审批集成

## 涉及页面

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

## API

| 方法 | 路径 | 说明 |
|------|------|------|
| PUT | /mes/pro/work-order/submit | 提交工单审批 |

**请求参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| id | Long | 是 | 工单编号（Query 参数） |

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

## 工单状态变更说明

| 原状态 | 新状态 | 触发条件 |
|--------|--------|----------|
| 草稿(0) | 审批中(1) | 提交审批 |
| 审批中(1) | 已确认(2) | 审批通过 |
| 审批中(1) | 审批不通过(5) | 审批不通过 |
| 审批中(1) | 草稿(0) | 审批取消 |

## 前端修改点

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

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

```html
<!-- 在操作列中添加提交审批按钮 -->
<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 数据

```js
// 状态字典
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. 方法

```js
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`

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

### 5. 状态标签显示

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

### 6. 表单状态禁用逻辑

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

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

```html
<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)状态