feat: editTable init
xingyu
parent
f8d8407fb4
commit
6e27639bb9
|
|
@ -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
|
// 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]
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<TableAction
|
<TableAction
|
||||||
:actions="[
|
:actions="[
|
||||||
{ icon: IconEnum.EDIT, label: '预览', onClick: handlePreview.bind(null, record) },
|
{ 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.DOWNLOAD, label: '生成', onClick: handleGenTable.bind(null, record) },
|
||||||
{
|
{
|
||||||
icon: IconEnum.RESET,
|
icon: IconEnum.RESET,
|
||||||
|
|
@ -40,6 +40,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup name="Codegen">
|
<script lang="ts" setup name="Codegen">
|
||||||
|
import { useGo } from '@/hooks/web/usePage'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { useMessage } from '@/hooks/web/useMessage'
|
import { useMessage } from '@/hooks/web/useMessage'
|
||||||
import { useModal } from '@/components/Modal'
|
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 { deleteCodegenTable, downloadCodegen, getCodegenTablePage, syncCodegenFromDB } from '@/api/infra/codegen'
|
||||||
import { columns, searchFormSchema } from './codegen.data'
|
import { columns, searchFormSchema } from './codegen.data'
|
||||||
|
|
||||||
|
const go = useGo()
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const { createMessage } = useMessage()
|
const { createMessage } = useMessage()
|
||||||
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal()
|
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal()
|
||||||
|
|
@ -80,10 +82,8 @@ function handlePreview(record: Recordable) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEdit(record: Recordable) {
|
function handleEdit() {
|
||||||
openPreviewModal(true, {
|
go('/codegen/editTable')
|
||||||
record
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleGenTable(record: Recordable) {
|
async function handleGenTable(record: Recordable) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue