style：仓储管理-入库/出库-产品名称下拉框改为级联

src/views/erp/stock/in/components/StockInItemForm.vue

@@ -37,20 +37,17 @@
       <el-table-column label="产品名称" min-width="180">
         <template #default="{ row, $index }">
           <el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
-            <el-select
+            <el-cascader
               v-model="row.productId"
+              :options="productCascaderOptions"
+              :props="productCascaderProps"
+              :show-all-levels="false"
               clearable
               filterable
               @change="onChangeProduct($event, row)"
               placeholder="请选择产品"
-            >
+              class="!w-100%"
-              <el-option
-                v-for="item in productList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
             />
-            </el-select>
           </el-form-item>
         </template>
       </el-table-column>
@@ -156,6 +153,36 @@ const productList = ref<ProductVO[]>([]) // 产品列表
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const defaultWarehouse = ref<WarehouseVO>(undefined) // 默认仓库
 
+const productCascaderProps = {
+  emitPath: false,
+  value: 'value',
+  label: 'label',
+  children: 'children'
+}
+
+const productCascaderOptions = computed(() => {
+  const map = new Map<number | string, { value: number | string; label: string; children: any[] }>()
+  for (const item of productList.value) {
+    const categoryKey = item.categoryId ?? item.categoryName ?? ''
+    const categoryLabel = item.categoryName ?? String(categoryKey)
+    if (!map.has(categoryKey)) {
+      map.set(categoryKey, {
+        value: categoryKey,
+        label: categoryLabel,
+        children: []
+      })
+    }
+    const group = map.get(categoryKey)
+    if (group) {
+      group.children.push({
+        value: item.id,
+        label: item.name
+      })
+    }
+  }
+  return Array.from(map.values())
+})
+
 /** 初始化设置入库项 */
 watch(
   () => props.items,

src/views/erp/stock/out/components/StockOutItemForm.vue

@@ -37,20 +37,17 @@
       <el-table-column label="产品名称" min-width="180">
         <template #default="{ row, $index }">
           <el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
-            <el-select
+            <el-cascader
               v-model="row.productId"
+              :options="productCascaderOptions"
+              :props="productCascaderProps"
+              :show-all-levels="false"
               clearable
               filterable
               @change="onChangeProduct($event, row)"
               placeholder="请选择产品"
-            >
+              class="!w-100%"
-              <el-option
-                v-for="item in productList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
             />
-            </el-select>
           </el-form-item>
         </template>
       </el-table-column>
@@ -156,6 +153,36 @@ const productList = ref<ProductVO[]>([]) // 产品列表
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const defaultWarehouse = ref<WarehouseVO>(undefined) // 默认仓库
 
+const productCascaderProps = {
+  emitPath: false,
+  value: 'value',
+  label: 'label',
+  children: 'children'
+}
+
+const productCascaderOptions = computed(() => {
+  const map = new Map<number | string, { value: number | string; label: string; children: any[] }>()
+  for (const item of productList.value) {
+    const categoryKey = item.categoryId ?? item.categoryName ?? ''
+    const categoryLabel = item.categoryName ?? String(categoryKey)
+    if (!map.has(categoryKey)) {
+      map.set(categoryKey, {
+        value: categoryKey,
+        label: categoryLabel,
+        children: []
+      })
+    }
+    const group = map.get(categoryKey)
+    if (group) {
+      group.children.push({
+        value: item.id,
+        label: item.name
+      })
+    }
+  }
+  return Array.from(map.values())
+})
+
 /** 初始化设置出库项 */
 watch(
   () => props.items,