Skip to content

Commit 999d8de

Browse files
YunaiVYunaiV
committed
代码生成：增加主子表（内嵌）的示例
1 parent f0f7886 commit 999d8de

File tree

8 files changed

+637
-0
lines changed

8 files changed

+637
-0
lines changed

‎src/api/infra/demo12/index.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import request from '@/config/axios'
2+
3+
export interface Demo12StudentVO {
4+
id: number
5+
name: string
6+
description: string
7+
birthday: Date
8+
sex: number
9+
enabled: boolean
10+
avatar: string
11+
video: string
12+
memo: string
13+
}
14+
15+
// 查询学生列表
16+
export const getDemo12StudentPage = async (params) => {
17+
return await request.get({ url: `/infra/demo12-student/page`, params })
18+
}
19+
20+
// 查询学生详情
21+
export const getDemo12Student = async (id: number) => {
22+
return await request.get({ url: `/infra/demo12-student/get?id=` + id })
23+
}
24+
25+
// 新增学生
26+
export const createDemo12Student = async (data: Demo12StudentVO) => {
27+
return await request.post({ url: `/infra/demo12-student/create`, data })
28+
}
29+
30+
// 修改学生
31+
export const updateDemo12Student = async (data: Demo12StudentVO) => {
32+
return await request.put({ url: `/infra/demo12-student/update`, data })
33+
}
34+
35+
// 删除学生
36+
export const deleteDemo12Student = async (id: number) => {
37+
return await request.delete({ url: `/infra/demo12-student/delete?id=` + id })
38+
}
39+
40+
// 导出学生 Excel
41+
export const exportDemo12Student = async (params) => {
42+
return await request.download({ url: `/infra/demo12-student/export-excel`, params })
43+
}
44+
45+
// ==================== 子表（学生联系人） ====================
46+
47+
// 获得学生联系人列表
48+
export const getDemo12StudentContactListByStudentId = async (studentId) => {
49+
return await request.get({ url: `/infra/demo12-student/demo12-student/list-by-student-id?studentId=` + studentId })
50+
}
51+
52+
// ==================== 子表（学生班主任） ====================
53+
54+
// 获得学生班主任
55+
export const getDemo12StudentTeacherByStudentId = async (studentId) => {
56+
return await request.get({ url: `/infra/demo12-student/demo12-student/get-by-student-id?studentId=` + studentId })
57+
}

‎src/views/infra/demo11/components/Demo11StudentContactForm.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@
8585
</el-form-item>
8686
</template>
8787
</el-table-column>
88+
<el-table-column align="center" fixed="right" label="操作" width="60">
89+
<template #default="{ $index }">
90+
<el-button @click="handleDelete($index)" link>—</el-button>
91+
</template>
92+
</el-table-column>
8893
</el-table>
8994
</el-form>
9095
<el-row justify="center" class="mt-3">

‎src/views/infra/demo12/Demo12StudentForm.vue

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
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="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+
<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">
36+
<el-radio
37+
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
38+
:key="dict.value"
39+
:label="dict.value"
40+
>
41+
{{ dict.label }}
42+
</el-radio>
43+
</el-radio-group>
44+
</el-form-item>
45+
<el-form-item label="头像">
46+
<UploadImg v-model="formData.avatar" />
47+
</el-form-item>
48+
<el-form-item label="附件" prop="video">
49+
<UploadFile v-model="formData.video" />
50+
</el-form-item>
51+
<el-form-item label="备注" prop="memo">
52+
<Editor v-model="formData.memo" height="150px" />
53+
</el-form-item>
54+
</el-form>
55+
<!-- 子表的表单 -->
56+
<el-tabs v-model="subTabsName">
57+
<el-tab-pane label="学生联系人" name="demo12StudentContact">
58+
<Demo12StudentContactForm ref="demo12StudentContactFormRef" :student-id="formData.id" />
59+
</el-tab-pane>
60+
<el-tab-pane label="学生班主任" name="demo12StudentTeacher">
61+
<Demo12StudentTeacherForm ref="demo12StudentTeacherFormRef" :student-id="formData.id" />
62+
</el-tab-pane>
63+
</el-tabs>
64+
<template #footer>
65+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
66+
<el-button @click="dialogVisible = false">取 消</el-button>
67+
</template>
68+
</Dialog>
69+
</template>
70+
<script setup lang="ts">
71+
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
72+
import * as Demo12StudentApi from '@/api/infra/demo12'
73+
import Demo12StudentContactForm from './components/Demo12StudentContactForm.vue'
74+
import Demo12StudentTeacherForm from './components/Demo12StudentTeacherForm.vue'
75+
76+
const { t } = useI18n() // 国际化
77+
const message = useMessage() // 消息弹窗
78+
79+
const dialogVisible = ref(false) // 弹窗的是否展示
80+
const dialogTitle = ref('') // 弹窗的标题
81+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
82+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
83+
const formData = ref({
84+
id: undefined,
85+
name: undefined,
86+
description: undefined,
87+
birthday: undefined,
88+
sex: undefined,
89+
enabled: undefined,
90+
avatar: undefined,
91+
video: undefined,
92+
memo: undefined
93+
})
94+
const formRules = reactive({
95+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
96+
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
97+
birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
98+
sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
99+
enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
100+
avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
101+
memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
102+
})
103+
const formRef = ref() // 表单 Ref
104+
105+
/** 子表的表单 */
106+
const subTabsName = ref('demo12StudentContact')
107+
const demo12StudentContactFormRef = ref()
108+
const demo12StudentTeacherFormRef = ref()
109+
110+
/** 打开弹窗 */
111+
const open = async (type: string, id?: number) => {
112+
dialogVisible.value = true
113+
dialogTitle.value = t('action.' + type)
114+
formType.value = type
115+
resetForm()
116+
// 修改时，设置数据
117+
if (id) {
118+
formLoading.value = true
119+
try {
120+
formData.value = await Demo12StudentApi.getDemo12Student(id)
121+
} finally {
122+
formLoading.value = false
123+
}
124+
}
125+
}
126+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
127+
128+
/** 提交表单 */
129+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
130+
const submitForm = async () => {
131+
// 校验表单
132+
await formRef.value.validate()
133+
// 校验子表单
134+
try {
135+
await demo12StudentContactFormRef.value.validate()
136+
} catch (e) {
137+
subTabsName.value = 'demo12StudentContact'
138+
return
139+
}
140+
try {
141+
await demo12StudentTeacherFormRef.value.validate()
142+
} catch (e) {
143+
subTabsName.value = 'demo12StudentTeacher'
144+
return
145+
}
146+
// 提交请求
147+
formLoading.value = true
148+
try {
149+
const data = formData.value as unknown as Demo12StudentApi.Demo12StudentVO
150+
// 拼接子表的数据
151+
data.demo12StudentContacts = demo12StudentContactFormRef.value.getData()
152+
data.demo12StudentTeacher = demo12StudentTeacherFormRef.value.getData()
153+
if (formType.value === 'create') {
154+
await Demo12StudentApi.createDemo12Student(data)
155+
message.success(t('common.createSuccess'))
156+
} else {
157+
await Demo12StudentApi.updateDemo12Student(data)
158+
message.success(t('common.updateSuccess'))
159+
}
160+
dialogVisible.value = false
161+
// 发送操作成功的事件
162+
emit('success')
163+
} finally {
164+
formLoading.value = false
165+
}
166+
}
167+
168+
/** 重置表单 */
169+
const resetForm = () => {
170+
formData.value = {
171+
id: undefined,
172+
name: undefined,
173+
description: undefined,
174+
birthday: undefined,
175+
sex: undefined,
176+
enabled: undefined,
177+
avatar: undefined,
178+
video: undefined,
179+
memo: undefined
180+
}
181+
formRef.value?.resetFields()
182+
}
183+
</script>

‎src/views/infra/demo12/components/Demo12StudentContactForm.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>123</div>
3+
</template>
4+
<script setup lang="ts">
5+
</script>

‎src/views/infra/demo12/components/Demo12StudentContactList.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<!-- 列表 -->
3+
<ContentWrap>
4+
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
5+
<el-table-column label="编号" align="center" prop="id" />
6+
<el-table-column label="学生编号" align="center" prop="studentId" />
7+
<el-table-column label="名字" align="center" prop="name" />
8+
<el-table-column label="简介" align="center" prop="description" />
9+
<el-table-column
10+
label="出生日期"
11+
align="center"
12+
prop="birthday"
13+
:formatter="dateFormatter"
14+
width="180px"
15+
/>
16+
<el-table-column label="性别" align="center" prop="sex">
17+
<template #default="scope">
18+
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
19+
</template>
20+
</el-table-column>
21+
<el-table-column label="是否有效" align="center" prop="enabled">
22+
<template #default="scope">
23+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
24+
</template>
25+
</el-table-column>
26+
<el-table-column label="头像" align="center" prop="avatar" />
27+
<el-table-column label="附件" align="center" prop="video" />
28+
<el-table-column label="备注" align="center" prop="memo" />
29+
<el-table-column
30+
label="创建时间"
31+
align="center"
32+
prop="createTime"
33+
:formatter="dateFormatter"
34+
width="180px"
35+
/>
36+
</el-table>
37+
</ContentWrap>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { DICT_TYPE } from '@/utils/dict'
42+
import * as Demo12StudentApi from '@/api/infra/demo12'
43+
const props = defineProps<{
44+
studentId: undefined // 学生编号（主表的关联字段）
45+
}>()
46+
const loading = ref(true) // 列表的加载中
47+
const list = ref([]) // 列表的数据
48+
49+
/** 查询列表 */
50+
const getList = async () => {
51+
loading.value = true
52+
try {
53+
list.value = await Demo12StudentApi.getDemo12StudentContactListByStudentId(studentId.props)
54+
} finally {
55+
loading.value = false
56+
}
57+
}
58+
59+
/** 初始化 **/
60+
onMounted(() => {
61+
getList()
62+
})
63+
</script>

‎src/views/infra/demo12/components/Demo12StudentTeacherForm.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>123</div>
3+
</template>
4+
<script setup lang="ts">
5+
</script>

0 commit comments

Comments
 (0)