refactor: codegen

This commit is contained in:
xingyu 2022-07-28 21:40:15 +08:00
parent 607f6e4bb5
commit 291f31be98
9 changed files with 127 additions and 126 deletions

View File

@ -1,5 +1,5 @@
import { useAxios } from '@/hooks/web/useAxios' import { useAxios } from '@/hooks/web/useAxios'
import type { CodegenTableVO } from './types' import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
const request = useAxios() const request = useAxios()
@ -14,12 +14,12 @@ export const getCodegenTableApi = (id: number) => {
} }
// 新增代码生成表定义 // 新增代码生成表定义
export const createCodegenTableApi = (data: CodegenTableVO) => { export const createCodegenTableApi = (data: CodegenCreateListReqVO) => {
return request.post({ url: '/infra/codegen/create', data }) return request.post({ url: '/infra/codegen/create', data })
} }
// 修改代码生成表定义 // 修改代码生成表定义
export const updateCodegenTableApi = (data: CodegenTableVO) => { export const updateCodegenTableApi = (data: CodegenUpdateReqVO) => {
return request.put({ url: '/infra/codegen/update', data }) return request.put({ url: '/infra/codegen/update', data })
} }

View File

@ -1,5 +1,6 @@
export type CodegenTableVO = { export type CodegenTableVO = {
id: number tableId: number
isParentMenuIdValid: boolean
dataSourceConfigId: number dataSourceConfigId: number
scene: number scene: number
tableName: string tableName: string
@ -49,3 +50,11 @@ export type CodegenPreviewVO = {
filePath: string filePath: string
code: string code: string
} }
export type CodegenUpdateReqVO = {
table: CodegenTableVO
columns: CodegenColumnVO[]
}
export type CodegenCreateListReqVO = {
dataSourceConfigId: number
tableNames: string[]
}

View File

@ -1,47 +1,34 @@
<script lang="ts"> <script setup lang="ts">
import { defineComponent, onMounted, onUpdated, PropType, ref } from 'vue' import { onMounted, onUpdated, PropType, ref } from 'vue'
import { getDictOptions, DictDataType } from '@/utils/dict' import { getDictOptions, DictDataType } from '@/utils/dict'
import { ElTag } from 'element-plus' import { ElTag } from 'element-plus'
const props = defineProps({
export default defineComponent({ type: {
name: 'DictTag', type: String as PropType<string>,
components: { required: true
ElTag
}, },
props: { value: {
type: { type: [String, Number] as PropType<string | number>,
type: String as PropType<string>, required: true
required: true
},
value: {
type: [String, Number] as PropType<string | number>,
required: true
}
},
setup(props) {
const dictData = ref<DictDataType>()
function getDictObj(dictType: string, value: string) {
const dictOptions = getDictOptions(dictType)
dictOptions.forEach((dict: DictDataType) => {
if (dict.value === value) {
dictData.value = dict
}
})
}
onMounted(() => {
return getDictObj(props.type, props.value?.toString())
})
onUpdated(() => {
getDictObj(props.type, props.value?.toString())
})
return {
props,
dictData
}
} }
}) })
const dictData = ref<DictDataType>()
const getDictObj = (dictType: string, value: string) => {
const dictOptions = getDictOptions(dictType)
dictOptions.forEach((dict: DictDataType) => {
if (dict.value === value) {
dictData.value = dict
}
})
}
onMounted(() => {
return getDictObj(props.type, props.value?.toString())
})
onUpdated(() => {
getDictObj(props.type, props.value?.toString())
})
</script> </script>
<template> <template>
<!-- 默认样式 --> <!-- 默认样式 -->

View File

@ -1,18 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, unref, onMounted } from 'vue' import { ref, unref, onMounted } from 'vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap' import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import BasicInfoForm from './BasicInfoForm.vue' import { BasicInfoForm, CloumInfoForm, GenInfoForm } from './components'
import CloumInfoFormVue from './CloumInfoForm.vue' import { ElTabs, ElTabPane, ElButton, ElMessage } from 'element-plus'
import GenInfoFormVue from './GenInfoForm.vue' import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
import { ElTabs, ElTabPane, ElButton } from 'element-plus'
import { getCodegenTableApi } from '@/api/infra/codegen'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { CodegenColumnVO, CodegenTableVO } from '@/api/infra/codegen/types' import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
const { t } = useI18n() const { t } = useI18n()
const { push } = useRouter() const { push } = useRouter()
const { query } = useRoute() const { query } = useRoute()
const tableCurrentRow = ref<Nullable<CodegenTableVO>>(null) const tableCurrentRow = ref<CodegenTableVO>()
const cloumCurrentRow = ref<CodegenColumnVO[]>() const cloumCurrentRow = ref<CodegenColumnVO[]>()
const getList = async () => { const getList = async () => {
const id = query.id as unknown as number const id = query.id as unknown as number
@ -26,17 +24,23 @@ const getList = async () => {
const loading = ref(false) const loading = ref(false)
const activeName = ref('cloum') const activeName = ref('cloum')
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
const genInfoRef = ref<ComponentRef<typeof GenInfoFormVue>>() const genInfoRef = ref<ComponentRef<typeof GenInfoForm>>()
const cloumInfoRef = ref(null)
const submitForm = async () => { const submitForm = async () => {
const basicInfo = unref(basicInfoRef) const basicInfo = unref(basicInfoRef)
const genInfo = unref(genInfoRef) const genInfo = unref(genInfoRef)
const basicValidate = await basicInfo?.elFormRef?.validate()?.catch(() => {}) const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {})
const genValidate = await genInfo?.elFormRef?.validate()?.catch(() => {}) const genForm = await genInfo?.elFormRef?.validate()?.catch(() => {})
if (basicValidate && genValidate) { if (basicForm && genForm) {
const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
const genInfoData = (await genInfo?.getFormData()) as CodegenTableVO const genInfoData = (await genInfo?.getFormData()) as CodegenTableVO
console.info(basicInfoData) const genTable: CodegenUpdateReqVO = {
console.info(genInfoData) table: Object.assign({}, basicInfoData, genInfoData),
columns: cloumCurrentRow.value
}
await updateCodegenTableApi(genTable)
ElMessage.success(t('common.updateSuccess'))
push('/infra/codegen')
} }
} }
onMounted(() => { onMounted(() => {
@ -46,14 +50,14 @@ onMounted(() => {
<template> <template>
<ContentDetailWrap title="代码生成" @back="push('/infra/codegen')"> <ContentDetailWrap title="代码生成" @back="push('/infra/codegen')">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="基本信息" name="basic"> <el-tab-pane label="基本信息" name="basicInfo">
<BasicInfoForm ref="basicInfoRef" :current-row="tableCurrentRow" /> <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="字段信息" name="cloum"> <el-tab-pane label="字段信息" name="cloum">
<CloumInfoFormVue ref="cloumInfoRef" :current-row="cloumCurrentRow" /> <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="生成信息" name="genInfo"> <el-tab-pane label="生成信息" name="genInfo">
<GenInfoFormVue ref="basicInfoRef" :current-row="tableCurrentRow" /> <GenInfoForm ref="genInfoRef" :genInfo="tableCurrentRow" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<template #right> <template #right>

View File

@ -5,7 +5,7 @@ import { CodegenTableVO } from '@/api/infra/codegen/types'
import { Form } from '@/components/Form' import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm' import { useForm } from '@/hooks/web/useForm'
const props = defineProps({ const props = defineProps({
currentRow: { basicInfo: {
type: Object as PropType<Nullable<CodegenTableVO>>, type: Object as PropType<Nullable<CodegenTableVO>>,
default: () => null default: () => null
} }
@ -66,11 +66,11 @@ const { register, methods, elFormRef } = useForm({
schema schema
}) })
watch( watch(
() => props.currentRow, () => props.basicInfo,
(currentRow) => { (basicInfo) => {
if (!currentRow) return if (!basicInfo) return
const { setValues } = methods const { setValues } = methods
setValues(currentRow) setValues(basicInfo)
}, },
{ {
deep: true, deep: true,

View File

@ -4,8 +4,8 @@ import { onMounted, PropType, ref } from 'vue'
import { CodegenColumnVO } from '@/api/infra/codegen/types' import { CodegenColumnVO } from '@/api/infra/codegen/types'
import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type' import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
import { DictTypeVO } from '@/api/system/dict/types' import { DictTypeVO } from '@/api/system/dict/types'
defineProps({ const props = defineProps({
currentRow: { info: {
type: Array as unknown as PropType<CodegenColumnVO[]>, type: Array as unknown as PropType<CodegenColumnVO[]>,
default: () => null default: () => null
} }
@ -20,18 +20,21 @@ const tableHeight = document.documentElement.scrollHeight - 245 + 'px'
onMounted(async () => { onMounted(async () => {
await getDictOptions() await getDictOptions()
}) })
defineExpose({
info: props.info
})
</script> </script>
<template> <template>
<el-table ref="dragTable" :data="currentRow" row-key="columnId" :max-height="tableHeight"> <el-table ref="dragTable" :data="info" row-key="columnId" :max-height="tableHeight">
<el-table-column <el-table-column
label="字段列名" label="字段列名"
prop="columnName" prop="columnName"
min-width="10%" min-width="10%"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column label="字段描述" min-width="10%"> <el-table-column label="字段描述" min-width="10%" prop="columnComment">
<template #default="scope"> <template #default="{ row }">
<el-input v-model="scope.row.columnComment" /> <el-input v-model="row.columnComment" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -40,9 +43,9 @@ onMounted(async () => {
min-width="10%" min-width="10%"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column label="Java类型" min-width="11%"> <el-table-column label="Java类型" min-width="11%" prop="javaType">
<template #default="scope"> <template #default="{ row }">
<el-select v-model="scope.row.javaType"> <el-select v-model="row.javaType">
<el-option label="Long" value="Long" /> <el-option label="Long" value="Long" />
<el-option label="String" value="String" /> <el-option label="String" value="String" />
<el-option label="Integer" value="Integer" /> <el-option label="Integer" value="Integer" />
@ -53,38 +56,34 @@ onMounted(async () => {
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="java属性" min-width="10%"> <el-table-column label="java属性" min-width="10%" prop="javaField">
<template #default="scope"> <template #default="{ row }">
<el-input v-model="scope.row.javaField" /> <el-input v-model="row.javaField" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="插入" min-width="4%"> <el-table-column label="插入" min-width="4%" prop="createOperation">
<template #default="scope"> <template #default="{ row }">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation" /> <el-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="编辑" min-width="4%"> <el-table-column label="编辑" min-width="4%" prop="updateOperation">
<template #default="scope"> <template #default="{ row }">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation" /> <el-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="列表" min-width="4%"> <el-table-column label="列表" min-width="4%" prop="listOperationResult">
<template #default="scope"> <template #default="{ row }">
<el-checkbox <el-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
true-label="true"
false-label="false"
v-model="scope.row.listOperationResult"
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="查询" min-width="4%"> <el-table-column label="查询" min-width="4%" prop="listOperation">
<template #default="scope"> <template #default="{ row }">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation" /> <el-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="查询方式" min-width="10%"> <el-table-column label="查询方式" min-width="10%" prop="listOperationCondition">
<template #default="scope"> <template #default="{ row }">
<el-select v-model="scope.row.listOperationCondition"> <el-select v-model="row.listOperationCondition">
<el-option label="=" value="=" /> <el-option label="=" value="=" />
<el-option label="!=" value="!=" /> <el-option label="!=" value="!=" />
<el-option label=">" value=">" /> <el-option label=">" value=">" />
@ -96,14 +95,14 @@ onMounted(async () => {
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="允许空" min-width="5%"> <el-table-column label="允许空" min-width="5%" prop="nullable">
<template #default="scope"> <template #default="{ row }">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable" /> <el-checkbox true-label="true" false-label="false" v-model="row.nullable" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="显示类型" min-width="12%"> <el-table-column label="显示类型" min-width="12%" prop="htmlType">
<template #default="scope"> <template #default="{ row }">
<el-select v-model="scope.row.htmlType"> <el-select v-model="row.htmlType">
<el-option label="文本框" value="input" /> <el-option label="文本框" value="input" />
<el-option label="文本域" value="textarea" /> <el-option label="文本域" value="textarea" />
<el-option label="下拉框" value="select" /> <el-option label="下拉框" value="select" />
@ -116,9 +115,9 @@ onMounted(async () => {
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="字典类型" min-width="12%"> <el-table-column label="字典类型" min-width="12%" prop="dictType">
<template #default="scope"> <template #default="{ row }">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择"> <el-select v-model="row.dictType" clearable filterable placeholder="请选择">
<el-option <el-option
v-for="dict in dictOptions" v-for="dict in dictOptions"
:key="dict.id" :key="dict.id"
@ -128,9 +127,9 @@ onMounted(async () => {
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="示例" min-width="10%"> <el-table-column label="示例" min-width="10%" prop="example">
<template #default="scope"> <template #default="{ row }">
<el-input v-model="scope.row.example" /> <el-input v-model="row.example" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

View File

@ -4,9 +4,9 @@ import { required } from '@/utils/formRules'
import { CodegenTableVO } from '@/api/infra/codegen/types' import { CodegenTableVO } from '@/api/infra/codegen/types'
import { Form } from '@/components/Form' import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm' import { useForm } from '@/hooks/web/useForm'
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
const props = defineProps({ const props = defineProps({
currentRow: { genInfo: {
type: Object as PropType<Nullable<CodegenTableVO>>, type: Object as PropType<Nullable<CodegenTableVO>>,
default: () => null default: () => null
} }
@ -20,13 +20,15 @@ const rules = reactive({
className: [required], className: [required],
classComment: [required] classComment: [required]
}) })
const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
const schema = reactive<FormSchema[]>([ const schema = reactive<FormSchema[]>([
{ {
label: '生成模板', label: '生成模板',
field: 'templateType', field: 'templateType',
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE) options: templateTypeOptions
}, },
colProps: { colProps: {
span: 12 span: 12
@ -37,7 +39,7 @@ const schema = reactive<FormSchema[]>([
field: 'scene', field: 'scene',
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE) options: sceneOptions
}, },
colProps: { colProps: {
span: 12 span: 12
@ -93,11 +95,11 @@ const { register, methods, elFormRef } = useForm({
schema schema
}) })
watch( watch(
() => props.currentRow, () => props.genInfo,
(currentRow) => { (genInfo) => {
if (!currentRow) return if (!genInfo) return
const { setValues } = methods const { setValues } = methods
setValues(currentRow) setValues(genInfo)
}, },
{ {
deep: true, deep: true,

View File

@ -21,8 +21,8 @@ const emit = defineEmits(['ok'])
const visible = ref(false) const visible = ref(false)
const dbLoading = ref(true) const dbLoading = ref(true)
const queryParams = reactive({ const queryParams = reactive({
tableName: undefined, name: undefined,
tableComment: undefined, comment: undefined,
dataSourceConfigId: 0 dataSourceConfigId: 0
}) })
const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
@ -49,8 +49,9 @@ const handleQuery = async () => {
} }
// //
const resetQuery = async () => { const resetQuery = async () => {
queryParams.tableName = undefined queryParams.name = undefined
queryParams.tableComment = undefined queryParams.comment = undefined
queryParams.dataSourceConfigId = 0
await getList() await getList()
} }
/** 多选框选中数据 */ /** 多选框选中数据 */
@ -90,11 +91,11 @@ defineExpose({
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="表名称" prop="tableName"> <el-form-item label="表名称" prop="name">
<el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable /> <el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="表描述" prop="tableComment"> <el-form-item label="表描述" prop="comment">
<el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable /> <el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery"> <el-button type="primary" @click="handleQuery">

View File

@ -1,7 +1,6 @@
import BasicInfoForm from './BasicInfoForm.vue' import BasicInfoForm from './BasicInfoForm.vue'
import CloumInfoForm from './CloumInfoForm.vue' import CloumInfoForm from './CloumInfoForm.vue'
import EditTable from './EditTable.vue'
import GenInfoForm from './GenInfoForm.vue' import GenInfoForm from './GenInfoForm.vue'
import ImportTable from './ImportTable.vue' import ImportTable from './ImportTable.vue'
import Preview from './Preview.vue' import Preview from './Preview.vue'
export { BasicInfoForm, CloumInfoForm, EditTable, GenInfoForm, ImportTable, Preview } export { BasicInfoForm, CloumInfoForm, GenInfoForm, ImportTable, Preview }