!52 更新codegen页面,优化ActionButtons样式

Merge pull request !52 from chenminjie/dev-v5_cmj

apps/web-antd/src/components/action-buttons/action-buttons.vue

@@ -125,7 +125,7 @@ const handleMenuClick = (e: any) => {
 </script>
 
 <template>
-  <div class="m-table-action">
+  <div class="m-table-action w-fit">
     <Space :size="2">
       <template v-for="(action, index) in getActions" :key="index">
         <Popconfirm

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

@@ -4,6 +4,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { CodegenApi } from '#/api/infra/codegen';
 
 import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
 
 export namespace CodegenDefaultData {
   /**
@@ -26,10 +27,11 @@ export namespace CodegenDefaultData {
       { field: 'createTime', title: '创建时间', formatter: 'formatDateTime' },
       { field: 'updateTime', title: '更新时间', formatter: 'formatDateTime' },
       {
-        title: '操作',
-        width: 'auto',
+        field: 'action',
         fixed: 'right',
+        width: 'auto',
         slots: { default: 'action' },
+        title: $t('page.action.action'),
       },
     ];
   /**

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

@@ -8,13 +8,19 @@ import {
   type VxeGridProps,
 } from '@vben/plugins/vxe-table';
 
-import { getSchemaTableList } from '#/api/infra/codegen';
+import {
+  type CodegenApi,
+  createCodegenList,
+  getSchemaTableList,
+} from '#/api/infra/codegen';
 
 import { CodegenImportTableModalData } from '../codegen.data';
 
+const confirmLoading = ref<boolean>(false);
+
 // checked
 const checkedStatus = ref<boolean>(false);
-
+const checkedRecords = ref<any[]>([]);
 /**
  * 表格查询表单配置
  */
@@ -55,8 +61,9 @@ const gridOptions = reactive<any>({
 
 const gridEvents = reactive<any>({
   checkboxChange: (params) => {
-    const { checked } = params;
+    const { checked, $grid } = params;
     checkedStatus.value = checked;
+    checkedRecords.value = $grid.getCheckboxRecords();
   },
   checkboxAll: (params) => {
     const { checked } = params;
@@ -73,11 +80,30 @@ const [Grid, gridApi] = useVbenVxeGrid(
   }),
 );
 
-const [Modal] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
   class: 'w-[800px] h-[800px]',
+  confirmLoading: confirmLoading.value,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
   onOpened: async () => {
     gridApi.reload(await gridApi.formApi.getValues());
   },
+  onConfirm: async () => {
+    modalApi.setState({ confirmLoading: true });
+    const formValues = await gridApi.formApi.getValues();
+    // 获取选中的数据
+    const checkedRecords =
+      gridApi.grid.getCheckboxRecords() as CodegenApi.DatabaseTableRespVO[];
+    try {
+      await createCodegenList({
+        dataSourceConfigId: formValues.dataSourceConfigId,
+        tableNames: checkedRecords.map((item) => item.name),
+      });
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+    modalApi.close();
+  },
 });
 </script>
 

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

@@ -3,24 +3,16 @@ import { defineAsyncComponent, reactive, ref } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
-
 import {
   useVbenVxeGrid,
   type VxeGridListeners,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { type CodegenApi, getCodegenTablePage } from '#/api/infra/codegen';
+import { ActionButtons, IconEnum } from '#/components/action-buttons';
 
 import { CodegenDefaultData } from './codegen.data';
 
-// 使用导入表弹窗组件
-const [ImportTableModal, importTableModalApi] = useVbenModal({
-  connectedComponent: defineAsyncComponent(
-    () => import('./components/import-table-modal.vue'),
-  ),
-});
-
 // checked
 const checkedStatus = ref<boolean>(false);
 
@@ -52,14 +44,6 @@ const handleBatchDelete = (_rows: CodegenApi.CodegenTableRespVO[]) => {
   // console.log('批量删除', rows);
 };
 
-/**
- * 导入表
- */
-const handleImportTable = () => {
-  // console.log('导入表', importTableModalApi);
-  importTableModalApi.open();
-};
-
 /**
  * 同步
  */
@@ -109,10 +93,9 @@ const formOptions = reactive<any>({
  */
 const gridOptions = reactive<any>({
   columns: CodegenDefaultData.tableColumns,
-  toolbarConfig: {
-    slots: {
-      buttons: 'toolbar_buttons',
-    },
+  height: 'auto',
+  checkboxConfig: {
+    reserve: true,
   },
   proxyConfig: {
     ajax: {
@@ -140,53 +123,99 @@ const gridEvents = reactive<any>({
 } as VxeGridListeners);
 
 // 使用表格组件
-const [Grid] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
   gridEvents,
 });
+
+// 使用导入表弹窗组件
+const [ImportTableModal, importTableModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./components/import-table-modal.vue'),
+  ),
+  onClosed: () => {
+    gridApi.reload(formOptions.values);
+  },
+});
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #toolbar_buttons="{ $grid }">
-        <div class="flex items-center gap-2">
-          <Button type="primary" @click="handleImportTable">导入表</Button>
-          <Button
-            :disabled="!checkedStatus"
-            type="primary"
-            @click="handleBatchSync($grid.getCheckboxRecords())"
-          >
-            批量同步
-          </Button>
-          <Button
-            :disabled="!checkedStatus"
-            type="primary"
-            @click="handleBatchGenerateCode($grid.getCheckboxRecords())"
-          >
-            批量生成
-          </Button>
-          <Button
-            :disabled="!checkedStatus"
-            danger
-            type="primary"
-            @click="handleBatchDelete($grid.getCheckboxRecords())"
-          >
-            批量删除
-          </Button>
-        </div>
+      <template #toolbar-actions>
+        <ActionButtons
+          :actions="[
+            {
+              type: 'primary',
+              label: '导入表',
+              icon: IconEnum.ADD,
+              onClick: () => importTableModalApi.open(),
+            },
+            {
+              label: '批量同步',
+              disabled: !checkedStatus,
+              class: checkedStatus
+                ? 'bg-emerald-500 text-white border-emerald-400 hover:bg-emerald-400 hover:!text-white hover:!border-emerald-400 active:!bg-emerald-600 active:!text-white active:!border-emerald-600'
+                : '',
+              icon: 'ant-design:sync-outlined',
+              onClick: handleBatchSync,
+            },
+            {
+              label: '批量生成',
+              disabled: !checkedStatus,
+              class: checkedStatus
+                ? 'bg-emerald-500 text-white border-emerald-400 hover:bg-emerald-400 hover:!text-white hover:!border-emerald-400 active:!bg-emerald-600 active:!text-white active:!border-emerald-600'
+                : '',
+              icon: 'ant-design:code-outlined',
+              onClick: handleBatchGenerateCode,
+            },
+            {
+              label: '批量删除',
+              disabled: !checkedStatus,
+              danger: true,
+              icon: 'ant-design:delete-outlined',
+              onClick: handleBatchDelete,
+            },
+          ]"
+        />
       </template>
       <template #action="{ row }">
-        <div class="flex w-fit items-center justify-around">
-          <Button type="link" @click="handleView(row)">查看</Button>
-          <Button type="link" @click="handleEdit(row)">编辑</Button>
-          <Button type="link" @click="handleSync(row)">同步</Button>
-          <Button type="link" @click="handleGenerateCode(row)">
-            生成代码
-          </Button>
-          <Button danger type="link" @click="handleDelete(row)">删除</Button>
-        </div>
+        <ActionButtons
+          :actions="[
+            {
+              type: 'link',
+              label: '查看',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, row),
+            },
+            {
+              type: 'link',
+              label: '编辑',
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              type: 'link',
+              label: '删除',
+              danger: true,
+              icon: 'ant-design:delete-outlined',
+              onClick: handleDelete.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '同步',
+              icon: 'ant-design:sync-outlined',
+              onClick: handleSync.bind(null, row),
+            },
+            {
+              label: '生成代码',
+              icon: 'ant-design:code-outlined',
+              onClick: handleGenerateCode.bind(null, row),
+            },
+          ]"
+        />
       </template>
     </Grid>
     <ImportTableModal />