feat: 代码生成

apps/web-antd/src/views/tool/gen/data.tsx

@@ -1,4 +1,4 @@
-import type { FormSchemaGetter } from '#/adapter';
+import type { FormSchemaGetter, VxeGridProps } from '#/adapter';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -23,3 +23,34 @@ export const querySchema: FormSchemaGetter = () => [
     label: '创建时间',
   },
 ];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    field: 'tableName',
+    title: '表名称',
+  },
+  {
+    field: 'tableComment',
+    title: '表描述',
+  },
+  {
+    field: 'className',
+    title: '实体类',
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+  },
+  {
+    field: 'updateTime',
+    title: '更新时间',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 300,
+  },
+];

apps/web-antd/src/views/tool/gen/index.vue

@@ -1,60 +1,79 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
-import type { ColumnsType } from 'ant-design-vue/es/table';
-import type { Key } from 'ant-design-vue/es/table/interface';
 
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 
-import { Card, message, Popconfirm, Table } from 'ant-design-vue';
+import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
-import { useVbenForm } from '#/adapter';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
 import { batchGenCode, generatedList, genRemove, syncDb } from '#/api/tool/gen';
 import { downloadByData } from '#/utils/file/download';
 
 import codePreviewModal from './code-preview-modal.vue';
-import { querySchema } from './data';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+
+        return await generatedList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'tableId',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 const [CodePreviewModal, previewModalApi] = useVbenModal({
   connectedComponent: codePreviewModal,
 });
 
-const columns: ColumnsType = [
-  {
-    dataIndex: 'tableName',
-    title: '表名称',
-  },
-  {
-    dataIndex: 'tableComment',
-    title: '表描述',
-  },
-  {
-    dataIndex: 'className',
-    title: '实体类',
-  },
-  {
-    dataIndex: 'createTime',
-    title: '创建时间',
-  },
-  {
-    dataIndex: 'updateTime',
-    title: '更新时间',
-  },
-  {
-    align: 'center',
-    dataIndex: 'action',
-    title: '操作',
-  },
-];
-
-const dataSource = ref([]);
-onMounted(async () => {
-  const resp = await generatedList({});
-  dataSource.value = resp.rows;
-});
-
 function handlePreview(record: Recordable<any>) {
   previewModalApi.setData({ tableId: record.tableId });
   previewModalApi.open();
@@ -67,25 +86,22 @@ function handleEdit(record: Recordable<any>) {
 
 async function handleSync(record: Recordable<any>) {
   await syncDb(record.tableId);
-  // reload
+  await tableApi.reload();
-}
-
-const selectedRowKeys = ref<string[]>([]);
-function handleSelectChange(selectedKeys: Key[]) {
-  selectedRowKeys.value = selectedKeys as string[];
 }
 
 /**
  * 批量生成代码
  */
 async function handleBatchGen() {
-  if (selectedRowKeys.value.length === 0) {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.tableId);
+  if (ids.length === 0) {
     message.info('请选择需要生成代码的表');
     return;
   }
   const hideLoading = message.loading('下载中...');
   try {
-    const params = selectedRowKeys.value.join(',');
+    const params = ids.join(',');
     const data = await batchGenCode(params);
     const timestamp = Date.now();
     downloadByData(data, `批量代码生成_${timestamp}.zip`);
@@ -113,104 +129,73 @@ async function handleDownload(record: Recordable<any>) {
  */
 async function handleDelete(record: Recordable<any>) {
   await genRemove(record.tableId);
-  // reload
+  await tableApi.reload();
 }
 
-const [QueryForm] = useVbenForm({
+function handleMultiDelete() {
-  // 默认展开
+  const rows = tableApi.grid.getCheckboxRecords();
-  collapsed: false,
+  const ids = rows.map((row: any) => row.tableId);
-  // 所有表单项共用，可单独在表单内覆盖
+  Modal.confirm({
-  commonConfig: {
+    title: '提示',
-    // 所有表单项
+    okType: 'danger',
-    componentProps: {
+    content: `确认删除选中的${ids.length}条记录吗？`,
-      class: 'w-full',
+    onOk: async () => {
+      await genRemove(ids);
+      await tableApi.reload();
     },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   });
+}
 </script>
 
 <template>
-  <Page content-class="flex flex-col gap-4">
+  <Page :auto-content-height="true">
-    <Card>
+    <BasicTable>
-      <QueryForm />
+      <template #toolbar-actions>
-    </Card>
+        <span class="pl-[7px] text-[16px]">代码生成列表</span>
-    <Card
+      </template>
-      :body-style="{
+      <template #toolbar-tools>
-        padding: '12px',
+        <Space>
-        display: 'flex',
+          <a-button danger type="primary" @click="handleMultiDelete">
-        flexDirection: 'column',
+            {{ $t('pages.common.delete') }}
-        gap: '12px',
-      }"
-    >
-      <div class="flex justify-between">
-        <span class="text-lg font-bold">代码生成列表</span>
-        <div class="flex gap-[8px]">
-          <a-button
-            :disabled="selectedRowKeys.length === 0"
-            danger
-            type="primary"
-          >
-            删除
           </a-button>
-          <a-button
+          <a-button @click="handleBatchGen">
-            :disabled="selectedRowKeys.length === 0"
-            @click="handleBatchGen"
-          >
             {{ $t('pages.common.generate') }}
           </a-button>
           <a-button type="primary">
             {{ $t('pages.common.import') }}
           </a-button>
-        </div>
+        </Space>
-      </div>
+      </template>
-      <Table
+      <template #action="{ row }">
-        :columns="columns"
+        <a-button size="small" type="link" @click.stop="handlePreview(row)">
-        :data-source="dataSource"
-        :row-selection="{ selectedRowKeys, onChange: handleSelectChange }"
-        row-key="tableId"
-        size="middle"
-      >
-        <template #bodyCell="{ record, column }">
-          <template v-if="column.dataIndex === 'action'">
-            <a-button size="small" type="link" @click="handlePreview(record)">
           {{ $t('pages.common.preview') }}
         </a-button>
-            <a-button size="small" type="link" @click="handleEdit(record)">
+        <a-button size="small" type="link" @click.stop="handleEdit(row)">
           {{ $t('pages.common.edit') }}
         </a-button>
         <Popconfirm
-              :title="`确认同步[${record.tableName}]?`"
+          :title="`确认同步[${row.tableName}]?`"
           placement="left"
-              @confirm="handleSync(record)"
+          @confirm="handleSync(row)"
         >
-              <a-button size="small" type="link">
+          <a-button size="small" type="link" @click.stop="">
             {{ $t('pages.common.sync') }}
           </a-button>
         </Popconfirm>
-            <a-button size="small" type="link" @click="handleDownload(record)">
+        <a-button size="small" type="link" @click.stop="handleDownload(row)">
           生成代码
         </a-button>
         <Popconfirm
-              :title="`确认删除[${record.tableName}]?`"
+          :title="`确认删除[${row.tableName}]?`"
           placement="left"
-              @confirm="handleDelete(record)"
+          @confirm="handleDelete(row)"
         >
-              <a-button danger size="small" type="link">
+          <a-button danger size="small" type="link" @click.stop="">
             {{ $t('pages.common.delete') }}
           </a-button>
         </Popconfirm>
       </template>
-        </template>
+    </BasicTable>
-      </Table>
-    </Card>
-
     <CodePreviewModal />
   </Page>
 </template>