feat(@vben/web-antd): erp-purchase-supplier-供应商管理页面
- 移除状态字段,增加联系电话字段 - 调整供应商列表的展示逻辑 - 优化搜索和导出功能 - 使用 useVbenVxeGrid 替代原有的表格实现 - 用 downloadFileFromBlobPart 处理文件下载pull/183/head
parent
93c0d9e486
commit
33cec7caee
|
@ -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'),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
]"
|
||||
|
|
|
@ -95,7 +95,7 @@ defineExpose({
|
|||
<template>
|
||||
<Modal
|
||||
:title="formType === 'create' ? '新增供应商' : '编辑供应商'"
|
||||
class="w-2/5"
|
||||
class="w-3/5"
|
||||
>
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
|
|
Loading…
Reference in New Issue