feat（wms）：完成 inventory history 的迁移
YunaiV
parent
6b61004b6a
commit
0280df114f
|
|
@ -0,0 +1,159 @@
|
||||||
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
import { getDictOptions } from '@vben/hooks';
|
||||||
|
|
||||||
|
import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
|
||||||
|
import { getRangePickerDefaultProps } from '#/utils';
|
||||||
|
|
||||||
|
/** 搜索表单 */
|
||||||
|
export function useGridFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'orderType',
|
||||||
|
label: '单据类型',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
options: getDictOptions(DICT_TYPE.WMS_ORDER_TYPE, 'number'),
|
||||||
|
placeholder: '请选择单据类型',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'orderNo',
|
||||||
|
label: '单据号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入单据号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'warehouseId',
|
||||||
|
label: '仓库',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
api: getWarehouseSimpleList,
|
||||||
|
labelField: 'name',
|
||||||
|
placeholder: '请选择仓库',
|
||||||
|
showSearch: true,
|
||||||
|
valueField: 'id',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'itemCode',
|
||||||
|
label: '商品编号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入商品编号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'itemName',
|
||||||
|
label: '商品名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入商品名称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'skuCode',
|
||||||
|
label: '规格编号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入规格编号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'skuName',
|
||||||
|
label: '规格名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入规格名称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'createTime',
|
||||||
|
label: '操作时间',
|
||||||
|
component: 'RangePicker',
|
||||||
|
componentProps: {
|
||||||
|
...getRangePickerDefaultProps(),
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 库存流水列表字段 */
|
||||||
|
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'orderNo',
|
||||||
|
title: '单据号',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'orderType',
|
||||||
|
title: '单据类型',
|
||||||
|
width: 110,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center',
|
||||||
|
cellRender: {
|
||||||
|
name: 'CellDict',
|
||||||
|
props: { type: DICT_TYPE.WMS_ORDER_TYPE },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'itemInfo',
|
||||||
|
title: '商品信息',
|
||||||
|
minWidth: 220,
|
||||||
|
slots: { default: 'itemInfo' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'skuInfo',
|
||||||
|
title: '规格信息',
|
||||||
|
minWidth: 220,
|
||||||
|
slots: { default: 'skuInfo' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'warehouseName',
|
||||||
|
title: '仓库',
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'beforeQuantity',
|
||||||
|
title: '操作前',
|
||||||
|
align: 'right',
|
||||||
|
minWidth: 110,
|
||||||
|
slots: { default: 'beforeQuantity' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'afterQuantity',
|
||||||
|
title: '操作后',
|
||||||
|
align: 'right',
|
||||||
|
minWidth: 110,
|
||||||
|
slots: { default: 'afterQuantity' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'quantityPrice',
|
||||||
|
title: '数量/金额(元)',
|
||||||
|
minWidth: 180,
|
||||||
|
slots: { default: 'quantityPrice' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime',
|
||||||
|
title: '操作时间',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
formatter: 'formatDateTime',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
import type { WmsInventoryHistoryApi } from '#/api/wms/inventory/history';
|
||||||
|
|
||||||
|
import { DocAlert, Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { getInventoryHistoryPage } from '#/api/wms/inventory/history';
|
||||||
|
import { formatPrice, formatQuantity } from '#/views/wms/utils/format';
|
||||||
|
|
||||||
|
import { useGridColumns, useGridFormSchema } from './data';
|
||||||
|
|
||||||
|
defineOptions({ name: 'WmsInventoryHistory' });
|
||||||
|
|
||||||
|
function hasValue(value: unknown) {
|
||||||
|
return value !== undefined && value !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [Grid] = useVbenVxeGrid({
|
||||||
|
formOptions: {
|
||||||
|
schema: useGridFormSchema(),
|
||||||
|
},
|
||||||
|
gridOptions: {
|
||||||
|
columns: useGridColumns(),
|
||||||
|
height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
showOverflow: false,
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getInventoryHistoryPage({
|
||||||
|
pageNo: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
keyField: 'id',
|
||||||
|
isHover: true,
|
||||||
|
},
|
||||||
|
toolbarConfig: {
|
||||||
|
refresh: true,
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
} as VxeTableGridOptions<WmsInventoryHistoryApi.InventoryHistory>,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<template #doc>
|
||||||
|
<DocAlert
|
||||||
|
title="【库存】库存记录、流水、统计"
|
||||||
|
url="https://doc.iocoder.cn/wms/inventory/"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<Grid table-title="库存流水">
|
||||||
|
<template #itemInfo="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="text-sm">{{ row.itemName || '-' }}</div>
|
||||||
|
<div v-if="row.itemCode" class="break-all text-xs text-gray-500">
|
||||||
|
商品编号：{{ row.itemCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #skuInfo="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="text-sm">{{ row.skuName || '-' }}</div>
|
||||||
|
<div v-if="row.skuCode" class="break-all text-xs text-gray-500">
|
||||||
|
规格编号：{{ row.skuCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #beforeQuantity="{ row }">
|
||||||
|
{{ formatQuantity(row.beforeQuantity) || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #afterQuantity="{ row }">
|
||||||
|
{{ formatQuantity(row.afterQuantity) || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #quantityPrice="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="flex justify-between gap-2">
|
||||||
|
<span class="shrink-0">数量：</span>
|
||||||
|
<span>{{ formatQuantity(row.quantity) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="hasValue(row.price)" class="flex justify-between gap-2">
|
||||||
|
<span class="shrink-0">单价：</span>
|
||||||
|
<span>{{ formatPrice(row.price) }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="hasValue(row.totalPrice)"
|
||||||
|
class="flex justify-between gap-2"
|
||||||
|
>
|
||||||
|
<span class="shrink-0">金额：</span>
|
||||||
|
<span>{{ formatPrice(row.totalPrice) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
import { getDictOptions } from '@vben/hooks';
|
||||||
|
|
||||||
|
import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
|
||||||
|
import { getRangePickerDefaultProps } from '#/utils';
|
||||||
|
|
||||||
|
/** 搜索表单 */
|
||||||
|
export function useGridFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'orderType',
|
||||||
|
label: '单据类型',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
options: getDictOptions(DICT_TYPE.WMS_ORDER_TYPE, 'number'),
|
||||||
|
placeholder: '请选择单据类型',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'orderNo',
|
||||||
|
label: '单据号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
placeholder: '请输入单据号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'warehouseId',
|
||||||
|
label: '仓库',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
api: getWarehouseSimpleList,
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
labelField: 'name',
|
||||||
|
placeholder: '请选择仓库',
|
||||||
|
valueField: 'id',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'itemCode',
|
||||||
|
label: '商品编号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
placeholder: '请输入商品编号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'itemName',
|
||||||
|
label: '商品名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
placeholder: '请输入商品名称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'skuCode',
|
||||||
|
label: '规格编号',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
placeholder: '请输入规格编号',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'skuName',
|
||||||
|
label: '规格名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
clearable: true,
|
||||||
|
placeholder: '请输入规格名称',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'createTime',
|
||||||
|
label: '操作时间',
|
||||||
|
component: 'RangePicker',
|
||||||
|
componentProps: {
|
||||||
|
...getRangePickerDefaultProps(),
|
||||||
|
clearable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 库存流水列表字段 */
|
||||||
|
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'orderNo',
|
||||||
|
title: '单据号',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'orderType',
|
||||||
|
title: '单据类型',
|
||||||
|
width: 110,
|
||||||
|
fixed: 'left',
|
||||||
|
align: 'center',
|
||||||
|
cellRender: {
|
||||||
|
name: 'CellDict',
|
||||||
|
props: { type: DICT_TYPE.WMS_ORDER_TYPE },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'itemInfo',
|
||||||
|
title: '商品信息',
|
||||||
|
minWidth: 220,
|
||||||
|
slots: { default: 'itemInfo' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'skuInfo',
|
||||||
|
title: '规格信息',
|
||||||
|
minWidth: 220,
|
||||||
|
slots: { default: 'skuInfo' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'warehouseName',
|
||||||
|
title: '仓库',
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'beforeQuantity',
|
||||||
|
title: '操作前',
|
||||||
|
align: 'right',
|
||||||
|
minWidth: 110,
|
||||||
|
slots: { default: 'beforeQuantity' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'afterQuantity',
|
||||||
|
title: '操作后',
|
||||||
|
align: 'right',
|
||||||
|
minWidth: 110,
|
||||||
|
slots: { default: 'afterQuantity' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'quantityPrice',
|
||||||
|
title: '数量/金额(元)',
|
||||||
|
minWidth: 180,
|
||||||
|
slots: { default: 'quantityPrice' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime',
|
||||||
|
title: '操作时间',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
formatter: 'formatDateTime',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
import type { WmsInventoryHistoryApi } from '#/api/wms/inventory/history';
|
||||||
|
|
||||||
|
import { DocAlert, Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { getInventoryHistoryPage } from '#/api/wms/inventory/history';
|
||||||
|
import { formatPrice, formatQuantity } from '#/views/wms/utils/format';
|
||||||
|
|
||||||
|
import { useGridColumns, useGridFormSchema } from './data';
|
||||||
|
|
||||||
|
defineOptions({ name: 'WmsInventoryHistory' });
|
||||||
|
|
||||||
|
function hasValue(value: unknown) {
|
||||||
|
return value !== undefined && value !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [Grid] = useVbenVxeGrid({
|
||||||
|
formOptions: {
|
||||||
|
schema: useGridFormSchema(),
|
||||||
|
},
|
||||||
|
gridOptions: {
|
||||||
|
columns: useGridColumns(),
|
||||||
|
height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
showOverflow: false,
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getInventoryHistoryPage({
|
||||||
|
pageNo: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
keyField: 'id',
|
||||||
|
isHover: true,
|
||||||
|
},
|
||||||
|
toolbarConfig: {
|
||||||
|
refresh: true,
|
||||||
|
search: true,
|
||||||
|
},
|
||||||
|
} as VxeTableGridOptions<WmsInventoryHistoryApi.InventoryHistory>,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<template #doc>
|
||||||
|
<DocAlert
|
||||||
|
title="【库存】库存记录、流水、统计"
|
||||||
|
url="https://doc.iocoder.cn/wms/inventory/"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<Grid table-title="库存流水">
|
||||||
|
<template #itemInfo="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="text-sm">{{ row.itemName || '-' }}</div>
|
||||||
|
<div v-if="row.itemCode" class="break-all text-xs text-gray-500">
|
||||||
|
商品编号：{{ row.itemCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #skuInfo="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="text-sm">{{ row.skuName || '-' }}</div>
|
||||||
|
<div v-if="row.skuCode" class="break-all text-xs text-gray-500">
|
||||||
|
规格编号：{{ row.skuCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #beforeQuantity="{ row }">
|
||||||
|
{{ formatQuantity(row.beforeQuantity) || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #afterQuantity="{ row }">
|
||||||
|
{{ formatQuantity(row.afterQuantity) || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #quantityPrice="{ row }">
|
||||||
|
<div class="flex flex-col gap-1 py-1 leading-5">
|
||||||
|
<div class="flex justify-between gap-2">
|
||||||
|
<span class="shrink-0">数量：</span>
|
||||||
|
<span>{{ formatQuantity(row.quantity) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="hasValue(row.price)" class="flex justify-between gap-2">
|
||||||
|
<span class="shrink-0">单价：</span>
|
||||||
|
<span>{{ formatPrice(row.price) }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="hasValue(row.totalPrice)"
|
||||||
|
class="flex justify-between gap-2"
|
||||||
|
>
|
||||||
|
<span class="shrink-0">金额：</span>
|
||||||
|
<span>{{ formatPrice(row.totalPrice) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue