Skip to content

Commit 97edab4

Browse files
author
puhui999
committed
代码生成：新增主子表（标准模式）生成示例
1 parent 691ac8d commit 97edab4

File tree

6 files changed

+634
-3
lines changed

6 files changed

+634
-3
lines changed

‎src/api/infra/demo03-normal.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import request from '@/utils/request'
2+
3+
// 创建学生
4+
export function createDemo03Student(data) {
5+
return request({
6+
url: '/infra/demo03-student/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 更新学生
13+
export function updateDemo03Student(data) {
14+
return request({
15+
url: '/infra/demo03-student/update',
16+
method: 'put',
17+
data: data
18+
})
19+
}
20+
21+
// 删除学生
22+
export function deleteDemo03Student(id) {
23+
return request({
24+
url: '/infra/demo03-student/delete?id=' + id,
25+
method: 'delete'
26+
})
27+
}
28+
29+
// 获得学生
30+
export function getDemo03Student(id) {
31+
return request({
32+
url: '/infra/demo03-student/get?id=' + id,
33+
method: 'get'
34+
})
35+
}
36+
37+
// 获得学生分页
38+
export function getDemo03StudentPage(params) {
39+
return request({
40+
url: '/infra/demo03-student/page',
41+
method: 'get',
42+
params
43+
})
44+
}
45+
// 导出学生 Excel
46+
export function exportDemo03StudentExcel(params) {
47+
return request({
48+
url: '/infra/demo03-student/export-excel',
49+
method: 'get',
50+
params,
51+
responseType: 'blob'
52+
})
53+
}
54+
55+
// ==================== 子表（学生课程） ====================
56+
57+
// 获得学生课程列表
58+
export function getDemo03CourseListByStudentId(studentId) {
59+
return request({
60+
url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId,
61+
method: 'get'
62+
})
63+
}
64+
65+
// ==================== 子表（学生班级） ====================
66+
67+
// 获得学生班级
68+
export function getDemo03GradeByStudentId(studentId) {
69+
return request({
70+
url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId,
71+
method: 'get'
72+
})
73+
}

‎src/views/infra/demo/demo02/index.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,6 @@
6464
</template>
6565
</el-table-column>
6666
</el-table>
67-
<!-- 分页组件 -->
68-
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
69-
@pagination="getList"/>
7067

7168
<!-- 对话框(添加 / 修改) -->
7269
<Demo02CategoryForm ref="formRef" @success="getList" />

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

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<template>
2+
<div class="app-container">
3+
<!-- 对话框(添加 / 修改) -->
4+
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
5+
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
6+
<el-form-item label="名字" prop="name">
7+
<el-input v-model="formData.name" placeholder="请输入名字" />
8+
</el-form-item>
9+
<el-form-item label="性别" prop="sex">
10+
<el-radio-group v-model="formData.sex">
11+
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
12+
:key="dict.value" :label="parseInt(dict.value)"
13+
>{{dict.label}}</el-radio>
14+
</el-radio-group>
15+
</el-form-item>
16+
<el-form-item label="出生日期" prop="birthday">
17+
<el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
18+
</el-form-item>
19+
<el-form-item label="简介">
20+
<Editor v-model="formData.description" :min-height="192"/>
21+
</el-form-item>
22+
</el-form>
23+
<!-- 子表的表单 -->
24+
<el-tabs v-model="subTabsName">
25+
<el-tab-pane label="学生课程" name="demo03Course">
26+
<Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData.id" />
27+
</el-tab-pane>
28+
<el-tab-pane label="学生班级" name="demo03Grade">
29+
<Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData.id" />
30+
</el-tab-pane>
31+
</el-tabs>
32+
<div slot="footer" class="dialog-footer">
33+
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
34+
<el-button @click="dialogVisible = false">取 消</el-button>
35+
</div>
36+
</el-dialog>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import * as Demo03StudentApi from '@/api/infra/demo03-normal'
42+
import Editor from '@/components/Editor';
43+
import Demo03CourseForm from './components/Demo03CourseForm.vue'
44+
import Demo03GradeForm from './components/Demo03GradeForm.vue'
45+
export default {
46+
name: "Demo03StudentForm",
47+
components: {
48+
Editor,
49+
Demo03CourseForm,
50+
Demo03GradeForm,
51+
},
52+
data() {
53+
return {
54+
// 弹出层标题
55+
dialogTitle: "",
56+
// 是否显示弹出层
57+
dialogVisible: false,
58+
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
59+
formLoading: false,
60+
// 表单参数
61+
formData: {
62+
id: undefined,
63+
name: undefined,
64+
sex: undefined,
65+
birthday: undefined,
66+
description: undefined,
67+
},
68+
// 表单校验
69+
formRules: {
70+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
71+
sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
72+
birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
73+
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
74+
},
75+
/** 子表的表单 */
76+
subTabsName: 'demo03Course'
77+
};
78+
},
79+
methods: {
80+
/** 打开弹窗 */
81+
open(id) {
82+
this.dialogVisible = true;
83+
this.reset();
84+
const that = this;
85+
// 修改时，设置数据
86+
if (id) {
87+
this.formLoading = true;
88+
try {
89+
Demo03StudentApi.getDemo03Student(id).then(res=>{
90+
that.formData = res.data;
91+
that.title = "修改学生";
92+
})
93+
} finally {
94+
this.formLoading = false;
95+
}
96+
}
97+
this.title = "新增学生";
98+
},
99+
/** 提交按钮 */
100+
submitForm() {
101+
this.formLoading = true;
102+
try {
103+
const that = this;
104+
let data = this.formData;
105+
let validate = false;
106+
// 校验主表
107+
this.getRef("formRef").validate(valid => {
108+
validate = valid;
109+
});
110+
// 校验子表
111+
this.validateSubFrom01().then(() => {
112+
// 全部校验通过-拼接子表的数据
113+
// 拼接子表的数据
114+
data.demo03Courses = that.getRef('demo03CourseFormRef').getData();
115+
data.demo03Grade = that.getRef('demo03GradeFormRef').getData();
116+
}).catch((err) => {
117+
validate = false;
118+
that.subTabsName = err.replace("FormRef", ""); // 定位到没有校验通过的子表单
119+
})
120+
// 所有表单校验通过后方可提交
121+
if (!validate) {
122+
return;
123+
}
124+
// 修改的提交
125+
if (data.id) {
126+
Demo03StudentApi.updateDemo03Student(data).then(response => {
127+
that.$modal.msgSuccess("修改成功");
128+
that.dialogVisible = false;
129+
that.$emit('success');
130+
});
131+
return;
132+
}
133+
// 添加的提交
134+
Demo03StudentApi.createDemo03Student(data).then(response => {
135+
that.$modal.msgSuccess("新增成功");
136+
that.dialogVisible = false;
137+
that.$emit('success');
138+
});
139+
}finally {
140+
this.formLoading = false;
141+
}
142+
},
143+
getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
144+
return this.$refs[refName];
145+
},
146+
/** 校验子表单 */
147+
validateSubFrom(item) {
148+
return new Promise((resolve, reject) => {
149+
this.getRef(item).validate()
150+
.then(() => {
151+
resolve();
152+
})
153+
.catch(() => {
154+
reject(item);
155+
})
156+
})
157+
},
158+
/** 校验所有子表单 */
159+
validateSubFrom01() {
160+
// 需要校验的表单 ref
161+
const validFormRefArr = [
162+
"demo03CourseFormRef",
163+
"demo03GradeFormRef",
164+
];
165+
const validArr = []; // 校验
166+
for (const item of validFormRefArr) {
167+
validArr.push(this.validateSubFrom(item));
168+
}
169+
return new Promise((resolve, reject) => {
170+
// 校验所有
171+
Promise.all(validArr).then(() => {
172+
resolve();
173+
}).catch((err) => {
174+
reject(err);
175+
})
176+
})
177+
},
178+
/** 表单重置 */
179+
reset() {
180+
this.formData = {
181+
id: undefined,
182+
name: undefined,
183+
sex: undefined,
184+
birthday: undefined,
185+
description: undefined,
186+
};
187+
this.resetForm("formRef");
188+
},
189+
}
190+
};
191+
</script>

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="app-container">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
v-loading="formLoading"
8+
label-width="0px"
9+
:inline-message="true"
10+
>
11+
<el-table :data="formData" class="-mt-10px">
12+
<el-table-column label="序号" type="index" width="100"/>
13+
<el-table-column label="名字" min-width="150">
14+
<template v-slot="{ row, $index }">
15+
<el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
16+
<el-input v-model="row.name" placeholder="请输入名字"/>
17+
</el-form-item>
18+
</template>
19+
</el-table-column>
20+
<el-table-column label="分数" min-width="150">
21+
<template v-slot="{ row, $index }">
22+
<el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
23+
<el-input v-model="row.score" placeholder="请输入分数"/>
24+
</el-form-item>
25+
</template>
26+
</el-table-column>
27+
<el-table-column align="center" fixed="right" label="操作" width="60">
28+
<template v-slot="{ $index }">
29+
<el-link @click="handleDelete($index)">—</el-link>
30+
</template>
31+
</el-table-column>
32+
</el-table>
33+
</el-form>
34+
<el-row justify="center" class="mt-3">
35+
<el-button @click="handleAdd" round>+ 添加学生课程</el-button>
36+
</el-row>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import * as Demo03StudentApi from '@/api/infra/demo03-normal'
42+
43+
export default {
44+
name: "Demo03CourseForm",
45+
components: {},
46+
props: [
47+
'studentId'
48+
],// 学生编号（主表的关联字段）
49+
data() {
50+
return {
51+
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
52+
formLoading: false,
53+
// 表单参数
54+
formData: [],
55+
// 表单校验
56+
formRules: {
57+
studentId: [{required: true, message: "学生编号不能为空", trigger: "blur"}],
58+
name: [{required: true, message: "名字不能为空", trigger: "blur"}],
59+
score: [{required: true, message: "分数不能为空", trigger: "blur"}],
60+
},
61+
};
62+
},
63+
watch: {
64+
/** 监听主表的关联字段的变化，加载对应的子表数据 */
65+
studentId: {
66+
handler(val) {
67+
// 1. 重置表单
68+
this.formData = []
69+
// 2. val 非空，则加载数据
70+
if (!val) {
71+
return;
72+
}
73+
try {
74+
this.formLoading = true;
75+
const that = this;
76+
Demo03StudentApi.getDemo03CourseListByStudentId(val).then(res => {
77+
that.formData = res.data;
78+
})
79+
} finally {
80+
this.formLoading = false;
81+
}
82+
},
83+
immediate: true
84+
}
85+
},
86+
methods: {
87+
/** 新增按钮操作 */
88+
handleAdd() {
89+
const row = {
90+
id: undefined,
91+
studentId: undefined,
92+
name: undefined,
93+
score: undefined,
94+
}
95+
row.studentId = this.studentId
96+
this.formData.push(row)
97+
},
98+
/** 删除按钮操作 */
99+
handleDelete(index) {
100+
this.formData.splice(index, 1)
101+
},
102+
/** 表单校验 */
103+
validate() {
104+
return this.$refs["formRef"].validate()
105+
},
106+
/** 表单值 */
107+
getData() {
108+
return this.formData
109+
}
110+
}
111+
};
112+
</script>

0 commit comments

Comments
 (0)