yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(mes): 完善生产工单前端，支持树形展示、子工单生成及 BOM 内联编辑 

1. index.vue：工单列表改为 handleTree 树形展示（row-key + tree-props），
   新增「确认」「新增子工单」操作按钮，移除父工单列，搜索条件对齐
2. WorkOrderForm：移除 batchCode 字段，需求日期改为 date 类型，
   新增 parentId 及子工单预填逻辑，新增 WorkOrderItemList 物料需求 Tab
3. WorkOrderBomList：合并 WorkOrderBomForm 弹窗为内联编辑（仅编辑数量/备注），
   草稿状态显示编辑按钮，已确认+自行生产+产品类型显示「生成工单」按钮
4. WorkOrderItemList：API 调用迁移到 ProWorkOrderBomApi
5. API 层：workorder/index.ts 新增 confirmWorkOrder、移除 batchCode；
   bom/index.ts 新增 getWorkOrderBomItemListByWorkOrderId、itemOrProduct 字段
6. 删除独立的 WorkOrderBomForm.vue 组件
7. constants.ts 新增 MesProTaskStatusEnum，dict.ts 新增对应字典类型
pull/871/MERGE
YunaiV 2026-02-20 08:24:58 +08:00
parent e5bd477a7e
commit d1e6d4109f
6 changed files with 232 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/mes/pro/workorder/bom/index.ts
View File

@ -12,6 +12,7 @@ export interface ProWorkOrderBomVO {
unitMeasureName: string // 单位名称
quantity: number // 预计使用量
remark: string // 备注
itemOrProduct: string // 物料产品标识
}
// MES 生产工单 BOM API
@ -39,5 +40,10 @@ export const ProWorkOrderBomApi = {
// 删除工单 BOM
deleteWorkOrderBom: async (id: number) => {
return await request.delete({ url: `/mes/pro/work-order-bom/delete?id=` + id })
},
// 获取工单物料需求列表
getWorkOrderBomItemListByWorkOrderId: async (workOrderId: number) => {
return await request.get({ url: `/mes/pro/work-order-bom/item-list-by-work-order-id?workOrderId=` + workOrderId })
}
}

6
src/api/mes/pro/workorder/index.ts
View File

@ -23,7 +23,6 @@ export interface ProWorkOrderVO {
clientName: string // 客户名称
vendorId: number // 供应商编号
vendorName: string // 供应商名称
batchCode: string // 批次号
requestDate: Date // 需求日期
parentId: number // 父工单编号
parentCode: string // 父工单编码
@ -73,5 +72,10 @@ export const ProWorkOrderApi = {
// 取消工单
cancelWorkOrder: async (id: number) => {
return await request.put({ url: `/mes/pro/work-order/cancel?id=` + id })
},
// 确认工单
confirmWorkOrder: async (id: number) => {
return await request.put({ url: `/mes/pro/work-order/confirm?id=` + id })
}
}

119
src/views/mes/pro/workorder/WorkOrderBomForm.vue
View File

@ -1,119 +0,0 @@
<!-- MES 生产工单 BOM 表单弹窗 -->
<!-- TODO @AI：参考别的模块，应该融合到 List 里； -->
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="物料" prop="itemId">
<MdItemSelect v-model="formData.itemId" @change="handleItemChange" />
</el-form-item>
<el-form-item label="单位" prop="unitMeasureId">
<MdUnitMeasureSelect v-model="formData.unitMeasureId" />
</el-form-item>
<el-form-item label="预计使用量" prop="quantity">
<el-input-number
v-model="formData.quantity"
:min="0"
:precision="2"
class="!w-1/1"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ProWorkOrderBomApi, ProWorkOrderBomVO } from '@/api/mes/pro/workorder/bom'
import { MdItemVO } from '@/api/mes/md/item'
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
defineOptions({ name: 'WorkOrderBomForm' })
const props = defineProps<{
workOrderId: number
}>()
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
id: undefined,
workOrderId: undefined as number | undefined,
itemId: undefined,
unitMeasureId: undefined,
quantity: undefined,
remark: undefined
})
const formRules = reactive({
itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
unitMeasureId: [{ required: true, message: '单位不能为空', trigger: 'change' }],
quantity: [{ required: true, message: '预计使用量不能为空', trigger: 'blur' }]
})
const formRef = ref()
/** 打开弹窗 */
const open = async (type: string, row?: any) => {
dialogVisible.value = true
dialogTitle.value = type === 'create' ? '添加物料' : '编辑物料'
formType.value = type
// 重置表单
formData.value = {
id: undefined,
workOrderId: props.workOrderId,
itemId: undefined,
unitMeasureId: undefined,
quantity: undefined,
remark: undefined
}
// 编辑时设置数据
if (row) {
formData.value = { ...row }
}
}
defineExpose({ open })
/** 物料变更：自动填充单位 */
const handleItemChange = (item: MdItemVO | undefined) => {
if (item?.unitMeasureId) {
formData.value.unitMeasureId = item.unitMeasureId
}
}
/** 提交表单 */
const emit = defineEmits(['success'])
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as ProWorkOrderBomVO
if (formType.value === 'create') {
await ProWorkOrderBomApi.createWorkOrderBom(data)
message.success(t('common.createSuccess'))
} else {
await ProWorkOrderBomApi.updateWorkOrderBom(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
emit('success')
} finally {
formLoading.value = false
}
}
</script>

141
src/views/mes/pro/workorder/WorkOrderBomList.vue
View File

@ -1,14 +1,6 @@
<!-- MES 生产工单 BOM 列表子组件 -->
<!-- TODO @芋艿：这块暂时还没测试和 review； -->
<template>
<div>
<!-- 操作栏 -->
<!-- TODO @AI：貌似没新增操作？在确认下 -->
<el-row class="mb-10px" v-if="!disabled">
<el-button type="primary" plain @click="openBomForm('create')">
<Icon icon="ep:plus" class="mr-5px" /> 添加物料
</el-button>
</el-row>
<!-- BOM 列表 -->
<el-table v-loading="loading" :data="bomList" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="BOM 物料编码" align="center" prop="itemCode" width="120" />
@ -17,10 +9,31 @@
<el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
<el-table-column label="预计使用量" align="center" prop="quantity" width="120" />
<el-table-column label="备注" align="center" prop="remark" min-width="120" />
<el-table-column label="操作" align="center" width="130" v-if="!disabled">
<el-table-column label="操作" align="center" width="160" v-if="!disabled">
<template #default="scope">
<el-button link type="primary" @click="openBomForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDeleteBom(scope.row.id)">删除</el-button>
<!-- 草稿状态：编辑数量/备注 -->
<!-- TODO @AI：workOrder 来自父组件 WorkOrderForm 通过 prop :work-order="formData" 传入，即当前工单的完整数据 -->
<el-button
v-if="workOrder.status === MesProWorkOrderStatusEnum.PREPARE"
link
type="primary"
@click="openBomForm('update', scope.row)"
>
编辑
</el-button>
<!-- 已确认 + 自行生产 + 产品类型 BOM 行：生成工单 -->
<el-button
v-if="
workOrder.status === MesProWorkOrderStatusEnum.CONFIRMED &&
workOrder.type === MesProWorkOrderTypeEnum.SELF &&
scope.row.itemOrProduct === 'PRODUCT'
"
link
type="success"
@click="handleGenerateWorkOrder(scope.row)"
>
生成工单
</el-button>
</template>
</el-table-column>
</el-table>
@ -32,22 +45,51 @@
@pagination="getBomList"
/>
<!-- BOM 表单弹窗 -->
<WorkOrderBomForm ref="bomFormRef" :work-order-id="workOrderId" @success="getBomList" />
<!-- BOM 编辑弹窗（内联） -->
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="物料">
<el-input :model-value="formData.itemName" disabled />
</el-form-item>
<el-form-item label="单位">
<el-input :model-value="formData.unitMeasureName" disabled />
</el-form-item>
<el-form-item label="预计使用量" prop="quantity">
<el-input-number v-model="formData.quantity" :min="0" :precision="2" class="!w-1/1" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { ProWorkOrderBomApi, ProWorkOrderBomVO } from '@/api/mes/pro/workorder/bom'
import WorkOrderBomForm from './WorkOrderBomForm.vue'
import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
defineOptions({ name: 'WorkOrderBomList' })
const props = defineProps<{
workOrderId: number
workOrder: any
disabled?: boolean
}>()
// generate-work-order：通知 WorkOrderForm 用 BOM 行的物料作为产品，新建子工单
const emit = defineEmits(['generate-work-order'])
const message = useMessage()
const { t } = useI18n()
@ -74,22 +116,67 @@ const getBomList = async () => {
}
}
/** 删除 BOM */
const handleDeleteBom = async (id: number) => {
try {
await message.delConfirm()
await ProWorkOrderBomApi.deleteWorkOrderBom(id)
message.success(t('common.delSuccess'))
await getBomList()
} catch {}
/** 生成工单（通知父组件） */
// todo @芋艿：后续在测试下该逻辑；
const handleGenerateWorkOrder = (row: any) => {
emit('generate-work-order', row)
}
// ==================== BOM 表单 ====================
const bomFormRef = ref()
// ==================== BOM 编辑表单（内联） ====================
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
id: undefined as number | undefined,
workOrderId: undefined as number | undefined,
itemId: undefined as number | undefined,
itemName: undefined as string | undefined,
unitMeasureId: undefined as number | undefined,
unitMeasureName: undefined as string | undefined,
quantity: undefined as number | undefined,
remark: undefined as string | undefined
})
const formRules = reactive({
quantity: [{ required: true, message: '预计使用量不能为空', trigger: 'blur' }]
})
/** 打开 BOM 表单弹窗 */
const openBomForm = (type: string, row?: any) => {
bomFormRef.value.open(type, row)
/** 打开 BOM 编辑弹窗 */
const openBomForm = (_type: string, row: any) => {
dialogVisible.value = true
dialogTitle.value = '编辑 BOM 物料'
formData.value = {
id: row.id,
workOrderId: row.workOrderId,
itemId: row.itemId,
itemName: row.itemName,
unitMeasureId: row.unitMeasureId,
unitMeasureName: row.unitMeasureName,
quantity: row.quantity,
remark: row.remark
}
}
/** 提交表单 */
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = {
id: formData.value.id,
workOrderId: formData.value.workOrderId,
itemId: formData.value.itemId,
unitMeasureId: formData.value.unitMeasureId,
quantity: formData.value.quantity,
remark: formData.value.remark
} as unknown as ProWorkOrderBomVO
await ProWorkOrderBomApi.updateWorkOrderBom(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
await getBomList()
} finally {
formLoading.value = false
}
}
// ==================== 初始化 ====================

82
src/views/mes/pro/workorder/WorkorderForm.vue
View File

@ -92,13 +92,13 @@
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="客户" prop="clientId">
<MdClientSelect v-model="formData.clientId" :disabled="isDetail" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span="8"
v-if="
@ -110,24 +110,11 @@
<MdVendorSelect v-model="formData.vendorId" :disabled="isDetail" />
</el-form-item>
</el-col>
<!-- TODO @AI：批次号，貌似一直不需要；你在确认下！ -->
<el-col :span="8">
<el-form-item label="批次号" prop="batchCode">
<el-input
v-model="formData.batchCode"
placeholder="请输入批次号"
:disabled="isDetail"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<!-- TODO @AI：只选择日期，后面都是 00:00:00 -->
<el-form-item label="需求日期" prop="requestDate">
<el-date-picker
v-model="formData.requestDate"
type="datetime"
type="date"
placeholder="请选择需求日期"
value-format="x"
class="!w-1/1"
@ -135,8 +122,8 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工单状态" prop="status" v-if="formType !== 'create'">
<el-col :span="8" v-if="formType !== 'create'">
<el-form-item label="工单状态" prop="status">
<dict-tag :type="DICT_TYPE.MES_PRO_WORK_ORDER_STATUS" :value="formData.status" />
</el-form-item>
</el-col>
@ -157,9 +144,17 @@
<!-- BOM Tab：编辑/详情时显示 -->
<el-tabs v-if="formType !== 'create'" v-model="activeTab" class="mt-15px">
<el-tab-pane label="工单 BOM" name="bom">
<WorkOrderBomList v-if="formData.id" :work-order-id="formData.id" :disabled="isDetail" />
<WorkOrderBomList
v-if="formData.id"
:work-order-id="formData.id"
:work-order="formData"
:disabled="isDetail"
@generate-work-order="handleGenerateWorkOrder"
/>
</el-tab-pane>
<el-tab-pane label="物料需求" name="item">
<WorkOrderItemList v-if="formData.id" :work-order-id="formData.id" />
</el-tab-pane>
<!-- TODO @AI：物料需求缺少； -->
</el-tabs>
<template #footer v-if="!isDetail">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -177,10 +172,8 @@ import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
import WorkOrderBomList from './WorkOrderBomList.vue'
import {
MesProWorkOrderSourceTypeEnum,
MesProWorkOrderTypeEnum
} from '@/views/mes/utils/constants'
import WorkOrderItemList from './WorkOrderItemList.vue'
import { MesProWorkOrderSourceTypeEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
defineOptions({ name: 'WorkOrderForm' })
@ -194,6 +187,7 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
const activeTab = ref('bom') // 活跃的 Tab
const formData = ref({
id: undefined,
parentId: undefined,
code: undefined,
name: undefined,
type: undefined,
@ -204,7 +198,6 @@ const formData = ref({
quantity: undefined,
clientId: undefined,
vendorId: undefined,
batchCode: undefined,
requestDate: undefined,
status: undefined,
remark: undefined
@ -229,9 +222,9 @@ const generateCode = () => {
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
const open = async (type: string, id?: number, parentRow?: any) => {
dialogVisible.value = true
dialogTitle.value = type === 'detail' ? '工单详情' : t('action.' + type)
dialogTitle.value = parentRow ? '新增子工单' : type === 'detail' ? '工单详情' : t('action.' + type)
formType.value = type
activeTab.value = 'bom'
resetForm()
@ -244,7 +237,40 @@ const open = async (type: string, id?: number) => {
formLoading.value = false
}
}
// 新增子工单时，预填父工单信息
if (parentRow) {
formData.value.parentId = parentRow.id
formData.value.type = parentRow.type
formData.value.orderSourceType = parentRow.orderSourceType
formData.value.orderSourceCode = parentRow.orderSourceCode
formData.value.clientId = parentRow.clientId
formData.value.vendorId = parentRow.vendorId
formData.value.requestDate = parentRow.requestDate
}
}
/** 从 BOM 行生成子工单 */
const handleGenerateWorkOrder = (bomRow: any) => {
// 保存当前工单信息
const currentWorkOrder = { ...formData.value }
resetForm()
// 设置弹窗状态
dialogTitle.value = '新增子工单'
formType.value = 'create'
activeTab.value = 'bom'
// 预填父工单信息 + BOM 物料作为产品
formData.value.parentId = currentWorkOrder.id
formData.value.type = currentWorkOrder.type
formData.value.orderSourceType = currentWorkOrder.orderSourceType
formData.value.orderSourceCode = currentWorkOrder.orderSourceCode
formData.value.clientId = currentWorkOrder.clientId
formData.value.vendorId = currentWorkOrder.vendorId
formData.value.requestDate = currentWorkOrder.requestDate
formData.value.productId = bomRow.itemId
formData.value.unitMeasureId = bomRow.unitMeasureId
formData.value.quantity = bomRow.quantity
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 产品变更：自动填充单位 */
@ -299,6 +325,7 @@ const submitForm = async () => {
const resetForm = () => {
formData.value = {
id: undefined,
parentId: undefined,
code: undefined,
name: undefined,
type: undefined,
@ -309,7 +336,6 @@ const resetForm = () => {
quantity: undefined,
clientId: undefined,
vendorId: undefined,
batchCode: undefined,
requestDate: undefined,
status: undefined,
remark: undefined

72
src/views/mes/pro/workorder/index.vue
View File

@ -115,17 +115,16 @@
<!-- 列表 -->
<ContentWrap>
<!-- TODO @AI：生产工单，是父子结构；到底是前端拼接出来，还是后端拼接出来？！ -->
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="工单编码" align="center" prop="code" width="140" />
<el-table-column label="父工单" align="center" prop="parentCode" width="140">
<template #default="scope">
<span v-if="scope.row.parentId && scope.row.parentId !== 0">
{{ scope.row.parentCode }}
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="工单名称" align="center" prop="name" min-width="150" />
<el-table-column label="工单类型" align="center" prop="type" width="100">
<template #default="scope">
@ -147,7 +146,6 @@
<el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
<el-table-column label="工单数量" align="center" prop="quantity" width="100" />
<el-table-column label="已生产数量" align="center" prop="quantityProduced" width="100" />
<!-- TODO @AI：客户编码未展示，是不是后端没查询？！ -->
<el-table-column label="客户编码" align="center" prop="clientCode" width="120" />
<el-table-column label="客户名称" align="center" prop="clientName" width="120" />
<el-table-column
@ -169,10 +167,9 @@
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="操作" align="center" width="200" fixed="right">
<el-table-column label="操作" align="center" width="240" fixed="right">
<template #default="scope">
<!-- TODO @AI：新增操作；对齐下； -->
<!-- 草稿状态：编辑、删除 -->
<!-- 草稿状态：编辑、确认、删除 -->
<template v-if="scope.row.status === MesProWorkOrderStatusEnum.PREPARE">
<el-button
link
@ -182,6 +179,14 @@
>
编辑
</el-button>
<el-button
link
type="success"
@click="handleConfirm(scope.row.id)"
v-hasPermi="['mes:pro-work-order:update']"
>
确认
</el-button>
<el-button
link
type="danger"
@ -191,6 +196,19 @@
删除
</el-button>
</template>
<!-- 已确认 + 自行生产：新增子工单 -->
<el-button
v-if="
scope.row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
scope.row.type === MesProWorkOrderTypeEnum.SELF
"
link
type="primary"
@click="handleAddChild(scope.row)"
v-hasPermi="['mes:pro-work-order:create']"
>
新增
</el-button>
<!-- 已确认状态：完成、取消 -->
<template v-if="scope.row.status === MesProWorkOrderStatusEnum.CONFIRMED">
<el-button
@ -239,10 +257,11 @@
<script setup lang="ts">
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import { handleTree } from '@/utils/tree'
import { ProWorkOrderApi, ProWorkOrderVO } from '@/api/mes/pro/workorder'
import WorkOrderForm from './WorkOrderForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { MesProWorkOrderStatusEnum } from '@/views/mes/utils/constants'
import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
@ -269,12 +288,12 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
/** 查询列表（分页 + 前端 handleTree 拼接树） */
const getList = async () => {
loading.value = true
try {
const data = await ProWorkOrderApi.getWorkOrderPage(queryParams)
list.value = data.list
list.value = handleTree(data.list, 'id', 'parentId')
total.value = data.total
} finally {
loading.value = false
@ -295,8 +314,8 @@ const resetQuery = () => {
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
const openForm = (type: string, id?: number, parentRow?: any) => {
formRef.value.open(type, id, parentRow)
}
/** 删除按钮操作 */
@ -309,6 +328,21 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 确认工单 */
const handleConfirm = async (id: number) => {
try {
await message.confirm('确认要完成工单编制吗？确认后将不能更改')
await ProWorkOrderApi.confirmWorkOrder(id)
message.success('工单已确认')
await getList()
} catch {}
}
/** 新增子工单 */
const handleAddChild = (row: any) => {
openForm('create', undefined, row)
}
/** 完成工单 */
const handleFinish = async (id: number) => {
try {