feat: basicInfo codegen

2 years ago · 0d58b2bf8d
7 changed files with 108 additions and 117 deletions
--- a/src/views/infra/codegen/EditTable.vue
+++ b/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" />
-      <GenInfoForm @prev="handleStepPrev" @next="handleStep2Next" v-show="current === 1" v-if="state.initSetp2" />
-      <CloumInfoForm v-show="current === 2" @redo="handleRedo" v-if="state.initSetp3" />
-      <span v-show="current === 4">1234</span>
+      <BasicInfoForm :basicInfo="basicInfo" @next="handleStep1Next" v-show="current === 0" />
+      <CloumInfoForm
+        :columnsInfo="columnsInfo"
+        @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>
--- a/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/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;
  }

--- a/src/views/infra/codegen/components/CloumInfoForm.vue
+++ b/src/views/infra/codegen/components/CloumInfoForm.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="step3">
-    <div class="step3-form">
+  <div class="step2">
+    <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;
--- a/src/views/infra/codegen/components/FinishForm.vue
+++ b/src/views/infra/codegen/components/FinishForm.vue
@ -0,0 +1 @@
+<template><span>123</span></template>
--- a/src/views/infra/codegen/components/GenInfoForm.vue
+++ b/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>
--- a/src/views/infra/codegen/components/data.ts
+++ b/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: '备注',
-    field: 'remark',
-    component: 'InputTextArea',
+    label: '生成信息',
+    field: 'genInfo',
+    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 }
  }
 ]
--- a/src/views/infra/codegen/index.vue
+++ b/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() {
-  go('/codegen/editTable')
+function handleEditTable(record: Recordable) {
+  go('/codegen/editTable?id=' + record.id)
 }

 async function handleGenTable(record: Recordable) {