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

- 移除状态字段，增加联系电话字段
- 调整供应商列表的展示逻辑
- 优化搜索和导出功能
- 使用 useVbenVxeGrid 替代原有的表格实现
- 用 downloadFileFromBlobPart 处理文件下载

apps/web-antd/src/views/erp/purchase/supplier/data.ts

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

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<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(await gridApi.formApi.getValues());
-    // const data = await exportSupplier(searchParams.value);
+  downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
-    // 这里需要处理文件下载逻辑
-    message.success('导出成功');
-  } catch {
-    message.error('导出失败');
-  }
 }
 
 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 table-title="供应商列表">
-    <Grid>
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '新增',
+              label: $t('ui.actionTitle.create', ['供应商']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               onClick: handleCreate,
             },
             {
-              label: '导出',
+              label: $t('ui.actionTitle.export'),
-              type: 'default',
+              type: 'primary',
-              icon: ACTION_ICON.EXPORT,
+              icon: ACTION_ICON.DOWNLOAD,
               onClick: handleExport,
             },
           ]"

apps/web-antd/src/views/erp/purchase/supplier/modules/form.vue

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