From 82bfa10b26dbb279ec2d00c6243c51af1fefe457 Mon Sep 17 00:00:00 2001
From: yvan <luoyifan@qq.com>
Date: Wed, 30 Jul 2025 20:35:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=93=E5=AD=98=E7=9A=84=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E3=80=81=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inventory/query.vue | 319 +++++++++++++++++++++++-------------------
 1 file changed, 175 insertions(+), 144 deletions(-)

diff --git a/src/views/inventory/query.vue b/src/views/inventory/query.vue
index f6d2d41..51f4de5 100644
--- a/src/views/inventory/query.vue
+++ b/src/views/inventory/query.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { reactive, ref, useTemplateRef } from "vue";
-import { ElButton } from "element-plus";
-import { Delete, Search, Plus } from "@element-plus/icons-vue";
-import DataForm from "@/components/data-form/DataForm.vue";
-import type { FormField } from "@/components/data-form/DataFormTypes.ts";
-import { AgGridVue } from "ag-grid-vue3";
-import { type GridOptions, type IServerSideGetRowsParams } from "ag-grid-enterprise";
-import type { GridApi, GridReadyEvent } from "ag-grid-community";
-import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
-import { Request } from "@ease-forge/shared";
-import lodash from "lodash";
+import { reactive, ref, watch, useTemplateRef } from 'vue'
+import { ElButton } from 'element-plus'
+import { Delete, Search, Plus } from '@element-plus/icons-vue'
+import DataForm from '@/components/data-form/DataForm.vue'
+import type { FormField } from '@/components/data-form/DataFormTypes.ts'
+import { AgGridVue } from 'ag-grid-vue3'
+import { type GridOptions, type IServerSideGetRowsParams } from 'ag-grid-enterprise'
+import type { GridApi, GridReadyEvent } from 'ag-grid-community'
+import { localeText as localeTextCn } from '@/components/yvTable/yv-aggrid-cn.locale'
+import { Request } from '@ease-forge/shared'
+import lodash from 'lodash'
 
 // 定义 Props 类型
 interface ComponentProps {
@@ -28,7 +28,9 @@ interface ComponentState {
 // state 属性
 const state = reactive<ComponentState>({
   loading: false,
-  queryData: {},
+  queryData: {
+    envId: '10'
+  },
   grid1Data: []
 })
 
@@ -41,76 +43,76 @@ interface ComponentData {
 
 // 内部数据
 const data: ComponentData = {
-    formFields: [
-        {
-            dataPath: 'envId', label: '环境', input: 'SelectV2',
-            inputProps: {
-                placeholder: '选择环境',
-                clearable: true,
-              options: [
-                { value: "10", label: "物理环境" },
-                { value: "13", label: "虚拟环境1" },
-              ],
-            }
-        },
-        {
-            dataPath: 'lpn', label: '托盘条码', input: 'Input',
-            inputProps: {
-                placeholder: '托盘条码',
-                clearable: true,
-            }
-        },
-        {
-            dataPath: 'locCode', label: '库存位置', input: 'Input',
-            inputProps: {
-                placeholder: '库存位置',
-                clearable: true,
-            }
-        },
-    ],
-    gridSetting: {
-        localeText: localeTextCn,
-        // suppressNoRowsOverlay: true,
-        // suppressLoadingOverlay: true,
-        // 选择行配置
-        rowSelection: "single",
-        rowModelType: "serverSide",
-        columnDefs: [
-            { field: 'id', headerName: 'id', editable: false, hide: true },
-            { field: 'loc_code', headerName: '库位编号', editable: false },
-            { field: 'lpn', headerName: '容器编码', editable: false },
-            { field: 'container_type', headerName: '容器类型', editable: false, width: 120 },
-            { field: 'rack', headerName: '货位名', editable: false, width: 120 },
-            { field: 'bay', headerName: '货位列', editable: false, width: 100 },
-            { field: 'level', headerName: '货位层', editable: false, width: 100 },
-            { field: 'cell', headerName: '货位格', editable: false, width: 100 },
-            { field: 'catalog_code', headerName: '仓库楼层', editable: false, width: 110 },
-            { field: 'way_point', headerName: '地标名', editable: false, width: 100 },
-            { field: 'loc_direction', headerName: '地标方位', editable: false, width: 110 },
-            {
-                field: 'is_lock', headerName: '是否锁定', editable: false, width: 110,
-                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
-            },
-            {
-                field: 'is_frozen', headerName: '是否冻结', editable: false, width: 110,
-                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
-            },
-            { field: 'create_at', headerName: '创建时间', editable: false, width: 160 },
-            { field: 'create_by', headerName: '创建人', editable: false, width: 100 },
-            { field: 'update_at', headerName: '最后更新时间', editable: false, width: 160 },
-            { field: 'update_by', headerName: '更新人', editable: false, width: 100 },
-        ],
-        pagination: true,
-        paginationPageSize: 50,
-        // cacheBlockSize: 50,
-        // suppressPaginationPanel
-        onGridReady(event: GridReadyEvent) {
-            data.api = event.api;
-            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
-        },
+  formFields: [
+    {
+      dataPath: 'envId', label: '环境', input: 'SelectV2',
+      inputProps: {
+        placeholder: '选择环境',
+        clearable: true,
+        options: [
+          { value: '10', label: '(10)物理环境' },
+          { value: '13', label: '(13)虚拟环境1' }
+        ]
+      }
     },
-};
-const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef");
+    {
+      dataPath: 'lpn', label: '托盘条码', input: 'Input',
+      inputProps: {
+        placeholder: '托盘条码',
+        clearable: true
+      }
+    },
+    {
+      dataPath: 'locCode', label: '库存位置', input: 'Input',
+      inputProps: {
+        placeholder: '库存位置',
+        clearable: true
+      }
+    }
+  ],
+  gridSetting: {
+    localeText: localeTextCn,
+    // suppressNoRowsOverlay: true,
+    // suppressLoadingOverlay: true,
+    // 选择行配置
+    rowSelection: 'single',
+    rowModelType: 'serverSide',
+    columnDefs: [
+      { field: 'id', headerName: 'id', editable: false, hide: true },
+      { field: 'loc_code', headerName: '库位编号', editable: false, width: 120 },
+      { field: 'lpn', headerName: '容器编码', editable: false, width: 120 },
+      { field: 'container_type', headerName: '容器类型', editable: false, width: 120 },
+      { field: 'rack', headerName: '货位名', editable: false, width: 120 },
+      { field: 'bay', headerName: '货位列', editable: false, width: 100 },
+      { field: 'level', headerName: '货位层', editable: false, width: 100 },
+      { field: 'cell', headerName: '货位格', editable: false, width: 100 },
+      { field: 'catalog_code', headerName: '仓库楼层', editable: false, width: 110 },
+      { field: 'way_point', headerName: '地标名', editable: false, width: 100 },
+      { field: 'loc_direction', headerName: '地标方位', editable: false, width: 110 },
+      {
+        field: 'is_lock', headerName: '是否锁定', editable: false, width: 110,
+        valueFormatter: params => lodash.toString(params.value) === '0' ? '否' : '是'
+      },
+      {
+        field: 'is_frozen', headerName: '是否冻结', editable: false, width: 110,
+        valueFormatter: params => lodash.toString(params.value) === '0' ? '否' : '是'
+      },
+      { field: 'create_at', headerName: '创建时间', editable: false, width: 160 },
+      { field: 'create_by', headerName: '创建人', editable: false, width: 100 },
+      { field: 'update_at', headerName: '最后更新时间', editable: false, width: 160 },
+      { field: 'update_by', headerName: '更新人', editable: false, width: 100 }
+    ],
+    pagination: true,
+    paginationPageSize: 50,
+    // cacheBlockSize: 50,
+    // suppressPaginationPanel
+    onGridReady(event: GridReadyEvent) {
+      data.api = event.api
+      data.api.setServerSideDatasource({ getRows: serverSideDatasource })
+    }
+  }
+}
+const grid = useTemplateRef<InstanceType<typeof AgGridVue>>('gridRef')
 
 function reload() {
   data.api.paginationGoToPage(0)
@@ -140,70 +142,121 @@ function serverSideDatasource(params: IServerSideGetRowsParams) {
 const lpnList = ref([])
 const locationList = ref([])
 const addInvDialogVisible = ref(false)
+const addInvFormRef = useTemplateRef<InstanceType<any>>('addInvFormRef')
 const addInvForm = reactive({
   env_id: 10,
   lpn: '',
   loc_code: '',
   layer_index: 0,
-  qty: 0
+  qty: 1
 })
 
+// 追踪 addInvForm 的 env_id 变化, 请求 getLpnLocations, 并且立即执行
+watch(() => [addInvDialogVisible.value, addInvForm.env_id], (newVal) => {
+  if (!addInvDialogVisible.value) {
+    return
+  }
+  getLpnLocations()
+}, { immediate: true })
+
 function showInvDialog() {
   addInvDialogVisible.value = true
   addInvForm.env_id = 10
   addInvForm.lpn = ''
   addInvForm.loc_code = ''
   addInvForm.layer_index = 0
-  addInvForm.qty = 0
+  addInvForm.qty = 1
 }
 
 function addInvCommit() {
-  system.showLoading()
-  Request.request.post('/api/workbench/LccController@addInvCommit',
-    addInvForm
 
-  ).then(res => {
-    if (res.success) {
-      addInvDialogVisible.value = false
-      system.msg('添加成功', 'success')
+  addInvFormRef.value.validate((valid) => {
+    if (valid) {
+      system.showLoading()
+      Request.request.post('/api/workbench/LccController@addInvCommit',
+        {
+          envId: addInvForm.env_id,
+          lpn: addInvForm.lpn,
+          locCode: addInvForm.loc_code,
+          qty: Number(addInvForm.qty),
+          layerIndex: Number(addInvForm.layer_index)
+        }
+      ).then(res => {
+        if (res.success) {
+          addInvDialogVisible.value = false
+          system.msg('添加成功', 'success')
+          reload()
 
-    } else {
-      system.showErrorDialog(res.msg)
-    }
+        } else {
+          system.showErrorDialog(res.msg)
+        }
 
-  }).finally(() => {
-    system.clearLoading()
+      }).finally(() => {
+        system.clearLoading()
+      })
+    }
   })
+
 }
 
 function getLpnLocations() {
+  if (!addInvForm.env_id) {
+    lpnList.value = []
+    locationList.value = []
+    return
+  }
+
+  system.showLoading()
   Request.request.post('/api/workbench/LccController@getLpnLocations',
-    addInvForm
+    {
+      envId: addInvForm.env_id
+    }
   ).then(res => {
     if (res.success) {
-      addInvDialogVisible.value = false
-      lpnList.value = res.data.lpnList
-      locationList.value = res.data.locationList
+      lpnList.value = res.data.lpnList || []
+      locationList.value = res.data.locationList || []
 
     } else {
       system.showErrorDialog(res.msg)
     }
 
+  }).finally(() => {
+    system.clearLoading()
   })
 }
 
 function delInvLpn() {
-  const  row = data.api?.getSelectedRows()?.[0];
-  console.log("row", row);
-  system.confirm("确定删除").then(res => {
-    Request.request.get("/api/workbench/DeviceManager@delInvLpn", {
+  const row = data.api?.getSelectedRows()?.[0]
+  console.log('row', row)
+  system.confirm('确定删除 lpn=' + row.lpn + ', locCode=' + row.loc_code + ', envId=' + row.env_id + ', 这一行?').then(res => {
+    Request.request.get('/api/workbench/DeviceManager@delInvLpn', {
       params: {
         lpn: row.lpn,
         locCode: row.loc_code,
-        envId: row.env_id,
-      },
-    }).then(res=> reload()).finally();
-  });
+        envId: row.env_id
+      }
+    }).then(res => reload()).finally()
+  })
+}
+
+// qty 必须大于0，layer_index 必须大于等于0
+const validateRule = {
+  env_id: [{ required: true, message: '请选择环境', trigger: 'change' }],
+  lpn: [{ required: true, message: '请选择容器编码', trigger: 'change' }],
+  loc_code: [{ required: true, message: '请选择货位编码', trigger: 'change' }],
+  qty: [
+    { required: true, message: '请输入数量', trigger: 'change' },
+    {
+      validator: (rule, value, callback) => {
+        if (value <= 0) {
+          callback(new Error('数量必须大于0'))
+        }
+        callback()
+      }, trigger: 'change'
+    }
+  ],
+  layer_index: [{ required: true, message: '请输入码垛层数', trigger: 'change' }
+  ]
 }
 </script>
 
@@ -214,59 +267,38 @@ function delInvLpn() {
       <ElButton :icon="Plus" :loading="state.loading" @click="showInvDialog" type="warning" plain>添加库存</ElButton>
       <ElButton :icon="Delete" @click="delInvLpn" type="danger" plain>删除</ElButton>
     </div>
-    <DataForm
-      class="query-form flex-item-fixed"
-      :data="state.queryData"
-      :formFields="data.formFields"
-      :columnCount="4"
-      layout="bothFixed"
-      labelWidth="85px"
-      inputWidth="200px"
-      :inline="true"
-    />
-    <AgGridVue
-      ref="gridRef"
-      :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
-      v-bind="{...data.gridSetting}"
-    >
+    <DataForm class="query-form flex-item-fixed" :data="state.queryData" :formFields="data.formFields" :columnCount="4"
+              layout="bothFixed" labelWidth="85px" inputWidth="200px" :inline="true" />
+    <AgGridVue ref="gridRef"
+               :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row', 'allow-vertical-line', 'flex-item-fill']"
+               v-bind="{ ...data.gridSetting }">
     </AgGridVue>
-    <!-- 编写一个添加库存的对话框，字段是：
-    env_id 下拉框，数值是: 10=物理环境,13=虚拟环境1
-    lpn 容器编码，下拉框，下拉框取值是 /api/workbench/LccController@getContainerList, 他的返回是 { lpn:string, container_type:string }
-    loc_code 货位编码 ，下拉框，下拉框取值是 /api/workbench/LccController@getLocCodeList, 他的返回值是 { loc_code:string, rack:string, bay:number, level:number, cell:number }
-    保存按钮，点击后，发送一个请求，请求地址是 /api/workbench/LccController@addInv, 参数是 { env_id:number, lpn:string, loc_code:string }
-
-    AJAX 请求，取值方式是：
-    Request.request.post('/api/workbench/LccController@xxx', {
-      env_id: envId
-    })
-    /lpn/ -->
-    <el-dialog title="添加库存" v-model="addInvDialogVisible"
-               @opened="getLpnLocations">
-      <el-form ref="addInvForm" :model="addInvForm" label-width="80px">
+    <el-dialog title="添加库存" v-model="addInvDialogVisible" :width="500" draggable>
+      <el-form ref="addInvFormRef" :model="addInvForm" label-width="80px" :rules="validateRule">
         <el-form-item label="环境">
           <el-select v-model="addInvForm.env_id" placeholder="请选择">
-            <el-option label="物理环境" :value="10" />
-            <el-option label="虚拟环境" :value="13" />
+            <el-option label="(10)物理环境" :value="10" />
+            <el-option label="(13)虚拟环境1" :value="13" />
           </el-select>
         </el-form-item>
         <el-form-item label="容器编码">
-          <el-select v-model="addInvForm.lpn" placeholder="请选择">
+          <el-select :disabled="!lpnList || lpnList.length <= 0" v-model="addInvForm.lpn" placeholder="请选择" clearable filterable>
             <el-option v-for="item in lpnList" :key="item.lpn" :label="item.lpn" :value="item.lpn">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="货位编码">
-          <el-select v-model="addInvForm.loc_code" placeholder="请选择">
-            <el-option v-for="item in locationList" :key="item.id" :label="item.location" :value="item.location">
+          <el-select :disabled="!lpnList || lpnList.length <= 0" v-model="addInvForm.loc_code" placeholder="请选择" clearable filterable>
+            <el-option v-for="item in locationList" :key="item.loc_code" :label="item.loc_code" :value="item.loc_code">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="数量">
-          <el-input v-model="addInvForm.qty" placeholder="请输入数量"></el-input>
+          <el-input :disabled="!lpnList || lpnList.length <= 0" v-model="addInvForm.qty" placeholder="请输入数量"></el-input>
         </el-form-item>
         <el-form-item label="码垛层数">
-          <el-input v-model="addInvForm.layer_index" placeholder="请输入数量"></el-input>
+          <el-input :disabled="!lpnList || lpnList.length <= 0" v-model="addInvForm.layer_index"
+                    placeholder="请输入数量"></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -286,4 +318,3 @@ function delInvLpn() {
   height: unset;
 }
 </style>
-