库存的添加、删除

src/views/inventory/query.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { reactive, ref, useTemplateRef } from "vue";
+import { reactive, ref, watch, useTemplateRef } from 'vue'
-import { ElButton } from "element-plus";
+import { ElButton } from 'element-plus'
-import { Delete, Search, Plus } from "@element-plus/icons-vue";
+import { Delete, Search, Plus } from '@element-plus/icons-vue'
-import DataForm from "@/components/data-form/DataForm.vue";
+import DataForm from '@/components/data-form/DataForm.vue'
-import type { FormField } from "@/components/data-form/DataFormTypes.ts";
+import type { FormField } from '@/components/data-form/DataFormTypes.ts'
-import { AgGridVue } from "ag-grid-vue3";
+import { AgGridVue } from 'ag-grid-vue3'
-import { type GridOptions, type IServerSideGetRowsParams } from "ag-grid-enterprise";
+import { type GridOptions, type IServerSideGetRowsParams } from 'ag-grid-enterprise'
-import type { GridApi, GridReadyEvent } from "ag-grid-community";
+import type { GridApi, GridReadyEvent } from 'ag-grid-community'
-import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
+import { localeText as localeTextCn } from '@/components/yvTable/yv-aggrid-cn.locale'
-import { Request } from "@ease-forge/shared";
+import { Request } from '@ease-forge/shared'
-import lodash from "lodash";
+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: []
 })
 
@@ -48,37 +50,37 @@ const data: ComponentData = {
         placeholder: '选择环境',
         clearable: true,
         options: [
-                { value: "10", label: "物理环境" },
+          { value: '10', label: '(10)物理环境' },
-                { value: "13", label: "虚拟环境1" },
+          { value: '13', label: '(13)虚拟环境1' }
-              ],
+        ]
       }
     },
     {
       dataPath: 'lpn', label: '托盘条码', input: 'Input',
       inputProps: {
         placeholder: '托盘条码',
-                clearable: true,
+        clearable: true
       }
     },
     {
       dataPath: 'locCode', label: '库存位置', input: 'Input',
       inputProps: {
         placeholder: '库存位置',
-                clearable: true,
+        clearable: true
+      }
     }
-        },
   ],
   gridSetting: {
     localeText: localeTextCn,
     // suppressNoRowsOverlay: true,
     // suppressLoadingOverlay: true,
     // 选择行配置
-        rowSelection: "single",
+    rowSelection: 'single',
-        rowModelType: "serverSide",
+    rowModelType: 'serverSide',
     columnDefs: [
       { field: 'id', headerName: 'id', editable: false, hide: true },
-            { field: 'loc_code', headerName: '库位编号', editable: false },
+      { field: 'loc_code', headerName: '库位编号', editable: false, width: 120 },
-            { field: 'lpn', headerName: '容器编码', editable: false },
+      { 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 },
@@ -89,28 +91,28 @@ const data: ComponentData = {
       { field: 'loc_direction', headerName: '地标方位', editable: false, width: 110 },
       {
         field: 'is_lock', headerName: '是否锁定', editable: false, width: 110,
-                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
+        valueFormatter: params => lodash.toString(params.value) === '0' ? '否' : '是'
       },
       {
         field: 'is_frozen', headerName: '是否冻结', editable: false, width: 110,
-                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
+        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 },
+      { field: 'update_by', headerName: '更新人', editable: false, width: 100 }
     ],
     pagination: true,
     paginationPageSize: 50,
     // cacheBlockSize: 50,
     // suppressPaginationPanel
     onGridReady(event: GridReadyEvent) {
-            data.api = event.api;
+      data.api = event.api
-            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+      data.api.setServerSideDatasource({ getRows: serverSideDatasource })
-        },
+    }
-    },
+  }
-};
+}
-const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef");
+const grid = useTemplateRef<InstanceType<typeof AgGridVue>>('gridRef')
 
 function reload() {
   data.api.paginationGoToPage(0)
@@ -140,32 +142,50 @@ 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() {
+
+  addInvFormRef.value.validate((valid) => {
+    if (valid) {
       system.showLoading()
       Request.request.post('/api/workbench/LccController@addInvCommit',
-    addInvForm
+        {
-
+          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)
@@ -174,36 +194,69 @@ function addInvCommit() {
       }).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 || []
-      lpnList.value = res.data.lpnList
+      locationList.value = res.data.locationList || []
-      locationList.value = res.data.locationList
 
     } else {
       system.showErrorDialog(res.msg)
     }
 
+  }).finally(() => {
+    system.clearLoading()
   })
 }
 
 function delInvLpn() {
-  const  row = data.api?.getSelectedRows()?.[0];
+  const row = data.api?.getSelectedRows()?.[0]
-  console.log("row", row);
+  console.log('row', row)
-  system.confirm("确定删除").then(res => {
+  system.confirm('确定删除 lpn=' + row.lpn + ', locCode=' + row.loc_code + ', envId=' + row.env_id + ', 这一行?').then(res => {
-    Request.request.get("/api/workbench/DeviceManager@delInvLpn", {
+    Request.request.get('/api/workbench/DeviceManager@delInvLpn', {
       params: {
         lpn: row.lpn,
         locCode: row.loc_code,
-        envId: row.env_id,
+        envId: row.env_id
-      },
+      }
-    }).then(res=> reload()).finally();
+    }).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
+    <DataForm class="query-form flex-item-fixed" :data="state.queryData" :formFields="data.formFields" :columnCount="4"
-      class="query-form flex-item-fixed"
+              layout="bothFixed" labelWidth="85px" inputWidth="200px" :inline="true" />
-      :data="state.queryData"
+    <AgGridVue ref="gridRef"
-      :formFields="data.formFields"
+               :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row', 'allow-vertical-line', 'flex-item-fill']"
-      :columnCount="4"
+               v-bind="{ ...data.gridSetting }">
-      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>
-    <!-- 编写一个添加库存的对话框，字段是：
+    <el-dialog title="添加库存" v-model="addInvDialogVisible" :width="500" draggable>
-    env_id 下拉框，数值是: 10=物理环境,13=虚拟环境1
+      <el-form ref="addInvFormRef" :model="addInvForm" label-width="80px" :rules="validateRule">
-    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-form-item label="环境">
           <el-select v-model="addInvForm.env_id" placeholder="请选择">
-            <el-option label="物理环境" :value="10" />
+            <el-option label="(10)物理环境" :value="10" />
-            <el-option label="虚拟环境" :value="13" />
+            <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-select :disabled="!lpnList || lpnList.length <= 0" v-model="addInvForm.loc_code" placeholder="请选择" clearable filterable>
-            <el-option v-for="item in locationList" :key="item.id" :label="item.location" :value="item.location">
+            <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>
-