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>(
+export function useGridColumns(
-  onActionClick: OnActionClickFn<T>,
+  onActionClick?: OnActionClickFn<Demo01ContactApi.Demo01Contact>,
-): VxeTableGridOptions['columns'] {
+): 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']">
+        <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo01-contact:create']">
-          <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['示例联系人']) }}
         </Button>
-        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:demo01-contact:export']">
+        <Button
-          <Download class="size-5" />
+          :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>();
+    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data || !data.id) {
+    if (!data) {
       return;
     }
+
+    if (data.id) {
+      // 编辑
       modalApi.lock();
       try {
-      formData.value = await getDemo01Contact(data.id as number);
+        data = await getDemo01Contact(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
       } finally {
         modalApi.lock(false);
       }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
   },
 });
 </script>

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

@@ -4,6 +4,7 @@ import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 
 import { getDemo02CategoryList } from '#/api/infra/demo/demo02';
+import { getRangePickerDefaultProps } from '#/utils/date';
 import { handleTree } from '#/utils/tree';
 
 import { useAccess } from '@vben/access';
@@ -82,8 +83,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        // TODO @puhui999：缺了你写的哪个时间选择哈
       },
     },
   ];
@@ -120,7 +121,7 @@ export function useGridColumns(
       field: 'operation',
       title: '操作',
       minWidth: 200,
-      align: 'right',
+      align: 'center',
       fixed: 'right',
       headerAlign: 'center',
       showOverflow: false,
@@ -133,7 +134,7 @@ export function useGridColumns(
         name: 'CellOperation',
         options: [
           {
-            code: 'add_child', // TODO @puhui999：append 使用这个单词哈，和之前 vben 官方示例一致
+            code: 'append',
             text: '新增下级',
             show: hasAccessByCodes(['infra:demo02-category:create']),
           },

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

@@ -2,7 +2,6 @@
 import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 
-import { DocAlert } from '#/components/doc-alert';
 import Form from './modules/form.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -12,7 +11,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDemo02Category, exportDemo02Category, getDemo02CategoryList } from '#/api/infra/demo/demo02';
 import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -50,7 +49,7 @@ function onEdit(row: Demo02CategoryApi.Demo02Category) {
 }
 
 /** 新增下级示例分类 */
-function onAddChild(row: Demo02CategoryApi.Demo02Category) {
+function onAppend(row: Demo02CategoryApi.Demo02Category) {
   formModalApi.setData({ parentId: row.id }).open();
 }
 
@@ -76,8 +75,8 @@ async function onDelete(row: Demo02CategoryApi.Demo02Category) {
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<Demo02CategoryApi.Demo02Category>) {
   switch (code) {
-    case 'add_child': {
+    case 'append': {
-      onAddChild(row);
+      onAppend(row);
       break;
     }
     case 'delete': {
@@ -129,8 +128,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="示例分类" url="https://doc.iocoder.cn/infra/" />
-
     <FormModal @success="onRefresh" />
 
     <Grid table-title="示例分类列表">
@@ -138,12 +135,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <Button @click="toggleExpand" class="mr-2">
           {{ isExpanded ? '收缩' : '展开' }}
         </Button>
-        <Button type="primary" @click="onCreate" v-access:code="['infra:demo02-category:create']">
+        <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['infra:demo02-category:create']">
-          <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['示例分类']) }}
         </Button>
-        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['infra:demo02-category:export']">
+        <Button
-          <Download class="size-5" />
+          :icon="h(Download)"
+          type="primary"
+          class="ml-2"
+          @click="onExport"
+          v-access:code="['infra:demo02-category:export']"
+        >
           {{ $t('ui.actionTitle.export') }}
         </Button>
       </template>

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

@@ -25,7 +25,7 @@ const getTitle = computed(() => {
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema(),
-  showDefaultActions: false
+  showDefaultActions: false,
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -54,36 +54,25 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+
     // 加载数据
     let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
     if (!data) {
       return;
     }
 
-    // 处理新增下级的情况
-    // TODO @puhui999：按照 dept 或者 menu 的 form 处理风格，可以更简洁一点；可能 parentId 也不用啦
-    if (!data.id && data.parentId) {
-      parentId.value = data.parentId;
-      formData.value = { parentId: parentId.value } as Demo02CategoryApi.Demo02Category;
-      await formApi.setValues(formData.value);
-      return;
-    }
-
     if (data.id) {
       // 编辑
       modalApi.lock();
       try {
         data = await getDemo02Category(data.id);
-        formData.value = data;
-        await formApi.setValues(formData.value);
       } finally {
         modalApi.lock(false);
       }
-    } else {
-      // 新增
-      formData.value = { parentId: 0 } as Demo02CategoryApi.Demo02Category;
-      await formApi.setValues(formData.value || {});
     }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
   },
 });
 </script>