From 57b75b5201a1409a952c0b86b000f87a2e86c06f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 30 Mar 2026 22:22:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=94=80=E5=94=AE=E5=87=BA=E5=BA=93=E6=8B=A3=E8=B4=A7=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E8=A1=A8=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整表单布局为三行显示，提升用户体验。修改出库仓库、库区、库位和批次号字段为禁用状态，以符合业务逻辑。
---
 .../productsales/ProductSalesDetailForm.vue   | 109 +++++++++++-------
 .../productsales/ProductSalesDetailList.vue   |  10 +-
 .../mes/wm/productsales/ProductSalesForm.vue  |   5 +-
 src/views/mes/wm/productsales/index.vue       |   1 -
 4 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/src/views/mes/wm/productsales/ProductSalesDetailForm.vue b/src/views/mes/wm/productsales/ProductSalesDetailForm.vue
index be095b852..e4ff6b663 100644
--- a/src/views/mes/wm/productsales/ProductSalesDetailForm.vue
+++ b/src/views/mes/wm/productsales/ProductSalesDetailForm.vue
@@ -1,7 +1,7 @@
 <!-- MES 销售出库拣货明细表单弹窗 -->
 <template>
-  <!-- TODO @AI：改成 3 行 -->
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+  <!-- DONE @AI：改成 3 行 -->
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
     <el-form
       ref="formRef"
       :model="formData"
@@ -9,46 +9,71 @@
       label-width="110px"
       v-loading="formLoading"
     >
-      <el-form-item label="物料" prop="itemId">
-        <MdItemSelect v-model="formData.itemId" disabled />
-      </el-form-item>
-      <el-form-item label="选择库存" prop="materialStockId">
-        <WmMaterialStockSelect
-          v-model="formData.materialStockId"
-          :item-id="formData.itemId"
-          @change="handleStockChange"
-        />
-      </el-form-item>
-      <!-- TODO @AI：下面应该都是 disabled？我记得有模块是这么干的； -->
-      <el-form-item label="出库仓库" prop="warehouseId">
-        <WmWarehouseSelect v-model="formData.warehouseId" />
-      </el-form-item>
-      <el-form-item label="库区" prop="locationId" v-if="formData.warehouseId">
-        <WmWarehouseLocationSelect
-          v-model="formData.locationId"
-          :warehouse-id="formData.warehouseId"
-        />
-      </el-form-item>
-      <el-form-item label="库位" prop="areaId" v-if="formData.locationId">
-        <WmWarehouseAreaSelect v-model="formData.areaId" :location-id="formData.locationId" />
-      </el-form-item>
-      <el-form-item label="批次号" prop="batchId">
-        <WmBatchSelect
-          v-model="formData.batchId"
-          :item-id="formData.itemId"
-          @change="handleBatchChange"
-        />
-      </el-form-item>
-      <el-form-item label="数量" prop="quantity">
-        <el-input-number
-          v-model="formData.quantity"
-          :precision="2"
-          :min="0"
-          :max="quantityMax"
-          controls-position="right"
-          class="!w-1/1"
-        />
-      </el-form-item>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="物料" prop="itemId">
+            <MdItemSelect v-model="formData.itemId" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="选择库存" prop="materialStockId">
+            <WmMaterialStockSelect
+              v-model="formData.materialStockId"
+              :item-id="formData.itemId"
+              @change="handleStockChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="数量" prop="quantity">
+            <el-input-number
+              v-model="formData.quantity"
+              :precision="2"
+              :min="0"
+              :max="quantityMax"
+              controls-position="right"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="出库仓库" prop="warehouseId">
+            <WmWarehouseSelect v-model="formData.warehouseId" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="库区" prop="locationId">
+            <WmWarehouseLocationSelect
+              v-model="formData.locationId"
+              :warehouse-id="formData.warehouseId"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="库位" prop="areaId">
+            <WmWarehouseAreaSelect
+              v-model="formData.areaId"
+              :location-id="formData.locationId"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="批次号" prop="batchId">
+            <WmBatchSelect
+              v-model="formData.batchId"
+              :item-id="formData.itemId"
+              @change="handleBatchChange"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
diff --git a/src/views/mes/wm/productsales/ProductSalesDetailList.vue b/src/views/mes/wm/productsales/ProductSalesDetailList.vue
index 58446ca72..89574f290 100644
--- a/src/views/mes/wm/productsales/ProductSalesDetailList.vue
+++ b/src/views/mes/wm/productsales/ProductSalesDetailList.vue
@@ -7,13 +7,7 @@
       <el-table-column label="库位名称" align="center" prop="areaName" min-width="100" />
       <el-table-column label="批次号" align="center" prop="batchCode" min-width="120" />
       <el-table-column label="数量" align="center" prop="quantity" width="100" />
-      <el-table-column
-        v-if="props.formType === 'pick'"
-        label="操作"
-        align="center"
-        width="120"
-        fixed="right"
-      >
+      <el-table-column v-if="isPick" label="操作" align="center" width="120" fixed="right">
         <template #default="scope">
           <el-button link type="primary" @click="emit('edit-detail', scope.row.id)">
             编辑
@@ -42,6 +36,8 @@ const emit = defineEmits(['edit-detail'])
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const isPick = computed(() => props.formType === 'stock') // 是否为拣货模式
+
 const loading = ref(false) // 列表的加载中
 const list = ref<WmProductSalesDetailVO[]>([]) // 明细列表
 
diff --git a/src/views/mes/wm/productsales/ProductSalesForm.vue b/src/views/mes/wm/productsales/ProductSalesForm.vue
index fce02f3ac..7952b376c 100644
--- a/src/views/mes/wm/productsales/ProductSalesForm.vue
+++ b/src/views/mes/wm/productsales/ProductSalesForm.vue
@@ -111,9 +111,7 @@
         </el-col>
       </el-row>
       <!-- 运输信息：填写运单/详情模式下展示，或已有运输数据时展示 -->
-      <template
-        v-if="isShipping || formType === 'detail' || formData.carrier || formData.shippingNumber"
-      >
+      <template v-if="isShipping || isDetail || formData.carrier || formData.shippingNumber">
         <el-divider content-position="left">运输信息</el-divider>
         <el-row>
           <el-col :span="8">
@@ -193,6 +191,7 @@ const isUpdate = computed(() => ['create', 'update'].includes(formType.value)) /
 const isPick = computed(() => formType.value === 'stock') // 是否为拣货模式
 const isShipping = computed(() => formType.value === 'shipping') // 是否为填写运单模式
 const isFinish = computed(() => formType.value === 'finish') // 是否为执行出库模式
+const isDetail = computed(() => formType.value === 'detail') // 是否为详情模式
 const isHeaderReadonly = computed(() =>
   ['stock', 'shipping', 'finish', 'detail'].includes(formType.value)
 ) // 是否只读
diff --git a/src/views/mes/wm/productsales/index.vue b/src/views/mes/wm/productsales/index.vue
index 0647cace3..db8fd39c3 100644
--- a/src/views/mes/wm/productsales/index.vue
+++ b/src/views/mes/wm/productsales/index.vue
@@ -1,4 +1,3 @@
-<!-- TODO @AI：/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/productsales 模块下，减少 formType == ；而是更过 isXXX，通过 compute 计算 -->
 <template>
   <ContentWrap>
     <el-form