!183 feat(@vben/web-antd): erp-purchase-supplier-优化采购订单导出功能并添加供应商管理权限控制

Merge pull request !183 from 陈賝/dev
pull/184/MERGE
xingyu 2025-07-31 02:47:33 +00:00 committed by Gitee
commit ff62e4c368
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 479 additions and 28 deletions

View File

@ -129,13 +129,8 @@ function handleUpdateStatus(
/** 导出 */
async function handleExport() {
try {
const formValues = gridApi.getFormData();
const data = await exportPurchaseOrder(formValues);
downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
} catch {
//
}
const data = await exportPurchaseOrder(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
}
const [Grid, gridApi] = useVbenVxeGrid({

View File

@ -0,0 +1,232 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'name',
label: '供应商名称',
component: 'Input',
componentProps: {
placeholder: '请输入供应商名称',
},
rules: 'required',
},
{
fieldName: 'contact',
label: '联系人',
component: 'Input',
componentProps: {
placeholder: '请输入联系人',
},
},
{
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
},
},
{
fieldName: 'telephone',
label: '联系电话',
component: 'Input',
componentProps: {
placeholder: '请输入联系电话',
},
},
{
fieldName: 'email',
label: '电子邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入电子邮箱',
},
},
{
fieldName: 'fax',
label: '传真',
component: 'Input',
componentProps: {
placeholder: '请输入传真',
},
},
{
fieldName: 'status',
label: '开启状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
rules: 'required',
defaultValue: 0,
},
{
fieldName: 'sort',
label: '排序',
component: 'InputNumber',
componentProps: {
placeholder: '请输入排序',
precision: 0,
class: 'w-full',
},
rules: 'required',
defaultValue: 0,
},
{
fieldName: 'taxNo',
label: '纳税人识别号',
component: 'Input',
componentProps: {
placeholder: '请输入纳税人识别号',
},
},
{
fieldName: 'taxPercent',
label: '税率(%)',
component: 'InputNumber',
componentProps: {
placeholder: '请输入税率',
min: 0,
precision: 2,
class: 'w-full',
},
},
{
fieldName: 'bankName',
label: '开户行',
component: 'Input',
componentProps: {
placeholder: '请输入开户行',
},
},
{
fieldName: 'bankAccount',
label: '开户账号',
component: 'Input',
componentProps: {
placeholder: '请输入开户账号',
},
},
{
fieldName: 'bankAddress',
label: '开户地址',
component: 'Input',
componentProps: {
placeholder: '请输入开户地址',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
rows: 3,
},
formItemClass: 'col-span-2',
},
];
}
/** 搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '供应商名称',
component: 'Input',
componentProps: {
placeholder: '请输入供应商名称',
allowClear: true,
},
},
{
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
allowClear: true,
},
},
{
fieldName: 'telephone',
label: '联系电话',
component: 'Input',
componentProps: {
placeholder: '请输入联系电话',
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '供应商名称',
minWidth: 150,
},
{
field: 'contact',
title: '联系人',
minWidth: 120,
},
{
field: 'mobile',
title: '手机号码',
minWidth: 130,
},
{
field: 'telephone',
title: '联系电话',
minWidth: 130,
},
{
field: 'email',
title: '电子邮箱',
minWidth: 180,
},
{
field: 'status',
title: '状态',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'sort',
title: '排序',
width: 80,
},
{
field: 'remark',
title: '备注',
minWidth: 150,
showOverflow: 'tooltip',
},
{
field: 'actions',
title: '操作',
width: 160,
slots: { default: 'actions' },
},
];
}

View File

@ -1,34 +1,156 @@
<script lang="ts" setup>
import { DocAlert, Page } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
import { Button } from 'ant-design-vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteSupplier,
exportSupplier,
getSupplierPage,
} from '#/api/erp/purchase/supplier';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import SupplierForm from './modules/form.vue';
/** 供应商管理 */
defineOptions({ name: 'ErpSupplier' });
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 添加供应商 */
function handleCreate() {
formModalApi.setData({ type: 'create' }).open();
}
/** 编辑供应商 */
function handleEdit(row: ErpSupplierApi.Supplier) {
formModalApi.setData({ type: 'update', id: row.id }).open();
}
/** 删除供应商 */
async function handleDelete(row: ErpSupplierApi.Supplier) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: 'action_key_msg',
});
try {
await deleteSupplier(row.id!);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} catch {
hideLoading();
}
}
/** 导出供应商 */
async function handleExport() {
const data = await exportSupplier(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
}
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: SupplierForm,
destroyOnClose: true,
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getSupplierPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<ErpSupplierApi.Supplier>,
});
</script>
<template>
<Page>
<Page auto-content-height>
<template #doc>
<DocAlert
title="【采购】采购订单、入库、退货"
url="https://doc.iocoder.cn/erp/purchase/"
/>
</template>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index
代码pull request 贡献给我们
</Button>
<FormModal @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['供应商']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['erp:supplier:create'],
onClick: handleCreate,
},
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['erp:supplier:export'],
onClick: handleExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '编辑',
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['erp:supplier:update'],
onClick: handleEdit.bind(null, row),
},
{
label: '删除',
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['erp:supplier:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

View File

@ -0,0 +1,102 @@
<script lang="ts" setup>
import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createSupplier,
getSupplier,
updateSupplier,
} from '#/api/erp/purchase/supplier';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formType = ref<'create' | 'update'>('create');
const supplierId = ref<number>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 100,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
//
const data = (await formApi.getValues()) as ErpSupplierApi.Supplier;
try {
if (formType.value === 'create') {
await createSupplier(data);
message.success($t('ui.actionMessage.createSuccess'));
} else {
await updateSupplier(data);
message.success($t('ui.actionMessage.updateSuccess'));
}
//
await modalApi.close();
emit('success');
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
//
const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
if (!data) {
return;
}
formType.value = data.type;
supplierId.value = data.id;
modalApi.lock();
try {
if (data.type === 'update' && data.id) {
//
const supplierData = await getSupplier(data.id);
await formApi.setValues(supplierData);
} else {
//
await formApi.resetFields();
}
} finally {
modalApi.unlock();
}
},
});
defineExpose({
modalApi,
});
</script>
<template>
<Modal
:title="formType === 'create' ? '新增供应商' : '编辑供应商'"
class="w-3/5"
>
<Form class="mx-4" />
</Modal>
</template>