BasicInfoForm.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <Form :rules="rules" @register="register" />
  3. </template>
  4. <script setup lang="ts">
  5. import { PropType, reactive, watch } from 'vue'
  6. import { required } from '@/utils/formRules'
  7. import { useForm } from '@/hooks/web/useForm'
  8. import { Form } from '@/components/Form'
  9. import { FormSchema } from '@/types/form'
  10. import { CodegenTableVO } from '@/api/infra/codegen/types'
  11. const props = defineProps({
  12. basicInfo: {
  13. type: Object as PropType<Nullable<CodegenTableVO>>,
  14. default: () => null
  15. }
  16. })
  17. const rules = reactive({
  18. tableName: [required],
  19. tableComment: [required],
  20. className: [required],
  21. author: [required]
  22. })
  23. const schema = reactive<FormSchema[]>([
  24. {
  25. label: '表名称',
  26. field: 'tableName',
  27. component: 'Input',
  28. colProps: {
  29. span: 12
  30. }
  31. },
  32. {
  33. label: '表描述',
  34. field: 'tableComment',
  35. component: 'Input',
  36. colProps: {
  37. span: 12
  38. }
  39. },
  40. {
  41. label: '实体类名称',
  42. field: 'className',
  43. component: 'Input',
  44. colProps: {
  45. span: 12
  46. }
  47. },
  48. {
  49. label: '作者',
  50. field: 'author',
  51. component: 'Input',
  52. colProps: {
  53. span: 12
  54. }
  55. },
  56. {
  57. label: '备注',
  58. field: 'remark',
  59. component: 'Input',
  60. componentProps: {
  61. type: 'textarea',
  62. rows: 4
  63. },
  64. colProps: {
  65. span: 12
  66. }
  67. }
  68. ])
  69. const { register, methods, elFormRef } = useForm({
  70. schema
  71. })
  72. watch(
  73. () => props.basicInfo,
  74. (basicInfo) => {
  75. if (!basicInfo) return
  76. const { setValues } = methods
  77. setValues(basicInfo)
  78. },
  79. {
  80. deep: true,
  81. immediate: true
  82. }
  83. )
  84. defineExpose({
  85. elFormRef,
  86. getFormData: methods.getFormData
  87. })
  88. </script>