feat: 代码生成

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

@@ -1,26 +1,62 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import type { GenInfo } from '#/api/tool/gen/model';
+
+import { onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
+import { safeParseNumber } from '@vben/utils';
+
+import { Skeleton, Step, Steps } from 'ant-design-vue';
 
 import { genInfo } from '#/api/tool/gen';
 
+import { BasicSetting, GenConfig, GenSuccess } from './edit-steps';
+import { emitter } from './mitt';
+
+const current = ref(0);
+
 const { setTabTitle } = useTabs();
 const routes = useRoute();
+// 获取路由参数
 const tableId = routes.params.tableId as string;
 
+const genInfoData = ref<GenInfo>();
+
+provide('genInfoData', genInfoData);
+
 onMounted(async () => {
   const resp = await genInfo(tableId);
-  console.log(resp);
+  // 需要做菜单转换 严格相等 才能选中回显
+  resp.info.parentMenuId = safeParseNumber(resp.info.parentMenuId);
+  genInfoData.value = resp;
   setTabTitle(`生成配置: ${resp.info.tableName}`);
 });
+
+/**
+ * 事件总线 监听切换步骤
+ */
+emitter.on('to', (step: number) => {
+  current.value = step;
+});
 </script>
 
 <template>
-  <Page>
+  <Page content-class="bg-background p-5 rounded-lg">
-    <div>修改代码生成</div>
+    <div class="flex items-center justify-center">
-    {{ tableId }}
+      <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>
+    <Skeleton v-else :active="true" />
   </Page>
 </template>

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { Column, GenInfo } from '#/api/tool/gen/model';
+
+import { inject, onMounted, type Ref } from 'vue';
+
+import { useVbenForm } from '@vben/common-ui';
+import { addFullName, listToTree } from '@vben/utils';
+
+import { Col, Row } from 'ant-design-vue';
+
+import { menuList } from '#/api/system/menu';
+
+import { toCurrentStep } from '../mitt';
+import { formSchema } from './basic';
+
+/**
+ * 从父组件注入
+ */
+const genInfoData = inject('genInfoData') as Ref<GenInfo>;
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+      formItemClass: 'col-span-1',
+    },
+    labelWidth: 150,
+  },
+  schema: formSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+/**
+ * 树表需要用到的数据
+ */
+async function initTreeSelect(columns: Column[]) {
+  const options = columns.map((item) => {
+    const label = `${item.columnName} | ${item.columnComment}`;
+    return { label, value: item.columnName };
+  });
+  formApi.updateSchema([
+    {
+      componentProps: {
+        options,
+      },
+      fieldName: 'treeCode',
+    },
+    {
+      componentProps: {
+        options,
+      },
+      fieldName: 'treeParentCode',
+    },
+    {
+      componentProps: {
+        options,
+      },
+      fieldName: 'treeName',
+    },
+  ]);
+}
+
+/**
+ * 加载菜单选择
+ */
+async function initMenuSelect() {
+  const list = await menuList();
+  const tree = listToTree(list, { id: 'menuId', pid: 'parentId' });
+  const treeData = [
+    {
+      fullName: '根目录',
+      menuId: 0,
+      menuName: '根目录',
+      children: tree,
+    },
+  ];
+  addFullName(treeData, 'menuName', ' / ');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: {
+          label: 'menuName',
+          value: 'menuId',
+        },
+        // 设置弹窗滚动高度 默认256
+        listHeight: 300,
+        treeData,
+        treeDefaultExpandAll: false,
+        // 默认展开的树节点
+        treeDefaultExpandedKeys: [0],
+        treeLine: { showLeafIcon: false },
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'parentMenuId',
+    },
+  ]);
+}
+
+onMounted(async () => {
+  const { info } = genInfoData.value;
+  for (const key in info) {
+    formApi.setFieldValue(key, info[key as keyof typeof info]);
+  }
+  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.info, data);
+    toCurrentStep(1);
+  } catch (error) {
+    console.error(error);
+  }
+}
+</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>

apps/web-antd/src/views/tool/gen/edit-steps/basic.tsx

@@ -0,0 +1,214 @@
+import { getPopupContainer } from '@vben/utils';
+
+import { type FormSchemaGetter, z } from '#/adapter';
+
+export const formSchema: FormSchemaGetter = () => [
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'left',
+    },
+    fieldName: 'divider1',
+    formItemClass: 'col-span-2',
+    label: '基本信息',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'tableName',
+    label: '表名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'tableComment',
+    label: '表描述',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'className',
+    label: '实体类名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'functionAuthor',
+    label: '作者',
+    rules: 'required',
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'left',
+    },
+    fieldName: 'divider2',
+    formItemClass: 'col-span-2',
+    label: '生成信息',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: [
+        { label: '单表(增删改查)', value: 'crud' },
+        { label: '树表(增删改查)', value: 'tree' },
+      ],
+    },
+    defaultValue: 'crud',
+    fieldName: 'tplCategory',
+    label: '模板类型',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      placeholder: '请选择',
+    },
+    dependencies: {
+      show: (values) => values.tplCategory === 'tree',
+      triggerFields: ['tplCategory'],
+    },
+    fieldName: 'treeCode',
+    helpMessage: '树节点显示的编码字段名， 如: dept_id (相当于id)',
+    label: '树编码字段',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      placeholder: '请选择',
+    },
+    dependencies: {
+      show: (values) => values.tplCategory === 'tree',
+      triggerFields: ['tplCategory'],
+    },
+    fieldName: 'treeParentCode',
+    help: '树节点显示的父编码字段名， 如: parent_Id (相当于parentId)',
+    label: '树父编码字段',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      placeholder: '请选择',
+    },
+    dependencies: {
+      show: (values) => values.tplCategory === 'tree',
+      triggerFields: ['tplCategory'],
+    },
+    fieldName: 'treeName',
+    help: '树节点的显示名称字段名， 如: dept_name (相当于label)',
+    label: '树名称字段',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'packageName',
+    help: '生成在哪个java包下, 例如 com.ruoyi.system',
+    label: '生成包路径',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'moduleName',
+    help: '可理解为子系统名，例如 system',
+    label: '生成模块名',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'businessName',
+    help: '可理解为功能英文名，例如 user',
+    label: '生成业务名',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'functionName',
+    help: '用作类描述，例如 用户',
+    label: '生成功能名',
+    rules: 'required',
+  },
+  {
+    component: 'TreeSelect',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      placeholder: '请选择',
+    },
+    defaultValue: 0,
+    fieldName: 'parentMenuId',
+    label: '上级菜单',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: 'zip压缩包', value: '0' },
+        { label: '自定义路径', value: '1' },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'genType',
+    help: '默认为zip压缩包下载, 也可以自定义生成路径',
+    label: '生成代码方式',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    defaultValue: '/',
+    dependencies: {
+      show: (model) => model.genType === '1',
+      triggerFields: ['genType'],
+    },
+    fieldName: 'genPath',
+    help: '输入绝对路径, 不支持"./"相对路径',
+    label: '代码生成路径',
+    rules: z
+      .string()
+      .regex(/^(?:[a-z]:)?(?:\/|(?:\\|\/)[^\\/:*?"<>|\r\n]+)*(?:\\|\/)?$/i, {
+        message: '请输入合法的路径',
+      }),
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'remark',
+    formItemClass: 'col-span-2 items-baseline',
+    label: '备注',
+  },
+];

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { GenInfo } from '#/api/tool/gen/model';
+
+import { inject, type Ref, unref } from 'vue';
+
+import { Space, Table } from 'ant-design-vue';
+
+import { editSave } from '#/api/tool/gen';
+
+import { toCurrentStep } from '../mitt';
+
+/**
+ * 从父组件注入
+ */
+const genInfoData = inject('genInfoData') as Ref<GenInfo>;
+
+async function handleSubmit() {
+  try {
+    const requestData = unref(genInfoData).info;
+    // 树表需要添加这个参数
+    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,
+      };
+    }
+    await editSave(requestData);
+    // 跳转到成功页面
+    toCurrentStep(2);
+  } catch (error: unknown) {
+    console.error(error);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-[16px] p-[12px]">
+    <Table />
+    <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>

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

@@ -0,0 +1 @@
+export const a = 1;

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

@@ -0,0 +1,25 @@
+<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>

apps/web-antd/src/views/tool/gen/edit-steps/index.ts

@@ -0,0 +1,3 @@
+export { default as BasicSetting } from './basic-setting.vue';
+export { default as GenConfig } from './gen-config.vue';
+export { default as GenSuccess } from './gen-success.vue';

apps/web-antd/src/views/tool/gen/mitt.ts

@@ -0,0 +1,15 @@
+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);
+}

packages/utils/src/helpers/index.ts

@@ -4,7 +4,9 @@ export * from './generate-routes-backend';
 export * from './generate-routes-frontend';
 export * from './get-popup-container';
 export * from './merge-route-modules';
+export * from './mitt';
 export * from './reset-routes';
+export * from './safe';
 export * from './tree';
 export * from './unmount-global-loading';
 export * from './uuid';

packages/utils/src/helpers/mitt.ts

@@ -0,0 +1,135 @@
+/**
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
+ */
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void;
+export type WildcardHandler<T = Record<string, unknown>> = (
+  type: keyof T,
+  event: T[keyof T],
+) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList<T = unknown> = Array<Handler<T>>;
+export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<
+  WildcardHandler<T>
+>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
+  '*' | keyof Events,
+  EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
+>;
+
+export interface Emitter<Events extends Record<EventType, unknown>> {
+  all: EventHandlerMap<Events>;
+
+  clear(): void;
+  emit<Key extends keyof Events>(
+    type: undefined extends Events[Key] ? Key : never,
+  ): void;
+
+  emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
+  off(type: '*', handler: WildcardHandler<Events>): void;
+
+  off<Key extends keyof Events>(
+    type: Key,
+    handler?: Handler<Events[Key]>,
+  ): void;
+  on(type: '*', handler: WildcardHandler<Events>): void;
+  on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt} any
+ */
+export function mitt<Events extends Record<EventType, unknown>>(
+  all?: EventHandlerMap<Events>,
+): Emitter<Events> {
+  type GenericEventHandler =
+    | Handler<Events[keyof Events]>
+    | WildcardHandler<Events>;
+  all = all || new Map();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * Clear all
+     */
+    clear() {
+      this.all.clear();
+    },
+
+    /**
+     * Invoke all handlers for the given type.
+     * If present, `'*'` handlers are invoked after type-matched handlers.
+     *
+     * Note: Manually firing '*' handlers is not supported.
+     *
+     * @param {string|symbol} type The event type to invoke
+     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+     * @memberOf mitt
+     */
+    emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
+      let handlers = all?.get(type);
+      if (handlers) {
+        [...(handlers as EventHandlerList<Events[keyof Events]>)].forEach(
+          (handler) => {
+            handler(evt as Events[Key]);
+          },
+        );
+      }
+
+      handlers = all?.get('*');
+      if (handlers) {
+        [...(handlers as WildCardEventHandlerList<Events>)].forEach(
+          (handler) => {
+            handler(type, evt as Events[Key]);
+          },
+        );
+      }
+    },
+
+    /**
+     * Remove an event handler for the given type.
+     * If `handler` is omitted, all handlers of the given type are removed.
+     * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
+     * @param {Function} [handler] Handler function to remove
+     * @memberOf mitt
+     */
+    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all?.get(type);
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        } else {
+          all?.set(type, []);
+        }
+      }
+    },
+
+    /**
+     * Register an event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @memberOf mitt
+     */
+    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all?.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all?.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+      }
+    },
+  };
+}

packages/utils/src/helpers/safe.ts

@@ -0,0 +1,10 @@
+/**
+ * 跟后台逻辑一致
+ * Number.isSafeInteger形参只能为Number类型 其他的直接返回false
+ * @param str 数字
+ * @returns 安全数内返回number类型 否则返回原字符串
+ */
+export function safeParseNumber(str: string): number | string {
+  const num = Number(str);
+  return Number.isSafeInteger(num) ? num : str;
+}