10
10
<el-form-item label =" 名字" prop =" name" >
11
11
<el-input v-model =" formData.name" placeholder =" 请输入名字" />
12
12
</el-form-item >
13
- <el-form-item label =" 简介" prop =" description" >
14
- <el-input v-model =" formData.description" type =" textarea" placeholder =" 请输入简介" />
15
- </el-form-item >
16
- <el-form-item label =" 出生日期" prop =" birthday" >
17
- <el-date-picker
18
- v-model =" formData.birthday"
19
- type =" date"
20
- value-format =" x"
21
- placeholder =" 选择出生日期"
22
- />
23
- </el-form-item >
24
13
<el-form-item label =" 性别" prop =" sex" >
25
- <el-select v-model =" formData.sex" placeholder =" 请选择性别" >
26
- <el-option
27
- v-for =" dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
28
- :key =" dict.value"
29
- :label =" dict.label"
30
- :value =" dict.value"
31
- />
32
- </el-select >
33
- </el-form-item >
34
- <el-form-item label =" 是否有效" prop =" enabled" >
35
- <el-radio-group v-model =" formData.enabled" >
14
+ <el-radio-group v-model =" formData.sex" >
36
15
<el-radio
37
- v-for =" dict in getBoolDictOptions (DICT_TYPE.INFRA_BOOLEAN_STRING )"
16
+ v-for =" dict in getIntDictOptions (DICT_TYPE.SYSTEM_USER_SEX )"
38
17
:key =" dict.value"
39
18
:label =" dict.value"
40
19
>
41
20
{{ dict.label }}
42
21
</el-radio >
43
22
</el-radio-group >
44
23
</el-form-item >
45
- <el-form-item label =" 头像" prop =" avatar" >
46
- <UploadImg v-model =" formData.avatar" />
47
- </el-form-item >
48
- <el-form-item label =" 附件" prop =" video" >
49
- <UploadFile v-model =" formData.video" />
24
+ <el-form-item label =" 出生日期" prop =" birthday" >
25
+ <el-date-picker
26
+ v-model =" formData.birthday"
27
+ type =" date"
28
+ value-format =" x"
29
+ placeholder =" 选择出生日期"
30
+ />
50
31
</el-form-item >
51
- <el-form-item label =" 备注 " prop =" memo " >
52
- <Editor v-model =" formData.memo " height =" 150px" />
32
+ <el-form-item label =" 简介 " prop =" description " >
33
+ <Editor v-model =" formData.description " height =" 150px" />
53
34
</el-form-item >
54
35
</el-form >
36
+ <!-- 子表的表单 -->
37
+ <el-tabs v-model =" subTabsName" >
38
+ <el-tab-pane label =" 学生课程" name =" demo03Course" >
39
+ <Demo03CourseForm ref =" demo03CourseFormRef" :student-id =" formData.id" />
40
+ </el-tab-pane >
41
+ <el-tab-pane label =" 学生班级" name =" demo03Grade" >
42
+ <Demo03GradeForm ref =" demo03GradeFormRef" :student-id =" formData.id" />
43
+ </el-tab-pane >
44
+ </el-tabs >
55
45
<template #footer >
56
46
<el-button @click =" submitForm" type =" primary" :disabled =" formLoading" >确 定</el-button >
57
47
<el-button @click =" dialogVisible = false" >取 消</el-button >
58
48
</template >
59
49
</Dialog >
60
50
</template >
61
51
<script setup lang="ts">
62
- import { getIntDictOptions , getBoolDictOptions , DICT_TYPE } from ' @/utils/dict'
63
- import * as Demo12StudentApi from ' @/api/infra/demo12'
52
+ import { getIntDictOptions , DICT_TYPE } from ' @/utils/dict'
53
+ import * as Demo03StudentApi from ' @/api/infra/demo/demo03/inner'
54
+ import Demo03CourseForm from ' ./components/Demo03CourseForm.vue'
55
+ import Demo03GradeForm from ' ./components/Demo03GradeForm.vue'
64
56
65
57
const { t } = useI18n () // 国际化
66
58
const message = useMessage () // 消息弹窗
@@ -71,40 +63,35 @@ const formLoading = ref(false) // 表单的加载中:1)修改时的数据加
71
63
const formType = ref (' ' ) // 表单的类型:create - 新增;update - 修改
72
64
const formData = ref ({
73
65
id: undefined ,
74
- studentId: undefined ,
75
66
name: undefined ,
76
- description: undefined ,
77
- birthday: undefined ,
78
67
sex: undefined ,
79
- enabled: undefined ,
80
- avatar: undefined ,
81
- video: undefined ,
82
- memo: undefined
68
+ birthday: undefined ,
69
+ description: undefined
83
70
})
84
71
const formRules = reactive ({
85
- studentId: [{ required: true , message: ' 学生编号不能为空' , trigger: ' blur' }],
86
72
name: [{ required: true , message: ' 名字不能为空' , trigger: ' blur' }],
87
- description : [{ required: true , message: ' 简介不能为空 ' , trigger: ' blur' }],
73
+ sex : [{ required: true , message: ' 性别不能为空 ' , trigger: ' blur' }],
88
74
birthday: [{ required: true , message: ' 出生日期不能为空' , trigger: ' blur' }],
89
- sex: [{ required: true , message: ' 性别不能为空' , trigger: ' change' }],
90
- enabled: [{ required: true , message: ' 是否有效不能为空' , trigger: ' blur' }],
91
- avatar: [{ required: true , message: ' 头像不能为空' , trigger: ' blur' }],
92
- memo: [{ required: true , message: ' 备注不能为空' , trigger: ' blur' }]
75
+ description: [{ required: true , message: ' 简介不能为空' , trigger: ' blur' }]
93
76
})
94
77
const formRef = ref () // 表单 Ref
95
78
79
+ /** 子表的表单 */
80
+ const subTabsName = ref (' demo03Course' )
81
+ const demo03CourseFormRef = ref ()
82
+ const demo03GradeFormRef = ref ()
83
+
96
84
/** 打开弹窗 */
97
- const open = async (type : string , id ? : number , studentId : number ) => {
85
+ const open = async (type : string , id ? : number ) => {
98
86
dialogVisible .value = true
99
87
dialogTitle .value = t (' action.' + type )
100
88
formType .value = type
101
89
resetForm ()
102
- formData .value .studentId = studentId
103
90
// 修改时,设置数据
104
91
if (id ) {
105
92
formLoading .value = true
106
93
try {
107
- formData .value = await Demo12StudentApi . getDemo12StudentContact (id )
94
+ formData .value = await Demo03StudentApi . getDemo03Student (id )
108
95
} finally {
109
96
formLoading .value = false
110
97
}
@@ -117,15 +104,31 @@ const emit = defineEmits(['success']) // 定义 success 事件,用于操作成
117
104
const submitForm = async () => {
118
105
// 校验表单
119
106
await formRef .value .validate ()
107
+ // 校验子表单
108
+ try {
109
+ await demo03CourseFormRef .value .validate ()
110
+ } catch (e ) {
111
+ subTabsName .value = ' demo03Course'
112
+ return
113
+ }
114
+ try {
115
+ await demo03GradeFormRef .value .validate ()
116
+ } catch (e ) {
117
+ subTabsName .value = ' demo03Grade'
118
+ return
119
+ }
120
120
// 提交请求
121
121
formLoading .value = true
122
122
try {
123
- const data = formData .value
123
+ const data = formData .value as unknown as Demo03StudentApi .Demo03StudentVO
124
+ // 拼接子表的数据
125
+ data .demo03Courses = demo03CourseFormRef .value .getData ()
126
+ data .demo03Grade = demo03GradeFormRef .value .getData ()
124
127
if (formType .value === ' create' ) {
125
- await Demo12StudentApi . createDemo12StudentContact (data )
128
+ await Demo03StudentApi . createDemo03Student (data )
126
129
message .success (t (' common.createSuccess' ))
127
130
} else {
128
- await Demo12StudentApi . updateDemo12StudentContact (data )
131
+ await Demo03StudentApi . updateDemo03Student (data )
129
132
message .success (t (' common.updateSuccess' ))
130
133
}
131
134
dialogVisible .value = false
@@ -140,15 +143,10 @@ const submitForm = async () => {
140
143
const resetForm = () => {
141
144
formData .value = {
142
145
id: undefined ,
143
- studentId: undefined ,
144
146
name: undefined ,
145
- description: undefined ,
146
- birthday: undefined ,
147
147
sex: undefined ,
148
- enabled: undefined ,
149
- avatar: undefined ,
150
- video: undefined ,
151
- memo: undefined
148
+ birthday: undefined ,
149
+ description: undefined
152
150
}
153
151
formRef .value ?.resetFields ()
154
152
}
0 commit comments