feat: 优化库位树UI层级颜色，并将入库页面库位输入升级为级联选择器

2026-03-06 14:52:47 +08:00
parent 359b8a8345
commit 7201b658fb
7 changed files with 341 additions and 20 deletions
--- a/inventory-web/src/views/stock/inbound/buy.vue
+++ b/inventory-web/src/views/stock/inbound/buy.vue
@ -327,16 +327,15 @@
                </el-col>
                <el-col :span="6">
                  <el-form-item label="库位" prop="warehouse_location">
-                    <el-autocomplete
-                        v-model="form.warehouse_location"
-                        :fetch-suggestions="querySearchLocation"
-                        placeholder="例如: A-01-02"
-                        style="width: 100%"
-                        clearable
-                        :trigger-on-focus="true"
-                    >
-                      <template #default="{ item }"><div style="font-weight: 500">{{ item.value }}</div></template>
-                    </el-autocomplete>
+                    <el-cascader
+                      v-model="form.warehouse_location"
+                      :options="warehouseOptions"
+                      :props="{ value: 'full_path', label: 'name', children: 'children', checkStrictly: true, emitPath: false }"
+                      placeholder="请选择库位"
+                      style="width: 100%"
+                      clearable
+                      filterable
+                    />
                  </el-form-item>
                </el-col>
              </el-row>
@ -653,6 +652,7 @@ import {
  getFilterOptions
 } from '@/api/inbound/buy'
 import {getLabelPreview, executePrint} from '@/api/common/print'
+import { getWarehouseTree } from '@/api/common/warehouse'
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
 import { useUserStore } from '@/stores/user'

@ -782,6 +782,9 @@ const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null)
 const currentCameraField = ref<'arrival_photo' | 'inspection_report'>('arrival_photo')
 const inspection_report_url = ref('')

+// 库位级联选择器数据
+const warehouseOptions = ref<any[]>([])
+
 const advancedFilterVisible = ref(false)
 const advancedConditions = ref([{ field: '', operator: '', value: '' }])
 const fieldOptions = computed(() => {
@ -1227,6 +1230,18 @@ const fetchOptions = async () => {
  }
 }

+// 加载库位树数据
+const loadWarehouseTree = async () => {
+  try {
+    const res = await getWarehouseTree()
+    if (res.code === 200) {
+      warehouseOptions.value = res.data || []
+    }
+  } catch (e) {
+    console.error('加载库位树失败', e)
+  }
+}
+
 const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.category = ''
@ -1524,6 +1539,7 @@ onMounted(() => {
  initColumnPermissions()
  fetchData()
  fetchOptions()
+  loadWarehouseTree()
 })
 </script>

--- a/inventory-web/src/views/stock/inbound/product.vue
+++ b/inventory-web/src/views/stock/inbound/product.vue
@ -286,7 +286,17 @@
            <div class="card-content">
              <el-row :gutter="24">
                <el-col :span="6"><el-form-item label="SKU" prop="sku"><el-input v-model="form.sku" placeholder="自动生成" disabled /></el-form-item></el-col>
-                <el-col :span="6"><el-form-item label="库位" prop="warehouse_location"><el-input v-model="form.warehouse_location" placeholder="例如: B-01-01" clearable /></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="库位" prop="warehouse_location">
+                  <el-cascader
+                    v-model="form.warehouse_location"
+                    :options="warehouseOptions"
+                    :props="{ value: 'full_path', label: 'name', children: 'children', checkStrictly: true, emitPath: false }"
+                    placeholder="请选择库位"
+                    style="width: 100%"
+                    clearable
+                    filterable
+                  />
+                </el-form-item></el-col>
                <el-col :span="6"><el-form-item label="入库日期"><el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled /></el-form-item></el-col>
              </el-row>

@ -513,6 +523,7 @@ import {
 import { uploadFile, deleteFile } from '@/api/inbound/buy'
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
 import { getLabelPreview, executePrint } from '@/api/common/print'
+import { getWarehouseTree } from '@/api/common/warehouse'
 import { useUserStore } from '@/stores/user'

 // ------------------------------------
@ -628,6 +639,9 @@ const currentCameraField = ref<'product_photo' | 'quality_report_link' | 'inspec
 const quality_url = ref('')
 const inspection_url = ref('')

+// 库位级联选择器数据
+const warehouseOptions = ref<any[]>([])
+
 // [核心优化] 所有列定义
 const allColumns = [
  { prop: 'company_name', label: '所属公司', minWidth: '100', sortable: true }, // [新增]
@ -958,6 +972,18 @@ const fetchOptions = async () => {
  }
 }

+// 加载库位树数据
+const loadWarehouseTree = async () => {
+  try {
+    const res = await getWarehouseTree()
+    if (res.code === 200) {
+      warehouseOptions.value = res.data || []
+    }
+  } catch (e) {
+    console.error('加载库位树失败', e)
+  }
+}
+
 const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.category = ''
@ -1178,6 +1204,7 @@ onMounted(() => {
  initColumnPermissions()
  fetchData()
  fetchOptions()
+  loadWarehouseTree()
 })

 // 成本计算监听
--- a/inventory-web/src/views/stock/inbound/semi.vue
+++ b/inventory-web/src/views/stock/inbound/semi.vue
@ -345,7 +345,17 @@
              <el-row :gutter="24">
                <el-col :span="6"><el-form-item label="编码/SKU" prop="sku"><el-input v-model="form.sku" placeholder="系统自动生成" disabled/></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="入库日期" prop="in_date"><el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled/></el-form-item></el-col>
-                <el-col :span="6"><el-form-item label="库位" prop="warehouse_location"><el-input v-model="form.warehouse_location" placeholder="例如: B-01-01" clearable/></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="库位" prop="warehouse_location">
+                  <el-cascader
+                    v-model="form.warehouse_location"
+                    :options="warehouseOptions"
+                    :props="{ value: 'full_path', label: 'name', children: 'children', checkStrictly: true, emitPath: false }"
+                    placeholder="请选择库位"
+                    style="width: 100%"
+                    clearable
+                    filterable
+                  />
+                </el-form-item></el-col>
              </el-row>

              <div class="identity-panel">
@ -577,6 +587,7 @@ import {
 import { uploadFile, deleteFile } from '@/api/inbound/buy'
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
 import {getLabelPreview, executePrint} from '@/api/common/print'
+import { getWarehouseTree } from '@/api/common/warehouse'
 import { useUserStore } from '@/stores/user'

 // ------------------------------------
@ -691,6 +702,9 @@ const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null)
 const currentCameraField = ref<'arrival_photo' | 'quality_report_link'>('arrival_photo')
 const quality_report_url = ref('')

+// 库位级联选择器数据
+const warehouseOptions = ref<any[]>([])
+
 const entryMode = ref('batch')
 const modeLocked = ref(false)

@ -1092,6 +1106,18 @@ const fetchOptions = async () => {
  }
 }

+// 加载库位树数据
+const loadWarehouseTree = async () => {
+  try {
+    const res = await getWarehouseTree()
+    if (res.code === 200) {
+      warehouseOptions.value = res.data || []
+    }
+  } catch (e) {
+    console.error('加载库位树失败', e)
+  }
+}
+
 const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.category = ''
@ -1306,6 +1332,7 @@ onMounted(() => {
  initColumnPermissions()
  fetchData()
  fetchOptions()
+  loadWarehouseTree()
 })
 </script>