reactor：【infra 基础设施】codegen 进一步统一代码风格（100%）

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

@@ -366,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        allowClear: true,
         placeholder: '请输入表名称',
+        allowClear: true,
       },
     },
     {
@@ -375,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        allowClear: true,
         placeholder: '请输入表描述',
+        allowClear: true,
       },
     },
     {
@@ -400,28 +400,34 @@ export function useGridColumns(
     {
       field: 'dataSourceConfigId',
       title: '数据源',
+      minWidth: 120,
       formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
     },
     {
       field: 'tableName',
       title: '表名称',
+      minWidth: 200,
     },
     {
       field: 'tableComment',
       title: '表描述',
+      minWidth: 200,
     },
     {
       field: 'className',
       title: '实体',
+      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {

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

@@ -6,7 +6,7 @@ import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
@@ -49,7 +49,7 @@ const [PreviewModal, previewModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -77,7 +77,24 @@ async function handleDelete(row: InfraCodegenApi.CodegenTable) {
   try {
     await deleteCodegenTable(row.id);
     message.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
-    onRefresh();
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除代码生成配置 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteCodegenTableList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -92,22 +109,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 批量删除代码生成配置 */
-async function handleDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-  });
-  try {
-    await deleteCodegenTableList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 同步数据库 */
 async function handleSync(row: InfraCodegenApi.CodegenTable) {
   const hideLoading = message.loading({
@@ -117,7 +118,7 @@ async function handleSync(row: InfraCodegenApi.CodegenTable) {
   try {
     await syncCodegenFromDB(row.id);
     message.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -209,7 +210,7 @@ initDataSourceConfig();
       <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
     </template>
 
-    <ImportModal @success="onRefresh" />
+    <ImportModal @success="handleRefresh" />
     <PreviewModal />
     <Grid table-title="代码生成列表">
       <template #toolbar-tools>
@@ -223,11 +224,11 @@ initDataSourceConfig();
               onClick: handleImport,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'primary',
               danger: true,
-              disabled: isEmpty(checkedIds),
               icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
               auth: ['infra:codegen:delete'],
               onClick: handleDeleteBatch,
             },

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

@@ -1,13 +1,12 @@
 import type { Recordable } from '@vben/types';
 
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 import type { SystemMenuApi } from '#/api/system/menu';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
@@ -18,8 +17,6 @@ import { getMenuList } from '#/api/system/menu';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 导入数据库表的表单 */
 export function useImportTableFormSchema(): VbenFormSchema[] {
   return [
@@ -45,8 +42,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        clearable: true,
         placeholder: '请输入表名称',
+        clearable: true,
       },
     },
     {
@@ -54,8 +51,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        clearable: true,
         placeholder: '请输入表描述',
+        clearable: true,
       },
     },
   ];
@@ -369,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        clearable: true,
         placeholder: '请输入表名称',
+        clearable: true,
       },
     },
     {
@@ -378,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        clearable: true,
         placeholder: '请输入表描述',
+        clearable: true,
       },
     },
     {
@@ -395,8 +392,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
+export function useGridColumns(
-  onActionClick: OnActionClickFn<T>,
   getDataSourceConfigName?: (dataSourceConfigId: number) => string | undefined,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -405,7 +401,7 @@ export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
       field: 'dataSourceConfigId',
       title: '数据源',
       minWidth: 120,
-      formatter: (row) => getDataSourceConfigName?.(row.cellValue) || '-',
+      formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
     },
     {
       field: 'tableName',
@@ -435,44 +431,10 @@ export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 300,
+      width: 280,
       fixed: 'right',
-      align: 'center',
+      slots: { default: 'actions' },
-      cellRender: {
-        attrs: {
-          nameField: 'tableName',
-          nameTitle: '代码生成',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'preview',
-            text: '预览',
-            show: hasAccessByCodes(['infra:codegen:preview']),
-          },
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:codegen:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:codegen:delete']),
-          },
-          {
-            code: 'sync',
-            text: '同步',
-            show: hasAccessByCodes(['infra:codegen:update']),
-          },
-          {
-            code: 'generate',
-            text: '生成代码',
-            show: hasAccessByCodes(['infra:codegen:download']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
@@ -52,58 +49,80 @@ const [PreviewModal, previewModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 导入表格 */
-function onImport() {
+function handleImport() {
   importModalApi.open();
 }
 
 /** 预览代码 */
-function onPreview(row: InfraCodegenApi.CodegenTable) {
+function handlePreview(row: InfraCodegenApi.CodegenTable) {
   previewModalApi.setData(row).open();
 }
 
 /** 编辑表格 */
-function onEdit(row: InfraCodegenApi.CodegenTable) {
+function handleEdit(row: InfraCodegenApi.CodegenTable) {
   router.push({ name: 'InfraCodegenEdit', query: { id: row.id } });
 }
 
 /** 删除代码生成配置 */
-async function onDelete(row: InfraCodegenApi.CodegenTable) {
+async function handleDelete(row: InfraCodegenApi.CodegenTable) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.tableName]),
   });
   try {
     await deleteCodegenTable(row.id);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
 }
 
 /** 批量删除代码生成配置 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
-  await confirm('确定要批量删除该代码生成配置吗？');
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
-  await deleteCodegenTableList(checkedIds.value);
+  const loadingInstance = ElLoading.service({
-  checkedIds.value = [];
+    text: $t('ui.actionMessage.deletingBatch'),
-  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+  });
-  onRefresh();
+  try {
+    await deleteCodegenTableList(checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraCodegenApi.CodegenTable[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
 }
 
 /** 同步数据库 */
-async function onSync(row: InfraCodegenApi.CodegenTable) {
+async function handleSync(row: InfraCodegenApi.CodegenTable) {
-  await confirm('确定要同步该代码生成配置吗？');
+  const loadingInstance = ElLoading.service({
-  await syncCodegenFromDB(row.id);
+    text: $t('ui.actionMessage.updating', [row.tableName]),
-  ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+  });
-  onRefresh();
+  try {
+    await syncCodegenFromDB(row.id);
+    ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 生成代码 */
-async function onGenerate(row: InfraCodegenApi.CodegenTable) {
+async function handleGenerate(row: InfraCodegenApi.CodegenTable) {
   const loadingInstance = ElLoading.service({
     text: '正在生成代码...',
   });
@@ -122,50 +141,12 @@ async function onGenerate(row: InfraCodegenApi.CodegenTable) {
   }
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<InfraCodegenApi.CodegenTable>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-    case 'generate': {
-      onGenerate(row);
-      break;
-    }
-    case 'preview': {
-      onPreview(row);
-      break;
-    }
-    case 'sync': {
-      onSync(row);
-      break;
-    }
-  }
-}
-
-const checkedIds = ref<number[]>([]);
-function handleRowCheckboxChange({
-  records,
-}: {
-  records: InfraCodegenApi.CodegenTable[];
-}) {
-  checkedIds.value = records.map((item) => item.id!);
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick, getDataSourceConfigName),
+    columns: useGridColumns(getDataSourceConfigName),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -224,18 +205,18 @@ initDataSourceConfig();
       <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
     </template>
 
-    <ImportModal @success="onRefresh" />
+    <ImportModal @success="handleRefresh" />
     <PreviewModal />
     <Grid table-title="代码生成列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '导入',
+              label: $t('ui.actionTitle.import'),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['infra:codegen:create'],
-              onClick: onImport,
+              onClick: handleImport,
             },
             {
               label: $t('ui.actionTitle.deleteBatch'),
@@ -243,7 +224,55 @@ initDataSourceConfig();
               icon: ACTION_ICON.DELETE,
               disabled: isEmpty(checkedIds),
               auth: ['infra:codegen:delete'],
-              onClick: onDeleteBatch,
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '预览',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:codegen:preview'],
+              onClick: handlePreview.bind(null, row),
+            },
+            {
+              label: '生成代码',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:codegen:download'],
+              onClick: handleGenerate.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              auth: ['infra:codegen:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '同步',
+              type: 'primary',
+              link: true,
+              auth: ['infra:codegen:update'],
+              onClick: handleSync.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              auth: ['infra:codegen:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.tableName]),
+                confirm: handleDelete.bind(null, row),
+              },
             },
           ]"
         />