✨ feat(mes): 重构领料出库单操作逻辑,优化表单提交和删除功能

重构了领料出库单的操作逻辑,合并了提交和完成操作的处理方式,简化了代码结构。新增了表单提交前的修改检查,确保数据一致性。同时,优化了删除操作的实现,提升用户体验。
pull/871/MERGE
YunaiV 2026-03-30 11:31:15 +08:00
parent daa269e4ce
commit b82bb858d0
4 changed files with 104 additions and 55 deletions

View File

@ -102,7 +102,6 @@ const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型:create / update
const currentLineId = ref<number>() // 当前操作的行 ID
const quantityMax = ref<number | undefined>(undefined) // 数量上限(在库数量)
const formRef = ref() // 表单 Ref
const formData = ref({
id: undefined as number | undefined,
lineId: undefined as number | undefined,
@ -121,6 +120,7 @@ const formRules = reactive({
materialStockId: [{ required: true, message: '请选择库存记录', trigger: 'change' }],
quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 库存选中回调 —— 自动回填仓库/库区/库位/批次/数量 */
const handleStockChange = (stock: WmMaterialStockVO | undefined) => {
@ -162,7 +162,6 @@ const open = async (type: string, lineId: number, itemId?: number, detailId?: nu
formData.value.itemId = itemId
}
}
defineExpose({ open })
/** 提交表单 */
const submitForm = async () => {
@ -209,4 +208,6 @@ const resetForm = () => {
quantityMax.value = undefined
formRef.value?.resetFields()
}
defineExpose({ open })
</script>

View File

@ -8,7 +8,7 @@
<el-table-column label="库位名称" align="center" prop="areaName" min-width="100" />
<el-table-column label="数量" align="center" prop="quantity" width="100" />
<el-table-column
v-if="props.formType === 'stock'"
v-if="isStock"
label="操作"
align="center"
width="120"
@ -46,6 +46,8 @@ const emit = defineEmits(['edit-detail'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const isStock = computed(() => props.formType === 'stock') // 是否为拣货模式
const loading = ref(false) // 列表的加载中
const list = ref<WmProductIssueDetailVO[]>([]) // 明细列表
@ -58,7 +60,6 @@ const getList = async () => {
loading.value = false
}
}
defineExpose({ getList })
/** 删除拣货明细 */
const handleDelete = async (detailId: number) => {
@ -70,8 +71,9 @@ const handleDelete = async (detailId: number) => {
} catch {}
}
/** 初始化:延迟加载,展开时才触发 */
/** 初始化 */
onMounted(() => {
getList()
})
defineExpose({ getList })
</script>

View File

@ -6,6 +6,7 @@
:rules="formRules"
label-width="110px"
v-loading="formLoading"
:disabled="isDetail"
>
<el-row>
<el-col :span="8">
@ -16,7 +17,7 @@
:disabled="isHeaderReadonly"
>
<template #append>
<el-button @click="generateCode"> 生成 </el-button>
<el-button @click="generateCode" :disabled="isHeaderReadonly"> 生成 </el-button>
</template>
</el-input>
</el-form-item>
@ -70,13 +71,24 @@
<ProductIssueLineList :issue-id="formData.id" :form-type="formType" />
</template>
<template #footer>
<el-button v-if="isUpdate" @click="submitForm" type="primary" :disabled="formLoading">
确 定
<el-button v-if="isEditable" @click="submitForm" type="primary" :disabled="formLoading">
保 存
</el-button>
<el-button
v-if="isEditable && formData.status === MesWmProductIssueStatusEnum.PREPARE"
@click="handleSubmit"
type="warning"
:disabled="formLoading"
>
提 交
</el-button>
<el-button v-if="isStock" @click="handleStock" type="primary" :disabled="formLoading">
执行拣货
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button v-if="isFinish" @click="handleFinish" type="success" :disabled="formLoading">
完 成
</el-button>
<el-button @click="dialogVisible = false">关 闭</el-button>
</template>
</Dialog>
</template>
@ -84,22 +96,42 @@
<script setup lang="ts">
import { WmProductIssueApi, WmProductIssueVO } from '@/api/mes/wm/productissue'
import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
import { MesAutoCodeRuleCode, MesWmProductIssueStatusEnum } from '@/views/mes/utils/constants'
import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
import ProductIssueLineList from './ProductIssueLineList.vue'
defineOptions({ name: 'ProductIssueForm' })
const emit = defineEmits(['success'])
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formType = ref<string>('create') // 表单的类型:create / update / stock / detail
const formType = ref<string>('create') // 表单的类型:create / update / submit / stock / finish / detail
const isEditable = computed(() => ['create', 'update', 'submit'].includes(formType.value)) // 是否为编辑模式
const isStock = computed(() => formType.value === 'stock') // 是否为拣货模式
const isFinish = computed(() => formType.value === 'finish') // 是否为完成出库模式
const isDetail = computed(() => ['detail', 'finish'].includes(formType.value)) // 是否为详情模式(表单禁用)
const isHeaderReadonly = computed(() =>
['stock', 'detail', 'finish'].includes(formType.value)
) // 表头是否只读
const dialogTitle = computed(() => {
const titles = {
create: '新增领料出库单',
update: '编辑领料出库单',
submit: '提交领料出库单',
stock: '执行拣货',
finish: '完成领料出库',
detail: '领料出库单详情'
}
return titles[formType.value] || formType.value
})
const formData = ref({
id: undefined as number | undefined,
code: undefined,
name: undefined,
status: undefined as number | undefined,
workOrderId: undefined,
workstationId: undefined,
requiredTime: undefined,
@ -112,19 +144,7 @@ const formRules = reactive({
requiredTime: [{ required: true, message: '需求时间不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
const isUpdate = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
const isStock = computed(() => formType.value === 'stock') // 是否为拣货模式
const isHeaderReadonly = computed(() => ['stock', 'detail'].includes(formType.value)) // 是否只读
const dialogTitle = computed(() => {
const titles = {
create: '新增领料出库单',
update: '编辑领料出库单',
stock: '执行拣货',
detail: '领料出库单详情'
}
return titles[formType.value] || formType.value
})
const originalFormData = ref<string>('') // 原始表单数据快照,用于脏检查
/** 生成领料单编号 */
const generateCode = async () => {
@ -138,7 +158,7 @@ const open = async (type: string, id?: number) => {
dialogVisible.value = true
formType.value = type
resetForm()
// 修改/拣货/详情时,加载数据
// 修改/提交/拣货/完成/详情时,加载数据
if (id) {
formLoading.value = true
try {
@ -147,11 +167,11 @@ const open = async (type: string, id?: number) => {
formLoading.value = false
}
}
// 保存原始数据快照
originalFormData.value = JSON.stringify(formData.value)
}
defineExpose({ open })
/** 提交表单(create/update 模式) */
const emit = defineEmits(['success'])
/** 提交表单(create/update/submit 模式的保存按钮) */
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
@ -162,12 +182,16 @@ const submitForm = async () => {
if (formType.value === 'create') {
const res = await WmProductIssueApi.createProductIssue(data)
message.success('新增成功')
// 创建成功后,更新表单数据和状态为编辑模式
formData.value.id = res
formData.value.status = MesWmProductIssueStatusEnum.PREPARE
formType.value = 'update'
} else {
await WmProductIssueApi.updateProductIssue(data)
message.success('修改成功')
}
// 更新快照
originalFormData.value = JSON.stringify(formData.value)
// 发送操作成功的事件
emit('success')
} finally {
@ -175,6 +199,29 @@ const submitForm = async () => {
}
}
/** 提交操作:表单修改过则先保存,再提交 */
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 WmProductIssueVO
await WmProductIssueApi.updateProductIssue(data)
}
// 2. 提交领料单
await WmProductIssueApi.submitProductIssue(formData.value.id!)
message.success('提交成功')
dialogVisible.value = false
emit('success')
} catch {
} finally {
formLoading.value = false
}
}
/** 执行拣货 */
const handleStock = async () => {
try {
@ -194,12 +241,28 @@ const handleStock = async () => {
}
}
/** 完成领料出库 */
const handleFinish = async () => {
try {
await message.confirm('确认完成该领料单并执行出库吗?')
formLoading.value = true
await WmProductIssueApi.finishProductIssue(formData.value.id!)
message.success('完成成功')
dialogVisible.value = false
emit('success')
} catch {
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
code: undefined,
name: undefined,
status: undefined,
workOrderId: undefined,
workstationId: undefined,
requiredTime: undefined,
@ -207,4 +270,6 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
defineExpose({ open })
</script>

View File

@ -116,7 +116,7 @@
<el-button
link
type="warning"
@click="handleSubmit(scope.row.id)"
@click="openForm('submit', scope.row.id)"
v-hasPermi="['mes:wm-product-issue:update']"
v-if="scope.row.status === MesWmProductIssueStatusEnum.PREPARE"
>
@ -145,7 +145,7 @@
<el-button
link
type="success"
@click="handleFinish(scope.row.id)"
@click="openForm('finish', scope.row.id)"
v-hasPermi="['mes:wm-product-issue:finish']"
v-if="scope.row.status === MesWmProductIssueStatusEnum.APPROVED"
>
@ -236,26 +236,6 @@ const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 提交按钮操作 */
const handleSubmit = async (id: number) => {
try {
await message.confirm('确认提交该领料单进入审批流程吗?')
await WmProductIssueApi.submitProductIssue(id)
message.success('提交成功')
await getList()
} catch {}
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
await message.delConfirm()
await WmProductIssueApi.deleteProductIssue(id)
message.success(t('common.delSuccess'))
await getList()
} catch {}
}
/** 取消按钮操作 */
const handleCancel = async (id: number) => {
try {
@ -266,12 +246,12 @@ const handleCancel = async (id: number) => {
} catch {}
}
/** 完成按钮操作 */
const handleFinish = async (id: number) => {
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
await message.confirm('确认完成该领料单并执行出库吗?')
await WmProductIssueApi.finishProductIssue(id)
message.success('完成成功')
await message.delConfirm()
await WmProductIssueApi.deleteProductIssue(id)
message.success(t('common.delSuccess'))
await getList()
} catch {}
}
@ -289,6 +269,7 @@ const handleExport = async () => {
}
}
/** 初始化 */
onMounted(() => {
getList()
})