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

✨ feat(mes): 优化装箱单表单逻辑，增强用户交互体验 

更新装箱单表单的操作逻辑，新增编辑、完成和删除功能，优化表单字段的可编辑性和状态管理。确保在编辑模式下用户可以保存修改，并在完成操作前进行确认，提升用户体验和数据安全性。
pull/871/MERGE
YunaiV 2026-03-31 20:05:13 +08:00
parent 6dc20ba950
commit 6611156170
2 changed files with 97 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/mes/wm/packages/PackageForm.vue
View File

@ -11,9 +11,13 @@
<el-row>
<el-col :span="8">
<el-form-item label="装箱单编号" prop="code">
<el-input v-model="formData.code" placeholder="请输入装箱单编号">
<el-input
v-model="formData.code"
placeholder="请输入装箱单编号"
:disabled="isHeaderReadonly"
>
<template #append>
<el-button @click="generateCode"> 生成 </el-button>
<el-button @click="generateCode" :disabled="isHeaderReadonly"> 生成 </el-button>
</template>
</el-input>
</el-form-item>
@ -26,36 +30,45 @@
value-format="x"
placeholder="请选择装箱日期"
class="!w-1/1"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检查员" prop="inspectorUserId">
<UserSelect v-model="formData.inspectorUserId" :disabled="isDetail" />
<UserSelect v-model="formData.inspectorUserId" :disabled="isHeaderReadonly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="销售订单编号" prop="salesOrderCode">
<el-input v-model="formData.salesOrderCode" placeholder="请输入销售订单编号" />
<el-input
v-model="formData.salesOrderCode"
placeholder="请输入销售订单编号"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发票编号" prop="invoiceCode">
<el-input v-model="formData.invoiceCode" placeholder="请输入发票编号" />
<el-input
v-model="formData.invoiceCode"
placeholder="请输入发票编号"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户" prop="clientId">
<MdClientSelect v-model="formData.clientId" :disabled="isDetail" />
<MdClientSelect v-model="formData.clientId" :disabled="isHeaderReadonly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="尺寸单位" prop="sizeUnitId">
<MdUnitMeasureSelect v-model="formData.sizeUnitId" :disabled="isDetail" />
<MdUnitMeasureSelect v-model="formData.sizeUnitId" :disabled="isHeaderReadonly" />
</el-form-item>
</el-col>
<el-col :span="5">
@ -95,7 +108,7 @@
<el-row>
<el-col :span="8">
<el-form-item label="重量单位" prop="weightUnitId">
<MdUnitMeasureSelect v-model="formData.weightUnitId" :disabled="isDetail" />
<MdUnitMeasureSelect v-model="formData.weightUnitId" :disabled="isHeaderReadonly" />
</el-form-item>
</el-col>
<el-col :span="5">
@ -124,13 +137,18 @@
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入备注"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 编辑/详情时展示子表信息 -->
<template v-if="formType !== 'create' && formData.id">
<!-- 非新建模式展示子表信息 -->
<template v-if="formData.id">
<el-tabs v-model="activeTab" class="mt-15px">
<el-tab-pane label="子箱" name="subPackage">
<SubPackageList :package-id="formData.id" :form-type="formType" />
@ -141,10 +159,21 @@
</el-tabs>
</template>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!isDetail">
确 定
<el-button v-if="isEditable" @click="submitForm" type="primary" :disabled="formLoading">
保 存
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
v-if="isEditable && formData.status === MesWmPackageStatusEnum.PREPARE"
@click="handleFinish"
type="warning"
:disabled="formLoading"
>
完 成
</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>
@ -157,29 +186,33 @@ import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMea
import UserSelect from '@/views/system/user/components/UserSelect.vue'
import SubPackageList from './SubPackageList.vue'
import PackageLineList from './PackageLineList.vue'
import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
import { MesAutoCodeRuleCode, MesWmPackageStatusEnum } from '@/views/mes/utils/constants'
defineOptions({ name: 'PackageForm' })
const emit = defineEmits(['success'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
const isDetail = computed(() => formType.value === 'detail')
const formType = ref<string>('create') // 表单的类型：create / update / finish / detail
const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
const isFinish = computed(() => formType.value === 'finish') // 是否为完成模式
const isDetail = computed(() => ['detail', 'finish'].includes(formType.value)) // 是否为详情模式
const isHeaderReadonly = computed(() => ['finish', 'detail'].includes(formType.value)) // 是否只读
const dialogTitle = computed(() => {
const titles: Record<string, string> = {
create: '新增装箱单',
update: '修改装箱单',
finish: '完成装箱单',
detail: '查看装箱单'
}
return titles[formType.value] || t('action.' + formType.value)
return titles[formType.value] || formType.value
})
const activeTab = ref('subPackage')
const formData = ref({
id: undefined as number | undefined,
code: undefined as string | undefined,
status: undefined as number | undefined,
packageDate: undefined as number | undefined,
salesOrderCode: undefined as string | undefined,
invoiceCode: undefined as string | undefined,
@ -198,7 +231,8 @@ const formRules = reactive({
code: [{ required: true, message: '装箱单编号不能为空', trigger: 'blur' }],
packageDate: [{ required: true, message: '请选择装箱日期', trigger: 'change' }]
})
const formRef = ref()
const formRef = ref() // 表单 Ref
const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查
/** 生成装箱单编号 */
const generateCode = async () => {
@ -213,6 +247,7 @@ const open = async (type: string, id?: number) => {
formType.value = type
activeTab.value = 'subPackage'
resetForm()
// 修改/完成/详情时，加载数据
if (id) {
formLoading.value = true
try {
@ -221,11 +256,11 @@ const open = async (type: string, id?: number) => {
formLoading.value = false
}
}
// 保存原始数据快照
originalFormData.value = JSON.stringify(formData.value)
}
defineExpose({ open })
/** 提交表单 */
const emit = defineEmits(['success'])
/** 提交表单（create/update 模式） */
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
@ -233,26 +268,50 @@ const submitForm = async () => {
const data = formData.value as unknown as WmPackageVO
if (formType.value === 'create') {
const res = await WmPackageApi.createPackage(data)
message.success(t('common.createSuccess'))
// 新增成功后，切换到修改模式，设置 id
message.success('新增成功')
// 创建成功后，更新表单数据和状态为编辑模式
formData.value.id = res
formData.value.status = MesWmPackageStatusEnum.PREPARE
formType.value = 'update'
} else {
await WmPackageApi.updatePackage(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
message.success('修改成功')
}
// 更新快照
originalFormData.value = JSON.stringify(formData.value)
emit('success')
} finally {
formLoading.value = false
}
}
/** 完成操作：编辑模式下表单修改过则先保存，再完成 */
const handleFinish = async () => {
try {
await message.confirm('确认完成该装箱单？完成后将不可编辑。')
formLoading.value = true
// 编辑模式下，表单有修改时先保存
if (isEditable.value && JSON.stringify(formData.value) !== originalFormData.value) {
await formRef.value.validate()
const data = formData.value as unknown as WmPackageVO
await WmPackageApi.updatePackage(data)
}
await WmPackageApi.finishPackage(formData.value.id!)
message.success('完成成功')
dialogVisible.value = false
emit('success')
} catch {
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
code: undefined,
status: undefined,
packageDate: undefined,
salesOrderCode: undefined,
invoiceCode: undefined,
@ -269,4 +328,6 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
defineExpose({ open })
</script>

31
src/views/mes/wm/packages/index.vue
View File

@ -89,6 +89,7 @@
</el-table-column>
<el-table-column label="操作" align="center" width="200" fixed="right">
<template #default="scope">
<!-- 草稿：编辑、完成、删除 -->
<el-button
link
type="primary"
@ -101,7 +102,7 @@
<el-button
link
type="warning"
@click="handleFinish(scope.row.id)"
@click="openForm('finish', scope.row.id)"
v-hasPermi="['mes:wm-package:update']"
v-if="scope.row.status === MesWmPackageStatusEnum.PREPARE"
>
@ -157,6 +158,7 @@ const queryParams = reactive({
inspectorUserId: undefined
})
const queryFormRef = ref() // 搜索的表单
const formRef = ref() // 表单弹窗
/** 查询列表 */
const getList = async () => {
@ -170,52 +172,35 @@ const getList = async () => {
}
}
/** 搜索 */
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置 */
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 新增/修改/详情 */
const formRef = ref()
/** 添加/修改操作 */
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 完成 */
const handleFinish = async (id: number) => {
try {
// 完成的二次确认
await message.confirm('确认完成该装箱单？完成后将不可编辑。')
// 发起完成
await WmPackageApi.finishPackage(id)
message.success('完成成功')
// 刷新列表
await getList()
} catch {}
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await WmPackageApi.deletePackage(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 */
onMounted(async () => {
await getList()
onMounted(() => {
getList()
})
</script>