From 7b3b89fc9aaa257b8439398b4e027451694cc411 Mon Sep 17 00:00:00 2001
From: shizhong <124974919@qq.com>
Date: Thu, 27 Jul 2023 22:11:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=201.8.0=20=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/codegen/EditTable.vue         | 118 +++---
 .../codegen/components/BasicInfoForm.vue      | 220 +++-------
 .../codegen/components/CloumInfoForm.vue      | 137 ------
 .../codegen/components/ColumnInfoForm.vue     | 153 +++++++
 .../codegen/components/GenerateInfoForm.vue   | 391 ++++++++++++++++++
 .../infra/codegen/components/Preview.vue      |   2 +-
 src/views/infra/codegen/components/index.ts   |   5 +-
 7 files changed, 677 insertions(+), 349 deletions(-)
 delete mode 100644 src/views/infra/codegen/components/CloumInfoForm.vue
 create mode 100644 src/views/infra/codegen/components/ColumnInfoForm.vue
 create mode 100644 src/views/infra/codegen/components/GenerateInfoForm.vue

diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 820d23ca..4ff02e7a 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -1,67 +1,83 @@
 <template>
-  <ContentWrap>
-    <ContentDetailWrap :title="title" @back="push('/infra/codegen')">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="基本信息" name="basicInfo">
-          <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
-        </el-tab-pane>
-        <el-tab-pane label="字段信息" name="cloum">
-          <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #right>
-        <XButton
-          type="primary"
-          :title="t('action.save')"
-          :loading="loading"
-          @click="submitForm()"
-        />
-      </template>
-    </ContentDetailWrap>
+  <ContentWrap v-loading="formLoading">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basicInfo">
+        <basic-info-form ref="basicInfoRef" :table="formData.table" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="column">
+        <column-info-form ref="columnInfoRef" :columns="formData.columns" />
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="generateInfo">
+        <generate-info-form ref="generateInfoRef" :table="formData.table" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form>
+      <el-form-item style="float: right">
+        <el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
+        <el-button @click="close">返回</el-button>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
 </template>
-<script setup lang="ts">
-import { BasicInfoForm, CloumInfoForm } from './components'
-import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
-import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { BasicInfoForm, ColumnInfoForm, GenerateInfoForm } from './components'
+import * as CodegenApi from '@/api/infra/codegen'
+
+defineOptions({ name: 'InfraCodegenEditTable' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const { push } = useRouter()
-const { query } = useRoute()
-const loading = ref(false)
-const title = ref('代码生成')
-const activeName = ref('basicInfo')
-const cloumInfoRef = ref(null)
-const tableCurrentRow = ref<CodegenTableVO>()
-const cloumCurrentRow = ref<CodegenColumnVO[]>([])
-const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const { push, currentRoute } = useRouter() // 路由
+const { query } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
 
-const getList = async () => {
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('column') // Tag 激活的窗口
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const columnInfoRef = ref<ComponentRef<typeof ColumnInfoForm>>()
+const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
+const formData = ref<CodegenApi.CodegenUpdateReqVO>({
+  table: {},
+  columns: []
+})
+
+/** 获得详情 */
+const getDetail = async () => {
   const id = query.id as unknown as number
-  if (id) {
-    // 获取表详细信息
-    const res = await getCodegenTableApi(id)
-    title.value = '修改[ ' + res.table.tableName + ' ]生成配置'
-    tableCurrentRow.value = res.table
-    cloumCurrentRow.value = res.columns
+  if (!id) {
+    return
+  }
+  formLoading.value = true
+  try {
+    formData.value = await CodegenApi.getCodegenTableApi(id)
+  } finally {
+    formLoading.value = false
   }
 }
+
+/** 提交按钮 */
 const submitForm = async () => {
-  const basicInfo = unref(basicInfoRef)
-  const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {})
-  if (basicForm) {
-    const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
-    const genTable: CodegenUpdateReqVO = {
-      table: basicInfoData,
-      columns: cloumCurrentRow.value
-    }
-    await updateCodegenTableApi(genTable)
+  // 参数校验
+  if (!unref(formData)) return
+  await unref(basicInfoRef)?.validate()
+  await unref(generateInfoRef)?.validate()
+  try {
+    // 提交请求
+    await CodegenApi.updateCodegenTableApi(formData.value)
     message.success(t('common.updateSuccess'))
-    push('/infra/codegen')
-  }
+    close()
+  } catch {}
 }
+
+/** 关闭按钮 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/infra/codegen')
+}
+
+/** 初始化 */
 onMounted(() => {
-  getList()
+  getDetail()
 })
 </script>
diff --git a/src/views/infra/codegen/components/BasicInfoForm.vue b/src/views/infra/codegen/components/BasicInfoForm.vue
index 2009553f..18593004 100644
--- a/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/src/views/infra/codegen/components/BasicInfoForm.vue
@@ -1,183 +1,87 @@
 <template>
-  <Form :rules="rules" @register="register" />
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input v-model="formData.tableName" placeholder="请输入仓库名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input v-model="formData.tableComment" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              实体类名称
+              <el-tooltip
+                content="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
+                placement="top"
+              >
+                <Icon class="" icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.className" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="author">
+          <el-input v-model="formData.author" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" :rows="3" type="textarea" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
 </template>
-<script setup lang="ts">
-import { useForm } from '@/hooks/web/useForm'
-import { FormSchema } from '@/types/form'
-import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { getIntDictOptions } from '@/utils/dict'
-import { listSimpleMenusApi } from '@/api/system/menu'
-import { handleTree, defaultProps } from '@/utils/tree'
+<script lang="ts" setup>
+import * as CodegenApi from '@/api/infra/codegen'
 import { PropType } from 'vue'
 
+defineOptions({ name: 'InfraCodegenBasicInfoForm' })
+
 const props = defineProps({
-  basicInfo: {
-    type: Object as PropType<Nullable<CodegenTableVO>>,
+  table: {
+    type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
     default: () => null
   }
 })
 
-const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
-const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
-const menuOptions = ref<any>([]) // 树形结构
-const getTree = async () => {
-  const res = await listSimpleMenusApi()
-  menuOptions.value = handleTree(res)
-}
-
+const formRef = ref()
+const formData = ref({
+  tableName: '',
+  tableComment: '',
+  className: '',
+  author: '',
+  remark: ''
+})
 const rules = reactive({
   tableName: [required],
   tableComment: [required],
   className: [required],
-  author: [required],
-  templateType: [required],
-  scene: [required],
-  moduleName: [required],
-  businessName: [required],
-  businessPackage: [required],
-  classComment: [required]
-})
-const schema = reactive<FormSchema[]>([
-  {
-    label: '上级菜单',
-    field: 'parentMenuId',
-    component: 'TreeSelect',
-    componentProps: {
-      data: menuOptions,
-      props: defaultProps,
-      checkStrictly: true,
-      nodeKey: 'id'
-    },
-    labelMessage: '分配到指定菜单下，例如 系统管理',
-    colProps: {
-      span: 24
-    }
-  },
-  {
-    label: '表名称',
-    field: 'tableName',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '表描述',
-    field: 'tableComment',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '实体类名称',
-    field: 'className',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '类名称',
-    field: 'className',
-    component: 'Input',
-    labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '生成模板',
-    field: 'templateType',
-    component: 'Select',
-    componentProps: {
-      options: templateTypeOptions
-    },
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '生成场景',
-    field: 'scene',
-    component: 'Select',
-    componentProps: {
-      options: sceneOptions
-    },
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '模块名',
-    field: 'moduleName',
-    component: 'Input',
-    labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '业务名',
-    field: 'businessName',
-    component: 'Input',
-    labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '类描述',
-    field: 'classComment',
-    component: 'Input',
-    labelMessage: '用作类描述，例如 用户',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '作者',
-    field: 'author',
-    component: 'Input',
-    colProps: {
-      span: 12
-    }
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'Input',
-    componentProps: {
-      type: 'textarea',
-      rows: 4
-    },
-    colProps: {
-      span: 24
-    }
-  }
-])
-const { register, methods, elFormRef } = useForm({
-  schema
+  author: [required]
 })
+
+/** 监听 table 属性，复制给 formData 属性 */
 watch(
-  () => props.basicInfo,
-  (basicInfo) => {
-    if (!basicInfo) return
-    const { setValues } = methods
-    setValues(basicInfo)
+  () => props.table,
+  (table) => {
+    if (!table) return
+    formData.value = table
   },
   {
     deep: true,
     immediate: true
   }
 )
-// ========== 初始化 ==========
-onMounted(async () => {
-  await getTree()
-})
 
 defineExpose({
-  elFormRef,
-  getFormData: methods.getFormData
+  validate: async () => unref(formRef)?.validate()
 })
 </script>
diff --git a/src/views/infra/codegen/components/CloumInfoForm.vue b/src/views/infra/codegen/components/CloumInfoForm.vue
deleted file mode 100644
index 0b6ea697..00000000
--- a/src/views/infra/codegen/components/CloumInfoForm.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <vxe-table
-    ref="dragTable"
-    border
-    :data="info"
-    max-height="600"
-    stripe
-    class="xtable-scrollbar"
-    :column-config="{ resizable: true }"
-  >
-    <vxe-column title="字段列名" field="columnName" fixed="left" width="10%" />
-    <vxe-colgroup title="基础属性">
-      <vxe-column title="字段描述" field="columnComment" width="10%">
-        <template #default="{ row }">
-          <vxe-input v-model="row.columnComment" placeholder="请输入字段描述" />
-        </template>
-      </vxe-column>
-      <vxe-column title="物理类型" field="dataType" width="10%" />
-      <vxe-column title="Java类型" width="10%" field="javaType">
-        <template #default="{ row }">
-          <vxe-select v-model="row.javaType" placeholder="请选择Java类型">
-            <vxe-option label="Long" value="Long" />
-            <vxe-option label="String" value="String" />
-            <vxe-option label="Integer" value="Integer" />
-            <vxe-option label="Double" value="Double" />
-            <vxe-option label="BigDecimal" value="BigDecimal" />
-            <vxe-option label="LocalDateTime" value="LocalDateTime" />
-            <vxe-option label="Boolean" value="Boolean" />
-          </vxe-select>
-        </template>
-      </vxe-column>
-      <vxe-column title="java属性" width="8%" field="javaField">
-        <template #default="{ row }">
-          <vxe-input v-model="row.javaField" placeholder="请输入java属性" />
-        </template>
-      </vxe-column>
-    </vxe-colgroup>
-    <vxe-colgroup title="增删改查">
-      <vxe-column title="插入" width="40px" field="createOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="编辑" width="40px" field="updateOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="列表" width="40px" field="listOperationResult">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
-        </template>
-      </vxe-column>
-      <vxe-column title="查询" width="40px" field="listOperation">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
-        </template>
-      </vxe-column>
-      <vxe-column title="允许空" width="40px" field="nullable">
-        <template #default="{ row }">
-          <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
-        </template>
-      </vxe-column>
-      <vxe-column title="查询方式" width="60px" field="listOperationCondition">
-        <template #default="{ row }">
-          <vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式">
-            <vxe-option label="=" value="=" />
-            <vxe-option label="!=" value="!=" />
-            <vxe-option label=">" value=">" />
-            <vxe-option label=">=" value=">=" />
-            <vxe-option label="<" value="<>" />
-            <vxe-option label="<=" value="<=" />
-            <vxe-option label="LIKE" value="LIKE" />
-            <vxe-option label="BETWEEN" value="BETWEEN" />
-          </vxe-select>
-        </template>
-      </vxe-column>
-    </vxe-colgroup>
-    <vxe-column title="显示类型" width="10%" field="htmlType">
-      <template #default="{ row }">
-        <vxe-select v-model="row.htmlType" placeholder="请选择显示类型">
-          <vxe-option label="文本框" value="input" />
-          <vxe-option label="文本域" value="textarea" />
-          <vxe-option label="下拉框" value="select" />
-          <vxe-option label="单选框" value="radio" />
-          <vxe-option label="复选框" value="checkbox" />
-          <vxe-option label="日期控件" value="datetime" />
-          <vxe-option label="图片上传" value="imageUpload" />
-          <vxe-option label="文件上传" value="fileUpload" />
-          <vxe-option label="富文本控件" value="editor" />
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column title="字典类型" width="10%" field="dictType">
-      <template #default="{ row }">
-        <vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型">
-          <vxe-option
-            v-for="dict in dictOptions"
-            :key="dict.id"
-            :label="dict.name"
-            :value="dict.type"
-          />
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column title="示例" field="example">
-      <template #default="{ row }">
-        <vxe-input v-model="row.example" placeholder="请输入示例" />
-      </template>
-    </vxe-column>
-  </vxe-table>
-</template>
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { DictTypeVO } from '@/api/system/dict/types'
-import { CodegenColumnVO } from '@/api/infra/codegen/types'
-import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
-
-const props = defineProps({
-  info: {
-    type: Array as unknown as PropType<CodegenColumnVO[]>,
-    default: () => null
-  }
-})
-/** 查询字典下拉列表 */
-const dictOptions = ref<DictTypeVO[]>()
-const getDictOptions = async () => {
-  const res = await listSimpleDictTypeApi()
-  dictOptions.value = res
-}
-onMounted(async () => {
-  await getDictOptions()
-})
-defineExpose({
-  info: props.info
-})
-</script>
diff --git a/src/views/infra/codegen/components/ColumnInfoForm.vue b/src/views/infra/codegen/components/ColumnInfoForm.vue
new file mode 100644
index 00000000..737c2e2b
--- /dev/null
+++ b/src/views/infra/codegen/components/ColumnInfoForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-table ref="dragTable" :data="formData" :max-height="tableHeight" row-key="columnId">
+    <el-table-column
+      :show-overflow-tooltip="true"
+      label="字段列名"
+      min-width="10%"
+      prop="columnName"
+    />
+    <el-table-column label="字段描述" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.columnComment" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      :show-overflow-tooltip="true"
+      label="物理类型"
+      min-width="10%"
+      prop="dataType"
+    />
+    <el-table-column label="Java类型" min-width="11%">
+      <template #default="scope">
+        <el-select v-model="scope.row.javaType">
+          <el-option label="Long" value="Long" />
+          <el-option label="String" value="String" />
+          <el-option label="Integer" value="Integer" />
+          <el-option label="Double" value="Double" />
+          <el-option label="BigDecimal" value="BigDecimal" />
+          <el-option label="LocalDateTime" value="LocalDateTime" />
+          <el-option label="Boolean" value="Boolean" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="java属性" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.javaField" />
+      </template>
+    </el-table-column>
+    <el-table-column label="插入" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.createOperation" false-label="false" true-label="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="编辑" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.updateOperation" false-label="false" true-label="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="列表" min-width="4%">
+      <template #default="scope">
+        <el-checkbox
+          v-model="scope.row.listOperationResult"
+          false-label="false"
+          true-label="true"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询" min-width="4%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.listOperation" false-label="false" true-label="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="查询方式" min-width="10%">
+      <template #default="scope">
+        <el-select v-model="scope.row.listOperationCondition">
+          <el-option label="=" value="=" />
+          <el-option label="!=" value="!=" />
+          <el-option label=">" value=">" />
+          <el-option label=">=" value=">=" />
+          <el-option label="<" value="<>" />
+          <el-option label="<=" value="<=" />
+          <el-option label="LIKE" value="LIKE" />
+          <el-option label="BETWEEN" value="BETWEEN" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="允许空" min-width="5%">
+      <template #default="scope">
+        <el-checkbox v-model="scope.row.nullable" false-label="false" true-label="true" />
+      </template>
+    </el-table-column>
+    <el-table-column label="显示类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.htmlType">
+          <el-option label="文本框" value="input" />
+          <el-option label="文本域" value="textarea" />
+          <el-option label="下拉框" value="select" />
+          <el-option label="单选框" value="radio" />
+          <el-option label="复选框" value="checkbox" />
+          <el-option label="日期控件" value="datetime" />
+          <el-option label="图片上传" value="imageUpload" />
+          <el-option label="文件上传" value="fileUpload" />
+          <el-option label="富文本控件" value="editor" />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="字典类型" min-width="12%">
+      <template #default="scope">
+        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="dict in dictOptions"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict.type"
+          />
+        </el-select>
+      </template>
+    </el-table-column>
+    <el-table-column label="示例" min-width="10%">
+      <template #default="scope">
+        <el-input v-model="scope.row.example" />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+
+defineOptions({ name: 'InfraCodegenColumInfoForm' })
+
+const props = defineProps({
+  columns: {
+    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+
+const formData = ref<CodegenApi.CodegenColumnVO[]>([])
+const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
+
+/** 查询字典下拉列表 */
+const dictOptions = ref<DictDataApi.DictTypeVO[]>()
+const getDictOptions = async () => {
+  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
+}
+
+watch(
+  () => props.columns,
+  (columns) => {
+    if (!columns) return
+    formData.value = columns
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(async () => {
+  await getDictOptions()
+})
+</script>
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
new file mode 100644
index 00000000..744edfe6
--- /dev/null
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -0,0 +1,391 @@
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="生成模板" prop="templateType">
+          <el-select v-model="formData.templateType" @change="tplSelectChange">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="前端类型" prop="frontType">
+          <el-select v-model="formData.frontType">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="生成场景" prop="scene">
+          <el-select v-model="formData.scene">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              上级菜单
+              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-tree-select
+            v-model="formData.parentMenuId"
+            :data="menus"
+            :props="menuTreeProps"
+            check-strictly
+            node-key="id"
+            placeholder="请选择系统菜单"
+          />
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="packageName">-->
+      <!--          <span slot="label">-->
+      <!--            生成包路径-->
+      <!--            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.packageName" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            <span>
+              模块名
+              <el-tooltip
+                content="模块名，即一级目录，例如 system、infra、tool 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            <span>
+              业务名
+              <el-tooltip
+                content="业务名，即二级目录，例如 user、permission、dict 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <!--      <el-col :span="12">-->
+      <!--        <el-form-item prop="businessPackage">-->
+      <!--          <span slot="label">-->
+      <!--            业务包-->
+      <!--            <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
+      <!--              <i class="el-icon-question"></i>-->
+      <!--            </el-tooltip>-->
+      <!--          </span>-->
+      <!--          <el-input v-model="formData.businessPackage" />-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+
+      <el-col :span="12">
+        <el-form-item prop="className">
+          <template #label>
+            <span>
+              类名称
+              <el-tooltip
+                content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.className" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="classComment">
+          <template #label>
+            <span>
+              类描述
+              <el-tooltip content="用作类描述，例如 用户" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.classComment" />
+        </el-form-item>
+      </el-col>
+
+      <el-col v-if="formData.genType === '1'" :span="24">
+        <el-form-item prop="genPath">
+          <template #label>
+            <span>
+              自定义路径
+              <el-tooltip
+                content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
+                placement="top"
+              >
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-input v-model="formData.genPath">
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="formData.genPath = '/'">
+                      恢复默认的生成基础路径
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-show="formData.tplCategory === 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.treeParentCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+
+          <el-select v-model="formData.treeName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in formData.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row v-show="formData.tplCategory === 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              关联子表的表名
+              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
+            <el-option
+              v-for="(table0, index) in tables"
+              :key="index"
+              :label="table0.tableName + '：' + table0.tableComment"
+              :value="table0.tableName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            <span>
+              子表关联的外键名
+              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.subTableFkName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in subColumns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as MenuApi from '@/api/system/menu'
+import { PropType } from 'vue'
+
+defineOptions({ name: 'InfraCodegenGenerateInfoForm' })
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  table: {
+    type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
+    default: () => null
+  }
+})
+
+const formRef = ref()
+const formData = ref({
+  templateType: null,
+  frontType: null,
+  scene: null,
+  moduleName: '',
+  businessName: '',
+  className: '',
+  classComment: '',
+  parentMenuId: null,
+  genPath: '',
+  treeCode: '',
+  treeParentCode: '',
+  treeName: '',
+  tplCategory: '',
+  subTableName: '',
+  subTableFkName: '',
+  genType: ''
+})
+
+const rules = reactive({
+  templateType: [required],
+  frontType: [required],
+  scene: [required],
+  moduleName: [required],
+  businessName: [required],
+  businessPackage: [required],
+  className: [required],
+  classComment: [required]
+})
+
+const tables = ref([])
+const subColumns = ref([])
+const menus = ref<any[]>([])
+const menuTreeProps = {
+  label: 'name'
+}
+
+/** 选择子表名触发 */
+const subSelectChange = () => {
+  formData.value.subTableFkName = ''
+}
+
+/** 选择生成模板触发 */
+const tplSelectChange = (value) => {
+  if (value !== 1) {
+    // TODO 芋艿：暂时不考虑支持树形结构
+    message.error(
+      '暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
+    )
+    return false
+  }
+  if (value !== 'sub') {
+    formData.value.subTableName = ''
+    formData.value.subTableFkName = ''
+  }
+}
+
+watch(
+  () => props.table,
+  (table) => {
+    if (!table) return
+    formData.value = table as any
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(async () => {
+  try {
+    const resp = await MenuApi.getSimpleMenusList()
+    menus.value = handleTree(resp)
+  } catch {}
+})
+
+defineExpose({
+  validate: async () => unref(formRef)?.validate()
+})
+</script>
diff --git a/src/views/infra/codegen/components/Preview.vue b/src/views/infra/codegen/components/Preview.vue
index cafa280f..e64e1d20 100644
--- a/src/views/infra/codegen/components/Preview.vue
+++ b/src/views/infra/codegen/components/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <XModal title="预览" v-model="preview.open" height="99%">
+  <XModal title="预览" v-model="preview.open" width="80%" height="99%">
     <div class="flex">
       <el-card class="w-1/4" :gutter="12" shadow="hover">
         <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
diff --git a/src/views/infra/codegen/components/index.ts b/src/views/infra/codegen/components/index.ts
index b84c5a03..1ab39a05 100644
--- a/src/views/infra/codegen/components/index.ts
+++ b/src/views/infra/codegen/components/index.ts
@@ -1,5 +1,6 @@
 import BasicInfoForm from './BasicInfoForm.vue'
-import CloumInfoForm from './CloumInfoForm.vue'
+import ColumnInfoForm from './ColumnInfoForm.vue'
+import GenerateInfoForm from './GenerateInfoForm.vue'
 import ImportTable from './ImportTable.vue'
 import Preview from './Preview.vue'
-export { BasicInfoForm, CloumInfoForm, ImportTable, Preview }
+export { BasicInfoForm, ColumnInfoForm, GenerateInfoForm, ImportTable, Preview }