Skip to content

Commit f0f7886

Browse files
YunaiVYunaiV
committed
代码生成：增加主子表（普通）的示例
1 parent 72c5eaa commit f0f7886

File tree

6 files changed

+786
-2
lines changed

6 files changed

+786
-2
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module.exports = defineConfig({
2121
'plugin:vue/vue3-recommended',
2222
'plugin:@typescript-eslint/recommended',
2323
'prettier',
24-
'plugin:prettier/recommended',
24+
'plugin:prettier/recommended',
2525
'@unocss'
2626
],
2727
rules: {
@@ -67,6 +67,7 @@ module.exports = defineConfig({
6767
}
6868
],
6969
'vue/multi-word-component-names': 'off',
70-
'vue/no-v-html': 'off'
70+
'vue/no-v-html': 'off',
71+
'prettier/prettier': 'off' // 芋艿：默认关闭 prettier 的 ESLint 校验，因为我们使用的是 IDE 的 Prettier 插件
7172
}
7273
})

‎src/api/infra/demo11/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 Demo11StudentVO {
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 getDemo11StudentPage = async (params) => {
17+
return await request.get({ url: `/infra/demo11-student/page`, params })
18+
}
19+
20+
// 查询学生详情
21+
export const getDemo11Student = async (id: number) => {
22+
return await request.get({ url: `/infra/demo11-student/get?id=` + id })
23+
}
24+
25+
// 新增学生
26+
export const createDemo11Student = async (data: Demo11StudentVO) => {
27+
return await request.post({ url: `/infra/demo11-student/create`, data })
28+
}
29+
30+
// 修改学生
31+
export const updateDemo11Student = async (data: Demo11StudentVO) => {
32+
return await request.put({ url: `/infra/demo11-student/update`, data })
33+
}
34+
35+
// 删除学生
36+
export const deleteDemo11Student = async (id: number) => {
37+
return await request.delete({ url: `/infra/demo11-student/delete?id=` + id })
38+
}
39+
40+
// 导出学生 Excel
41+
export const exportDemo11Student = async (params) => {
42+
return await request.download({ url: `/infra/demo11-student/export-excel`, params })
43+
}
44+
45+
// ==================== 子表（学生联系人） ====================
46+
47+
// 获得学生联系人列表
48+
export const getDemo11StudentContactListByStudentId = async (studentId) => {
49+
return await request.get({ url: `/infra/demo11-student/demo11-student/list-by-student-id?studentId=` + studentId })
50+
}
51+
52+
// ==================== 子表（学生班主任） ====================
53+
54+
// 获得学生班主任
55+
export const getDemo11StudentTeacherByStudentId = async (studentId) => {
56+
return await request.get({ url: `/infra/demo11-student/demo11-student/get-by-student-id?studentId=` + studentId })
57+
}

‎src/views/infra/demo11/Demo11StudentForm.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="demo11StudentContact">
58+
<Demo11StudentContactForm ref="demo11StudentContactFormRef" :student-id="formData.id" />
59+
</el-tab-pane>
60+
<el-tab-pane label="学生班主任" name="demo11StudentTeacher">
61+
<Demo11StudentTeacherForm ref="demo11StudentTeacherFormRef" :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 Demo11StudentApi from '@/api/infra/demo11'
73+
import Demo11StudentContactForm from './components/Demo11StudentContactForm.vue'
74+
import Demo11StudentTeacherForm from './components/Demo11StudentTeacherForm.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('demo11StudentContact')
107+
const demo11StudentContactFormRef = ref()
108+
const demo11StudentTeacherFormRef = 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 Demo11StudentApi.getDemo11Student(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 demo11StudentContactFormRef.value.validate()
136+
} catch (e) {
137+
subTabsName.value = 'demo11StudentContact'
138+
return
139+
}
140+
try {
141+
await demo11StudentTeacherFormRef.value.validate()
142+
} catch (e) {
143+
subTabsName.value = 'demo11StudentTeacher'
144+
return
145+
}
146+
// 提交请求
147+
formLoading.value = true
148+
try {
149+
const data = formData.value as unknown as Demo11StudentApi.Demo11StudentVO
150+
// 拼接子表的数据
151+
data.demo11StudentContacts = demo11StudentContactFormRef.value.getData()
152+
data.demo11StudentTeacher = demo11StudentTeacherFormRef.value.getData()
153+
if (formType.value === 'create') {
154+
await Demo11StudentApi.createDemo11Student(data)
155+
message.success(t('common.createSuccess'))
156+
} else {
157+
await Demo11StudentApi.updateDemo11Student(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>

0 commit comments

Comments
 (0)