✨ feat(mes): 优化销售出库拣货明细表单布局

调整表单布局为三行显示，提升用户体验。修改出库仓库、库区、库位和批次号字段为禁用状态，以符合业务逻辑。

src/views/mes/wm/productsales/ProductSalesDetailForm.vue

@@ -1,7 +1,7 @@
 <!-- MES 销售出库拣货明细表单弹窗 -->
 <template>
-  <!-- TODO @AI：改成 3 行 -->
+  <!-- DONE @AI：改成 3 行 -->
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+  <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">
+      <el-row>
-        <MdItemSelect v-model="formData.itemId" disabled />
+        <el-col :span="8">
-      </el-form-item>
+          <el-form-item label="物料" prop="itemId">
-      <el-form-item label="选择库存" prop="materialStockId">
+            <MdItemSelect v-model="formData.itemId" disabled />
-        <WmMaterialStockSelect
+          </el-form-item>
-          v-model="formData.materialStockId"
+        </el-col>
-          :item-id="formData.itemId"
+        <el-col :span="8">
-          @change="handleStockChange"
+          <el-form-item label="选择库存" prop="materialStockId">
-        />
+            <WmMaterialStockSelect
-      </el-form-item>
+              v-model="formData.materialStockId"
-      <!-- TODO @AI：下面应该都是 disabled？我记得有模块是这么干的； -->
+              :item-id="formData.itemId"
-      <el-form-item label="出库仓库" prop="warehouseId">
+              @change="handleStockChange"
-        <WmWarehouseSelect v-model="formData.warehouseId" />
+            />
-      </el-form-item>
+          </el-form-item>
-      <el-form-item label="库区" prop="locationId" v-if="formData.warehouseId">
+        </el-col>
-        <WmWarehouseLocationSelect
+        <el-col :span="8">
-          v-model="formData.locationId"
+          <el-form-item label="数量" prop="quantity">
-          :warehouse-id="formData.warehouseId"
+            <el-input-number
-        />
+              v-model="formData.quantity"
-      </el-form-item>
+              :precision="2"
-      <el-form-item label="库位" prop="areaId" v-if="formData.locationId">
+              :min="0"
-        <WmWarehouseAreaSelect v-model="formData.areaId" :location-id="formData.locationId" />
+              :max="quantityMax"
-      </el-form-item>
+              controls-position="right"
-      <el-form-item label="批次号" prop="batchId">
+              class="!w-1/1"
-        <WmBatchSelect
+            />
-          v-model="formData.batchId"
+          </el-form-item>
-          :item-id="formData.itemId"
+        </el-col>
-          @change="handleBatchChange"
+      </el-row>
-        />
+      <el-row>
-      </el-form-item>
+        <el-col :span="8">
-      <el-form-item label="数量" prop="quantity">
+          <el-form-item label="出库仓库" prop="warehouseId">
-        <el-input-number
+            <WmWarehouseSelect v-model="formData.warehouseId" disabled />
-          v-model="formData.quantity"
+          </el-form-item>
-          :precision="2"
+        </el-col>
-          :min="0"
+        <el-col :span="8">
-          :max="quantityMax"
+          <el-form-item label="库区" prop="locationId">
-          controls-position="right"
+            <WmWarehouseLocationSelect
-          class="!w-1/1"
+              v-model="formData.locationId"
-        />
+              :warehouse-id="formData.warehouseId"
-      </el-form-item>
+              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>

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
+      <el-table-column v-if="isPick" label="操作" align="center" width="120" fixed="right">
-        v-if="props.formType === 'pick'"
-        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[]>([]) // 明细列表
 

src/views/mes/wm/productsales/ProductSalesForm.vue

@@ -111,9 +111,7 @@
         </el-col>
       </el-row>
       <!-- 运输信息：填写运单/详情模式下展示，或已有运输数据时展示 -->
-      <template
+      <template v-if="isShipping || isDetail || formData.carrier || formData.shippingNumber">
-        v-if="isShipping || formType === 'detail' || 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)
 ) // 是否只读

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