feat(inventory): 实现库存查询和账页查询功能

- 新增 account 和 query 组件，实现库存账页查询和库存查询功能 - 使用 Element Plus 组件库和 AG Grid 实现表格展示- 添加表单组件实现查询条件输入 - 实现服务端分页和数据加载
6 months ago · 341c945c33
2 changed files with 309 additions and 14 deletions
--- a/src/views/inventory/account.vue
+++ b/src/views/inventory/account.vue
@ -1,12 +1,153 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElButton } from "element-plus";
+import { Search } 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";
+
+// 定义 Props 类型
+interface ComponentProps {
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<ComponentProps>(), {});
+
+// 定义 State 类型
+interface ComponentState {
+    loading: boolean;
+    queryData: any;
+    grid1Data: Array<any>;
+}
+
+// state 属性
+const state = reactive<ComponentState>({
+    loading: false,
+    queryData: {},
+    grid1Data: [],
+});
+
+// 定义 Data 类型
+interface ComponentData {
+    formFields?: Array<FormField>;
+    gridSetting: Partial<GridOptions>;
+    api?: GridApi;
+}
+
+// 内部数据
+const data: ComponentData = {
+    formFields: [
+        {
+            dataPath: 'lpn', label: '托盘条码', input: 'Input',
+            inputProps: {
+                placeholder: '托盘条码',
+                clearable: true,
+            }
+        },
+    ],
+    gridSetting: {
+        localeText: localeTextCn,
+        // suppressNoRowsOverlay: true,
+        // suppressLoadingOverlay: true,
+        // 选择行配置
+        rowSelection: "single",
+        rowModelType: "serverSide",
+        columnDefs: [
+            { headerName: "环境ID", field: "envId" },
+            { headerName: "业务单据ID", field: "bizTaskId" },
+            { headerName: "账页号", field: "ledgerId" },
+            { headerName: "账页类型", field: "ledgerType" },
+            { headerName: "账页原因", field: "ledgerRemark" },
+            { headerName: "托盘条码", field: "lpn" },
+            { headerName: "库存改变数量", field: "qtyChange" },
+            { headerName: "入库占用改变数量", field: "qtyInChange" },
+            { headerName: "出库占用改变数量", field: "qtyOutChange" },
+            { headerName: "改变后堆叠层号", field: "layerIndex" },
+            { headerName: "改变前库存位置", field: "locCode" },
+            { headerName: "改变后库存数量", field: "qty" },
+            { headerName: "改变后入库占用数量", field: "qtyIn" },
+            { headerName: "改变后出库占用数量", field: "qtyOut" },
+            { headerName: "创建时间", field: "createAt" },
+            { headerName: "创建人", field: "createBy" },
+            { headerName: "更新时间", field: "updateAt" },
+            { headerName: "更新人", field: "updateBy" },
+        ],
+        pagination: true,
+        paginationPageSize: 50,
+        // cacheBlockSize: 50,
+        // suppressPaginationPanel
+        onGridReady(event: GridReadyEvent) {
+            data.api = event.api;
+            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+        },
+    },
+};
+
+function reload() {
+    data.api.paginationGoToPage(0);
+    data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+}
+
+function serverSideDatasource(params: IServerSideGetRowsParams) {
+    const { startRow, endRow } = params.request;
+    console.log("startRow, endRow ", params.request);
+    const pageSize = endRow - startRow;
+    const pageNo = Math.floor(startRow / pageSize) + 1;
+    state.loading = true;
+    Request.request.get<PageData>(
+        "/api/workbench/DeviceManager@queryInvLedger",
+        {
+            params: {
+                ...state.queryData,
+                pageSize,
+                pageNo,
+            },
+        },
+    ).then(page => {
+        params.success({ rowData: page.records, rowCount: page.total })
+    }).finally(() => state.loading = false);
+}
+</script>
+
 <template>
-  <div class="dashboard">
-    dashboard
+    <div class="dashboard flex-column-container">
+        <div class="tools flex-item-fixed">
+            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+        </div>
+        <DataForm
+            class="query-form flex-item-fixed"
+            style="width: 500px;"
+            :data="state.queryData"
+            :formFields="data.formFields"
+            :columnCount="2"
+            layout="bothFixed"
+            labelWidth="85px"
+            inputWidth="200px"
+        />
+        <AgGridVue
+            ref="gridRef"
+            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
+            v-bind="{...data.gridSetting}"
+        >
+        </AgGridVue>
    </div>
 </template>
-<script setup>
-</script>
-<style lang="less">
-.dashboard{

+<style scoped>
+.dashboard {
+    height: 100%;
+}
+
+.tools {
+    margin-bottom: 8px;
+}
+
+.query-form {
+    height: unset;
 }
 </style>
+
--- a/src/views/inventory/query.vue
+++ b/src/views/inventory/query.vue
@ -1,12 +1,166 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElButton } from "element-plus";
+import { Search } 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 {
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<ComponentProps>(), {});
+
+// 定义 State 类型
+interface ComponentState {
+    loading: boolean;
+    queryData: any;
+    grid1Data: Array<any>;
+}
+
+// state 属性
+const state = reactive<ComponentState>({
+    loading: false,
+    queryData: {},
+    grid1Data: [],
+});
+
+// 定义 Data 类型
+interface ComponentData {
+    formFields?: Array<FormField>;
+    gridSetting: Partial<GridOptions>;
+    api?: GridApi;
+}
+
+// 内部数据
+const data: ComponentData = {
+    formFields: [
+        {
+            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 },
+            { field: 'rack', headerName: '货位名', editable: false },
+            { field: 'bay', headerName: '货位列', editable: false },
+            { field: 'level', headerName: '货位层', editable: false },
+            { field: 'cell', headerName: '货位格', editable: false },
+            { field: 'catalog_code', headerName: '仓库楼层', editable: false },
+            { field: 'way_point', headerName: '地标名', editable: false },
+            { field: 'loc_direction', headerName: '地标方位', editable: false },
+            {
+                field: 'is_lock', headerName: '是否锁定', editable: false,
+                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
+            },
+            {
+                field: 'is_frozen', headerName: '是否冻结', editable: false,
+                valueFormatter: params => lodash.toString(params.value) === "0" ? "否" : "是",
+            },
+            { field: 'create_at', headerName: '创建时间', editable: false },
+            { field: 'create_by', headerName: '创建人', editable: false },
+            { field: 'update_at', headerName: '最后更新时间', editable: false },
+            { field: 'update_by', headerName: '更新人', editable: false },
+        ],
+        pagination: true,
+        paginationPageSize: 50,
+        // cacheBlockSize: 50,
+        // suppressPaginationPanel
+        onGridReady(event: GridReadyEvent) {
+            data.api = event.api;
+            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+        },
+    },
+};
+
+function reload() {
+    data.api.paginationGoToPage(0);
+    data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+}
+
+function serverSideDatasource(params: IServerSideGetRowsParams) {
+    const { startRow, endRow } = params.request;
+    console.log("startRow, endRow ", params.request);
+    const pageSize = endRow - startRow;
+    const pageNo = Math.floor(startRow / pageSize) + 1;
+    state.loading = true;
+    Request.request.get<PageData>(
+        "/api/workbench/DeviceManager@queryInvLpn",
+        {
+            params: {
+                ...state.queryData,
+                pageSize,
+                pageNo,
+            },
+        },
+    ).then(page => {
+        params.success({ rowData: page.records, rowCount: page.total })
+    }).finally(() => state.loading = false);
+}
+</script>
+
 <template>
-  <div class="modeling-simulation">
-    query
+    <div class="dashboard flex-column-container">
+        <div class="tools flex-item-fixed">
+            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+        </div>
+        <DataForm
+            class="query-form flex-item-fixed"
+            style="width: 500px;"
+            :data="state.queryData"
+            :formFields="data.formFields"
+            :columnCount="2"
+            layout="bothFixed"
+            labelWidth="85px"
+            inputWidth="200px"
+        />
+        <AgGridVue
+            ref="gridRef"
+            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
+            v-bind="{...data.gridSetting}"
+        >
+        </AgGridVue>
    </div>
 </template>
-<script setup>
-</script>
-<style lang="less">
-.dashboard{

+<style scoped>
+.dashboard {
+    height: 100%;
+}
+
+.tools {
+    margin-bottom: 8px;
+}
+
+.query-form {
+    height: unset;
 }
 </style>
+