feat: basicInfo codegen

src/views/infra/codegen/EditTable.vue

@@ -1,8 +1,7 @@
 <template>
   <PageWrapper>
-    <div class="m-5 w-200">
+    <div class="m-0-auto w-200">
       <Steps :current="current">
-        <Step title="基本信息" />
         <Step title="生成信息" />
         <Step title="字段信息" />
         <Step title="完成" />
@@ -10,32 +9,50 @@
     </div>
 
     <div class="m-5">
-      <BasicInfoForm @next="handleStep1Next" v-show="current === 0" />
+      <BasicInfoForm :basicInfo="basicInfo" @next="handleStep1Next" v-show="current === 0" />
-      <GenInfoForm @prev="handleStepPrev" @next="handleStep2Next" v-show="current === 1" v-if="state.initSetp2" />
+      <CloumInfoForm
-      <CloumInfoForm v-show="current === 2" @redo="handleRedo" v-if="state.initSetp3" />
+        :columnsInfo="columnsInfo"
-      <span v-show="current === 4">1234</span>
+        @prev="handleStepPrev"
+        @next="handleStep2Next"
+        v-show="current === 1"
+        v-if="state.initSetp2"
+      />
+      <FinishForm v-show="current === 2" @redo="handleRedo" v-if="state.initSetp3" />
     </div>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { Steps } from 'ant-design-vue'
 import { PageWrapper } from '@/components/Page'
 import BasicInfoForm from './components/BasicInfoForm.vue'
 import CloumInfoForm from './components/CloumInfoForm.vue'
-import GenInfoForm from './components/GenInfoForm.vue'
+import FinishForm from './components/FinishForm.vue'
+import { useRoute } from 'vue-router'
+import { getCodegenTable } from '@/api/infra/codegen'
 
 const Step = Steps.Step
 
+const { query } = useRoute()
+
+// 表详细信息
+const basicInfo = ref<any>()
+// 表列信息
+const columnsInfo = ref<any[]>([])
+
+const basicInfoValue = ref()
+
 const current = ref(0)
 const state = reactive({
   initSetp2: false,
   initSetp3: false
 })
+
 function handleStep1Next(step1Values: any) {
   current.value++
   state.initSetp2 = true
-  console.log(step1Values)
+  basicInfoValue.value = step1Values
+  console.info(step1Values)
 }
 
 function handleStepPrev() {
@@ -53,4 +70,15 @@ function handleRedo() {
   state.initSetp2 = false
   state.initSetp3 = false
 }
+
+async function getList() {
+  const tableId = query.id as unknown as number
+  const res = await getCodegenTable(tableId)
+  basicInfo.value = res.table
+  columnsInfo.value = res.columns
+}
+
+onMounted(async () => {
+  await getList()
+})
 </script>

src/views/infra/codegen/components/BasicInfoForm.vue

@@ -19,10 +19,20 @@
 <script lang="ts" setup>
 import { BasicForm, useForm } from '@/components/Form'
 import { basicInfoSchemas } from './data'
-
 import { Divider } from 'ant-design-vue'
+import { watch } from 'vue'
+import { CodegenTableVO } from '@/api/infra/codegen/types'
+
 const emit = defineEmits(['next'])
-const [register, { validate }] = useForm({
+
+const props = defineProps({
+  basicInfo: {
+    type: Object as PropType<Nullable<CodegenTableVO>>,
+    default: () => null
+  }
+})
+
+const [register, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
   schemas: basicInfoSchemas,
   actionColOptions: {
@@ -41,11 +51,24 @@ async function customSubmitFunc() {
     emit('next', values)
   } catch (error) {}
 }
+
+watch(
+  () => props.basicInfo,
+  (basicInfo) => {
+    if (!basicInfo) return
+    resetFields()
+    setFieldsValue({ ...basicInfo })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 </script>
 <style lang="less" scoped>
 .step1 {
   &-form {
-    width: 450px;
+    width: 80%;
     margin: 0 auto;
   }
 

src/views/infra/codegen/components/CloumInfoForm.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="step3">
+  <div class="step2">
-    <div class="step3-form">
+    <div class="step2-form">
       <BasicForm @register="register" />
     </div>
     <Divider />
@@ -19,22 +19,30 @@
 <script lang="ts" setup>
 import { BasicForm, useForm } from '@/components/Form'
 import { basicInfoSchemas } from './data'
-
 import { Divider } from 'ant-design-vue'
-const emit = defineEmits(['next'])
+
+const emit = defineEmits(['next', 'prev'])
+
 const [register, { validate }] = useForm({
   labelWidth: 120,
   schemas: basicInfoSchemas,
   actionColOptions: {
     span: 14
   },
-  showResetButton: false,
+  resetButtonOptions: {
+    text: '上一步'
+  },
   submitButtonOptions: {
     text: '下一步'
   },
+  resetFunc: customResetFunc,
   submitFunc: customSubmitFunc
 })
 
+async function customResetFunc() {
+  emit('prev')
+}
+
 async function customSubmitFunc() {
   try {
     const values = await validate()
@@ -43,7 +51,7 @@ async function customSubmitFunc() {
 }
 </script>
 <style lang="less" scoped>
-.step3 {
+.step2 {
   &-form {
     width: 450px;
     margin: 0 auto;

src/views/infra/codegen/components/FinishForm.vue

@@ -0,0 +1 @@
+<template><span>123</span></template>

src/views/infra/codegen/components/GenInfoForm.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="step2">
-    <div class="step2-form">
-      <BasicForm @register="register" />
-    </div>
-    <Divider />
-    <h3>说明</h3>
-    <h4>转账到支付宝账户</h4>
-    <p>
-      如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
-    </p>
-
-    <h4>转账到银行卡</h4>
-    <p>
-      如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
-    </p>
-  </div>
-</template>
-<script lang="ts" setup>
-import { BasicForm, useForm } from '@/components/Form'
-import { genInfoSchemas } from './data'
-
-import { Divider } from 'ant-design-vue'
-const emit = defineEmits(['next'])
-const [register, { validate }] = useForm({
-  labelWidth: 120,
-  schemas: genInfoSchemas,
-  actionColOptions: {
-    span: 14
-  },
-  showResetButton: false,
-  submitButtonOptions: {
-    text: '下一步'
-  },
-  submitFunc: customSubmitFunc
-})
-
-async function customSubmitFunc() {
-  try {
-    const values = await validate()
-    emit('next', values)
-  } catch (error) {}
-}
-</script>
-<style lang="less" scoped>
-.step2 {
-  &-form {
-    width: 450px;
-    margin: 0 auto;
-  }
-
-  h3 {
-    margin: 0 0 12px;
-    font-size: 16px;
-    line-height: 32px;
-    color: @text-color;
-  }
-
-  h4 {
-    margin: 0 0 4px;
-    font-size: 14px;
-    line-height: 22px;
-    color: @text-color;
-  }
-
-  p {
-    color: @text-color;
-  }
-}
-
-.pay-select {
-  width: 20%;
-}
-
-.pay-input {
-  width: 70%;
-}
-</style>

src/views/infra/codegen/components/data.ts

@@ -3,19 +3,25 @@ import { FormSchema } from '@/components/Form'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 
 export const basicInfoSchemas: FormSchema[] = [
+  {
+    label: '基本信息',
+    field: 'basicInfo',
+    component: 'Divider',
+    colProps: { span: 24 }
+  },
   {
     label: '表名称',
     field: 'tableName',
     required: true,
     component: 'Input',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '表描述',
     field: 'tableComment',
     required: true,
     component: 'Input',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '实体类名称',
@@ -23,24 +29,21 @@ export const basicInfoSchemas: FormSchema[] = [
     required: true,
     helpMessage: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
     component: 'Input',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '作者',
     field: 'author',
     required: true,
     component: 'Input',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
-    label: '备注',
+    label: '生成信息',
-    field: 'remark',
+    field: 'genInfo',
-    component: 'InputTextArea',
+    component: 'Divider',
     colProps: { span: 24 }
-  }
+  },
-]
-
-export const genInfoSchemas: FormSchema[] = [
   {
     label: '生成模板',
     field: 'templateType',
@@ -49,7 +52,7 @@ export const genInfoSchemas: FormSchema[] = [
     componentProps: {
       options: getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
     },
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '生成场景',
@@ -59,7 +62,7 @@ export const genInfoSchemas: FormSchema[] = [
     componentProps: {
       options: getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
     },
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '模块名',
@@ -67,7 +70,7 @@ export const genInfoSchemas: FormSchema[] = [
     required: true,
     helpMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
     component: 'Input',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '业务名',
@@ -75,7 +78,7 @@ export const genInfoSchemas: FormSchema[] = [
     required: true,
     component: 'Input',
     helpMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '类名称',
@@ -83,7 +86,7 @@ export const genInfoSchemas: FormSchema[] = [
     required: true,
     component: 'Input',
     helpMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '类描述',
@@ -91,7 +94,7 @@ export const genInfoSchemas: FormSchema[] = [
     required: true,
     component: 'Input',
     helpMessage: '用作类描述，例如 用户',
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '上级菜单',
@@ -107,7 +110,7 @@ export const genInfoSchemas: FormSchema[] = [
       },
       handleTree: 'id'
     },
-    colProps: { span: 24 }
+    colProps: { span: 12 }
   },
   {
     label: '自定义路径',
@@ -116,6 +119,12 @@ export const genInfoSchemas: FormSchema[] = [
     helpMessage: '填写磁盘绝对路径，若不填写，则生成到当前Web项目下',
     defaultValue: '/',
     ifShow: ({ values }) => values.genType === '1',
+    colProps: { span: 12 }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
     colProps: { span: 24 }
   }
 ]

src/views/infra/codegen/index.vue

@@ -9,7 +9,7 @@
           <TableAction
             :actions="[
               { icon: IconEnum.EDIT, label: '预览', onClick: handlePreview.bind(null, record) },
-              { icon: IconEnum.EDIT, label: t('action.edit'), onClick: handleEdit.bind(null) },
+              { icon: IconEnum.EDIT, label: t('action.edit'), onClick: handleEditTable.bind(null, record) },
               { icon: IconEnum.DOWNLOAD, label: '生成', onClick: handleGenTable.bind(null, record) },
               {
                 icon: IconEnum.RESET,
@@ -82,8 +82,8 @@ function handlePreview(record: Recordable) {
   })
 }
 
-function handleEdit() {
+function handleEditTable(record: Recordable) {
-  go('/codegen/editTable')
+  go('/codegen/editTable?id=' + record.id)
 }
 
 async function handleGenTable(record: Recordable) {