From 64e13e609a2b43504a15ec708863caae3d5b6c13 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 27 Nov 2023 16:22:17 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=87=8D=E6=9E=84=20vue2=20=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=94=9F=E6=88=90=E7=A4=BA=E4=BE=8B=EF=BC=8C=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20async=20await=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=B1=82=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../infra/demo/demo01/Demo01ContactForm.vue | 67 +++++------ src/views/infra/demo/demo01/index.vue | 47 +++----- .../infra/demo/demo02/Demo02CategoryForm.vue | 83 ++++++-------- src/views/infra/demo/demo02/index.vue | 59 ++++------ .../demo/demo03/erp/Demo03StudentForm.vue | 49 +++----- .../erp/components/Demo03CourseForm.vue | 50 ++++---- .../erp/components/Demo03CourseList.vue | 27 ++--- .../demo03/erp/components/Demo03GradeForm.vue | 50 ++++---- .../demo03/erp/components/Demo03GradeList.vue | 27 ++--- src/views/infra/demo/demo03/erp/index.vue | 96 +++++++--------- .../demo/demo03/inner/Demo03StudentForm.vue | 107 ++++++----------- .../inner/components/Demo03CourseForm.vue | 24 ++-- .../inner/components/Demo03CourseList.vue | 8 +- .../inner/components/Demo03GradeForm.vue | 16 +-- .../inner/components/Demo03GradeList.vue | 16 ++- src/views/infra/demo/demo03/inner/index.vue | 41 +++---- .../demo/demo03/normal/Demo03StudentForm.vue | 108 ++++++------------ .../normal/components/Demo03CourseForm.vue | 54 +++++---- .../normal/components/Demo03GradeForm.vue | 37 +++--- src/views/infra/demo/demo03/normal/index.vue | 43 +++---- 20 files changed, 400 insertions(+), 609 deletions(-) diff --git a/src/views/infra/demo/demo01/Demo01ContactForm.vue b/src/views/infra/demo/demo01/Demo01ContactForm.vue index 1587ca0..844e7b7 100644 --- a/src/views/infra/demo/demo01/Demo01ContactForm.vue +++ b/src/views/infra/demo/demo01/Demo01ContactForm.vue @@ -18,9 +18,8 @@ - - - + +
@@ -33,10 +32,12 @@ diff --git a/src/views/infra/demo/demo01/index.vue b/src/views/infra/demo/demo01/index.vue index b7be7f7..935005e 100644 --- a/src/views/infra/demo/demo01/index.vue +++ b/src/views/infra/demo/demo01/index.vue @@ -15,9 +15,6 @@ - - - @@ -73,7 +70,6 @@ -
@@ -115,7 +111,7 @@ export default { description: null, avatar: null, createTime: [], - } + }, }; }, created() { @@ -123,13 +119,12 @@ export default { }, methods: { /** 查询列表 */ - getList() { + async getList() { try { this.loading = true; - Demo01ContactApi.getDemo01ContactPage(this.queryParams).then(response => { - this.list = response.data.list; - this.total = response.data.total; - }); + const res = await Demo01ContactApi.getDemo01ContactPage(this.queryParams); + this.list = res.data.list; + this.total = res.data.total; } finally { this.loading = false; } @@ -146,34 +141,28 @@ export default { }, /** 添加/修改操作 */ openForm(id) { - this.$refs["formRef"].open(id) + this.$refs["formRef"].open(id); }, /** 删除按钮操作 */ - handleDelete(row) { - const that = this; + async handleDelete(row) { + const id = row.id; + await this.$modal.confirm('是否确认删除示例联系人编号为"' + id + '"的数据项?') try { - const id = row.id; - this.$modal.confirm('是否确认删除示例联系人编号为"' + id + '"的数据项?').then(()=>{ - return Demo01ContactApi.deleteDemo01Contact(id); - }).then(() => { - that.getList(); - that.$modal.msgSuccess("删除成功"); - }).catch(() => {}); + await Demo01ContactApi.deleteDemo01Contact(id); + this.getList(); + this.$modal.msgSuccess("删除成功"); } catch {} }, /** 导出按钮操作 */ - handleExport() { - const that = this; + async handleExport() { + await this.$modal.confirm('是否确认导出所有示例联系人数据项?'); try { - this.$modal.confirm('是否确认导出所有示例联系人数据项?').then(() => { - that.exportLoading = true; - return Demo01ContactApi.exportDemo01ContactExcel(params); - }).then(response => { - that.$download.excel(response, '示例联系人.xls'); - }); + this.exportLoading = true; + const res = await Demo01ContactApi.exportDemo01ContactExcel(this.queryParams); + this.$download.excel(res.data, '示例联系人.xls'); } catch { } finally { - that.exportLoading = false; + this.exportLoading = false; } }, } diff --git a/src/views/infra/demo/demo02/Demo02CategoryForm.vue b/src/views/infra/demo/demo02/Demo02CategoryForm.vue index 9865965..ff9b78b 100644 --- a/src/views/infra/demo/demo02/Demo02CategoryForm.vue +++ b/src/views/infra/demo/demo02/Demo02CategoryForm.vue @@ -8,10 +8,10 @@ @@ -56,69 +56,54 @@ export default { }, methods: { /** 打开弹窗 */ - open(id) { + async open(id) { this.dialogVisible = true; this.reset(); - const that = this; // 修改时，设置数据 if (id) { this.formLoading = true; try { - Demo02CategoryApi.getDemo02Category(id).then(res=>{ - that.formData = res.data; - that.title = "修改示例分类"; - }) + const res = await Demo02CategoryApi.getDemo02Category(id); + this.formData = res.data; + this.title = "修改示例分类"; } finally { this.formLoading = false; } } this.title = "新增示例分类"; - this.getDemo02CategoryTree() + this.getDemo02CategoryTree(); }, - /** 提交按钮 */ - submitForm() { + async submitForm() { + // 校验主表 + await this.$refs["formRef"].validate(); this.formLoading = true; try { - const that = this; - let data = this.formData; - - this.getRef("formRef").validate(valid => { - if (!valid) { - return; - } - // 修改的提交 - if (data.id) { - Demo02CategoryApi.updateDemo02Category(data).then(response => { - that.$modal.msgSuccess("修改成功"); - that.dialogVisible = false; - that.$emit('success'); - }); - return; - } - // 添加的提交 - Demo02CategoryApi.createDemo02Category(data).then(response => { - that.$modal.msgSuccess("新增成功"); - that.dialogVisible = false; - that.$emit('success'); - }); - }); + const data = this.formData; + // 修改的提交 + if (data.id) { + await Demo02CategoryApi.updateDemo02Category(data); + this.$modal.msgSuccess("修改成功"); + this.dialogVisible = false; + this.$emit('success'); + return; + } + // 添加的提交 + await Demo02CategoryApi.createDemo02Category(data); + this.$modal.msgSuccess("新增成功"); + this.dialogVisible = false; + this.$emit('success'); }finally { - this.formLoading = false + this.formLoading = false; } }, - getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法 - return this.$refs[refName] - }, /** 获得示例分类树 */ - getDemo02CategoryTree() { - const that = this; - that.demo02CategoryTree = []; - Demo02CategoryApi.getDemo02CategoryList().then(res=>{ - const root = { id: 0, name: '顶级示例分类', children: [] }; - root.children = this.handleTree(res.data, 'id', 'parentId') - that.demo02CategoryTree.push(root) - }); + async getDemo02CategoryTree() { + this.demo02CategoryTree = []; + const res = await Demo02CategoryApi.getDemo02CategoryList(); + const root = { id: 0, name: '顶级示例分类', children: [] }; + root.children = this.handleTree(res.data, 'id', 'parentId') + this.demo02CategoryTree.push(root) }, /** 转换示例分类数据结构 */ normalizer(node) { @@ -139,7 +124,7 @@ export default { parentId: undefined, }; this.resetForm("formRef"); - }, + } } }; diff --git a/src/views/infra/demo/demo02/index.vue b/src/views/infra/demo/demo02/index.vue index 61bca72..d7a09e2 100644 --- a/src/views/infra/demo/demo02/index.vue +++ b/src/views/infra/demo/demo02/index.vue @@ -38,14 +38,14 @@ @@ -64,7 +64,6 @@ - @@ -86,7 +85,6 @@ export default { exportLoading: false, // 显示搜索条件 showSearch: true, - // 总条数 // 示例分类列表 list: [], // 是否展开，默认全部展开 @@ -100,7 +98,7 @@ export default { name: null, parentId: null, createTime: [], - } + }, }; }, created() { @@ -108,12 +106,11 @@ export default { }, methods: { /** 查询列表 */ - getList() { + async getList() { try { this.loading = true; - Demo02CategoryApi.getDemo02CategoryList(this.queryParams).then(response => { - this.list = this.handleTree(response.data, 'id', 'parentId'); - }) + const res = await Demo02CategoryApi.getDemo02CategoryList(this.queryParams); + this.list = this.handleTree(res.data, 'id', 'parentId'); } finally { this.loading = false; } @@ -130,34 +127,28 @@ export default { }, /** 添加/修改操作 */ openForm(id) { - this.$refs["formRef"].open(id) + this.$refs["formRef"].open(id); }, /** 删除按钮操作 */ - handleDelete(row) { - const that = this; + async handleDelete(row) { + const id = row.id; + await this.$modal.confirm('是否确认删除示例分类编号为"' + id + '"的数据项?') try { - const id = row.id; - this.$modal.confirm('是否确认删除示例分类编号为"' + id + '"的数据项?').then(()=>{ - return Demo02CategoryApi.deleteDemo02Category(id); - }).then(() => { - that.getList(); - that.$modal.msgSuccess("删除成功"); - }).catch(() => {}); + await Demo02CategoryApi.deleteDemo02Category(id); + this.getList(); + this.$modal.msgSuccess("删除成功"); } catch {} }, /** 导出按钮操作 */ - handleExport() { - const that = this; + async handleExport() { + await this.$modal.confirm('是否确认导出所有示例分类数据项?'); try { - this.$modal.confirm('是否确认导出所有示例分类数据项?').then(() => { - that.exportLoading = true; - return Demo02CategoryApi.exportDemo02CategoryExcel(params); - }).then(response => { - that.$download.excel(response, '示例分类.xls'); - }); + this.exportLoading = true; + const res = await Demo02CategoryApi.exportDemo02CategoryExcel(this.queryParams); + this.$download.excel(res.data, '示例分类.xls'); } catch { } finally { - that.exportLoading = false; + this.exportLoading = false; } }, /** 展开/折叠操作 */ diff --git a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue index be2638d..9d27284 100644 --- a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue +++ b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue @@ -63,18 +63,16 @@ export default { }, methods: { /** 打开弹窗 */ - open(id) { + async open(id) { this.dialogVisible = true; this.reset(); - const that = this; // 修改时，设置数据 if (id) { this.formLoading = true; try { - Demo03StudentApi.getDemo03Student(id).then(res=>{ - that.formData = res.data; - that.title = "修改学生"; - }) + const res = await Demo03StudentApi.getDemo03Student(id); + this.formData = res.data; + this.title = "修改学生"; } finally { this.formLoading = false; } @@ -82,42 +80,29 @@ export default { this.title = "新增学生"; }, /** 提交按钮 */ - submitForm() { + async submitForm() { + // 校验主表 + await this.$refs["formRef"].validate(); this.formLoading = true; try { - const that = this; - let data = this.formData; - let validate = false; - // 校验主表 - this.getRef("formRef").validate(valid => { - validate = valid; - }); - // 所有表单校验通过后方可提交 - if (!validate) { - return; - } + const data = this.formData; // 修改的提交 if (data.id) { - Demo03StudentApi.updateDemo03Student(data).then(response => { - that.$modal.msgSuccess("修改成功"); - that.dialogVisible = false; - that.$emit('success'); - }); + await Demo03StudentApi.updateDemo03Student(data); + this.$modal.msgSuccess("修改成功"); + this.dialogVisible = false; + this.$emit('success'); return; } // 添加的提交 - Demo03StudentApi.createDemo03Student(data).then(response => { - that.$modal.msgSuccess("新增成功"); - that.dialogVisible = false; - that.$emit('success'); - }); + await Demo03StudentApi.createDemo03Student(data); + this.$modal.msgSuccess("新增成功"); + this.dialogVisible = false; + this.$emit('success'); }finally { this.formLoading = false; } }, - getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法 - return this.$refs[refName] - }, /** 表单重置 */ reset() { this.formData = { @@ -128,7 +113,7 @@ export default { description: undefined, }; this.resetForm("formRef"); - }, + } } }; diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue index 4cefc16..a3f6943 100644 --- a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue +++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue @@ -49,19 +49,17 @@ export default { }, methods: { /** 打开弹窗 */ - open(id, studentId) { + async open(id, studentId) { this.dialogVisible = true; this.reset(); - const that = this; this.formData.studentId = studentId; // 修改时，设置数据 if (id) { this.formLoading = true; try { - Demo03StudentApi.getDemo03Course(id).then(res=>{ - that.formData = res.data; - that.dialogTitle = "修改学生课程"; - }) + const res = await Demo03StudentApi.getDemo03Course(id); + this.formData = res.data; + this.dialogTitle = "修改学生课程"; } finally { this.formLoading = false; } @@ -69,32 +67,26 @@ export default { this.dialogTitle = "新增学生课程"; }, /** 提交按钮 */ - submitForm() { + async submitForm() { + await this.$refs["formRef"].validate(); this.formLoading = true; try { - let data = this.formData; - this.$refs["formRef"].validate(valid => { - if (!valid) { - return; - } - // 修改的提交 - if (data.id) { - Demo03StudentApi.updateDemo03Course(data).then(response => { - this.$modal.msgSuccess("修改成功"); - this.dialogVisible = false; - this.$emit('success'); - }); - return; - } - // 添加的提交 - Demo03StudentApi.createDemo03Course(data).then(response => { - this.$modal.msgSuccess("新增成功"); - this.dialogVisible = false; - this.$emit('success'); - }); - }); + const data = this.formData; + // 修改的提交 + if (data.id) { + await Demo03StudentApi.updateDemo03Course(data); + this.$modal.msgSuccess("修改成功"); + this.dialogVisible = false; + this.$emit('success'); + return; + } + // 添加的提交 + await Demo03StudentApi.createDemo03Course(data); + this.$modal.msgSuccess("新增成功"); + this.dialogVisible = false; + this.$emit('success'); }finally { - this.formLoading = false + this.formLoading = false; } }, /** 表单重置 */ diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue index 81c9ff6..1c31ad4 100644 --- a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue +++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue @@ -73,14 +73,12 @@ export default { }, methods: { /** 查询列表 */ - getList() { + async getList() { try { this.loading = true; - const that = this; - Demo03StudentApi.getDemo03CoursePage(this.queryParams).then(response => { - that.list = response.data.list; - that.total = response.data.total; - }); + const res = await Demo03StudentApi.getDemo03CoursePage(this.queryParams); + this.list = res.data.list; + this.total = res.data.total; } finally { this.loading = false; } @@ -93,22 +91,19 @@ export default { /** 添加/修改操作 */ openForm(id) { if (!this.studentId) { - that.$modal.msgError('请选择一个学生'); + this.$modal.msgError('请选择一个学生'); return; } this.$refs["formRef"].open(id, this.studentId); }, /** 删除按钮操作 */ - handleDelete(row) { - const that = this; + async handleDelete(row) { + const id = row.id; + await this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?'); try { - const id = row.id; - this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{ - return Demo03StudentApi.deleteDemo03Course(id); - }).then(() => { - that.getList(); - that.$modal.msgSuccess("删除成功"); - }).catch(() => {}); + await Demo03StudentApi.deleteDemo03Course(id); + await this.getList(); + this.$modal.msgSuccess("删除成功"); } catch {} }, } diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue index f77fa58..a733de5 100644 --- a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue +++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue @@ -49,19 +49,17 @@ export default { }, methods: { /** 打开弹窗 */ - open(id, studentId) { + async open(id, studentId) { this.dialogVisible = true; this.reset(); - const that = this; this.formData.studentId = studentId; // 修改时，设置数据 if (id) { this.formLoading = true; try { - Demo03StudentApi.getDemo03Grade(id).then(res=>{ - that.formData = res.data; - that.dialogTitle = "修改学生班级"; - }) + const res = await Demo03StudentApi.getDemo03Grade(id); + this.formData = res.data; + this.dialogTitle = "修改学生班级"; } finally { this.formLoading = false; } @@ -69,32 +67,26 @@ export default { this.dialogTitle = "新增学生班级"; }, /** 提交按钮 */ - submitForm() { + async submitForm() { + await this.$refs["formRef"].validate(); this.formLoading = true; try { - let data = this.formData; - this.$refs["formRef"].validate(valid => { - if (!valid) { - return; - } - // 修改的提交 - if (data.id) { - Demo03StudentApi.updateDemo03Grade(data).then(response => { - this.$modal.msgSuccess("修改成功"); - this.dialogVisible = false; - this.$emit('success'); - }); - return; - } - // 添加的提交 - Demo03StudentApi.createDemo03Grade(data).then(response => { - this.$modal.msgSuccess("新增成功"); - this.dialogVisible = false; - this.$emit('success'); - }); - }); + const data = this.formData; + // 修改的提交 + if (data.id) { + await Demo03StudentApi.updateDemo03Grade(data); + this.$modal.msgSuccess("修改成功"); + this.dialogVisible = false; + this.$emit('success'); + return; + } + // 添加的提交 + await Demo03StudentApi.createDemo03Grade(data); + this.$modal.msgSuccess("新增成功"); + this.dialogVisible = false; + this.$emit('success'); }finally { - this.formLoading = false + this.formLoading = false; } }, /** 表单重置 */ diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue index 298ac26..96b31bd 100644 --- a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue +++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue @@ -73,14 +73,12 @@ export default { }, methods: { /** 查询列表 */ - getList() { + async getList() { try { this.loading = true; - const that = this; - Demo03StudentApi.getDemo03GradePage(this.queryParams).then(response => { - that.list = response.data.list; - that.total = response.data.total; - }); + const res = await Demo03StudentApi.getDemo03GradePage(this.queryParams); + this.list = res.data.list; + this.total = res.data.total; } finally { this.loading = false; } @@ -93,22 +91,19 @@ export default { /** 添加/修改操作 */ openForm(id) { if (!this.studentId) { - that.$modal.msgError('请选择一个学生'); + this.$modal.msgError('请选择一个学生'); return; } this.$refs["formRef"].open(id, this.studentId); }, /** 删除按钮操作 */ - handleDelete(row) { - const that = this; + async handleDelete(row) { + const id = row.id; + await this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?'); try { - const id = row.id; - this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项?').then(()=>{ - return Demo03StudentApi.deleteDemo03Grade(id); - }).then(() => { - that.getList(); - that.$modal.msgSuccess("删除成功"); - }).catch(() => {}); + await Demo03StudentApi.deleteDemo03Grade(id); + await this.getList(); + this.$modal.msgSuccess("删除成功"); } catch {} }, } diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue index 8731ff3..14b1261 100644 --- a/src/views/infra/demo/demo03/erp/index.vue +++ b/src/views/infra/demo/demo03/erp/index.vue @@ -13,14 +13,11 @@ - + - + 搜索 @@ -32,31 +29,28 @@ 新增 - + v-hasPermi="['infra:demo03-student:create']">新增 - 导出 - + 导出 - - + + @@ -64,7 +58,7 @@ {{ parseTime(scope.row.birthday) }} - +