feat(@vben/web-antd): erp-purchase-supplier-供应商管理页面

- 移除状态字段,增加联系电话字段
- 调整供应商列表的展示逻辑
- 优化搜索和导出功能
- 使用 useVbenVxeGrid 替代原有的表格实现
- 用 downloadFileFromBlobPart 处理文件下载
pull/183/head
nehc 2025-07-30 14:32:32 +08:00
parent 93c0d9e486
commit 33cec7caee
3 changed files with 26 additions and 95 deletions

View File

@ -163,13 +163,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
fieldName: 'telephone',
label: '联系电话',
component: 'Input',
componentProps: {
placeholder: '请选择状态',
placeholder: '请输入联系电话',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
];

View File

@ -2,15 +2,17 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteSupplier, getSupplierPage } from '#/api/erp/purchase/supplier';
import {
deleteSupplier,
exportSupplier,
getSupplierPage,
} from '#/api/erp/purchase/supplier';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@ -19,53 +21,11 @@ import SupplierForm from './modules/form.vue';
/** 供应商管理 */
defineOptions({ name: 'ErpSupplier' });
const searchParams = ref<ErpSupplierApi.SupplierPageParam>({
pageNo: 1,
pageSize: 10,
name: '',
mobile: '',
status: undefined,
});
/** 搜索表单 */
const [SearchForm, searchFormApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-1',
labelWidth: 80,
},
layout: 'inline',
schema: useGridFormSchema(),
showDefaultActions: false,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 搜索 */
async function handleSearch() {
const values = await searchFormApi.getValues();
Object.assign(searchParams.value, values, { pageNo: 1 });
onRefresh();
}
/** 重置搜索 */
async function handleReset() {
await searchFormApi.resetFields();
Object.assign(searchParams.value, {
pageNo: 1,
pageSize: 10,
name: '',
mobile: '',
status: undefined,
});
onRefresh();
}
/** 添加供应商 */
function handleCreate() {
formModalApi.setData({ type: 'create' }).open();
@ -96,13 +56,8 @@ async function handleDelete(row: ErpSupplierApi.Supplier) {
/** 导出供应商 */
async function handleExport() {
try {
// const data = await exportSupplier(searchParams.value);
//
message.success('导出成功');
} catch {
message.error('导出失败');
}
const data = await exportSupplier(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
}
const [FormModal, formModalApi] = useVbenModal({
@ -111,17 +66,20 @@ const [FormModal, formModalApi] = useVbenModal({
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 600,
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
query: async ({ page }, formValues) => {
return await getSupplierPage({
...searchParams.value,
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
@ -131,14 +89,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
toolbarConfig: {
refresh: true,
custom: true,
search: true,
},
} as VxeTableGridOptions<ErpSupplierApi.Supplier>,
});
</script>
<template>
<Page>
<Page auto-content-height>
<template #doc>
<DocAlert
title="【采购】采购订单、入库、退货"
@ -146,47 +104,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<!-- 搜索表单 -->
<div class="mb-4 rounded-lg bg-white p-4 shadow-sm">
<SearchForm
class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4"
/>
<div class="mt-4 flex gap-2">
<TableAction
:actions="[
{
label: '查询',
type: 'primary',
icon: ACTION_ICON.SEARCH,
onClick: handleSearch,
},
{
label: '重置',
type: 'default',
icon: ACTION_ICON.RESET,
onClick: handleReset,
},
]"
/>
</div>
</div>
<FormModal @success="onRefresh" />
<Grid>
<Grid table-title="">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: '新增',
label: $t('ui.actionTitle.create', ['供应商']),
type: 'primary',
icon: ACTION_ICON.ADD,
onClick: handleCreate,
},
{
label: '导出',
type: 'default',
icon: ACTION_ICON.EXPORT,
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
onClick: handleExport,
},
]"

View File

@ -95,7 +95,7 @@ defineExpose({
<template>
<Modal
:title="formType === 'create' ? '新增供应商' : '编辑供应商'"
class="w-2/5"
class="w-3/5"
>
<Form class="mx-4" />
</Modal>