feat（wms）：完成 inventory index 的迁移
YunaiV
parent
0280df114f
commit
3d0917f1a9
|
|
@ -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' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue