feat：【antd】【erp 系统】supplier 迁移

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

@@ -1,9 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -19,10 +21,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '供应商名称',
       component: 'Input',
+      rules: 'required',
       componentProps: {
         placeholder: '请输入供应商名称',
       },
-      rules: 'required',
     },
     {
       fieldName: 'contact',
@@ -70,9 +72,11 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'RadioGroup',
       componentProps: {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
       rules: 'required',
-      defaultValue: 0,
+      defaultValue: CommonStatusEnum.ENABLE,
     },
     {
       fieldName: 'sort',
@@ -80,11 +84,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入排序',
-        precision: 0,
-        class: 'w-full',
       },
       rules: 'required',
-      defaultValue: 0,
     },
     {
       fieldName: 'taxNo',
@@ -102,7 +103,6 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入税率',
         min: 0,
         precision: 2,
-        class: 'w-full',
       },
     },
     {
@@ -206,7 +206,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '状态',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -215,7 +215,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'sort',
       title: '排序',
-      width: 80,
+      minWidth: 80,
     },
     {
       field: 'remark',
@@ -224,10 +224,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       showOverflow: 'tooltip',
     },
     {
-      field: 'actions',
       title: '操作',
+      width: 130,
       fixed: 'right',
-      width: 160,
       slots: { default: 'actions' },
     },
   ];

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

@@ -22,18 +22,18 @@ import SupplierForm from './modules/form.vue';
 defineOptions({ name: 'ErpSupplier' });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
-/** 添加供应商 */
+/** 创建供应商 */
 function handleCreate() {
-  formModalApi.setData({ type: 'create' }).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑供应商 */
 function handleEdit(row: ErpSupplierApi.Supplier) {
-  formModalApi.setData({ type: 'update', id: row.id }).open();
+  formModalApi.setData(row).open();
 }
 
 /** 删除供应商 */
@@ -44,10 +44,8 @@ async function handleDelete(row: ErpSupplierApi.Supplier) {
   });
   try {
     await deleteSupplier(row.id!);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } catch {
     hideLoading();
   }
@@ -85,6 +83,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -103,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="供应商列表">
       <template #toolbar-tools>
         <TableAction
@@ -130,14 +129,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <TableAction
           :actions="[
             {
-              label: '编辑',
+              label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['erp:supplier:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
-              label: '删除',
+              label: $t('common.delete'),
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -18,9 +18,12 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-
-const formType = ref<'create' | 'update'>('create');
-const supplierId = ref<number>();
+const formData = ref<ErpSupplierApi.Supplier>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['供应商'])
+    : $t('ui.actionTitle.create', ['供应商']);
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -45,39 +48,30 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     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 (formData.value?.id ? updateSupplier(data) : createSupplier(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
     // 加载数据
-    const data = modalApi.getData<{ id?: number; type: 'create' | 'update' }>();
-    if (!data) {
+    const data = modalApi.getData<ErpSupplierApi.Supplier>();
+    if (!data || !data.id) {
       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);
-      }
+      formData.value = await getSupplier(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -90,10 +84,7 @@ defineExpose({
 </script>
 
 <template>
-  <Modal
-    :title="formType === 'create' ? '新增供应商' : '编辑供应商'"
-    class="w-3/5"
-  >
+  <Modal :title="getTitle" class="w-1/2">
     <Form class="mx-4" />
   </Modal>
 </template>