refactor: 代码生成代码优化

apps/web-antd/src/router/routes/modules/infra.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/codegen/edit',
         name: 'InfraCodegenEdit',
-        component: () => import('#/views/infra/codegen/edit.vue'),
+        component: () => import('#/views/infra/codegen/edit/index.vue'),
         meta: {
           title: '修改生成配置',
           activeMenu: '/infra/codegen',

apps/web-antd/src/views/infra/codegen/data.ts

@@ -1,13 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraCodegenApi } from '#/api/infra/codegen';
-import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 import type { SystemMenuApi } from '#/api/system/menu';
 import type { Recordable } from '@vben/types';
+import type { ComputedRef } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { z } from '#/adapter/form';
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
 import { getMenuList } from '#/api/system/menu';
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
@@ -20,24 +20,33 @@ import { $t } from '@vben/locales';
 const { hasAccessByCodes } = useAccess();
 
 /** 导入数据库表的表单 */
-export function useImportTableFormSchema(
-  dataSourceConfigList: InfraDataSourceConfigApi.InfraDataSourceConfig[],
-): VbenFormSchema[] {
+export function useImportTableFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'dataSourceConfigId',
       label: '数据源',
-      // TODO @puhui999：不确定使用 ApiSelect 的话，使用 afterEach，可以设置默认 defaultValue 不
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        options: dataSourceConfigList.map((item) => ({
-          label: item.name,
-          value: item.id,
-        })),
+        api: async () => {
+          const data = await getDataSourceConfigList();
+          return data.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        autoSelect: 'first',
         placeholder: '请选择数据源',
       },
-      defaultValue: dataSourceConfigList[0]?.id,
-      rules: 'required',
+      dependencies: {
+        triggerFields: ['dataSourceConfigId'],
+        trigger(values, formApi) {
+          if (values.dataSourceConfigId === undefined) {
+            return;
+          }
+          formApi.submitForm(values);
+        },
+      },
+      rules: 'selectRequired',
     },
     {
       fieldName: 'name',
@@ -124,7 +133,7 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE, 'number'),
         class: 'w-full',
       },
-      rules: z.number().min(1, { message: '生成模板不能为空' }),
+      rules: 'selectRequired',
     },
     {
       component: 'Select',
@@ -134,8 +143,7 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE, 'number'),
         class: 'w-full',
       },
-      // todo @puhui999：1 可以是枚举么
-      rules: z.number().min(1, { message: '前端类型不能为空' }),
+      rules: 'selectRequired',
     },
     {
       component: 'Select',
@@ -145,8 +153,7 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE, 'number'),
         class: 'w-full',
       },
-      // todo @puhui999：1 可以是枚举么
-      rules: z.number().min(1, { message: '生成场景不能为空' }),
+      rules: 'selectRequired',
     },
     {
       fieldName: 'parentMenuId',
@@ -199,36 +206,34 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
       fieldName: 'moduleName',
       label: '模块名',
       help: '模块名，即一级目录，例如 system、infra、tool 等等',
-      // TODO @puhui999：这种 rules，可以使用 required
-      rules: z.string().min(1, { message: '模块名不能为空' }),
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'businessName',
       label: '业务名',
       help: '业务名，即二级目录，例如 user、permission、dict 等等',
-      rules: z.string().min(1, { message: '业务名不能为空' }),
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'className',
       label: '类名称',
       help: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
-      rules: z.string().min(1, { message: '类名称不能为空' }),
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'classComment',
       label: '类描述',
       help: '用作类描述，例如 用户',
-      rules: z.string().min(1, { message: '类描述不能为空' }),
+      rules: 'required',
     },
   ];
 }
 
-// TODO @puhui999：是不是使用 useGenerationInfoTreeFormSchema，主要考虑对称
 /** 树表信息 schema */
-export function useTreeTableFormSchema(columns: InfraCodegenApi.CodegenColumn[] = []): VbenFormSchema[] {
+export function useGenerationInfoTreeFormSchema(columns: InfraCodegenApi.CodegenColumn[] = []): VbenFormSchema[] {
   return [
     {
       component: 'Divider',
@@ -276,9 +281,8 @@ export function useTreeTableFormSchema(columns: InfraCodegenApi.CodegenColumn[]
   ];
 }
 
-// TODO @puhui999：【类似】是不是使用 useGenerationInfoTreeFormSchema，主要考虑对称
 /** 主子表信息 schema */
-export function useSubTableFormSchema(
+export function useGenerationInfoSubTableFormSchema(
   columns: InfraCodegenApi.CodegenColumn[] = [],
   tables: InfraCodegenApi.CodegenTable[] = [],
 ): VbenFormSchema[] {
@@ -387,17 +391,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
   onActionClick: OnActionClickFn<T>,
-  dataSourceConfigList: InfraDataSourceConfigApi.InfraDataSourceConfig[],
+  getDataSourceConfigName: ComputedRef<(cellValue: number) => string>,
 ): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'dataSourceConfigId',
       title: '数据源',
       minWidth: 120,
-      formatter: ({ cellValue }) => {
-        const config = dataSourceConfigList.find((item) => item.id === cellValue);
-        return config ? config.name : '';
-      },
+      formatter: ({ cellValue }) => getDataSourceConfigName.value(cellValue),
     },
     {
       field: 'tableName',

apps/web-antd/src/views/infra/codegen/edit/index.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-// TODO @puhui999：要不新建一个 edit 目录，把它挪进去？
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 
-import BasicInfo from './modules/basic-info.vue';
-import ColumnInfo from './modules/column-info.vue';
-import GenerationInfo from './modules/generation-info.vue';
+import BasicInfo from '../modules/basic-info.vue';
+import ColumnInfo from '../modules/column-info.vue';
+import GenerationInfo from '../modules/generation-info.vue';
 import { Page } from '@vben/common-ui';
 import { ChevronsLeft } from '@vben/icons';
 import { Button, message, Steps } from 'ant-design-vue';
@@ -82,7 +81,6 @@ const submitForm = async () => {
   }
 };
 
-// TODO @puhui999：可能要关闭下当前的编辑页面
 /** 返回列表 */
 const close = () => {
   router.push('/infra/codegen');
@@ -142,11 +140,6 @@ getDetail();
         <Button v-show="currentStep === steps.length - 1" type="primary" :loading="loading" @click="submitForm">
           保存
         </Button>
-        <!-- TODO @puhui999：返回要不去掉，感觉一般自己点击关闭就好啦！ -->
-        <Button @click="close">
-          <ChevronsLeft class="mr-1" />
-          返回
-        </Button>
       </div>
     </div>
   </Page>

apps/web-antd/src/views/infra/codegen/index.vue

@@ -14,7 +14,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCodegenTable, downloadCodegen, getCodegenTablePage, syncCodegenFromDB } from '#/api/infra/codegen';
 import { getDataSourceConfigList } from '#/api/infra/data-source-config';
 import { $t } from '#/locales';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -22,6 +22,9 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const dataSourceConfigList = ref<InfraDataSourceConfigApi.InfraDataSourceConfig[]>([]);
+const getDataSourceConfigName = computed(
+  () => (cellValue: number) => dataSourceConfigList.value.find((item) => item.id === cellValue)?.name || '',
+);
 
 const [ImportModal, importModalApi] = useVbenModal({
   connectedComponent: ImportTable,
@@ -50,8 +53,7 @@ function onPreview(row: InfraCodegenApi.CodegenTable) {
 
 /** 编辑表格 */
 function onEdit(row: InfraCodegenApi.CodegenTable) {
-  // TODO @puhui999：使用 name。这样后续换路径，不会有问题哈；
-  router.push(`/codegen/edit?id=${row.id}`);
+  router.push({ name: 'InfraCodegenEdit', query: { id: row.id } });
 }
 
 /** 删除代码生成配置 */
@@ -120,14 +122,14 @@ async function onGenerate(row: InfraCodegenApi.CodegenTable) {
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<InfraCodegenApi.CodegenTable>) {
   switch (code) {
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
     case 'delete': {
       onDelete(row);
       break;
     }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
     case 'generate': {
       onGenerate(row);
       break;
@@ -148,7 +150,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick, dataSourceConfigList.value),
+    columns: useGridColumns(onActionClick, getDataSourceConfigName),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -172,14 +174,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
 });
 
-// TODO @puhui999：这个，是不是可以使用 apiselect
 /** 获取数据源配置列表 */
 async function initDataSourceConfig() {
   try {
     dataSourceConfigList.value = await getDataSourceConfigList();
-    gridApi.setState({
-      gridOptions: { columns: useGridColumns(onActionClick, dataSourceConfigList.value) },
-    });
   } catch (error) {
     console.error('获取数据源配置失败', error);
   }

apps/web-antd/src/views/infra/codegen/modules/generation-info.vue

@@ -8,7 +8,11 @@ import { computed, ref, watch } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
-import { useGenerationInfoBaseFormSchema, useSubTableFormSchema, useTreeTableFormSchema } from '../data';
+import {
+  useGenerationInfoBaseFormSchema,
+  useGenerationInfoSubTableFormSchema,
+  useGenerationInfoTreeFormSchema
+} from '../data';
 
 const props = defineProps<{
   columns?: InfraCodegenApi.CodegenColumn[];
@@ -55,14 +59,14 @@ const [SubForm, subFormApi] = useVbenForm({
 /** 更新树表信息表单 schema */
 function updateTreeSchema(): void {
   treeFormApi.setState({
-    schema: useTreeTableFormSchema(props.columns)
+    schema: useGenerationInfoTreeFormSchema(props.columns)
   });
 }
 
 /** 更新主子表信息表单 schema */
 function updateSubSchema(): void {
   subFormApi.setState({
-    schema: useSubTableFormSchema(props.columns, tables.value)
+    schema: useGenerationInfoSubTableFormSchema(props.columns, tables.value)
   });
 }
 

apps/web-antd/src/views/infra/codegen/modules/import-table.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraCodegenApi } from '#/api/infra/codegen';
-import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { createCodegenList, getSchemaTableList } from '#/api/infra/codegen';
-import { getDataSourceConfigList } from '#/api/infra/data-source-config';
-import { reactive, ref, unref } from 'vue';
+import { reactive } from 'vue';
 
 import { $t } from '@vben/locales';
 
@@ -20,16 +18,15 @@ const emit = defineEmits<{
   (e: 'success'): void;
 }>();
 
-const dataSourceConfigList = ref<InfraDataSourceConfigApi.InfraDataSourceConfig[]>([]);
 const formData = reactive<InfraCodegenApi.CodegenCreateListReqVO>({
-  dataSourceConfigId: undefined,
+  dataSourceConfigId: 0,
   tableNames: [], // 已选择的表列表
 });
 
 /** 表格实例 */
-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useImportTableFormSchema([]),
+    schema: useImportTableFormSchema(),
   },
   gridOptions: {
     // TODO @puhui999：这个要不也挪出去，保持统一？
@@ -43,13 +40,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          // TODO @puhui999：貌似可以直接使用 formValues.dataSourceConfigId。肯定可以读到值。
           if (formValues.dataSourceConfigId === undefined) {
-            if (unref(dataSourceConfigList).length > 0) {
-              formValues.dataSourceConfigId = unref(dataSourceConfigList)[0]?.id;
-            } else {
-              return [];
-            }
+            return [];
           }
           formData.dataSourceConfigId = formValues.dataSourceConfigId;
           return await getSchemaTableList({
@@ -119,23 +111,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 获取数据源配置列表 */
-async function initDataSourceConfig() {
-  try {
-    dataSourceConfigList.value = await getDataSourceConfigList();
-    gridApi.setState({
-      formOptions: {
-        schema: useImportTableFormSchema(dataSourceConfigList.value),
-      },
-    });
-  } catch (error) {
-    console.error('获取数据源配置失败', error);
-  }
-}
-
-/** 初始化 */
-initDataSourceConfig();
 </script>
 
 <template>

apps/web-antd/src/views/infra/codegen/modules/preview-code.vue

@@ -203,7 +203,7 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal title="代码预览">
-    <div class="h-full flex" v-loading="loading">
+    <div class="flex h-full" v-loading="loading">
       <!-- 文件树 -->
       <div class="w-1/3 border-r border-gray-200 pr-4 dark:border-gray-700">
         <!-- TODO @puhui999：树默认展示； -->