Skip to content

Commit 9aca49c

Browse files
YunaiVYunaiV
committed
代码生成：增加主子表 normal 模式的示例
1 parent bbc3761 commit 9aca49c

File tree

10 files changed

+402
-338
lines changed

10 files changed

+402
-338
lines changed

‎src/api/infra/demo/demo03/normal/index.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import request from '@/config/axios'
2+
3+
export interface Demo03StudentVO {
4+
id: number
5+
name: string
6+
sex: number
7+
birthday: Date
8+
description: string
9+
}
10+
11+
// 查询学生分页
12+
export const getDemo03StudentPage = async (params) => {
13+
return await request.get({ url: `/infra/demo03-student/page`, params })
14+
}
15+
16+
// 查询学生详情
17+
export const getDemo03Student = async (id: number) => {
18+
return await request.get({ url: `/infra/demo03-student/get?id=` + id })
19+
}
20+
21+
// 新增学生
22+
export const createDemo03Student = async (data: Demo03StudentVO) => {
23+
return await request.post({ url: `/infra/demo03-student/create`, data })
24+
}
25+
26+
// 修改学生
27+
export const updateDemo03Student = async (data: Demo03StudentVO) => {
28+
return await request.put({ url: `/infra/demo03-student/update`, data })
29+
}
30+
31+
// 删除学生
32+
export const deleteDemo03Student = async (id: number) => {
33+
return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
34+
}
35+
36+
// 导出学生 Excel
37+
export const exportDemo03Student = async (params) => {
38+
return await request.download({ url: `/infra/demo03-student/export-excel`, params })
39+
}
40+
41+
// ==================== 子表（学生课程） ====================
42+
43+
// 获得学生课程列表
44+
export const getDemo03CourseListByStudentId = async (studentId) => {
45+
return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
46+
}
47+
48+
// ==================== 子表（学生班级） ====================
49+
50+
// 获得学生班级
51+
export const getDemo03GradeByStudentId = async (studentId) => {
52+
return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
53+
}

‎src/views/infra/codegen/components/GenerateInfoForm.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183
</el-row>
184184

185185
<!-- 树表信息 -->
186-
<el-row v-show="formData.templateType == 2">
186+
<el-row v-if="formData.templateType == 2">
187187
<el-col :span="24">
188188
<h4 class="form-header">树表信息</h4>
189189
</el-col>

‎src/views/infra/demo/demo03/normal/Demo03StudentForm.vue

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="100px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="名字" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入名字" />
12+
</el-form-item>
13+
<el-form-item label="性别" prop="sex">
14+
<el-radio-group v-model="formData.sex">
15+
<el-radio
16+
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
17+
:key="dict.value"
18+
:label="dict.value"
19+
>
20+
{{ dict.label }}
21+
</el-radio>
22+
</el-radio-group>
23+
</el-form-item>
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+
/>
31+
</el-form-item>
32+
<el-form-item label="简介" prop="description">
33+
<Editor v-model="formData.description" height="150px" />
34+
</el-form-item>
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>
45+
<template #footer>
46+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
47+
<el-button @click="dialogVisible = false">取 消</el-button>
48+
</template>
49+
</Dialog>
50+
</template>
51+
<script setup lang="ts">
52+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
53+
import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
54+
import Demo03CourseForm from './components/Demo03CourseForm.vue'
55+
import Demo03GradeForm from './components/Demo03GradeForm.vue'
56+
57+
const { t } = useI18n() // 国际化
58+
const message = useMessage() // 消息弹窗
59+
60+
const dialogVisible = ref(false) // 弹窗的是否展示
61+
const dialogTitle = ref('') // 弹窗的标题
62+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
63+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
64+
const formData = ref({
65+
id: undefined,
66+
name: undefined,
67+
sex: undefined,
68+
birthday: undefined,
69+
description: undefined
70+
})
71+
const formRules = reactive({
72+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
73+
sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
74+
birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
75+
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
76+
})
77+
const formRef = ref() // 表单 Ref
78+
79+
/** 子表的表单 */
80+
const subTabsName = ref('demo03Course')
81+
const demo03CourseFormRef = ref()
82+
const demo03GradeFormRef = ref()
83+
84+
/** 打开弹窗 */
85+
const open = async (type: string, id?: number) => {
86+
dialogVisible.value = true
87+
dialogTitle.value = t('action.' + type)
88+
formType.value = type
89+
resetForm()
90+
// 修改时，设置数据
91+
if (id) {
92+
formLoading.value = true
93+
try {
94+
formData.value = await Demo03StudentApi.getDemo03Student(id)
95+
} finally {
96+
formLoading.value = false
97+
}
98+
}
99+
}
100+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
101+
102+
/** 提交表单 */
103+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
104+
const submitForm = async () => {
105+
// 校验表单
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+
// 提交请求
121+
formLoading.value = true
122+
try {
123+
const data = formData.value as unknown as Demo03StudentApi.Demo03StudentVO
124+
// 拼接子表的数据
125+
data.demo03Courses = demo03CourseFormRef.value.getData()
126+
data.demo03Grade = demo03GradeFormRef.value.getData()
127+
if (formType.value === 'create') {
128+
await Demo03StudentApi.createDemo03Student(data)
129+
message.success(t('common.createSuccess'))
130+
} else {
131+
await Demo03StudentApi.updateDemo03Student(data)
132+
message.success(t('common.updateSuccess'))
133+
}
134+
dialogVisible.value = false
135+
// 发送操作成功的事件
136+
emit('success')
137+
} finally {
138+
formLoading.value = false
139+
}
140+
}
141+
142+
/** 重置表单 */
143+
const resetForm = () => {
144+
formData.value = {
145+
id: undefined,
146+
name: undefined,
147+
sex: undefined,
148+
birthday: undefined,
149+
description: undefined
150+
}
151+
formRef.value?.resetFields()
152+
}
153+
</script>

‎src/views/infra/demo03/DemoStudentContactForm.vue renamed to ‎src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
ref="formRef"
44
:model="formData"
55
:rules="formRules"
6-
label-width="0px"
76
v-loading="formLoading"
7+
label-width="0px"
88
:inline-message="true"
99
>
1010
<el-table :data="formData" class="-mt-10px">
1111
<el-table-column label="序号" type="index" width="100" />
12-
<el-table-column label="名字" prop="name" width="300">
13-
<template #default="row">
14-
<el-form-item class="mb-0px!">
12+
<el-table-column label="名字" min-width="150">
13+
<template #default="{ row, $index }">
14+
<el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
1515
<el-input v-model="row.name" placeholder="请输入名字" />
1616
</el-form-item>
1717
</template>
1818
</el-table-column>
19-
<el-table-column label="手机号码">
19+
<el-table-column label="分数" min-width="150">
2020
<template #default="{ row, $index }">
21-
<el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
22-
<el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
21+
<el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
22+
<el-input v-model="row.score" placeholder="请输入分数" />
2323
</el-form-item>
2424
</template>
2525
</el-table-column>
@@ -31,43 +31,54 @@
3131
</el-table>
3232
</el-form>
3333
<el-row justify="center" class="mt-3">
34-
<el-button @click="handleAdd" round>+ 添加联系人</el-button>
34+
<el-button @click="handleAdd" round>+ 添加学生课程</el-button>
3535
</el-row>
3636
</template>
3737
<script setup lang="ts">
38+
import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
39+
3840
const props = defineProps<{
39-
studentId: undefined // 学生编号
41+
studentId: undefined // 学生编号（主表的关联字段）
4042
}>()
4143
const formLoading = ref(false) // 表单的加载中
4244
const formData = ref([])
4345
const formRules = reactive({
44-
mobile: [required]
46+
studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
47+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
48+
score: [{ required: true, message: '分数不能为空', trigger: 'blur' }]
4549
})
4650
const formRef = ref() // 表单 Ref
4751
4852
/** 监听主表的关联字段的变化，加载对应的子表数据 */
4953
watch(
5054
() => props.studentId,
51-
(val) => {
52-
if (val) {
53-
formData.value = [
54-
{
55-
name: '芋艿',
56-
mobile: '15601691300'
57-
}
58-
]
59-
} else {
60-
formData.value = []
55+
async (val) => {
56+
// 1. 重置表单
57+
formData.value = []
58+
// 2. val 非空，则加载数据
59+
if (!val) {
60+
return;
61+
}
62+
try {
63+
formLoading.value = true
64+
formData.value = await Demo03StudentApi.getDemo03CourseListByStudentId(val)
65+
} finally {
66+
formLoading.value = false
6167
}
6268
},
6369
{ immediate: true }
6470
)
6571
6672
/** 新增按钮操作 */
6773
const handleAdd = () => {
68-
formData.value.push({
69-
name: '土豆'
70-
})
74+
const row = {
75+
id: undefined,
76+
studentId: undefined,
77+
name: undefined,
78+
score: undefined
79+
}
80+
row.studentId = props.studentId
81+
formData.value.push(row)
7182
}
7283
7384
/** 删除按钮操作 */
@@ -80,10 +91,10 @@ const validate = () => {
8091
return formRef.value.validate()
8192
}
8293
83-
/** 表单值 **/
94+
/** 表单值 */
8495
const getData = () => {
8596
return formData.value
8697
}
8798
8899
defineExpose({ validate, getData })
89-
</script>
100+
</script>

0 commit comments

Comments
 (0)