From ac9e76ae93fe87474713e2acdbbe3905937c64ca Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sun, 19 Jan 2025 21:11:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=20=E5=8E=BB=E9=99=A4=E6=AD=A5=E9=AA=A4=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   1 +
 apps/web-antd/src/views/tool/gen/edit-gen.vue | 117 +++++++++++++-----
 .../tool/gen/edit-steps/basic-setting.vue     |  35 +++---
 .../views/tool/gen/edit-steps/gen-config.vue  |  82 ++++--------
 .../views/tool/gen/edit-steps/gen-success.vue |  25 ----
 .../src/views/tool/gen/edit-steps/index.ts    |   1 -
 apps/web-antd/src/views/tool/gen/mitt.ts      |  15 ---
 .../src/views/tool/gen/table-import-modal.vue |   5 +-
 8 files changed, 132 insertions(+), 149 deletions(-)
 delete mode 100644 apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue
 delete mode 100644 apps/web-antd/src/views/tool/gen/mitt.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09376041..8575978f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - 菜单选择组件重构为Table形式
 - 字典相关功能重构 采用一个Map储存字典(之前为两个Map)
+- 代码生成配置页面重构 去除步骤条
 
 **Features**
 
diff --git a/apps/web-antd/src/views/tool/gen/edit-gen.vue b/apps/web-antd/src/views/tool/gen/edit-gen.vue
index 6045def5..48a816ac 100644
--- a/apps/web-antd/src/views/tool/gen/edit-gen.vue
+++ b/apps/web-antd/src/views/tool/gen/edit-gen.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
 import type { GenInfo } from '#/api/tool/gen/model';
 
-import { onMounted, provide, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, provide, ref, unref, useTemplateRef } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { safeParseNumber } from '@vben/utils';
+import { cloneDeep, safeParseNumber } from '@vben/utils';
 
-import { Skeleton, Step, Steps } from 'ant-design-vue';
+import { Card, Skeleton, TabPane, Tabs } from 'ant-design-vue';
 
-import { genInfo } from '#/api/tool/gen';
+import { editSave, genInfo } from '#/api/tool/gen';
 
-import { BasicSetting, GenConfig, GenSuccess } from './edit-steps';
-import { emitter } from './mitt';
+import { BasicSetting, GenConfig } from './edit-steps';
 
-const current = ref(0);
-
-const { setTabTitle } = useTabs();
+const { setTabTitle, closeCurrentTab } = useTabs();
 const routes = useRoute();
 // 获取路由参数
 const tableId = routes.params.tableId as string;
@@ -34,29 +31,89 @@ onMounted(async () => {
   setTabTitle(`生成配置: ${resp.info.tableName}`);
 });
 
-/**
- * 事件总线 监听切换步骤
- */
-emitter.on('to', (step: number) => {
-  current.value = step;
-});
+const currentTab = ref<'fields' | 'setting'>('setting');
+const basicSettingRef = useTemplateRef('basicSettingRef');
+const genConfigRef = useTemplateRef('genConfigRef');
+
+const router = useRouter();
+async function handleSave() {
+  try {
+    // 校验tab1
+    const settingValidate = await basicSettingRef.value?.validateForm();
+    if (!settingValidate) {
+      currentTab.value = 'setting';
+      return;
+    }
+    // 校验tab2
+    const genConfigValidate = await genConfigRef.value?.validateTable();
+    if (!genConfigValidate) {
+      currentTab.value = 'fields';
+      return;
+    }
+    const requestData = cloneDeep(unref(genInfoData)!);
+    // 获取表单数据
+    const formValues = await basicSettingRef.value?.getFormValues();
+    // 合并
+    Object.assign(requestData, formValues);
+    // 从表格获取最新的
+    requestData.columns = genConfigRef.value?.getTableRecords() ?? [];
+    // 树表需要添加这个参数
+    if (requestData && requestData.tplCategory === 'tree') {
+      const { treeCode, treeName, treeParentCode } = requestData;
+      requestData.params = {
+        treeCode,
+        treeName,
+        treeParentCode,
+      };
+    }
+    // 需要进行参数转化
+    if (requestData) {
+      const transform = (ret: boolean) => (ret ? '1' : '0');
+      requestData.columns.forEach((column) => {
+        const { edit, insert, query, required, list } = column;
+        column.isInsert = transform(insert);
+        column.isEdit = transform(edit);
+        column.isList = transform(list);
+        column.isQuery = transform(query);
+        column.isRequired = transform(required);
+      });
+      // 需要手动添加父级菜单 弹窗类型
+      requestData.params = {
+        ...requestData.params,
+        parentMenuId: requestData.parentMenuId,
+        popupComponent: requestData.popupComponent,
+      };
+    }
+    // 保存
+    await editSave(requestData);
+    // 关闭 & 跳转
+    await closeCurrentTab();
+    router.push({ path: '/tool/gen', replace: true });
+  } catch (error) {
+    console.error(error);
+  }
+}
 </script>
 
 <template>
-  <Page content-class="bg-background p-5 rounded-lg">
-    <div class="flex items-center justify-center">
-      <Steps :current="current" class="w-fit">
-        <Step title="生成信息" />
-        <Step disabled title="字段信息" />
-        <Step disabled title="完成" />
-      </Steps>
-    </div>
-    <!-- content -->
-    <div v-if="genInfoData">
-      <BasicSetting v-if="current === 0" />
-      <GenConfig v-if="current === 1" />
-      <GenSuccess v-if="current === 2" />
-    </div>
+  <Page :auto-content-height="true">
+    <Card
+      class="h-full"
+      v-if="genInfoData"
+      :body-style="{ padding: '0 16px 16px' }"
+    >
+      <Tabs v-model:active-key="currentTab" size="middle">
+        <template #rightExtra>
+          <a-button type="primary" @click="handleSave">保存配置</a-button>
+        </template>
+        <TabPane key="setting" tab="生成信息" :force-render="true">
+          <BasicSetting ref="basicSettingRef" />
+        </TabPane>
+        <TabPane key="fields" tab="字段信息" :force-render="true">
+          <GenConfig ref="genConfigRef" />
+        </TabPane>
+      </Tabs>
+    </Card>
     <Skeleton v-else :active="true" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue b/apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue
index ef4ee8fa..1937aa64 100644
--- a/apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue
+++ b/apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue
@@ -13,7 +13,6 @@ import { Col, Row } from 'ant-design-vue';
 
 import { menuList } from '#/api/system/menu';
 
-import { toCurrentStep } from '../mitt';
 import { formSchema } from './basic';
 
 /**
@@ -118,28 +117,34 @@ onMounted(async () => {
   await Promise.all([initTreeSelect(info.columns), initMenuSelect()]);
 });
 
-async function handleNext() {
-  try {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return null;
-    }
-    const data = await formApi.getValues();
-    Object.assign(genInfoData.value, data);
-    toCurrentStep(1);
-  } catch (error) {
-    console.error(error);
+/**
+ * 校验表单
+ */
+async function validateForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return false;
   }
+  return true;
 }
+
+/**
+ * 获取表单值
+ */
+async function getFormValues() {
+  return await formApi.getValues();
+}
+
+defineExpose({
+  validateForm,
+  getFormValues,
+});
 </script>
 
 <template>
   <Row justify="center">
     <Col v-bind="{ xs: 24, sm: 24, md: 20, lg: 16, xl: 16 }">
       <BasicForm />
-      <div class="flex justify-center">
-        <a-button type="primary" @click="handleNext">下一步</a-button>
-      </div>
     </Col>
   </Row>
 </template>
diff --git a/apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue b/apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue
index 6e41a5db..279194b1 100644
--- a/apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue
+++ b/apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue
@@ -4,15 +4,10 @@ import type { Ref } from 'vue';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { GenInfo } from '#/api/tool/gen/model';
 
-import { inject, unref } from 'vue';
-
-import { message, Space } from 'ant-design-vue';
-import { cloneDeep } from 'lodash-es';
+import { inject } from 'vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { editSave } from '#/api/tool/gen';
 
-import { toCurrentStep } from '../mitt';
 import { validRules, vxeTableColumns } from './gen-data';
 
 /**
@@ -36,9 +31,7 @@ const gridOptions: VxeGridProps = {
     enabled: true,
   },
   toolbarConfig: {
-    refresh: false,
-    zoom: false,
-    custom: false,
+    enabled: false,
   },
   height: 'auto',
   pagerConfig: {
@@ -49,62 +42,31 @@ const gridOptions: VxeGridProps = {
 
 const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
 
-async function handleSubmit() {
-  try {
-    const hasError = await tableApi.grid.validate();
-    if (hasError) {
-      message.error('校验未通过');
-      return;
-    }
-    const requestData = cloneDeep(unref(genInfoData));
-    // 从表格获取最新的
-    requestData.columns = tableApi.grid.getData();
-    // 树表需要添加这个参数
-    if (requestData && requestData.tplCategory === 'tree') {
-      const { treeCode, treeName, treeParentCode } = requestData;
-      requestData.params = {
-        treeCode,
-        treeName,
-        treeParentCode,
-      };
-    }
-    // 需要进行参数转化
-    if (requestData) {
-      const transform = (ret: boolean) => (ret ? '1' : '0');
-      requestData.columns.forEach((column) => {
-        const { edit, insert, query, required, list } = column;
-        column.isInsert = transform(insert);
-        column.isEdit = transform(edit);
-        column.isList = transform(list);
-        column.isQuery = transform(query);
-        column.isRequired = transform(required);
-      });
-      // 需要手动添加父级菜单 弹窗类型
-      requestData.params = {
-        ...requestData.params,
-        parentMenuId: requestData.parentMenuId,
-        popupComponent: requestData.popupComponent,
-      };
-    }
-    await editSave(requestData);
-    // 跳转到成功页面
-    toCurrentStep(2);
-  } catch (error: unknown) {
-    console.error(error);
-  }
+/**
+ * 校验表格数据
+ */
+async function validateTable() {
+  const hasError = await tableApi.grid.validate();
+  return !hasError;
 }
+
+/**
+ * 获取表格数据
+ */
+function getTableRecords() {
+  return tableApi?.grid?.getData?.() ?? [];
+}
+
+defineExpose({
+  validateTable,
+  getTableRecords,
+});
 </script>
 
 <template>
-  <div class="flex flex-col gap-[16px] p-[12px]">
-    <div class="h-[calc(100vh-235px)] overflow-y-hidden">
+  <div class="flex flex-col gap-[16px]">
+    <div class="h-[calc(100vh-200px)] overflow-y-hidden">
       <BasicTable />
     </div>
-    <div class="flex justify-center">
-      <Space>
-        <a-button @click="toCurrentStep(0)">上一步</a-button>
-        <a-button type="primary" @click="handleSubmit">下一步</a-button>
-      </Space>
-    </div>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue b/apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue
deleted file mode 100644
index 50c72128..00000000
--- a/apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-
-import { useTabs } from '@vben/hooks';
-
-import { Result } from 'ant-design-vue';
-
-const { closeCurrentTab } = useTabs();
-
-const router = useRouter();
-async function handleClose() {
-  await closeCurrentTab();
-  router.push({ path: '/tool/gen', replace: true });
-}
-</script>
-
-<template>
-  <Result status="success" title="修改成功">
-    <template #extra>
-      <a-button type="primary" @click="handleClose"> 关闭 </a-button>
-    </template>
-  </Result>
-</template>
-
-<style scoped></style>
diff --git a/apps/web-antd/src/views/tool/gen/edit-steps/index.ts b/apps/web-antd/src/views/tool/gen/edit-steps/index.ts
index 11e77963..c92f3d16 100644
--- a/apps/web-antd/src/views/tool/gen/edit-steps/index.ts
+++ b/apps/web-antd/src/views/tool/gen/edit-steps/index.ts
@@ -1,3 +1,2 @@
 export { default as BasicSetting } from './basic-setting.vue';
 export { default as GenConfig } from './gen-config.vue';
-export { default as GenSuccess } from './gen-success.vue';
diff --git a/apps/web-antd/src/views/tool/gen/mitt.ts b/apps/web-antd/src/views/tool/gen/mitt.ts
deleted file mode 100644
index 5cb4951d..00000000
--- a/apps/web-antd/src/views/tool/gen/mitt.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mitt } from '@vben/utils';
-
-type Events = {
-  to: number;
-};
-
-export const emitter = mitt<Events>();
-
-/**
- * 跳转到指定步骤
- * @param step 步骤
- */
-export function toCurrentStep(step: number) {
-  emitter.emit('to', step);
-}
diff --git a/apps/web-antd/src/views/tool/gen/table-import-modal.vue b/apps/web-antd/src/views/tool/gen/table-import-modal.vue
index ec2c75e5..969ba6df 100644
--- a/apps/web-antd/src/views/tool/gen/table-import-modal.vue
+++ b/apps/web-antd/src/views/tool/gen/table-import-modal.vue
@@ -59,6 +59,7 @@ const gridOptions: VxeGridProps = {
     {
       title: '表描述',
       field: 'tableComment',
+      align: 'left',
     },
     {
       title: '创建时间',
@@ -88,9 +89,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'tableId',
   },
   toolbarConfig: {
-    refresh: false,
-    zoom: false,
-    custom: false,
+    enabled: false,
   },
 };