yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: basicInfo codegen

pull/3/head
xingyu 2023-03-23 23:38:06 +08:00
parent 6e27639bb9
commit 0d58b2bf8d
7 changed files with 108 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/infra/codegen/EditTable.vue
View File

@ -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>

29
src/views/infra/codegen/components/BasicInfoForm.vue
View File

@ -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;
}

20
src/views/infra/codegen/components/CloumInfoForm.vue
View File

@ -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;

1
src/views/infra/codegen/components/FinishForm.vue Normal file
View File

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

78
src/views/infra/codegen/components/GenInfoForm.vue
View File

@ -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>

45
src/views/infra/codegen/components/data.ts
View File

@ -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 }
}
]

6
src/views/infra/codegen/index.vue
View File

@ -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) {