From 3d0917f1a9d36f4acd6e1bcf8b192edc512bd982 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 18 May 2026 23:15:34 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88wms=EF=BC=89=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=20inventory=20index=20=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/wms/inventory/index/data.ts     | 249 ++++++++++++++++++
 .../src/views/wms/inventory/index/index.vue   | 193 ++++++++++++++
 .../src/views/wms/inventory/index/data.ts     | 247 +++++++++++++++++
 .../src/views/wms/inventory/index/index.vue   | 193 ++++++++++++++
 4 files changed, 882 insertions(+)
 create mode 100644 apps/web-antd/src/views/wms/inventory/index/data.ts
 create mode 100644 apps/web-antd/src/views/wms/inventory/index/index.vue
 create mode 100644 apps/web-ele/src/views/wms/inventory/index/data.ts
 create mode 100644 apps/web-ele/src/views/wms/inventory/index/index.vue

diff --git a/apps/web-antd/src/views/wms/inventory/index/data.ts b/apps/web-antd/src/views/wms/inventory/index/data.ts
new file mode 100644
index 000000000..90479ca7a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/index/data.ts
@@ -0,0 +1,249 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+export const INVENTORY_DIMENSION = {
+  ITEM: 'item',
+  WAREHOUSE: 'warehouse',
+} as const;
+
+export type InventoryDimension =
+  (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION];
+
+const dimensionOptions = [
+  { label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
+  { label: '商品', value: INVENTORY_DIMENSION.ITEM },
+];
+
+interface DimensionChangeEvent {
+  target?: {
+    value?: InventoryDimension;
+  };
+}
+
+type DimensionChangeHandler = (
+  dimension: InventoryDimension,
+) => Promise<void> | void;
+
+/** 统一解析 antd 事件对象和原始维度值 */
+function getDimensionChangeValue(
+  value?: DimensionChangeEvent | InventoryDimension,
+): InventoryDimension {
+  if (
+    value === INVENTORY_DIMENSION.ITEM ||
+    value === INVENTORY_DIMENSION.WAREHOUSE
+  ) {
+    return value;
+  }
+  return value?.target?.value ?? INVENTORY_DIMENSION.WAREHOUSE;
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(
+  onDimensionChange: DimensionChangeHandler,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '统计维度',
+      component: 'RadioGroup',
+      defaultValue: INVENTORY_DIMENSION.WAREHOUSE,
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: dimensionOptions,
+        onChange: (value: DimensionChangeEvent | InventoryDimension) => {
+          void onDimensionChange(getDimensionChangeValue(value));
+        },
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        showSearch: true,
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+const warehouseDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+const itemDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+/** 库存统计列表字段 */
+export function useGridColumns(
+  dimension: InventoryDimension = INVENTORY_DIMENSION.WAREHOUSE,
+): VxeTableGridOptions['columns'] {
+  return dimension === INVENTORY_DIMENSION.ITEM
+    ? itemDimensionColumns
+    : warehouseDimensionColumns;
+}
+
+/** 库存选择弹窗搜索表单 */
+export function useInventorySelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+/** 库存选择弹窗列表字段 */
+export function useInventorySelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 180,
+    },
+    {
+      field: 'availableQuantity',
+      title: '可用库存',
+      align: 'right',
+      width: 130,
+      slots: { default: 'availableQuantity' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/inventory/index/index.vue b/apps/web-antd/src/views/wms/inventory/index/index.vue
new file mode 100644
index 000000000..2e227c81a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/index/index.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { Checkbox } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  INVENTORY_DIMENSION,
+  type InventoryDimension,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+
+interface InventoryRow extends WmsInventoryApi.Inventory {
+  skuWarehouseId?: string;
+  warehouseItemId?: string;
+}
+
+defineOptions({ name: 'WmsInventory' });
+
+const currentRows = ref<InventoryRow[]>([]);
+const currentDimension = ref<InventoryDimension>(INVENTORY_DIMENSION.WAREHOUSE);
+const filterZero = ref(false);
+
+/** 补充合并单元格需要的复合 key */
+function buildRows(items: WmsInventoryApi.Inventory[]) {
+  return items.map((item) => ({
+    ...item,
+    skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`,
+    warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
+  }));
+}
+
+/** 切换统计维度时同步表单、表头和查询参数 */
+async function handleDimensionChange(dimension: InventoryDimension) {
+  // spanMethod 依赖当前维度判断合并字段，先更新本地状态。
+  currentDimension.value = dimension;
+  // 表头结构需要立即跟随维度切换，避免请求完成前仍显示旧列。
+  await gridApi.grid.reloadColumn(useGridColumns(dimension) || []);
+  // VXE proxy 查询会合并最近提交值，这里显式写入新 type 并刷新提交快照。
+  await gridApi.formApi.setFieldValue('type', dimension);
+  const formValues = await gridApi.formApi.getValues();
+  gridApi.formApi.setLatestSubmissionValues(formValues);
+  // 带上最新表单值重新加载，确保本次请求使用切换后的统计维度。
+  await gridApi.reload(formValues);
+}
+
+/** 切换零库存过滤时按当前搜索条件重新查询 */
+function handleFilterZeroChange() {
+  gridApi.query();
+}
+
+/** 按列字段读取行值，兼容 VXE 的 field/property */
+function getRowPropertyValue(row: InventoryRow | undefined, property: string) {
+  return row?.[property as keyof InventoryRow];
+}
+
+/** 根据统计维度返回需要合并单元格的字段 */
+function getRowSpanProperties() {
+  if (currentDimension.value === INVENTORY_DIMENSION.ITEM) {
+    return ['warehouseItemId', 'skuId', 'skuWarehouseId'];
+  }
+  return ['warehouseId', 'warehouseItemId'];
+}
+
+/** 合并库存统计的维度单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const property = column.field || column.property;
+  if (!property || !getRowSpanProperties().includes(property)) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    getRowPropertyValue(currentRows.value[rowIndex - 1], property) ===
+      getRowPropertyValue(row, property)
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (
+      getRowPropertyValue(currentRows.value[index], property) !==
+      getRowPropertyValue(row, property)
+    ) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(handleDimensionChange),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 维度切换会通过 reload(formValues) 传入新 type，刷新场景用当前维度兜底。
+          const nextDimension = (formValues.type ||
+            currentDimension.value ||
+            INVENTORY_DIMENSION.WAREHOUSE) as InventoryDimension;
+          currentDimension.value = nextDimension;
+          await gridApi.grid.reloadColumn(useGridColumns(nextDimension) || []);
+
+          // type 是后端聚合维度参数，普通搜索参数里移除，避免重复透传旧值。
+          const queryParams = { ...formValues };
+          Reflect.deleteProperty(queryParams, 'type');
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams,
+            type: nextDimension,
+            onlyPositiveQuantity: filterZero.value ? true : undefined,
+          });
+
+          // spanMethod 依赖当前页数据计算 rowspan，需要保存构造后的行。
+          currentRows.value = buildRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventoryRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存统计">
+      <template #toolbar-tools>
+        <Checkbox v-model:checked="filterZero" @change="handleFilterZeroChange">
+          过滤掉库存为 0 的商品
+        </Checkbox>
+      </template>
+      <template #warehouseName="{ row }">
+        {{ row.warehouseName || '-' }}
+      </template>
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #quantity="{ row }">
+        {{ formatQuantity(row.quantity) }}
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/inventory/index/data.ts b/apps/web-ele/src/views/wms/inventory/index/data.ts
new file mode 100644
index 000000000..27c8cc359
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/index/data.ts
@@ -0,0 +1,247 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+export const INVENTORY_DIMENSION = {
+  ITEM: 'item',
+  WAREHOUSE: 'warehouse',
+} as const;
+
+export type InventoryDimension =
+  (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION];
+
+const dimensionOptions = [
+  { label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
+  { label: '商品', value: INVENTORY_DIMENSION.ITEM },
+];
+
+interface DimensionChangeEvent {
+  target?: {
+    value?: InventoryDimension;
+  };
+}
+
+type DimensionChangeHandler = (
+  dimension: InventoryDimension,
+) => Promise<void> | void;
+
+/** 统一解析 ele 原始值和兼容事件对象 */
+function getDimensionChangeValue(
+  value?: DimensionChangeEvent | InventoryDimension,
+): InventoryDimension {
+  if (
+    value === INVENTORY_DIMENSION.ITEM ||
+    value === INVENTORY_DIMENSION.WAREHOUSE
+  ) {
+    return value;
+  }
+  return value?.target?.value ?? INVENTORY_DIMENSION.WAREHOUSE;
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(
+  onDimensionChange: DimensionChangeHandler,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '统计维度',
+      component: 'RadioGroup',
+      defaultValue: INVENTORY_DIMENSION.WAREHOUSE,
+      componentProps: {
+        options: dimensionOptions,
+        onChange: (value: DimensionChangeEvent | InventoryDimension) => {
+          void onDimensionChange(getDimensionChangeValue(value));
+        },
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getWarehouseSimpleList,
+        clearable: true,
+        filterable: true,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+const warehouseDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+const itemDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+/** 库存统计列表字段 */
+export function useGridColumns(
+  dimension: InventoryDimension = INVENTORY_DIMENSION.WAREHOUSE,
+): VxeTableGridOptions['columns'] {
+  return dimension === INVENTORY_DIMENSION.ITEM
+    ? itemDimensionColumns
+    : warehouseDimensionColumns;
+}
+
+/** 库存选择弹窗搜索表单 */
+export function useInventorySelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+/** 库存选择弹窗列表字段 */
+export function useInventorySelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 180,
+    },
+    {
+      field: 'availableQuantity',
+      title: '可用库存',
+      align: 'right',
+      width: 130,
+      slots: { default: 'availableQuantity' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/inventory/index/index.vue b/apps/web-ele/src/views/wms/inventory/index/index.vue
new file mode 100644
index 000000000..0613ec284
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/index/index.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElCheckbox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  INVENTORY_DIMENSION,
+  type InventoryDimension,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+
+interface InventoryRow extends WmsInventoryApi.Inventory {
+  skuWarehouseId?: string;
+  warehouseItemId?: string;
+}
+
+defineOptions({ name: 'WmsInventory' });
+
+const currentRows = ref<InventoryRow[]>([]);
+const currentDimension = ref<InventoryDimension>(INVENTORY_DIMENSION.WAREHOUSE);
+const filterZero = ref(false);
+
+/** 补充合并单元格需要的复合 key */
+function buildRows(items: WmsInventoryApi.Inventory[]) {
+  return items.map((item) => ({
+    ...item,
+    skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`,
+    warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
+  }));
+}
+
+/** 切换统计维度时同步表单、表头和查询参数 */
+async function handleDimensionChange(dimension: InventoryDimension) {
+  // spanMethod 依赖当前维度判断合并字段，先更新本地状态。
+  currentDimension.value = dimension;
+  // 表头结构需要立即跟随维度切换，避免请求完成前仍显示旧列。
+  await gridApi.grid.reloadColumn(useGridColumns(dimension) || []);
+  // VXE proxy 查询会合并最近提交值，这里显式写入新 type 并刷新提交快照。
+  await gridApi.formApi.setFieldValue('type', dimension);
+  const formValues = await gridApi.formApi.getValues();
+  gridApi.formApi.setLatestSubmissionValues(formValues);
+  // 带上最新表单值重新加载，确保本次请求使用切换后的统计维度。
+  await gridApi.reload(formValues);
+}
+
+/** 切换零库存过滤时按当前搜索条件重新查询 */
+function handleFilterZeroChange() {
+  gridApi.query();
+}
+
+/** 按列字段读取行值，兼容 VXE 的 field/property */
+function getRowPropertyValue(row: InventoryRow | undefined, property: string) {
+  return row?.[property as keyof InventoryRow];
+}
+
+/** 根据统计维度返回需要合并单元格的字段 */
+function getRowSpanProperties() {
+  if (currentDimension.value === INVENTORY_DIMENSION.ITEM) {
+    return ['warehouseItemId', 'skuId', 'skuWarehouseId'];
+  }
+  return ['warehouseId', 'warehouseItemId'];
+}
+
+/** 合并库存统计的维度单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const property = column.field || column.property;
+  if (!property || !getRowSpanProperties().includes(property)) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    getRowPropertyValue(currentRows.value[rowIndex - 1], property) ===
+      getRowPropertyValue(row, property)
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (
+      getRowPropertyValue(currentRows.value[index], property) !==
+      getRowPropertyValue(row, property)
+    ) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(handleDimensionChange),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 维度切换会通过 reload(formValues) 传入新 type，刷新场景用当前维度兜底。
+          const nextDimension = (formValues.type ||
+            currentDimension.value ||
+            INVENTORY_DIMENSION.WAREHOUSE) as InventoryDimension;
+          currentDimension.value = nextDimension;
+          await gridApi.grid.reloadColumn(useGridColumns(nextDimension) || []);
+
+          // type 是后端聚合维度参数，普通搜索参数里移除，避免重复透传旧值。
+          const queryParams = { ...formValues };
+          Reflect.deleteProperty(queryParams, 'type');
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams,
+            type: nextDimension,
+            onlyPositiveQuantity: filterZero.value ? true : undefined,
+          });
+
+          // spanMethod 依赖当前页数据计算 rowspan，需要保存构造后的行。
+          currentRows.value = buildRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventoryRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存统计">
+      <template #toolbar-tools>
+        <ElCheckbox v-model="filterZero" @change="handleFilterZeroChange">
+          过滤掉库存为 0 的商品
+        </ElCheckbox>
+      </template>
+      <template #warehouseName="{ row }">
+        {{ row.warehouseName || '-' }}
+      </template>
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #quantity="{ row }">
+        {{ formatQuantity(row.quantity) }}
+      </template>
+    </Grid>
+  </Page>
+</template>