feat: editTable init

2 years ago · 6e27639bb9
7 changed files with 441 additions and 7 deletions
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@ -74,6 +74,30 @@ export const ProfileRoute: AppRouteRecordRaw = {
  ]
 }

+export const CodegenRoute: AppRouteRecordRaw = {
+  path: '/codegen',
+  component: LAYOUT,
+  name: 'CodegenEdit',
+  meta: {
+    title: '修改生成配置',
+    hidden: true
+  },
+  children: [
+    {
+      path: 'editTable',
+      component: () => import('@/views/infra/codegen/EditTable.vue'),
+      name: 'EditTable',
+      meta: {
+        canTo: true,
+        hidden: true,
+        noTagsView: false,
+        icon: 'ep:edit',
+        title: '修改生成配置'
+      }
+    }
+  ]
+}
+
 // Basic routing without permission
 // 未经许可的基本路由
-export const basicRoutes = [LoginRoute, RootRoute, ProfileRoute, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE]
+export const basicRoutes = [LoginRoute, RootRoute, ProfileRoute, CodegenRoute, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE]
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@ -1 +1,56 @@
-<template><sapn>123</sapn></template>
+<template>
+  <PageWrapper>
+    <div class="m-5 w-200">
+      <Steps :current="current">
+        <Step title="基本信息" />
+        <Step title="生成信息" />
+        <Step title="字段信息" />
+        <Step title="完成" />
+      </Steps>
+    </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>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } 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'
+
+const Step = Steps.Step
+
+const current = ref(0)
+const state = reactive({
+  initSetp2: false,
+  initSetp3: false
+})
+function handleStep1Next(step1Values: any) {
+  current.value++
+  state.initSetp2 = true
+  console.log(step1Values)
+}
+
+function handleStepPrev() {
+  current.value--
+}
+
+function handleStep2Next(step2Values: any) {
+  current.value++
+  state.initSetp3 = true
+  console.log(step2Values)
+}
+
+function handleRedo() {
+  current.value = 0
+  state.initSetp2 = false
+  state.initSetp3 = false
+}
+</script>
--- a/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/src/views/infra/codegen/components/BasicInfoForm.vue
@ -0,0 +1,78 @@
+<template>
+  <div class="step1">
+    <div class="step1-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 { basicInfoSchemas } from './data'
+
+import { Divider } from 'ant-design-vue'
+const emit = defineEmits(['next'])
+const [register, { validate }] = useForm({
+  labelWidth: 120,
+  schemas: basicInfoSchemas,
+  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>
+.step1 {
+  &-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/CloumInfoForm.vue
+++ b/src/views/infra/codegen/components/CloumInfoForm.vue
@ -0,0 +1,78 @@
+<template>
+  <div class="step3">
+    <div class="step3-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 { basicInfoSchemas } from './data'
+
+import { Divider } from 'ant-design-vue'
+const emit = defineEmits(['next'])
+const [register, { validate }] = useForm({
+  labelWidth: 120,
+  schemas: basicInfoSchemas,
+  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>
+.step3 {
+  &-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/GenInfoForm.vue
+++ b/src/views/infra/codegen/components/GenInfoForm.vue
@ -0,0 +1,78 @@
+<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
@ -0,0 +1,121 @@
+import { listSimpleMenus } from '@/api/system/menu'
+import { FormSchema } from '@/components/Form'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+
+export const basicInfoSchemas: FormSchema[] = [
+  {
+    label: '表名称',
+    field: 'tableName',
+    required: true,
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+  {
+    label: '表描述',
+    field: 'tableComment',
+    required: true,
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+  {
+    label: '实体类名称',
+    field: 'className',
+    required: true,
+    helpMessage: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+  {
+    label: '作者',
+    field: 'author',
+    required: true,
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    colProps: { span: 24 }
+  }
+]
+
+export const genInfoSchemas: FormSchema[] = [
+  {
+    label: '生成模板',
+    field: 'templateType',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
+    },
+    colProps: { span: 24 }
+  },
+  {
+    label: '生成场景',
+    field: 'scene',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
+    },
+    colProps: { span: 24 }
+  },
+  {
+    label: '模块名',
+    field: 'moduleName',
+    required: true,
+    helpMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+  {
+    label: '业务名',
+    field: 'businessName',
+    required: true,
+    component: 'Input',
+    helpMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
+    colProps: { span: 24 }
+  },
+  {
+    label: '类名称',
+    field: 'className',
+    required: true,
+    component: 'Input',
+    helpMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
+    colProps: { span: 24 }
+  },
+  {
+    label: '类描述',
+    field: 'classComment',
+    required: true,
+    component: 'Input',
+    helpMessage: '用作类描述，例如 用户',
+    colProps: { span: 24 }
+  },
+  {
+    label: '上级菜单',
+    field: 'parentMenuId',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: () => listSimpleMenus(),
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      handleTree: 'id'
+    },
+    colProps: { span: 24 }
+  },
+  {
+    label: '自定义路径',
+    field: 'genPath',
+    component: 'Input',
+    helpMessage: '填写磁盘绝对路径，若不填写，则生成到当前Web项目下',
+    defaultValue: '/',
+    ifShow: ({ values }) => values.genType === '1',
+    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, record) },
+              { icon: IconEnum.EDIT, label: t('action.edit'), onClick: handleEdit.bind(null) },
              { icon: IconEnum.DOWNLOAD, label: '生成', onClick: handleGenTable.bind(null, record) },
              {
                icon: IconEnum.RESET,
@ -40,6 +40,7 @@
  </div>
 </template>
 <script lang="ts" setup name="Codegen">
+import { useGo } from '@/hooks/web/usePage'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
@ -50,6 +51,7 @@ import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { deleteCodegenTable, downloadCodegen, getCodegenTablePage, syncCodegenFromDB } from '@/api/infra/codegen'
 import { columns, searchFormSchema } from './codegen.data'

+const go = useGo()
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const [registerPreviewModal, { openModal: openPreviewModal }] = useModal()
@ -80,10 +82,8 @@ function handlePreview(record: Recordable) {
  })
 }

-function handleEdit(record: Recordable) {
-  openPreviewModal(true, {
-    record
-  })
+function handleEdit() {
+  go('/codegen/editTable')
 }

 async function handleGenTable(record: Recordable) {