From 93c0d9e4868db4a5318484f645d4f1792697785f Mon Sep 17 00:00:00 2001 From: nehc <934298133@qq.com> Date: Wed, 30 Jul 2025 13:40:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(@vben/web-antd):=20erp-purchase-suppli?= =?UTF-8?q?er-=E6=B7=BB=E5=8A=A0=E4=BE=9B=E5=BA=94=E5=95=86=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增供应商管理页面,包括搜索、列表、新增、编辑和删除功能 - 实现供应商数据的分页查询、导出功能 - 使用 Vben Form 和 Vxe Table 组件构建表单和表格 - 添加国际化支持 --- .../src/views/erp/purchase/supplier/data.ts | 233 ++++++++++++++++++ .../src/views/erp/purchase/supplier/index.vue | 226 +++++++++++++++-- .../erp/purchase/supplier/modules/form.vue | 102 ++++++++ 3 files changed, 541 insertions(+), 20 deletions(-) create mode 100644 apps/web-antd/src/views/erp/purchase/supplier/data.ts create mode 100644 apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue diff --git a/apps/web-antd/src/views/erp/purchase/supplier/data.ts b/apps/web-antd/src/views/erp/purchase/supplier/data.ts new file mode 100644 index 000000000..846cebccc --- /dev/null +++ b/apps/web-antd/src/views/erp/purchase/supplier/data.ts @@ -0,0 +1,233 @@ +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: 'status', + label: '状态', + component: 'Select', + componentProps: { + placeholder: '请选择状态', + allowClear: true, + options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), + }, + }, + ]; +} + +/** 列表的字段 */ +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' }, + }, + ]; +} diff --git a/apps/web-antd/src/views/erp/purchase/supplier/index.vue b/apps/web-antd/src/views/erp/purchase/supplier/index.vue index a987c6c49..2ace8bbbd 100644 --- a/apps/web-antd/src/views/erp/purchase/supplier/index.vue +++ b/apps/web-antd/src/views/erp/purchase/supplier/index.vue @@ -1,7 +1,140 @@ - -
- + + +
+ +
+ +
+
+ + + + + + + + diff --git a/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue b/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue new file mode 100644 index 000000000..d99884912 --- /dev/null +++ b/apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue @@ -0,0 +1,102 @@ + + + From 33cec7caee71601e97ca511cbb8126e75f49d570 Mon Sep 17 00:00:00 2001 From: nehc <934298133@qq.com> Date: Wed, 30 Jul 2025 14:32:32 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(@vben/web-antd):=20erp-purchase-suppli?= =?UTF-8?q?er-=E4=BE=9B=E5=BA=94=E5=95=86=E7=AE=A1=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除状态字段,增加联系电话字段 - 调整供应商列表的展示逻辑 - 优化搜索和导出功能 - 使用 useVbenVxeGrid 替代原有的表格实现 - 用 downloadFileFromBlobPart 处理文件下载 --- .../src/views/erp/purchase/supplier/data.ts | 9 +- .../src/views/erp/purchase/supplier/index.vue | 110 ++++-------------- .../erp/purchase/supplier/modules/form.vue | 2 +- 3 files changed, 26 insertions(+), 95 deletions(-) diff --git a/apps/web-antd/src/views/erp/purchase/supplier/data.ts b/apps/web-antd/src/views/erp/purchase/supplier/data.ts index 846cebccc..eed9d72db 100644 --- a/apps/web-antd/src/views/erp/purchase/supplier/data.ts +++ b/apps/web-antd/src/views/erp/purchase/supplier/data.ts @@ -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'), }, }, ]; diff --git a/apps/web-antd/src/views/erp/purchase/supplier/index.vue b/apps/web-antd/src/views/erp/purchase/supplier/index.vue index 2ace8bbbd..b0d6d79ef 100644 --- a/apps/web-antd/src/views/erp/purchase/supplier/index.vue +++ b/apps/web-antd/src/views/erp/purchase/supplier/index.vue @@ -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({ - 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, });