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

更新装箱单表单的操作逻辑，新增编辑、完成和删除功能，优化表单字段的可编辑性和状态管理。确保在编辑模式下用户可以保存修改，并在完成操作前进行确认，提升用户体验和数据安全性。

src/views/mes/wm/packages/PackageForm.vue

@@ -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 formType = ref<string>('create') // 表单的类型：create / update / finish / detail
-const isDetail = computed(() => formType.value === '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 })
 
-/** 提交表单 */
+/** 提交表单（create/update 模式） */
-const emit = defineEmits(['success'])
 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'))
+      message.success('新增成功')
-      // 新增成功后，切换到修改模式，设置 id
+      // 创建成功后，更新表单数据和状态为编辑模式
       formData.value.id = res
+      formData.value.status = MesWmPackageStatusEnum.PREPARE
       formType.value = 'update'
     } else {
       await WmPackageApi.updatePackage(data)
-      message.success(t('common.updateSuccess'))
+      message.success('修改成功')
-      dialogVisible.value = false
     }
+    // 更新快照
+    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>

src/views/mes/wm/packages/index.vue

@@ -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 () => {
+onMounted(() => {
-  await getList()
+  getList()
 })
 </script>