Commit 4941a43e082d9e546aa209e9f53c7db50851c53c
1 parent
258577e8
perf: 重构代码生成 优化性能
Showing
5 changed files
with
187 additions
and
230 deletions
yudao-ui-admin-vue3/src/views/infra/codegen/EditTable.vue
| @@ -8,9 +8,6 @@ | @@ -8,9 +8,6 @@ | ||
| 8 | <el-tab-pane label="字段信息" name="cloum"> | 8 | <el-tab-pane label="字段信息" name="cloum"> |
| 9 | <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" /> | 9 | <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" /> |
| 10 | </el-tab-pane> | 10 | </el-tab-pane> |
| 11 | - <el-tab-pane label="生成信息" name="genInfo"> | ||
| 12 | - <GenInfoForm ref="genInfoRef" :genInfo="tableCurrentRow" /> | ||
| 13 | - </el-tab-pane> | ||
| 14 | </el-tabs> | 11 | </el-tabs> |
| 15 | <template #right> | 12 | <template #right> |
| 16 | <XButton | 13 | <XButton |
| @@ -30,7 +27,7 @@ import { ElTabs, ElTabPane } from 'element-plus' | @@ -30,7 +27,7 @@ import { ElTabs, ElTabPane } from 'element-plus' | ||
| 30 | import { useI18n } from '@/hooks/web/useI18n' | 27 | import { useI18n } from '@/hooks/web/useI18n' |
| 31 | import { useMessage } from '@/hooks/web/useMessage' | 28 | import { useMessage } from '@/hooks/web/useMessage' |
| 32 | import { ContentDetailWrap } from '@/components/ContentDetailWrap' | 29 | import { ContentDetailWrap } from '@/components/ContentDetailWrap' |
| 33 | -import { BasicInfoForm, CloumInfoForm, GenInfoForm } from './components' | 30 | +import { BasicInfoForm, CloumInfoForm } from './components' |
| 34 | import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen' | 31 | import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen' |
| 35 | import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types' | 32 | import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types' |
| 36 | 33 | ||
| @@ -40,12 +37,11 @@ const { push } = useRouter() | @@ -40,12 +37,11 @@ const { push } = useRouter() | ||
| 40 | const { query } = useRoute() | 37 | const { query } = useRoute() |
| 41 | const loading = ref(false) | 38 | const loading = ref(false) |
| 42 | const title = ref('代码生成') | 39 | const title = ref('代码生成') |
| 43 | -const activeName = ref('cloum') | 40 | +const activeName = ref('basicInfo') |
| 44 | const cloumInfoRef = ref(null) | 41 | const cloumInfoRef = ref(null) |
| 45 | const tableCurrentRow = ref<CodegenTableVO>() | 42 | const tableCurrentRow = ref<CodegenTableVO>() |
| 46 | const cloumCurrentRow = ref<CodegenColumnVO[]>([]) | 43 | const cloumCurrentRow = ref<CodegenColumnVO[]>([]) |
| 47 | const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() | 44 | const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() |
| 48 | -const genInfoRef = ref<ComponentRef<typeof GenInfoForm>>() | ||
| 49 | 45 | ||
| 50 | const getList = async () => { | 46 | const getList = async () => { |
| 51 | const id = query.id as unknown as number | 47 | const id = query.id as unknown as number |
| @@ -59,14 +55,11 @@ const getList = async () => { | @@ -59,14 +55,11 @@ const getList = async () => { | ||
| 59 | } | 55 | } |
| 60 | const submitForm = async () => { | 56 | const submitForm = async () => { |
| 61 | const basicInfo = unref(basicInfoRef) | 57 | const basicInfo = unref(basicInfoRef) |
| 62 | - const genInfo = unref(genInfoRef) | ||
| 63 | const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {}) | 58 | const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {}) |
| 64 | - const genForm = await genInfo?.elFormRef?.validate()?.catch(() => {}) | ||
| 65 | - if (basicForm && genForm) { | 59 | + if (basicForm) { |
| 66 | const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO | 60 | const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO |
| 67 | - const genInfoData = (await genInfo?.getFormData()) as CodegenTableVO | ||
| 68 | const genTable: CodegenUpdateReqVO = { | 61 | const genTable: CodegenUpdateReqVO = { |
| 69 | - table: Object.assign({}, basicInfoData, genInfoData), | 62 | + table: basicInfoData, |
| 70 | columns: cloumCurrentRow.value | 63 | columns: cloumCurrentRow.value |
| 71 | } | 64 | } |
| 72 | await updateCodegenTableApi(genTable) | 65 | await updateCodegenTableApi(genTable) |
yudao-ui-admin-vue3/src/views/infra/codegen/components/BasicInfoForm.vue
| @@ -2,23 +2,42 @@ | @@ -2,23 +2,42 @@ | ||
| 2 | <Form :rules="rules" @register="register" /> | 2 | <Form :rules="rules" @register="register" /> |
| 3 | </template> | 3 | </template> |
| 4 | <script setup lang="ts"> | 4 | <script setup lang="ts"> |
| 5 | -import { PropType, reactive, watch } from 'vue' | 5 | +import { onMounted, PropType, reactive, ref, watch } from 'vue' |
| 6 | import { required } from '@/utils/formRules' | 6 | import { required } from '@/utils/formRules' |
| 7 | import { useForm } from '@/hooks/web/useForm' | 7 | import { useForm } from '@/hooks/web/useForm' |
| 8 | import { Form } from '@/components/Form' | 8 | import { Form } from '@/components/Form' |
| 9 | import { FormSchema } from '@/types/form' | 9 | import { FormSchema } from '@/types/form' |
| 10 | import { CodegenTableVO } from '@/api/infra/codegen/types' | 10 | import { CodegenTableVO } from '@/api/infra/codegen/types' |
| 11 | +import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | ||
| 12 | +import { listSimpleMenusApi } from '@/api/system/menu' | ||
| 13 | +import { handleTree, defaultProps } from '@/utils/tree' | ||
| 14 | + | ||
| 11 | const props = defineProps({ | 15 | const props = defineProps({ |
| 12 | basicInfo: { | 16 | basicInfo: { |
| 13 | type: Object as PropType<Nullable<CodegenTableVO>>, | 17 | type: Object as PropType<Nullable<CodegenTableVO>>, |
| 14 | default: () => null | 18 | default: () => null |
| 15 | } | 19 | } |
| 16 | }) | 20 | }) |
| 21 | + | ||
| 22 | +const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE) | ||
| 23 | +const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE) | ||
| 24 | +const menuOptions = ref<any>([]) // 树形结构 | ||
| 25 | +const getTree = async () => { | ||
| 26 | + const res = await listSimpleMenusApi() | ||
| 27 | + menuOptions.value = handleTree(res) | ||
| 28 | +} | ||
| 29 | + | ||
| 17 | const rules = reactive({ | 30 | const rules = reactive({ |
| 18 | tableName: [required], | 31 | tableName: [required], |
| 19 | tableComment: [required], | 32 | tableComment: [required], |
| 20 | className: [required], | 33 | className: [required], |
| 21 | - author: [required] | 34 | + author: [required], |
| 35 | + templateType: [required], | ||
| 36 | + scene: [required], | ||
| 37 | + moduleName: [required], | ||
| 38 | + businessName: [required], | ||
| 39 | + businessPackage: [required], | ||
| 40 | + classComment: [required] | ||
| 22 | }) | 41 | }) |
| 23 | const schema = reactive<FormSchema[]>([ | 42 | const schema = reactive<FormSchema[]>([ |
| 24 | { | 43 | { |
| @@ -46,6 +65,79 @@ const schema = reactive<FormSchema[]>([ | @@ -46,6 +65,79 @@ const schema = reactive<FormSchema[]>([ | ||
| 46 | } | 65 | } |
| 47 | }, | 66 | }, |
| 48 | { | 67 | { |
| 68 | + label: '生成模板', | ||
| 69 | + field: 'templateType', | ||
| 70 | + component: 'Select', | ||
| 71 | + componentProps: { | ||
| 72 | + options: templateTypeOptions | ||
| 73 | + }, | ||
| 74 | + colProps: { | ||
| 75 | + span: 12 | ||
| 76 | + } | ||
| 77 | + }, | ||
| 78 | + { | ||
| 79 | + label: '生成场景', | ||
| 80 | + field: 'scene', | ||
| 81 | + component: 'Select', | ||
| 82 | + componentProps: { | ||
| 83 | + options: sceneOptions | ||
| 84 | + }, | ||
| 85 | + colProps: { | ||
| 86 | + span: 12 | ||
| 87 | + } | ||
| 88 | + }, | ||
| 89 | + { | ||
| 90 | + label: '模块名', | ||
| 91 | + field: 'moduleName', | ||
| 92 | + component: 'Input', | ||
| 93 | + labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等', | ||
| 94 | + colProps: { | ||
| 95 | + span: 12 | ||
| 96 | + } | ||
| 97 | + }, | ||
| 98 | + { | ||
| 99 | + label: '业务名', | ||
| 100 | + field: 'businessName', | ||
| 101 | + component: 'Input', | ||
| 102 | + labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等', | ||
| 103 | + colProps: { | ||
| 104 | + span: 12 | ||
| 105 | + } | ||
| 106 | + }, | ||
| 107 | + { | ||
| 108 | + label: '类名称', | ||
| 109 | + field: 'className', | ||
| 110 | + component: 'Input', | ||
| 111 | + labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等', | ||
| 112 | + colProps: { | ||
| 113 | + span: 12 | ||
| 114 | + } | ||
| 115 | + }, | ||
| 116 | + { | ||
| 117 | + label: '类描述', | ||
| 118 | + field: 'classComment', | ||
| 119 | + component: 'Input', | ||
| 120 | + labelMessage: '用作类描述，例如 用户', | ||
| 121 | + colProps: { | ||
| 122 | + span: 12 | ||
| 123 | + } | ||
| 124 | + }, | ||
| 125 | + { | ||
| 126 | + label: '上级菜单', | ||
| 127 | + field: 'parentMenuId', | ||
| 128 | + component: 'TreeSelect', | ||
| 129 | + componentProps: { | ||
| 130 | + data: menuOptions, | ||
| 131 | + props: defaultProps, | ||
| 132 | + checkStrictly: true, | ||
| 133 | + nodeKey: 'id' | ||
| 134 | + }, | ||
| 135 | + labelMessage: '分配到指定菜单下，例如 系统管理', | ||
| 136 | + colProps: { | ||
| 137 | + span: 12 | ||
| 138 | + } | ||
| 139 | + }, | ||
| 140 | + { | ||
| 49 | label: '作者', | 141 | label: '作者', |
| 50 | field: 'author', | 142 | field: 'author', |
| 51 | component: 'Input', | 143 | component: 'Input', |
| @@ -81,6 +173,10 @@ watch( | @@ -81,6 +173,10 @@ watch( | ||
| 81 | immediate: true | 173 | immediate: true |
| 82 | } | 174 | } |
| 83 | ) | 175 | ) |
| 176 | +// ========== 初始化 ========== | ||
| 177 | +onMounted(async () => { | ||
| 178 | + await getTree() | ||
| 179 | +}) | ||
| 84 | 180 | ||
| 85 | defineExpose({ | 181 | defineExpose({ |
| 86 | elFormRef, | 182 | elFormRef, |
yudao-ui-admin-vue3/src/views/infra/codegen/components/CloumInfoForm.vue
| 1 | <template> | 1 | <template> |
| 2 | <vxe-table | 2 | <vxe-table |
| 3 | ref="dragTable" | 3 | ref="dragTable" |
| 4 | + border | ||
| 4 | :data="info" | 5 | :data="info" |
| 5 | max-height="600" | 6 | max-height="600" |
| 6 | stripe | 7 | stripe |
| 7 | class="xtable-scrollbar" | 8 | class="xtable-scrollbar" |
| 8 | :column-config="{ resizable: true }" | 9 | :column-config="{ resizable: true }" |
| 9 | > | 10 | > |
| 10 | - <vxe-column title="字段列名" field="columnName" fixed="left" width="80" /> | ||
| 11 | - <vxe-column title="字段描述" field="columnComment"> | ||
| 12 | - <template #default="{ row }"> | ||
| 13 | - <el-input v-model="row.columnComment" /> | ||
| 14 | - </template> | ||
| 15 | - </vxe-column> | ||
| 16 | - <vxe-column title="物理类型" field="dataType" width="10%" /> | ||
| 17 | - <vxe-column title="Java类型" width="10%" field="javaType"> | ||
| 18 | - <template #default="{ row }"> | ||
| 19 | - <el-select v-model="row.javaType"> | ||
| 20 | - <el-option label="Long" value="Long" /> | ||
| 21 | - <el-option label="String" value="String" /> | ||
| 22 | - <el-option label="Integer" value="Integer" /> | ||
| 23 | - <el-option label="Double" value="Double" /> | ||
| 24 | - <el-option label="BigDecimal" value="BigDecimal" /> | ||
| 25 | - <el-option label="LocalDateTime" value="LocalDateTime" /> | ||
| 26 | - <el-option label="Boolean" value="Boolean" /> | ||
| 27 | - </el-select> | ||
| 28 | - </template> | ||
| 29 | - </vxe-column> | ||
| 30 | - <vxe-column title="java属性" width="10%" field="javaField"> | ||
| 31 | - <template #default="{ row }"> | ||
| 32 | - <el-input v-model="row.javaField" /> | ||
| 33 | - </template> | ||
| 34 | - </vxe-column> | ||
| 35 | - <vxe-column title="插入" width="4%" field="createOperation"> | ||
| 36 | - <template #default="{ row }"> | ||
| 37 | - <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" /> | ||
| 38 | - </template> | ||
| 39 | - </vxe-column> | ||
| 40 | - <vxe-column title="编辑" width="4%" field="updateOperation"> | ||
| 41 | - <template #default="{ row }"> | ||
| 42 | - <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" /> | ||
| 43 | - </template> | ||
| 44 | - </vxe-column> | ||
| 45 | - <vxe-column title="列表" width="4%" field="listOperationResult"> | ||
| 46 | - <template #default="{ row }"> | ||
| 47 | - <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" /> | ||
| 48 | - </template> | ||
| 49 | - </vxe-column> | ||
| 50 | - <vxe-column title="查询" width="4%" field="listOperation"> | ||
| 51 | - <template #default="{ row }"> | ||
| 52 | - <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" /> | ||
| 53 | - </template> | ||
| 54 | - </vxe-column> | ||
| 55 | - <vxe-column title="查询方式" width="8%" field="listOperationCondition"> | ||
| 56 | - <template #default="{ row }"> | ||
| 57 | - <el-select v-model="row.listOperationCondition"> | ||
| 58 | - <el-option label="=" value="=" /> | ||
| 59 | - <el-option label="!=" value="!=" /> | ||
| 60 | - <el-option label=">" value=">" /> | ||
| 61 | - <el-option label=">=" value=">=" /> | ||
| 62 | - <el-option label="<" value="<>" /> | ||
| 63 | - <el-option label="<=" value="<=" /> | ||
| 64 | - <el-option label="LIKE" value="LIKE" /> | ||
| 65 | - <el-option label="BETWEEN" value="BETWEEN" /> | ||
| 66 | - </el-select> | ||
| 67 | - </template> | ||
| 68 | - </vxe-column> | ||
| 69 | - <vxe-column title="允许空" width="4%" field="nullable"> | ||
| 70 | - <template #default="{ row }"> | ||
| 71 | - <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" /> | ||
| 72 | - </template> | ||
| 73 | - </vxe-column> | 11 | + <vxe-column title="字段列名" field="columnName" fixed="left" width="10%" /> |
| 12 | + <vxe-colgroup title="基础属性"> | ||
| 13 | + <vxe-column title="字段描述" field="columnComment" width="10%"> | ||
| 14 | + <template #default="{ row }"> | ||
| 15 | + <vxe-input v-model="row.columnComment" placeholder="请输入字段描述" /> | ||
| 16 | + </template> | ||
| 17 | + </vxe-column> | ||
| 18 | + <vxe-column title="物理类型" field="dataType" width="10%" /> | ||
| 19 | + <vxe-column title="Java类型" width="10%" field="javaType"> | ||
| 20 | + <template #default="{ row }"> | ||
| 21 | + <vxe-select v-model="row.javaType" placeholder="请选择Java类型"> | ||
| 22 | + <vxe-option label="Long" value="Long" /> | ||
| 23 | + <vxe-option label="String" value="String" /> | ||
| 24 | + <vxe-option label="Integer" value="Integer" /> | ||
| 25 | + <vxe-option label="Double" value="Double" /> | ||
| 26 | + <vxe-option label="BigDecimal" value="BigDecimal" /> | ||
| 27 | + <vxe-option label="LocalDateTime" value="LocalDateTime" /> | ||
| 28 | + <vxe-option label="Boolean" value="Boolean" /> | ||
| 29 | + </vxe-select> | ||
| 30 | + </template> | ||
| 31 | + </vxe-column> | ||
| 32 | + <vxe-column title="java属性" width="8%" field="javaField"> | ||
| 33 | + <template #default="{ row }"> | ||
| 34 | + <vxe-input v-model="row.javaField" placeholder="请输入java属性" /> | ||
| 35 | + </template> | ||
| 36 | + </vxe-column> | ||
| 37 | + </vxe-colgroup> | ||
| 38 | + <vxe-colgroup title="增删改查"> | ||
| 39 | + <vxe-column title="插入" width="40px" field="createOperation"> | ||
| 40 | + <template #default="{ row }"> | ||
| 41 | + <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" /> | ||
| 42 | + </template> | ||
| 43 | + </vxe-column> | ||
| 44 | + <vxe-column title="编辑" width="40px" field="updateOperation"> | ||
| 45 | + <template #default="{ row }"> | ||
| 46 | + <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" /> | ||
| 47 | + </template> | ||
| 48 | + </vxe-column> | ||
| 49 | + <vxe-column title="列表" width="40px" field="listOperationResult"> | ||
| 50 | + <template #default="{ row }"> | ||
| 51 | + <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" /> | ||
| 52 | + </template> | ||
| 53 | + </vxe-column> | ||
| 54 | + <vxe-column title="查询" width="40px" field="listOperation"> | ||
| 55 | + <template #default="{ row }"> | ||
| 56 | + <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" /> | ||
| 57 | + </template> | ||
| 58 | + </vxe-column> | ||
| 59 | + <vxe-column title="允许空" width="40px" field="nullable"> | ||
| 60 | + <template #default="{ row }"> | ||
| 61 | + <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" /> | ||
| 62 | + </template> | ||
| 63 | + </vxe-column> | ||
| 64 | + <vxe-column title="查询方式" width="60px" field="listOperationCondition"> | ||
| 65 | + <template #default="{ row }"> | ||
| 66 | + <vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式"> | ||
| 67 | + <vxe-option label="=" value="=" /> | ||
| 68 | + <vxe-option label="!=" value="!=" /> | ||
| 69 | + <vxe-option label=">" value=">" /> | ||
| 70 | + <vxe-option label=">=" value=">=" /> | ||
| 71 | + <vxe-option label="<" value="<>" /> | ||
| 72 | + <vxe-option label="<=" value="<=" /> | ||
| 73 | + <vxe-option label="LIKE" value="LIKE" /> | ||
| 74 | + <vxe-option label="BETWEEN" value="BETWEEN" /> | ||
| 75 | + </vxe-select> | ||
| 76 | + </template> | ||
| 77 | + </vxe-column> | ||
| 78 | + </vxe-colgroup> | ||
| 74 | <vxe-column title="显示类型" width="10%" field="htmlType"> | 79 | <vxe-column title="显示类型" width="10%" field="htmlType"> |
| 75 | <template #default="{ row }"> | 80 | <template #default="{ row }"> |
| 76 | - <el-select v-model="row.htmlType"> | ||
| 77 | - <el-option label="文本框" value="input" /> | ||
| 78 | - <el-option label="文本域" value="textarea" /> | ||
| 79 | - <el-option label="下拉框" value="select" /> | ||
| 80 | - <el-option label="单选框" value="radio" /> | ||
| 81 | - <el-option label="复选框" value="checkbox" /> | ||
| 82 | - <el-option label="日期控件" value="datetime" /> | ||
| 83 | - <el-option label="图片上传" value="imageUpload" /> | ||
| 84 | - <el-option label="文件上传" value="fileUpload" /> | ||
| 85 | - <el-option label="富文本控件" value="editor" /> | ||
| 86 | - </el-select> | 81 | + <vxe-select v-model="row.htmlType" placeholder="请选择显示类型"> |
| 82 | + <vxe-option label="文本框" value="input" /> | ||
| 83 | + <vxe-option label="文本域" value="textarea" /> | ||
| 84 | + <vxe-option label="下拉框" value="select" /> | ||
| 85 | + <vxe-option label="单选框" value="radio" /> | ||
| 86 | + <vxe-option label="复选框" value="checkbox" /> | ||
| 87 | + <vxe-option label="日期控件" value="datetime" /> | ||
| 88 | + <vxe-option label="图片上传" value="imageUpload" /> | ||
| 89 | + <vxe-option label="文件上传" value="fileUpload" /> | ||
| 90 | + <vxe-option label="富文本控件" value="editor" /> | ||
| 91 | + </vxe-select> | ||
| 87 | </template> | 92 | </template> |
| 88 | </vxe-column> | 93 | </vxe-column> |
| 89 | <vxe-column title="字典类型" width="10%" field="dictType"> | 94 | <vxe-column title="字典类型" width="10%" field="dictType"> |
| 90 | <template #default="{ row }"> | 95 | <template #default="{ row }"> |
| 91 | - <el-select v-model="row.dictType" clearable filterable placeholder="请选择"> | ||
| 92 | - <el-option | 96 | + <vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型"> |
| 97 | + <vxe-option | ||
| 93 | v-for="dict in dictOptions" | 98 | v-for="dict in dictOptions" |
| 94 | :key="dict.id" | 99 | :key="dict.id" |
| 95 | :label="dict.name" | 100 | :label="dict.name" |
| 96 | :value="dict.type" | 101 | :value="dict.type" |
| 97 | /> | 102 | /> |
| 98 | - </el-select> | 103 | + </vxe-select> |
| 99 | </template> | 104 | </template> |
| 100 | </vxe-column> | 105 | </vxe-column> |
| 101 | <vxe-column title="示例" field="example"> | 106 | <vxe-column title="示例" field="example"> |
| 102 | <template #default="{ row }"> | 107 | <template #default="{ row }"> |
| 103 | - <el-input v-model="row.example" /> | 108 | + <vxe-input v-model="row.example" placeholder="请输入示例" /> |
| 104 | </template> | 109 | </template> |
| 105 | </vxe-column> | 110 | </vxe-column> |
| 106 | </vxe-table> | 111 | </vxe-table> |
| 107 | </template> | 112 | </template> |
| 108 | <script setup lang="ts"> | 113 | <script setup lang="ts"> |
| 109 | import { onMounted, PropType, ref } from 'vue' | 114 | import { onMounted, PropType, ref } from 'vue' |
| 110 | -import { ElInput, ElSelect, ElOption } from 'element-plus' | ||
| 111 | import { DictTypeVO } from '@/api/system/dict/types' | 115 | import { DictTypeVO } from '@/api/system/dict/types' |
| 112 | import { CodegenColumnVO } from '@/api/infra/codegen/types' | 116 | import { CodegenColumnVO } from '@/api/infra/codegen/types' |
| 113 | import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type' | 117 | import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type' |
yudao-ui-admin-vue3/src/views/infra/codegen/components/GenInfoForm.vue deleted
| 1 | -<template> | ||
| 2 | - <Form :rules="rules" @register="register" /> | ||
| 3 | -</template> | ||
| 4 | -<script setup lang="ts"> | ||
| 5 | -import { onMounted, PropType, reactive, ref, watch } from 'vue' | ||
| 6 | -import { Form } from '@/components/Form' | ||
| 7 | -import { useForm } from '@/hooks/web/useForm' | ||
| 8 | -import { required } from '@/utils/formRules' | ||
| 9 | -import { handleTree, defaultProps } from '@/utils/tree' | ||
| 10 | -import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | ||
| 11 | -import { listSimpleMenusApi } from '@/api/system/menu' | ||
| 12 | -import { CodegenTableVO } from '@/api/infra/codegen/types' | ||
| 13 | -import { FormSchema } from '@/types/form' | ||
| 14 | -const props = defineProps({ | ||
| 15 | - genInfo: { | ||
| 16 | - type: Object as PropType<Nullable<CodegenTableVO>>, | ||
| 17 | - default: () => null | ||
| 18 | - } | ||
| 19 | -}) | ||
| 20 | -const rules = reactive({ | ||
| 21 | - templateType: [required], | ||
| 22 | - scene: [required], | ||
| 23 | - moduleName: [required], | ||
| 24 | - businessName: [required], | ||
| 25 | - businessPackage: [required], | ||
| 26 | - className: [required], | ||
| 27 | - classComment: [required] | ||
| 28 | -}) | ||
| 29 | -const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE) | ||
| 30 | -const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE) | ||
| 31 | -const menuOptions = ref<any>([]) // 树形结构 | ||
| 32 | -const getTree = async () => { | ||
| 33 | - const res = await listSimpleMenusApi() | ||
| 34 | - menuOptions.value = handleTree(res) | ||
| 35 | -} | ||
| 36 | -const schema = reactive<FormSchema[]>([ | ||
| 37 | - { | ||
| 38 | - label: '生成模板', | ||
| 39 | - field: 'templateType', | ||
| 40 | - component: 'Select', | ||
| 41 | - componentProps: { | ||
| 42 | - options: templateTypeOptions | ||
| 43 | - }, | ||
| 44 | - colProps: { | ||
| 45 | - span: 12 | ||
| 46 | - } | ||
| 47 | - }, | ||
| 48 | - { | ||
| 49 | - label: '生成场景', | ||
| 50 | - field: 'scene', | ||
| 51 | - component: 'Select', | ||
| 52 | - componentProps: { | ||
| 53 | - options: sceneOptions | ||
| 54 | - }, | ||
| 55 | - colProps: { | ||
| 56 | - span: 12 | ||
| 57 | - } | ||
| 58 | - }, | ||
| 59 | - { | ||
| 60 | - label: '模块名', | ||
| 61 | - field: 'moduleName', | ||
| 62 | - component: 'Input', | ||
| 63 | - labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等', | ||
| 64 | - colProps: { | ||
| 65 | - span: 12 | ||
| 66 | - } | ||
| 67 | - }, | ||
| 68 | - { | ||
| 69 | - label: '业务名', | ||
| 70 | - field: 'businessName', | ||
| 71 | - component: 'Input', | ||
| 72 | - labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等', | ||
| 73 | - colProps: { | ||
| 74 | - span: 12 | ||
| 75 | - } | ||
| 76 | - }, | ||
| 77 | - { | ||
| 78 | - label: '类名称', | ||
| 79 | - field: 'className', | ||
| 80 | - component: 'Input', | ||
| 81 | - labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等', | ||
| 82 | - colProps: { | ||
| 83 | - span: 12 | ||
| 84 | - } | ||
| 85 | - }, | ||
| 86 | - { | ||
| 87 | - label: '类描述', | ||
| 88 | - field: 'classComment', | ||
| 89 | - component: 'Input', | ||
| 90 | - labelMessage: '用作类描述，例如 用户', | ||
| 91 | - colProps: { | ||
| 92 | - span: 12 | ||
| 93 | - } | ||
| 94 | - }, | ||
| 95 | - { | ||
| 96 | - label: '上级菜单', | ||
| 97 | - field: 'parentMenuId', | ||
| 98 | - component: 'TreeSelect', | ||
| 99 | - componentProps: { | ||
| 100 | - data: menuOptions, | ||
| 101 | - props: defaultProps, | ||
| 102 | - checkStrictly: true, | ||
| 103 | - nodeKey: 'id' | ||
| 104 | - }, | ||
| 105 | - labelMessage: '分配到指定菜单下，例如 系统管理', | ||
| 106 | - colProps: { | ||
| 107 | - span: 12 | ||
| 108 | - } | ||
| 109 | - } | ||
| 110 | -]) | ||
| 111 | -const { register, methods, elFormRef } = useForm({ | ||
| 112 | - schema | ||
| 113 | -}) | ||
| 114 | - | ||
| 115 | -// ========== 初始化 ========== | ||
| 116 | -onMounted(async () => { | ||
| 117 | - await getTree() | ||
| 118 | -}) | ||
| 119 | -watch( | ||
| 120 | - () => props.genInfo, | ||
| 121 | - (genInfo) => { | ||
| 122 | - if (!genInfo) return | ||
| 123 | - const { setValues } = methods | ||
| 124 | - setValues(genInfo) | ||
| 125 | - }, | ||
| 126 | - { | ||
| 127 | - deep: true, | ||
| 128 | - immediate: true | ||
| 129 | - } | ||
| 130 | -) | ||
| 131 | -defineExpose({ | ||
| 132 | - elFormRef, | ||
| 133 | - getFormData: methods.getFormData | ||
| 134 | -}) | ||
| 135 | -</script> |
yudao-ui-admin-vue3/src/views/infra/codegen/components/index.ts
| 1 | import BasicInfoForm from './BasicInfoForm.vue' | 1 | import BasicInfoForm from './BasicInfoForm.vue' |
| 2 | import CloumInfoForm from './CloumInfoForm.vue' | 2 | import CloumInfoForm from './CloumInfoForm.vue' |
| 3 | -import GenInfoForm from './GenInfoForm.vue' | ||
| 4 | import ImportTable from './ImportTable.vue' | 3 | import ImportTable from './ImportTable.vue' |
| 5 | import Preview from './Preview.vue' | 4 | import Preview from './Preview.vue' |
| 6 | -export { BasicInfoForm, CloumInfoForm, GenInfoForm, ImportTable, Preview } | 5 | +export { BasicInfoForm, CloumInfoForm, ImportTable, Preview } |