✨ feat(mes): 优化转移单操作按钮和表单逻辑

调整转移单操作按钮的显示逻辑，简化表单提交和确认流程。新增状态判断以支持不同操作模式，提升用户交互体验。

src/views/mes/wm/transfer/TransferDetailList.vue

@@ -6,7 +6,7 @@
       <el-table-column label="移入库位" align="center" prop="toAreaName" 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"
@@ -39,6 +39,7 @@ const emit = defineEmits(['edit-detail'])
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const isStock = computed(() => props.formType === 'stock') // 是否为上架模式
 const loading = ref(false) // 列表的加载中
 const list = ref<WmTransferDetailVO[]>([]) // 明细列表
 

src/views/mes/wm/transfer/TransferForm.vue

@@ -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>
@@ -134,13 +135,27 @@
     </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 === MesWmTransferStatusEnum.PREPARE"
+        @click="handleSubmit"
+        type="warning"
+        :disabled="formLoading"
+      >
+        提 交
+      </el-button>
+      <el-button v-if="isConfirm" @click="handleConfirm" type="success" :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>
@@ -149,21 +164,42 @@
 import { generateRandomStr } from '@/utils'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { WmTransferApi, WmTransferVO } from '@/api/mes/wm/transfer'
+import { MesWmTransferStatusEnum } from '@/views/mes/utils/constants'
 import TransferLineList from './TransferLineList.vue'
 
 defineOptions({ name: 'TransferForm' })
-
 const emit = defineEmits(['success'])
-const message = useMessage() // 消息弹窗
 
+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 / confirm / stock / finish / detail
-const formRef = ref() // 表单 Ref
+const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
+const isConfirm = computed(() => formType.value === 'confirm') // 是否为到货确认模式
+const isStock = computed(() => formType.value === 'stock') // 是否为上架模式
+const isFinish = computed(() => formType.value === 'finish') // 是否为执行转移模式
+const isDetail = computed(() => ['detail', 'confirm', 'finish'].includes(formType.value)) // 是否为详情模式
+const isHeaderReadonly = computed(
+  () => ['stock', 'confirm', 'finish', 'detail'].includes(formType.value) // 表头是否只读
+)
+const isOuterType = computed(() => !!formData.value.type && Number(formData.value.type) === 2)
+const showDeliveryFields = computed(() => isOuterType.value && !!formData.value.deliveryFlag)
+const dialogTitle = computed(() => {
+  const titles = {
+    create: '新增转移单',
+    update: '编辑转移单',
+    confirm: '到货确认',
+    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,
   type: undefined as number | undefined,
   deliveryFlag: false,
   recipientName: undefined,
@@ -175,60 +211,27 @@ const formData = ref({
   transferDate: undefined,
   remark: undefined
 })
-
 const formRules = reactive({
   code: [{ required: true, message: '转移单编号不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '转移单名称不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '转移单类型不能为空', trigger: 'change' }],
   transferDate: [{ required: true, message: '转移日期不能为空', trigger: 'change' }]
 })
-
+const formRef = ref() // 表单 Ref
-const isUpdate = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
+const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查
-const isStock = computed(() => formType.value === 'stock') // 是否为上架模式
-const isHeaderReadonly = computed(() => ['stock', 'detail'].includes(formType.value)) // 是否只读
-const isOuterType = computed(() => !!formData.value.type && Number(formData.value.type) === 2) // 是否外部转移
-const showDeliveryFields = computed(() => isOuterType.value && !!formData.value.deliveryFlag) // 是否显示配送信息
-const dialogTitle = computed(() => {
-  const titles = {
-    create: '新增转移单',
-    update: '编辑转移单',
-    stock: '执行上架',
-    detail: '转移单详情'
-  }
-  return titles[formType.value] || formType.value
-})
 
 /** 生成转移单编号 */
+// TODO @AI：编码规则；
 const generateCode = () => {
   formData.value.code = 'TR' + generateRandomStr(10)
 }
 
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    code: undefined,
-    name: undefined,
-    type: undefined,
-    deliveryFlag: false,
-    recipientName: undefined,
-    recipientTelephone: undefined,
-    destinationAddress: undefined,
-    carrier: undefined,
-    shippingNumber: undefined,
-    confirmFlag: false,
-    transferDate: undefined,
-    remark: undefined
-  }
-  formRef.value?.resetFields()
-}
-
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   formType.value = type
   resetForm()
-  // 修改/上架/详情时，加载数据
+  // 修改/确认/上架/完成/详情时，加载数据
   if (id) {
     formLoading.value = true
     try {
@@ -237,44 +240,71 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 保存原始数据快照
+  originalFormData.value = JSON.stringify(formData.value)
 }
-defineExpose({ open })
 
-/** 提交表单（create/update 模式） */
+/** 提交表单（create/update 模式，保存） */
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
-    const { confirmFlag: _confirmFlag, status: _status, ...data } = formData.value
+    const data = cleanFormData()
-    if (!isOuterType.value) {
-      data.deliveryFlag = false
-      data.recipientName = undefined
-      data.recipientTelephone = undefined
-      data.destinationAddress = undefined
-      data.carrier = undefined
-      data.shippingNumber = undefined
-    } else if (!showDeliveryFields.value) {
-      data.recipientName = undefined
-      data.recipientTelephone = undefined
-      data.destinationAddress = undefined
-      data.carrier = undefined
-      data.shippingNumber = undefined
-    }
     if (formType.value === 'create') {
       const id = await WmTransferApi.createTransfer(data as unknown as WmTransferVO)
       message.success('新增成功')
       formData.value.id = id
+      formData.value.status = MesWmTransferStatusEnum.PREPARE
       formType.value = 'update'
     } else {
       await WmTransferApi.updateTransfer(data as unknown as WmTransferVO)
       message.success('修改成功')
     }
+    // 更新快照
+    originalFormData.value = JSON.stringify(formData.value)
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
+/** 提交操作：表单修改过则先保存，再提交 */
+const handleSubmit = async () => {
+  await formRef.value.validate()
+  try {
+    await message.confirm('确认提交该转移单？【提交后将不能修改】')
+    formLoading.value = true
+    // 1. 表单有修改时，先保存
+    if (JSON.stringify(formData.value) !== originalFormData.value) {
+      const data = cleanFormData()
+      await WmTransferApi.updateTransfer(data as unknown as WmTransferVO)
+    }
+    // 2. 提交转移单
+    await WmTransferApi.submitTransfer(formData.value.id!)
+    message.success('提交成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 到货确认 */
+const handleConfirm = async () => {
+  try {
+    await message.confirm('确认到货后，将进入待上架状态，是否继续？')
+    formLoading.value = true
+    await WmTransferApi.confirmTransfer(formData.value.id!)
+    message.success('确认成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
 /** 执行上架 */
 const handleStock = async () => {
   try {
@@ -289,4 +319,63 @@ const handleStock = async () => {
     formLoading.value = false
   }
 }
+
+/** 执行转移 */
+const handleFinish = async () => {
+  try {
+    await message.confirm('确认执行调拨？执行后将更新库存。')
+    formLoading.value = true
+    await WmTransferApi.finishTransfer(formData.value.id!)
+    message.success('执行成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 清理表单数据（去除非业务字段，处理配送信息） */
+// TODO @AI：是不是不去 clean；反正整个保存下，不是很有所谓；
+const cleanFormData = () => {
+  const { confirmFlag: _confirmFlag, status: _status, ...data } = formData.value
+  if (!isOuterType.value) {
+    data.deliveryFlag = false
+    data.recipientName = undefined
+    data.recipientTelephone = undefined
+    data.destinationAddress = undefined
+    data.carrier = undefined
+    data.shippingNumber = undefined
+  } else if (!showDeliveryFields.value) {
+    data.recipientName = undefined
+    data.recipientTelephone = undefined
+    data.destinationAddress = undefined
+    data.carrier = undefined
+    data.shippingNumber = undefined
+  }
+  return data
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    code: undefined,
+    name: undefined,
+    status: undefined,
+    type: undefined,
+    deliveryFlag: false,
+    recipientName: undefined,
+    recipientTelephone: undefined,
+    destinationAddress: undefined,
+    carrier: undefined,
+    shippingNumber: undefined,
+    confirmFlag: false,
+    transferDate: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+defineExpose({ open })
 </script>

src/views/mes/wm/transfer/TransferLineList.vue

@@ -136,7 +136,6 @@
 
 <script setup lang="ts">
 import { WmTransferLineApi, WmTransferLineVO } from '@/api/mes/wm/transfer/line'
-import { WmTransferDetailApi } from '@/api/mes/wm/transfer/detail'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
 import WmWarehouseLocationSelect from '@/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue'
@@ -144,8 +143,6 @@ import WmWarehouseAreaSelect from '@/views/mes/wm/warehouse/components/WmWarehou
 import TransferDetailList from './TransferDetailList.vue'
 import TransferDetailForm from './TransferDetailForm.vue'
 
-// DONE @AI：当前保留展开明细与分配刷新逻辑，避免影响上架场景交互
-
 defineOptions({ name: 'TransferLineList' })
 
 const props = defineProps<{
@@ -159,17 +156,35 @@ const message = useMessage()
 const isUpdate = computed(() => ['create', 'update'].includes(props.formType))
 const isStock = computed(() => props.formType === 'stock')
 
+// ==================== 列表 ====================
 const loading = ref(false)
 const list = ref<WmTransferLineVO[]>([])
-const detailFormRef = ref()
-const detailListRefs = ref<Record<number, InstanceType<typeof TransferDetailList>>>({})
-const allocatedQuantityMap = ref<Record<number, number>>({})
 
+/** 查询行列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await WmTransferLineApi.getTransferLineList(props.transferId)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await WmTransferLineApi.deleteTransferLine(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+// ==================== 添加/编辑表单 ====================
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const lineFormType = ref('')
-const formRef = ref()
 const formData = ref({
   id: undefined as number | undefined,
   transferId: undefined as number | undefined,
@@ -190,7 +205,6 @@ const formData = ref({
   fromAreaName: undefined,
   remark: undefined
 })
-
 const formRules = reactive({
   itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
   quantity: [{ required: true, message: '转移数量不能为空', trigger: 'blur' }],
@@ -198,43 +212,9 @@ const formRules = reactive({
   fromLocationId: [{ required: true, message: '移出库区不能为空', trigger: 'change' }],
   fromAreaId: [{ required: true, message: '移出库位不能为空', trigger: 'change' }]
 })
+const formRef = ref()
 
-const getList = async () => {
+/** 仓库变化时清空库区和库位 */
-  loading.value = true
-  try {
-    list.value = await WmTransferLineApi.getTransferLineList(props.transferId)
-  } finally {
-    loading.value = false
-  }
-}
-
-const refreshAllDetailAllocated = async () => {
-  if (!list.value.length) {
-    allocatedQuantityMap.value = {}
-    return
-  }
-  const entries = await Promise.all(
-    list.value.map(async (row) => {
-      const details = await WmTransferDetailApi.getTransferDetailListByLineId(row.id)
-      const total = details.reduce((sum, item) => sum + Number(item.quantity || 0), 0)
-      return [row.id, total] as const
-    })
-  )
-  allocatedQuantityMap.value = Object.fromEntries(entries)
-}
-
-defineExpose({ getList })
-
-const handleDelete = async (id: number) => {
-  try {
-    await message.delConfirm()
-    await WmTransferLineApi.deleteTransferLine(id)
-    message.success(t('common.delSuccess'))
-    await getList()
-    await refreshAllDetailAllocated()
-  } catch {}
-}
-
 const handleWarehouseChange = () => {
   formData.value.fromLocationId = undefined
   formData.value.fromLocationName = undefined
@@ -242,11 +222,13 @@ const handleWarehouseChange = () => {
   formData.value.fromAreaName = undefined
 }
 
+/** 库区变化时清空库位 */
 const handleLocationChange = () => {
   formData.value.fromAreaId = undefined
   formData.value.fromAreaName = undefined
 }
 
+/** 打开表单弹窗 */
 const openForm = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = type === 'create' ? '添加调拨物料' : '编辑调拨物料'
@@ -262,6 +244,7 @@ const openForm = async (type: string, id?: number) => {
   }
 }
 
+/** 提交表单 */
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
@@ -276,12 +259,12 @@ const submitForm = async () => {
     }
     dialogVisible.value = false
     await getList()
-    await refreshAllDetailAllocated()
   } finally {
     formLoading.value = false
   }
 }
 
+/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -306,28 +289,39 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
+// ==================== 展开行：上架明细 ====================
+const detailListRefs = ref<Record<number, InstanceType<typeof TransferDetailList>>>({})
+
+/** 缓存子组件 ref */
 const setDetailListRef = (lineId: number, el: any) => {
   if (el) {
     detailListRefs.value[lineId] = el
   }
 }
 
+// ==================== 上架明细表单（LineList 层级持有） ====================
+const detailFormRef = ref()
+
+/** 上架：直接打开明细创建表单 */
 const handleStock = (lineId: number) => {
   const row = list.value.find((r) => r.id === lineId)
   openDetailForm('create', lineId, row?.itemId)
 }
 
+/** 打开上架明细表单 */
 const openDetailForm = (type: string, lineId: number, itemId?: number, detailId?: number) => {
   detailFormRef.value.open(type, lineId, itemId, detailId)
 }
 
-const onDetailFormSuccess = async (lineId: number) => {
+/** 明细表单提交成功后，刷新已展开行的 DetailList */
-  await detailListRefs.value[lineId]?.getList()
+const onDetailFormSuccess = (lineId: number) => {
-  await refreshAllDetailAllocated()
+  detailListRefs.value[lineId]?.getList()
 }
 
+// ==================== 初始化 ====================
+defineExpose({ getList })
+
 onMounted(async () => {
   await getList()
-  await refreshAllDetailAllocated()
 })
 </script>

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

@@ -98,63 +98,62 @@
           <dict-tag :type="DICT_TYPE.MES_WM_TRANSFER_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="280" fixed="right">
+      <el-table-column label="操作" align="center" width="240" fixed="right">
         <template #default="scope">
+          <!-- 草稿：编辑、删除 -->
           <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.PREPARE"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['mes:wm-transfer:update']"
+            v-if="scope.row.status === MesWmTransferStatusEnum.PREPARE"
           >
             编辑
           </el-button>
           <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.PREPARE"
-            link
-            type="warning"
-            @click="handleSubmit(scope.row.id)"
-            v-hasPermi="['mes:wm-transfer:update']"
-          >
-            提交
-          </el-button>
-          <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.PREPARE"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['mes:wm-transfer:delete']"
+            v-if="scope.row.status === MesWmTransferStatusEnum.PREPARE"
           >
             删除
           </el-button>
+          <!-- 待确认：到货确认、取消 -->
           <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.UNCONFIRMED"
             link
             type="success"
-            @click="handleConfirm(scope.row.id)"
+            @click="openForm('confirm', scope.row.id)"
             v-hasPermi="['mes:wm-transfer:update']"
+            v-if="scope.row.status === MesWmTransferStatusEnum.UNCONFIRMED"
           >
             到货确认
           </el-button>
+          <!-- 待上架：执行上架、取消 -->
           <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.APPROVING"
             link
             type="success"
             @click="openForm('stock', scope.row.id)"
             v-hasPermi="['mes:wm-transfer:update']"
+            v-if="scope.row.status === MesWmTransferStatusEnum.APPROVING"
           >
             执行上架
           </el-button>
+          <!-- 待执行：执行转移、取消 -->
           <el-button
-            v-if="scope.row.status === MesWmTransferStatusEnum.APPROVED"
             link
-            type="primary"
+            type="success"
-            @click="handleFinish(scope.row.id)"
+            @click="openForm('finish', scope.row.id)"
             v-hasPermi="['mes:wm-transfer:finish']"
+            v-if="scope.row.status === MesWmTransferStatusEnum.APPROVED"
           >
             执行转移
           </el-button>
           <el-button
+            link
+            type="danger"
+            @click="handleCancel(scope.row.id)"
+            v-hasPermi="['mes:wm-transfer:update']"
             v-if="
               [
                 MesWmTransferStatusEnum.UNCONFIRMED,
@@ -162,10 +161,6 @@
                 MesWmTransferStatusEnum.APPROVED
               ].includes(scope.row.status)
             "
-            link
-            type="danger"
-            @click="handleCancel(scope.row.id)"
-            v-hasPermi="['mes:wm-transfer:update']"
           >
             取消
           </el-button>
@@ -239,36 +234,6 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 提交按钮操作 */
-const handleSubmit = async (id: number) => {
-  try {
-    await message.confirm('确认提交该转移单？')
-    await WmTransferApi.submitTransfer(id)
-    message.success('提交成功')
-    await getList()
-  } catch {}
-}
-
-/** 到货确认按钮操作 */
-const handleConfirm = async (id: number) => {
-  try {
-    await message.confirm('确认到货后，将进入待上架状态，是否继续？')
-    await WmTransferApi.confirmTransfer(id)
-    message.success('确认成功')
-    await getList()
-  } catch {}
-}
-
-/** 执行转移按钮操作 */
-const handleFinish = async (id: number) => {
-  try {
-    await message.confirm('确认执行调拨？执行后将更新库存。')
-    await WmTransferApi.finishTransfer(id)
-    message.success('执行成功')
-    await getList()
-  } catch {}
-}
-
 /** 取消按钮操作 */
 const handleCancel = async (id: number) => {
   try {