✨ feat(mes): 优化库存选择器和退货明细表单布局

调整库存选择器为下拉选择组件，支持前端过滤，提升用户体验。更新退货明细表单，增加库存记录选择，优化表单布局，确保信息展示更为清晰。

src/views/mes/wm/materialStock/components/WmMaterialStockSelect.vue

@@ -1,132 +1,99 @@
+<!-- MES 库存选择器：一次加载，前端过滤（支持按 itemId 检索） -->
 <template>
-  <el-dialog v-model="dialogVisible" title="选择库存" width="1200px" @close="handleClose">
+  <el-select
-    <el-form :inline="true" :model="queryParams" class="mb-10px">
+    v-model="selectValue"
-      <el-form-item label="批次号">
+    :placeholder="placeholder"
-        <el-input
+    :disabled="disabled"
-          v-model="queryParams.batchCode"
+    :clearable="clearable"
-          placeholder="请输入批次号"
+    filterable
-          clearable
+    :filter-method="handleFilter"
-          @keyup.enter="handleQuery"
+    class="!w-1/1"
-          class="!w-200px"
+    @change="handleChange"
-        />
+  >
-      </el-form-item>
+    <el-option
-      <el-form-item label="仓库">
+      v-for="item in filteredList"
-        <WmWarehouseSelect v-model="queryParams.warehouseId" class="!w-200px" />
+      :key="item.id"
-      </el-form-item>
+      :label="`${item.warehouseName} / ${item.batchCode || '-'} / 数量:${item.quantity}`"
-      <el-form-item>
+      :value="item.id"
-        <el-button type="primary" @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="list"
-      @row-click="handleRowClick"
-      highlight-current-row
-      max-height="400px"
     >
-      <el-table-column label="批次号" prop="batchCode" width="150" />
+      <div class="flex items-center gap-8px">
-      <el-table-column label="仓库" prop="warehouseName" width="150" />
+        <span>{{ item.warehouseName }} / {{ item.locationName || '-' }} / {{ item.areaName || '-' }}</span>
-      <el-table-column label="库区" prop="locationName" width="150" />
+        <el-tag size="small" type="info" class="ml-4px">
-      <el-table-column label="库位" prop="areaName" width="150" />
+          {{ item.batchCode || '无批次' }} | {{ item.quantity }}
-      <el-table-column label="可用数量" prop="quantity" width="120" />
+        </el-tag>
-      <el-table-column label="是否冻结" prop="frozen" width="100">
+      </div>
-        <template #default="scope">
+    </el-option>
-          <el-tag :type="scope.row.frozen ? 'danger' : 'success'">
+  </el-select>
-            {{ scope.row.frozen ? '是' : '否' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <Pagination
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      :total="total"
-      @pagination="getList"
-    />
-
-    <template #footer>
-      <el-button @click="handleClose">取消</el-button>
-      <el-button type="primary" @click="handleConfirm">确定</el-button>
-    </template>
-  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { WmMaterialStockApi, WmMaterialStockVO } from '@/api/mes/wm/materialstock'
-import { WmMaterialStockApi } from '@/api/mes/wm/materialstock'
-import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
 
 defineOptions({ name: 'WmMaterialStockSelect' })
 
-const emit = defineEmits(['select'])
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    itemId?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择库存'
+  }
+)
 
-const dialogVisible = ref(false)
+const emit = defineEmits<{
-const loading = ref(false)
+  'update:modelValue': [value: number | undefined]
-const list = ref([])
+  change: [item: WmMaterialStockVO | undefined]
-const total = ref(0)
+}>()
-const selectedRow = ref(null)
-const currentItemId = ref(null)
 
-const queryParams = reactive({
+const allList = ref<WmMaterialStockVO[]>([])
-  pageNo: 1,
+const filteredList = ref<WmMaterialStockVO[]>([])
-  pageSize: 10,
+
-  itemId: undefined,
+const selectValue = computed({
-  batchCode: undefined,
+  get: () => props.modelValue,
-  warehouseId: undefined
+  set: (val) => emit('update:modelValue', val)
 })
 
-const open = (itemId?: number) => {
+/** 前端过滤（仓库名 + 批次号） */
-  currentItemId.value = itemId
+const handleFilter = (query: string) => {
-  queryParams.itemId = itemId
+  if (!query) {
-  dialogVisible.value = true
+    filteredList.value = allList.value
-  getList()
-}
-
-const handleClose = () => {
-  dialogVisible.value = false
-  selectedRow.value = null
-  currentItemId.value = null
-}
-
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await WmMaterialStockApi.getMaterialStockPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-const resetQuery = () => {
-  queryParams.batchCode = undefined
-  queryParams.warehouseId = undefined
-  queryParams.itemId = currentItemId.value
-  handleQuery()
-}
-
-const handleRowClick = (row: any) => {
-  selectedRow.value = row
-}
-
-const handleConfirm = () => {
-  if (!selectedRow.value) {
     return
   }
-  emit('select', selectedRow.value)
+  const keyword = query.toLowerCase()
-  handleClose()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.warehouseName?.toLowerCase().includes(keyword) ||
+      item.batchCode?.toLowerCase().includes(keyword) ||
+      item.areaName?.toLowerCase().includes(keyword)
+  )
 }
 
-defineExpose({ open })
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载库存列表 */
+const loadData = async () => {
+  const list: WmMaterialStockVO[] = await WmMaterialStockApi.getMaterialStockSimpleList(props.itemId)
+  // 过滤掉冻结和零库存
+  allList.value = list.filter((item) => !item.frozen && item.quantity > 0)
+  filteredList.value = allList.value
+}
+
+/** 监听 itemId 变化重新加载 */
+watch(() => props.itemId, () => {
+  loadData()
+})
+
+onMounted(() => {
+  loadData()
+})
 </script>

src/views/mes/wm/returnvendor/ReturnVendorDetailForm.vue

@@ -1,6 +1,6 @@
 <!-- MES 供应商退货拣货明细表单弹窗 -->
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
     <el-form
       ref="formRef"
       :model="formData"
@@ -8,33 +8,66 @@
       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="warehouseId">
+            <MdItemSelect v-model="formData.itemId" disabled />
-        <WmWarehouseSelect v-model="formData.warehouseId" />
+          </el-form-item>
-      </el-form-item>
+        </el-col>
-      <el-form-item label="库区" prop="locationId" v-if="formData.warehouseId">
+        <el-col :span="8">
-        <WmWarehouseLocationSelect
+          <el-form-item label="库存记录" prop="materialStockId">
-          v-model="formData.locationId"
+            <WmMaterialStockSelect
-          :warehouse-id="formData.warehouseId"
+              v-model="formData.materialStockId"
-        />
+              :item-id="formData.itemId"
-      </el-form-item>
+              @change="handleStockChange"
-      <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>
+        </el-col>
-      <el-form-item label="批次号" prop="batchCode">
+        <el-col :span="8">
-        <el-input v-model="formData.batchCode" placeholder="请输入批次号" />
+          <el-form-item label="数量" prop="quantity">
-      </el-form-item>
+            <el-input-number
-      <el-form-item label="数量" prop="quantity">
+              v-model="formData.quantity"
-        <el-input-number
+              :precision="2"
-          v-model="formData.quantity"
+              :min="0"
-          :precision="2"
+              :max="quantityMax"
-          :min="0"
+              controls-position="right"
-          controls-position="right"
+              class="!w-1/1"
-          class="!w-1/1"
+            />
-        />
+          </el-form-item>
-      </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="批次号">
+            <el-input :model-value="formData.batchCode" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -44,11 +77,10 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { WmReturnVendorDetailApi, WmReturnVendorDetailVO } from '@/api/mes/wm/returnvendor/detail'
-  WmReturnVendorDetailApi,
+import { WmMaterialStockVO } from '@/api/mes/wm/materialstock'
-  WmReturnVendorDetailVO
-} from '@/api/mes/wm/returnvendor/detail'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import WmMaterialStockSelect from '@/views/mes/wm/materialstock/components/WmMaterialStockSelect.vue'
 import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
 import WmWarehouseLocationSelect from '@/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue'
 import WmWarehouseAreaSelect from '@/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue'
@@ -68,12 +100,15 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中
 const formType = ref('') // 表单的类型：create / update
+const quantityMax = ref<number | undefined>(undefined) // 数量上限（在库数量）
 const formData = ref({
   id: undefined as number | undefined,
   lineId: undefined as number | undefined,
   returnId: undefined as number | undefined,
   itemId: undefined as number | undefined,
+  materialStockId: undefined as number | undefined,
   quantity: undefined as number | undefined,
+  batchId: undefined as number | undefined,
   batchCode: undefined as string | undefined,
   warehouseId: undefined as number | undefined,
   locationId: undefined as number | undefined,
@@ -81,13 +116,32 @@ const formData = ref({
 })
 const formRules = reactive({
   itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
-  warehouseId: [{ required: true, message: '退货仓库不能为空', trigger: 'change' }],
+  materialStockId: [{ required: true, message: '请选择库存记录', trigger: 'change' }],
-  locationId: [{ required: true, message: '库区不能为空', trigger: 'change' }],
-  areaId: [{ required: true, message: '库位不能为空', trigger: 'change' }],
   quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
+/** 库存选中回调 —— 自动回填仓库/库区/库位/批次/数量 */
+const handleStockChange = (stock: WmMaterialStockVO | undefined) => {
+  if (!stock) {
+    formData.value.warehouseId = undefined
+    formData.value.locationId = undefined
+    formData.value.areaId = undefined
+    formData.value.batchId = undefined
+    formData.value.batchCode = undefined
+    formData.value.quantity = undefined
+    quantityMax.value = undefined
+    return
+  }
+  formData.value.warehouseId = stock.warehouseId
+  formData.value.locationId = stock.locationId
+  formData.value.areaId = stock.areaId
+  formData.value.batchId = stock.batchId
+  formData.value.batchCode = stock.batchCode
+  formData.value.quantity = stock.quantity
+  quantityMax.value = stock.quantity
+}
+
 /** 打开弹窗 */
 const open = async (type: string, lineId: number, itemId?: number, detailId?: number) => {
   dialogVisible.value = true
@@ -99,7 +153,8 @@ const open = async (type: string, lineId: number, itemId?: number, detailId?: nu
   if (detailId) {
     formLoading.value = true
     try {
-      formData.value = await WmReturnVendorDetailApi.getReturnVendorDetail(detailId)
+      const data = await WmReturnVendorDetailApi.getReturnVendorDetail(detailId)
+      formData.value = data
     } finally {
       formLoading.value = false
     }
@@ -141,12 +196,15 @@ const resetForm = () => {
     lineId: undefined,
     returnId: undefined,
     itemId: undefined,
+    materialStockId: undefined,
     quantity: undefined,
+    batchId: undefined,
     batchCode: undefined,
     warehouseId: undefined,
     locationId: undefined,
     areaId: undefined
   }
+  quantityMax.value = undefined
   formRef.value?.resetFields()
 }