feat: 代码生成导入表

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

@@ -3,7 +3,6 @@ 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 { getDataSourceConfigList } from '#/api/infra/data-source-config';
 import { getRangePickerDefaultProps } from '#/utils/date';
 
 import { useAccess } from '@vben/access';
@@ -11,18 +10,22 @@ import { useAccess } from '@vben/access';
 const { hasAccessByCodes } = useAccess();
 
 /** 导入数据库表的表单 */
-export function useImportTableFormSchema(): VbenFormSchema[] {
+export function useImportTableFormSchema(
+  dataSourceConfigList: InfraDataSourceConfigApi.InfraDataSourceConfig[],
+): VbenFormSchema[] {
   return [
     {
       fieldName: 'dataSourceConfigId',
       label: '数据源',
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: async () => await getDataSourceConfigList(),
-        labelField: 'name',
-        valueField: 'id',
+        options: dataSourceConfigList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
         placeholder: '请选择数据源',
       },
+      defaultValue: dataSourceConfigList[0]?.id,
       rules: 'required',
     },
     {

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

@@ -4,7 +4,7 @@ import type { InfraCodegenApi } from '#/api/infra/codegen';
 import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
 import { DocAlert } from '#/components/doc-alert';
-// import ImportTable from './modules/import-table.vue';
+import ImportTable from './modules/import-table.vue';
 import PreviewCode from './modules/preview-code.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
@@ -23,11 +23,10 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const dataSourceConfigList = ref<InfraDataSourceConfigApi.InfraDataSourceConfig[]>([]);
 
-// const [ImportModal, importModalApi] = useVbenModal({
-//   connectedComponent: ImportTable,
-//   destroyOnClose: true,
-// });
-//
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportTable,
+  destroyOnClose: true,
+});
 
 const [PreviewModal, previewModalApi] = useVbenModal({
   connectedComponent: PreviewCode,
@@ -41,7 +40,7 @@ function onRefresh() {
 
 /** 导入表格 */
 function onImport() {
-  // importModalApi.open();
+  importModalApi.open();
 }
 
 /** 预览代码 */
@@ -176,6 +175,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function initDataSourceConfig() {
   try {
     dataSourceConfigList.value = await getDataSourceConfigList();
+    gridApi.setState({
+      gridOptions: { columns: useGridColumns(onActionClick, dataSourceConfigList.value) },
+    });
   } catch (error) {
     console.error('获取数据源配置失败', error);
   }
@@ -191,13 +193,13 @@ initDataSourceConfig();
     <DocAlert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
     <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
 
-    <!--    <ImportModal @success="onRefresh" />-->
+    <ImportModal @success="onRefresh" />
     <PreviewModal />
     <Grid table-title="代码生成列表">
       <template #toolbar-tools>
         <Button type="primary" @click="onImport" v-access:code="['infra:codegen:create']">
           <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['代码生成']) }}
+          {{ $t('ui.actionTitle.create', ['导入']) }}
         </Button>
       </template>
     </Grid>

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

@@ -1,118 +1,141 @@
 <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 { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { createCodegenList, getSchemaTableList } from '#/api/infra/codegen';
-import { ref } from 'vue';
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { reactive, ref, unref } from 'vue';
 
-import { useImportTableFormSchema } from '../data';
+import { $t } from '@vben/locales';
 
+import { useImportTableFormSchema } from '#/views/infra/codegen/data';
+
+/** 定义组件事件 */
 const emit = defineEmits<{
   (e: 'success'): void;
 }>();
 
-const tableList = ref<string[]>([]);
-
-// 导入表单
-const [Form, formApi] = useVbenForm({
-  layout: 'horizontal',
-  schema: useImportTableFormSchema(),
-  showDefaultActions: false,
+const dataSourceConfigList = ref<InfraDataSourceConfigApi.InfraDataSourceConfig[]>([]);
+const formData = reactive<InfraCodegenApi.CodegenCreateListReq>({
+  dataSourceConfigId: undefined,
+  tableNames: [], // 已选择的表列表
 });
-
-// 表格实例
-const [Table, tableApi] = useVbenVxeGrid({
-  columns: [
-    { field: 'name', title: '表名称', minWidth: 200 },
-    { field: 'comment', title: '表描述', minWidth: 200 },
-  ],
-  toolbarConfig: false,
-  rowConfig: {
-    keyField: 'name',
+/** 表格实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useImportTableFormSchema([]),
   },
-  rowSelection: {
-    multiple: true,
-    onChange: (records) => {
-      tableList.value = records.map((item) => item.name);
+  gridOptions: {
+    columns: [
+      { type: 'checkbox', width: 40 },
+      { field: 'name', title: '表名称', minWidth: 200 },
+      { field: 'comment', title: '表描述', minWidth: 200 },
+    ],
+    height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (formValues.dataSourceConfigId === undefined) {
+            if (unref(dataSourceConfigList).length > 0) {
+              formValues.dataSourceConfigId = unref(dataSourceConfigList)[0]?.id;
+            } else {
+              return [];
+            }
+          }
+          formData.dataSourceConfigId = formValues.dataSourceConfigId;
+          return await getSchemaTableList({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'name',
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<InfraCodegenApi.DatabaseTable>,
+  gridEvents: {
+    checkboxChange: ({ records }: { records: InfraCodegenApi.DatabaseTable[] }) => {
+      formData.tableNames = records.map((item) => item.name);
     },
   },
 });
 
-// 模态框实例
+/** 模态框实例 */
 const [Modal, modalApi] = useVbenModal({
+  title: '导入表',
+  class: 'w-2/3',
   async onConfirm() {
-    if (tableList.value.length === 0) {
-      message.warning('请选择至少一个表');
+    modalApi.lock();
+    // 1. 获取表单值
+    if (formData?.dataSourceConfigId === undefined) {
+      message.error('请选择数据源');
       return;
     }
-    const values = await formApi.getValues();
-    modalApi.lock();
+    // 2. 校验是否选择了表
+    if (formData.tableNames.length === 0) {
+      message.error('请选择需要导入的表');
+      return;
+    }
+    // 3. 提交请求
+    const hideLoading = message.loading({
+      content: '导入中...',
+      duration: 0,
+      key: 'import_loading',
+    });
     try {
-      await createCodegenList({
-        dataSourceConfigId: values.dataSourceConfigId,
-        tableNames: tableList.value,
-      });
-      message.success('导入成功');
+      await createCodegenList(formData);
+      // 关闭并提示
       await modalApi.close();
       emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
     } finally {
+      hideLoading();
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      tableList.value = [];
-      tableApi.clearSelection();
-      return;
-    }
-    formApi.reset();
-  },
 });
 
-// 查询表格数据
-async function getList() {
-  const values = await formApi.getValues();
-  if (!values.dataSourceConfigId) {
-    message.warning('请选择数据源');
-    return;
-  }
-  tableApi.loading(true);
+// 获取数据源配置列表
+async function initDataSourceConfig() {
   try {
-    const data = await getSchemaTableList(values);
-    tableApi.loadData(data);
-  } finally {
-    tableApi.loading(false);
+    dataSourceConfigList.value = await getDataSourceConfigList();
+    gridApi.setState({
+      formOptions: {
+        schema: useImportTableFormSchema(dataSourceConfigList.value),
+      },
+    });
+  } catch (error) {
+    console.error('获取数据源配置失败', error);
   }
 }
 
-// 重置查询
-async function resetQuery() {
-  formApi.reset();
-  tableApi.clearData();
-}
-
-// 表单值变化时重新查询
-formApi.on('fieldValueChange', (field) => {
-  if (field.name === 'dataSourceConfigId') {
-    getList();
-  }
-});
+// 初始化
+initDataSourceConfig();
 </script>
 
 <template>
-  <Modal title="导入表">
-    <div class="px-4">
-      <Form class="mb-3" @submit="getList" @reset="resetQuery">
-        <template #actions>
-          <a-space>
-            <a-button html-type="submit">搜索</a-button>
-            <a-button html-type="reset">重置</a-button>
-          </a-space>
-        </template>
-      </Form>
-      <Table height="300px" />
-    </div>
+  <Modal>
+    <Grid />
   </Modal>
 </template>