GenInfoForm.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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. onMounted(async () => {
  116. await getTree()
  117. })
  118. watch(
  119. () => props.genInfo,
  120. (genInfo) => {
  121. if (!genInfo) return
  122. const { setValues } = methods
  123. setValues(genInfo)
  124. },
  125. {
  126. deep: true,
  127. immediate: true
  128. }
  129. )
  130. defineExpose({
  131. elFormRef,
  132. getFormData: methods.getFormData
  133. })
  134. </script>