refactor: 重新生成单表和树表代码生成示例

apps/web-antd/src/views/infra/demo/demo01/data.ts

@@ -1,6 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
@@ -105,9 +106,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = Demo01ContactApi.Demo01Contact>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onActionClick?: OnActionClickFn<Demo01ContactApi.Demo01Contact>,
+): VxeTableGridOptions<Demo01ContactApi.Demo01Contact>['columns'] {
   return [
     {
       field: 'id',
@@ -153,9 +154,11 @@ export function useGridColumns<T = Demo01ContactApi.Demo01Contact>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 180,
+      minWidth: 200,
       align: 'center',
       fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
       cellRender: {
         attrs: {
           nameField: 'id',

apps/web-antd/src/views/infra/demo/demo01/index.vue

@@ -11,6 +11,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDemo01Contact, exportDemo01Contact, getDemo01ContactPage } from '#/api/infra/demo/demo01';
 import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
+import { h } from 'vue';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -62,14 +63,14 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
   switch (code) {
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
     case 'delete': {
       onDelete(row);
       break;
     }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
   }
 }
 
@@ -80,7 +81,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(onActionClick),
     height: 'auto',
-    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -94,6 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
@@ -106,14 +110,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
+
     <Grid table-title="示例联系人列表">
       <template #toolbar-tools>
-        <Button type="primary" @click="onCreate" v-access:code="['infra:demo01-contact:create']">
-          <Plus class="size-5" />
+        <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo01-contact:create']">
           {{ $t('ui.actionTitle.create', ['示例联系人']) }}
         </Button>
-        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:demo01-contact:export']">
-          <Download class="size-5" />
+        <Button
+          :icon="h(Download)"
+          type="primary"
+          class="ml-2"
+          @click="onExport"
+          v-access:code="['infra:demo01-contact:export']"
+        >
           {{ $t('ui.actionTitle.export') }}
         </Button>
       </template>

apps/web-antd/src/views/infra/demo/demo01/modules/form.vue

@@ -20,7 +20,7 @@ const getTitle = computed(() => {
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema(),
-  showDefaultActions: false
+  showDefaultActions: false,
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -49,19 +49,25 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+
     // 加载数据
-    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data || !data.id) {
+    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data) {
       return;
     }
-    modalApi.lock();
-    try {
-      formData.value = await getDemo01Contact(data.id as number);
-      // 设置到 values
-      await formApi.setValues(formData.value);
-    } finally {
-      modalApi.lock(false);
+
+    if (data.id) {
+      // 编辑
+      modalApi.lock();
+      try {
+        data = await getDemo01Contact(data.id);
+      } finally {
+        modalApi.lock(false);
+      }
     }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
   },
 });
 </script>