feat: code generator

apps/web-antd/src/views/tool/gen/code-preview-modal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
 import type { Key } from 'ant-design-vue/es/vc-tree/interface';
 
 import { ref } from 'vue';
@@ -10,9 +11,9 @@ import {
 } from '@vben/common-ui';
 import { Icon } from '@vben/icons';
 
-import { Tree } from 'ant-design-vue';
+import { Skeleton, Tree } from 'ant-design-vue';
 
-import { data } from './preview.json';
+import { previewCode } from '#/api/tool/gen';
 
 interface TreeNode {
   children: TreeNode[];
@@ -26,14 +27,24 @@ const treeData = ref<TreeNode[]>([]);
 const modalTitle = ref('代码预览');
 /** 代码内容 */
 const codeContent = ref('点击左侧树节点查看代码');
+/** code */
+const currentCodeData = ref<null | Recordable<any>>(null);
 
-const [BasicModal] = useVbenModal({
-  onOpenChange(isOpen) {
+const [BasicModal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen) {
     if (!isOpen) {
+      handleClose();
       return null;
     }
+    modalApi.modalLoading(true);
+
+    const { tableId } = modalApi.getData() as { tableId: string };
+    const data = await previewCode(tableId);
+    currentCodeData.value = data;
     const tree = convertToTree(Object.keys(data));
     treeData.value = tree;
+
+    modalApi.modalLoading(false);
   },
 });
 
@@ -116,7 +127,11 @@ function changeLanguageType(filename: string) {
 
 function handleSelect(selectedKeys: Key[]) {
   const [currentFile = ''] = selectedKeys as string[];
-  const currentCode = data[currentFile as keyof typeof data];
+  if (!currentCodeData.value) {
+    return;
+  }
+  const currentCode =
+    currentCodeData.value[currentFile as keyof typeof currentCodeData.value];
   if (currentCode) {
     // 设置代码type
     changeLanguageType(currentFile);
@@ -126,6 +141,13 @@ function handleSelect(selectedKeys: Key[]) {
     modalTitle.value = `代码预览: ${currentFile.replace('.vm', '')}`;
   }
 }
+
+function handleClose() {
+  currentCodeData.value = null;
+  codeContent.value = '点击左侧树节点查看代码';
+  modalTitle.value = '代码预览';
+  language.value = 'html';
+}
 </script>
 
 <template>
@@ -135,7 +157,7 @@ function handleSelect(selectedKeys: Key[]) {
     :fullscreen-button="false"
     :title="modalTitle"
   >
-    <div class="flex gap-[8px]">
+    <div v-if="currentCodeData" class="flex gap-[8px]">
       <Tree
         v-if="treeData.length > 0"
         :tree-data="treeData"
@@ -157,6 +179,7 @@ function handleSelect(selectedKeys: Key[]) {
         readonly
       />
     </div>
+    <Skeleton v-if="!currentCodeData" active />
   </BasicModal>
 </template>
 

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { genInfo } from '#/api/tool/gen';
+
+const { setTabTitle } = useTabs();
+const routes = useRoute();
+const tableId = routes.params.tableId as string;
+
+onMounted(async () => {
+  const resp = await genInfo(tableId);
+  console.log(resp);
+  setTabTitle(`生成配置: ${resp.info.tableName}`);
+});
+</script>
+
+<template>
+  <Page>
+    <div>修改代码生成</div>
+    {{ tableId }}
+  </Page>
+</template>

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

@@ -1,20 +1,126 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+import type { ColumnsType } from 'ant-design-vue/es/table';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
+import { message, Popconfirm, Table } from 'ant-design-vue';
+
+import { batchGenCode, generatedList, genRemove, syncDb } from '#/api/tool/gen';
+import { downloadByData } from '#/utils/file/download';
+
 import codePreviewModal from './code-preview-modal.vue';
 
 const [CodePreviewModal, previewModalApi] = useVbenModal({
   connectedComponent: codePreviewModal,
 });
 
-function handlePreview() {
+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();
 }
+
+const router = useRouter();
+function handleEdit(record: Recordable<any>) {
+  router.push(`/code-gen/edit/${record.tableId}`);
+}
+
+async function handleSync(record: Recordable<any>) {
+  await syncDb(record.tableId);
+  // reload
+}
+
+async function handleDownload(record: Recordable<any>) {
+  const hideLoading = message.loading('下载中...');
+  try {
+    const blob = await batchGenCode(record.tableId);
+    const filename = `代码生成_${record.tableName}_${new Date().toLocaleString()}.zip`;
+    downloadByData(blob, filename);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function handleDelete(record: Recordable<any>) {
+  await genRemove(record.tableId);
+  // reload
+}
 </script>
 
 <template>
   <Page>
-    <a-button @click="handlePreview">代码预览</a-button>
+    <Table :columns="columns" :data-source="dataSource" e="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)">
+            {{ $t('pages.common.edit') }}
+          </a-button>
+          <Popconfirm
+            :title="`确认同步[${record.tableName}]?`"
+            placement="left"
+            @confirm="handleSync(record)"
+          >
+            <a-button size="small" type="link">
+              {{ $t('pages.common.sync') }}
+            </a-button>
+          </Popconfirm>
+          <a-button size="small" type="link" @click="handleDownload(record)">
+            生成代码
+          </a-button>
+          <Popconfirm
+            :title="`确认删除[${record.tableName}]?`"
+            placement="left"
+            @confirm="handleDelete(record)"
+          >
+            <a-button danger size="small" type="link">
+              {{ $t('pages.common.delete') }}
+            </a-button>
+          </Popconfirm>
+        </template>
+      </template>
+    </Table>
     <CodePreviewModal />
   </Page>
 </template>