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