Skip to content

Commit 9d38106

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!2 重构 vue2 代码生成示例，使用 async await 优化代码层次
Merge pull request !2 from puhui999/master
2 parents 8b96344 + 8b47c5d commit 9d38106

21 files changed

+416
-625
lines changed

‎src/views/infra/demo/demo01/Demo01ContactForm.vue

+27-40
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@
1818
<el-form-item label="简介">
1919
<Editor v-model="formData.description" :min-height="192"/>
2020
</el-form-item>
21-
<!-- TODO @puhui999：头像应该是 imageupload 组件 -->
22-
<el-form-item label="头像" prop="avatar">
23-
<el-input v-model="formData.avatar" placeholder="请输入头像" />
21+
<el-form-item label="头像">
22+
<ImageUpload v-model="formData.avatar"/>
2423
</el-form-item>
2524
</el-form>
2625
<div slot="footer" class="dialog-footer">
@@ -33,10 +32,12 @@
3332

3433
<script>
3534
import * as Demo01ContactApi from '@/api/infra/demo01'
35+
import ImageUpload from '@/components/ImageUpload';
3636
import Editor from '@/components/Editor';
3737
export default {
3838
name: "Demo01ContactForm",
3939
components: {
40+
ImageUpload,
4041
Editor,
4142
},
4243
data() {
@@ -67,60 +68,46 @@ export default {
6768
},
6869
methods: {
6970
/** 打开弹窗 */
70-
open(id) {
71+
async open(id) {
7172
this.dialogVisible = true;
7273
this.reset();
73-
const that = this;
7474
// 修改时，设置数据
7575
if (id) {
7676
this.formLoading = true;
7777
try {
78-
Demo01ContactApi.getDemo01Contact(id).then(res=>{
79-
that.formData = res.data;
80-
that.title = "修改示例联系人";
81-
})
78+
const res = await Demo01ContactApi.getDemo01Contact(id);
79+
this.formData = res.data;
80+
this.title = "修改示例联系人";
8281
} finally {
8382
this.formLoading = false;
8483
}
8584
}
8685
this.title = "新增示例联系人";
8786
},
88-
8987
/** 提交按钮 */
90-
submitForm() {
88+
async submitForm() {
89+
// 校验主表
90+
await this.$refs["formRef"].validate();
9191
this.formLoading = true;
9292
try {
93-
const that = this;
94-
let data = this.formData; // TODO @puhui999：const data
95-
96-
this.getRef("formRef").validate(valid => { // TODO @puhui999：上面不用空行；
97-
if (!valid) {
98-
return;
99-
}
100-
// 修改的提交
101-
if (data.id) {
102-
Demo01ContactApi.updateDemo01Contact(data).then(response => {
103-
that.$modal.msgSuccess("修改成功");
104-
that.dialogVisible = false;
105-
that.$emit('success');
106-
});
107-
return;
108-
}
109-
// 添加的提交
110-
Demo01ContactApi.createDemo01Contact(data).then(response => {
111-
that.$modal.msgSuccess("新增成功");
112-
that.dialogVisible = false;
113-
that.$emit('success');
114-
});
115-
});
93+
const data = this.formData;
94+
// 修改的提交
95+
if (data.id) {
96+
await Demo01ContactApi.updateDemo01Contact(data);
97+
this.$modal.msgSuccess("修改成功");
98+
this.dialogVisible = false;
99+
this.$emit('success');
100+
return;
101+
}
102+
// 添加的提交
103+
await Demo01ContactApi.createDemo01Contact(data);
104+
this.$modal.msgSuccess("新增成功");
105+
this.dialogVisible = false;
106+
this.$emit('success');
116107
}finally {
117-
this.formLoading = false
108+
this.formLoading = false;
118109
}
119110
},
120-
// TODO @puhui999：这个在研究下，看看有没办法回到 $refs
121-
getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
122-
return this.$refs[refName]
123-
},
124111
/** 表单重置 */
125112
reset() {
126113
this.formData = {
@@ -132,7 +119,7 @@ export default {
132119
avatar: undefined,
133120
};
134121
this.resetForm("formRef");
135-
},
122+
}
136123
}
137124
};
138125
</script>

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

+18-29
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
<el-form-item label="出生年" prop="birthday">
1616
<el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生年" />
1717
</el-form-item>
18-
<el-form-item label="头像" prop="avatar">
19-
<el-input v-model="queryParams.avatar" placeholder="请输入头像" clearable @keyup.enter.native="handleQuery"/>
20-
</el-form-item>
2118
<el-form-item label="创建时间" prop="createTime">
2219
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
2320
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
@@ -73,7 +70,6 @@
7370
<!-- 分页组件 -->
7471
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
7572
@pagination="getList"/>
76-
7773
<!-- 对话框(添加 / 修改) -->
7874
<Demo01ContactForm ref="formRef" @success="getList" />
7975
</div>
@@ -115,21 +111,20 @@ export default {
115111
description: null,
116112
avatar: null,
117113
createTime: [],
118-
}
114+
},
119115
};
120116
},
121117
created() {
122118
this.getList();
123119
},
124120
methods: {
125121
/** 查询列表 */
126-
getList() {
122+
async getList() {
127123
try {
128124
this.loading = true;
129-
Demo01ContactApi.getDemo01ContactPage(this.queryParams).then(response => {
130-
this.list = response.data.list;
131-
this.total = response.data.total;
132-
});
125+
const res = await Demo01ContactApi.getDemo01ContactPage(this.queryParams);
126+
this.list = res.data.list;
127+
this.total = res.data.total;
133128
} finally {
134129
this.loading = false;
135130
}
@@ -146,34 +141,28 @@ export default {
146141
},
147142
/** 添加/修改操作 */
148143
openForm(id) {
149-
this.$refs["formRef"].open(id)
144+
this.$refs["formRef"].open(id);
150145
},
151146
/** 删除按钮操作 */
152-
handleDelete(row) {
153-
const that = this;
147+
async handleDelete(row) {
148+
const id = row.id;
149+
await this.$modal.confirm('是否确认删除示例联系人编号为"' + id + '"的数据项?')
154150
try {
155-
const id = row.id;
156-
this.$modal.confirm('是否确认删除示例联系人编号为"' + id + '"的数据项?').then(()=>{
157-
return Demo01ContactApi.deleteDemo01Contact(id);
158-
}).then(() => {
159-
that.getList();
160-
that.$modal.msgSuccess("删除成功");
161-
}).catch(() => {});
151+
await Demo01ContactApi.deleteDemo01Contact(id);
152+
this.getList();
153+
this.$modal.msgSuccess("删除成功");
162154
} catch {}
163155
},
164156
/** 导出按钮操作 */
165-
handleExport() {
166-
const that = this;
157+
async handleExport() {
158+
await this.$modal.confirm('是否确认导出所有示例联系人数据项?');
167159
try {
168-
this.$modal.confirm('是否确认导出所有示例联系人数据项?').then(() => {
169-
that.exportLoading = true;
170-
return Demo01ContactApi.exportDemo01ContactExcel(params);
171-
}).then(response => {
172-
that.$download.excel(response, '示例联系人.xls');
173-
});
160+
this.exportLoading = true;
161+
const res = await Demo01ContactApi.exportDemo01ContactExcel(this.queryParams);
162+
this.$download.excel(res.data, '示例联系人.xls');
174163
} catch {
175164
} finally {
176-
that.exportLoading = false;
165+
this.exportLoading = false;
177166
}
178167
},
179168
}

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

+34-49
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
</el-form-item>
99
<el-form-item label="父级编号" prop="parentId">
1010
<TreeSelect
11-
v-model="formData.parentId"
12-
:options="demo02CategoryTree"
13-
:normalizer="normalizer"
14-
placeholder="请选择父级编号"
11+
v-model="formData.parentId"
12+
:options="demo02CategoryTree"
13+
:normalizer="normalizer"
14+
placeholder="请选择父级编号"
1515
/>
1616
</el-form-item>
1717
</el-form>
@@ -56,69 +56,54 @@ export default {
5656
},
5757
methods: {
5858
/** 打开弹窗 */
59-
open(id) {
59+
async open(id) {
6060
this.dialogVisible = true;
6161
this.reset();
62-
const that = this;
6362
// 修改时，设置数据
6463
if (id) {
6564
this.formLoading = true;
6665
try {
67-
Demo02CategoryApi.getDemo02Category(id).then(res=>{
68-
that.formData = res.data;
69-
that.title = "修改示例分类";
70-
})
66+
const res = await Demo02CategoryApi.getDemo02Category(id);
67+
this.formData = res.data;
68+
this.title = "修改示例分类";
7169
} finally {
7270
this.formLoading = false;
7371
}
7472
}
7573
this.title = "新增示例分类";
76-
this.getDemo02CategoryTree()
74+
this.getDemo02CategoryTree();
7775
},
78-
7976
/** 提交按钮 */
80-
submitForm() {
77+
async submitForm() {
78+
// 校验主表
79+
await this.$refs["formRef"].validate();
8180
this.formLoading = true;
8281
try {
83-
const that = this;
84-
let data = this.formData;
85-
86-
this.getRef("formRef").validate(valid => {
87-
if (!valid) {
88-
return;
89-
}
90-
// 修改的提交
91-
if (data.id) {
92-
Demo02CategoryApi.updateDemo02Category(data).then(response => {
93-
that.$modal.msgSuccess("修改成功");
94-
that.dialogVisible = false;
95-
that.$emit('success');
96-
});
97-
return;
98-
}
99-
// 添加的提交
100-
Demo02CategoryApi.createDemo02Category(data).then(response => {
101-
that.$modal.msgSuccess("新增成功");
102-
that.dialogVisible = false;
103-
that.$emit('success');
104-
});
105-
});
82+
const data = this.formData;
83+
// 修改的提交
84+
if (data.id) {
85+
await Demo02CategoryApi.updateDemo02Category(data);
86+
this.$modal.msgSuccess("修改成功");
87+
this.dialogVisible = false;
88+
this.$emit('success');
89+
return;
90+
}
91+
// 添加的提交
92+
await Demo02CategoryApi.createDemo02Category(data);
93+
this.$modal.msgSuccess("新增成功");
94+
this.dialogVisible = false;
95+
this.$emit('success');
10696
}finally {
107-
this.formLoading = false
97+
this.formLoading = false;
10898
}
10999
},
110-
getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
111-
return this.$refs[refName]
112-
},
113100
/** 获得示例分类树 */
114-
getDemo02CategoryTree() {
115-
const that = this;
116-
that.demo02CategoryTree = [];
117-
Demo02CategoryApi.getDemo02CategoryList().then(res=>{
118-
const root = { id: 0, name: '顶级示例分类', children: [] };
119-
root.children = this.handleTree(res.data, 'id', 'parentId')
120-
that.demo02CategoryTree.push(root)
121-
});
101+
async getDemo02CategoryTree() {
102+
this.demo02CategoryTree = [];
103+
const res = await Demo02CategoryApi.getDemo02CategoryList();
104+
const root = { id: 0, name: '顶级示例分类', children: [] };
105+
root.children = this.handleTree(res.data, 'id', 'parentId')
106+
this.demo02CategoryTree.push(root)
122107
},
123108
/** 转换示例分类数据结构 */
124109
normalizer(node) {
@@ -139,7 +124,7 @@ export default {
139124
parentId: undefined,
140125
};
141126
this.resetForm("formRef");
142-
},
127+
}
143128
}
144129
};
145130
</script>

0 commit comments

Comments
 (0)