feat(@vben/web-antd): erp-stock-stock 实现产品库存管理功能

- 新增产品库存管理页面,包括库存列表和搜索功能
- 添加导出库存数据功能
- 集成 API 接口和数据处理逻辑
- 优化页面布局和组件使用
pull/188/head
nehc 2025-07-31 13:43:47 +08:00
parent 32ee1b11ec
commit 8d660404dc
3 changed files with 148 additions and 26 deletions

View File

@ -2,7 +2,7 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request'; import { requestClient } from '#/api/request';
namespace ErpStockApi { export namespace ErpStockApi {
/** 产品库存信息 */ /** 产品库存信息 */
export interface Stock { export interface Stock {
id?: number; // 编号 id?: number; // 编号

View File

@ -0,0 +1,76 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getProductSimpleList } from '#/api/erp/product/product';
import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
/** 搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'productId',
label: '产品',
component: 'ApiSelect',
componentProps: {
placeholder: '请选择产品',
allowClear: true,
showSearch: true,
api: getProductSimpleList,
labelField: 'name',
valueField: 'id',
filterOption: false,
},
},
{
fieldName: 'warehouseId',
label: '仓库',
component: 'ApiSelect',
componentProps: {
placeholder: '请选择仓库',
allowClear: true,
showSearch: true,
api: getWarehouseSimpleList,
labelField: 'name',
valueField: 'id',
filterOption: false,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'productName',
title: '产品名称',
minWidth: 150,
},
{
field: 'unitName',
title: '产品单位',
minWidth: 100,
},
{
field: 'categoryName',
title: '产品分类',
minWidth: 120,
},
{
field: 'count',
title: '库存量',
minWidth: 100,
cellRender: {
name: 'CellAmount',
props: {
digits: 2,
},
},
},
{
field: 'warehouseName',
title: '仓库',
minWidth: 120,
},
];
}

View File

@ -1,32 +1,78 @@
<script lang="ts" setup> <script lang="ts" setup>
import { DocAlert, Page } from '@vben/common-ui'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpStockApi } from '#/api/erp/stock/stock';
import { Button } from 'ant-design-vue'; import { DocAlert, Page } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportStock, getStockPage } from '#/api/erp/stock/stock';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
/** 产品库存管理 */
defineOptions({ name: 'ErpStock' });
/** 导出库存 */
async function handleExport() {
const data = await exportStock(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '产品库存.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getStockPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<ErpStockApi.Stock>,
});
</script> </script>
<template> <template>
<Page> <Page auto-content-height>
<template #doc>
<DocAlert <DocAlert
title="【库存】产品库存、库存明细" title="【库存】产品库存、库存明细"
url="https://doc.iocoder.cn/erp/stock/" url="https://doc.iocoder.cn/erp/stock/"
/> />
<Button </template>
danger
type="link" <Grid table-title="">
target="_blank" <template #toolbar-tools>
href="https://github.com/yudaocode/yudao-ui-admin-vue3" <TableAction
> :actions="[
该功能支持 Vue3 + element-plus 版本 {
</Button> label: $t('ui.actionTitle.export'),
<br /> type: 'primary',
<Button icon: ACTION_ICON.DOWNLOAD,
type="link" auth: ['erp:stock:export'],
target="_blank" onClick: handleExport,
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index" },
> ]"
可参考 />
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index </template>
代码pull request 贡献给我们 </Grid>
</Button>
</Page> </Page>
</template> </template>