代码生成：重构 vue2 代码生成模版，使用 async await 优化代码层次

puhui999
1 parent 3d2022e3
Showing 5 changed files with 103 additions and 172 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_erp.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_normal.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/list_sub_erp.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/form.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/index.vue.vm
@@ -145,19 +145,17 @@
     },
     methods: {
       /** 打开弹窗 */
-      open(id, ${subJoinColumn.javaField}) {
+      async open(id, ${subJoinColumn.javaField}) {
         this.dialogVisible = true;
         this.reset();
-        const that = this;
         this.formData.${subJoinColumn.javaField} = ${subJoinColumn.javaField};
         // 修改时，设置数据
         if (id) {
           this.formLoading = true;
           try {
-              ${simpleClassName}Api.get${subSimpleClassName}(id).then(res=>{
-              that.formData = res.data;
-              that.dialogTitle = "修改${subTable.classComment}";
-            })
+            const res = await ${simpleClassName}Api.get${subSimpleClassName}(id);
+            this.formData = res.data;
+            this.dialogTitle = "修改${subTable.classComment}";
           } finally {
             this.formLoading = false;
           }
@@ -165,32 +163,26 @@
         this.dialogTitle = "新增${subTable.classComment}";
       },
       /** 提交按钮 */
-      submitForm() {
+      async submitForm() {
+        await this.#[[$]]#refs["formRef"].validate();
         this.formLoading = true;
         try {
-          let data = this.formData;
-          this.#[[$]]#refs["formRef"].validate(valid => {
-            if (!valid) {
-              return;
-            }
+            const data = this.formData;
             // 修改的提交
             if (data.${primaryColumn.javaField}) {
-              ${simpleClassName}Api.update${subSimpleClassName}(data).then(response => {
-                this.#[[$modal]]#.msgSuccess("修改成功");
-                this.dialogVisible = false;
-                this.#[[$]]#emit('success');
-              });
+            await  ${simpleClassName}Api.update${subSimpleClassName}(data);
+            this.#[[$modal]]#.msgSuccess("修改成功");
+            this.dialogVisible = false;
+            this.#[[$]]#emit('success');
               return;
             }
             // 添加的提交
-            ${simpleClassName}Api.create${subSimpleClassName}(data).then(response => {
+              await ${simpleClassName}Api.create${subSimpleClassName}(data);
               this.#[[$modal]]#.msgSuccess("新增成功");
               this.dialogVisible = false;
               this.#[[$]]#emit('success');
-            });
-          });
         }finally {
-          this.formLoading = false
+          this.formLoading = false;
         }
       },
       /** 表单重置 */
@@ -289,13 +289,14 @@
           }
           try {
             this.formLoading = true;
+            // 这里还是需要获取一下 this 的不然取不到 formData
             const that = this;
             #if ( $subTable.subJoinMany )
-            ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val).then(res=>{
+            ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val).then(function (res){
               that.formData = res.data;
             })
             #else
-            ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val).then(res=>{
+            ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val).then(function (res){
               const data = res.data;
               if (!data) {
                 return
@@ -325,21 +326,21 @@
                     #end
                 #end
             }
-            row.${subJoinColumn.javaField} = this.${subJoinColumn.javaField}
-            this.formData.push(row)
+            row.${subJoinColumn.javaField} = this.${subJoinColumn.javaField};
+            this.formData.push(row);
           },
           /** 删除按钮操作 */
           handleDelete(index) {
-            this.formData.splice(index, 1)
+            this.formData.splice(index, 1);
           },
         #end
       /** 表单校验 */
       validate(){
-        return this.#[[$]]#refs["formRef"].validate()
+        return this.#[[$]]#refs["formRef"].validate();
       },
       /** 表单值 */
       getData(){
-        return this.formData
+        return this.formData;
       }
     }
   };
@@ -111,28 +111,24 @@
     },
     methods: {
       /** 查询列表 */
-      getList() {
+      async getList() {
         try {
           this.loading = true;
-          const that = this;
           #if ($table.templateType == 11)
-          ${simpleClassName}Api.get${subSimpleClassName}Page(this.queryParams).then(response => {
-            that.list = response.data.list;
-            that.total = response.data.total;
-          });
+            const res = await ${simpleClassName}Api.get${subSimpleClassName}Page(this.queryParams);
+            this.list = res.data.list;
+            this.total = res.data.total;
           #else
               #if ( $subTable.subJoinMany )
-                ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(this.${subJoinColumn.javaField}).then(response=>{
-                  that.list = response.data;
-              })
+                const res = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(this.${subJoinColumn.javaField});
+                this.list = res.data;
               #else
-                ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(this.${subJoinColumn.javaField}).then(response=>{
-                  const data = response.data;
-                  if (!data) {
-                    return
-                  }
-                  that.list.push(data)
-              })
+                const res = await  ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(this.${subJoinColumn.javaField});
+                const data = res.data;
+                if (!data) {
+                  return;
+                }
+                this.list.push(data);
               #end
           #end
         } finally {
@@ -148,22 +144,19 @@
       /** 添加/修改操作 */
       openForm(id) {
         if (!this.${subJoinColumn.javaField}) {
-          that.#[[$modal]]#.msgError('请选择一个${table.classComment}');
+          this.#[[$modal]]#.msgError('请选择一个${table.classComment}');
           return;
         }
         this.#[[$]]#refs["formRef"].open(id, this.${subJoinColumn.javaField});
       },
       /** 删除按钮操作 */
-      handleDelete(row) {
-        const that = this;
+      async handleDelete(row) {
+        const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
+        await this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?');
         try {
-          const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
-          this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?').then(()=>{
-            return ${simpleClassName}Api.delete${subSimpleClassName}(${primaryColumn.javaField});
-          }).then(() => {
-            that.getList();
-            that.#[[$modal]]#.msgSuccess("删除成功");
-          }).catch(() => {});
+          await ${simpleClassName}Api.delete${subSimpleClassName}(${primaryColumn.javaField});
+          await this.getList();
+          this.#[[$modal]]#.msgSuccess("删除成功");
         } catch {}
       },
 #end
@@ -195,18 +195,16 @@
     },
     methods: {
       /** 打开弹窗 */
-     open(id) {
+     async open(id) {
         this.dialogVisible = true;
         this.reset();
-        const that = this;
         // 修改时，设置数据
         if (id) {
           this.formLoading = true;
           try {
-            ${simpleClassName}Api.get${simpleClassName}(id).then(res=>{
-              that.formData = res.data;
-              that.title = "修改${table.classComment}";
-            })
+            const res = await ${simpleClassName}Api.get${simpleClassName}(id);
+            this.formData = res.data;
+            this.title = "修改${table.classComment}";
           } finally {
             this.formLoading = false;
           }
@@ -218,111 +216,66 @@
         #end
       },
       /** 提交按钮 */
-      submitForm() {
+      async submitForm() {
+        // 校验主表
+        await this.$refs["formRef"].validate();
+          ## 特殊：主子表专属逻辑
+          #if ( $table.templateType == 10 || $table.templateType == 12 )
+              #if ( $subTables && $subTables.size() > 0 )
+                // 校验子表
+                  #foreach ($subTable in $subTables)
+                      #set ($index = $foreach.count - 1)
+                      #set ($subClassNameVar = $subClassNameVars.get($index))
+                    try {
+                      ## 代码生成后会替换为正确的 refs
+                      await this.refs['${subClassNameVar}FormRef'].validate();
+                    } catch (e) {
+                      this.subTabsName = '${subClassNameVar}';
+                      return;
+                    }
+                  #end
+              #end
+          #end
         this.formLoading = true;
         try {
-          const that = this;
-          let data = this.formData;
-          let validate = false;
-          // 校验主表
-          this.getRef("formRef").validate(valid => {
-            validate = valid;
-          });
+          const data = this.formData;
         ## 特殊：主子表专属逻辑
         #if ( $table.templateType == 10 || $table.templateType == 12 )
         #if ( $subTables && $subTables.size() > 0 )
-            // 校验子表
-            this.validateSubFrom01().then(() => {
-            // 全部校验通过-拼接子表的数据
             // 拼接子表的数据
-              #foreach ($subTable in $subTables)
-                  #set ($index = $foreach.count - 1)
-                  #set ($subClassNameVar = $subClassNameVars.get($index))
-                data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = that.getRef('${subClassNameVar}FormRef').getData();
-              #end
-            }).catch((err) => {
-                validate = false;
-                that.subTabsName = err.replace("FormRef", ""); // 定位到没有校验通过的子表单
-            })
+            #foreach ($subTable in $subTables)
+                #set ($index = $foreach.count - 1)
+                #set ($subClassNameVar = $subClassNameVars.get($index))
+              data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = this.refs['${subClassNameVar}FormRef'].getData();
+            #end
         #end
         #end
-          // 所有表单校验通过后方可提交
-          if (!validate) {
-            return;
-          }
           // 修改的提交
           if (data.${primaryColumn.javaField}) {
-                  ${simpleClassName}Api.update${simpleClassName}(data).then(response => {
-              that.#[[$modal]]#.msgSuccess("修改成功");
-              that.dialogVisible = false;
-              that.#[[$]]#emit('success');
-            });
+            await ${simpleClassName}Api.update${simpleClassName}(data);
+            this.#[[$modal]]#.msgSuccess("修改成功");
+            this.dialogVisible = false;
+            this.#[[$]]#emit('success');
             return;
           }
           // 添加的提交
-          ${simpleClassName}Api.create${simpleClassName}(data).then(response => {
-            that.#[[$modal]]#.msgSuccess("新增成功");
-            that.dialogVisible = false;
-            that.#[[$]]#emit('success');
-          });
+          await ${simpleClassName}Api.create${simpleClassName}(data);
+          this.#[[$modal]]#.msgSuccess("新增成功");
+          this.dialogVisible = false;
+          this.#[[$]]#emit('success');
         }finally {
           this.formLoading = false;
         }
       },
-      getRef(refName){
-        return this.#[[$]]#refs[refName];
-      },
-## 特殊：主子表专属逻辑
-#if ( $table.templateType == 10 || $table.templateType == 12 )
-#if ( $subTables && $subTables.size() > 0 )
-      /** 校验子表单 */
-      validateSubFrom(item) {
-        return new Promise((resolve, reject) => {
-          this.getRef(item).validate()
-          .then(() => {
-            resolve();
-          })
-          .catch(() => {
-            reject(item);
-          })
-        })
-      },
-      /** 校验所有子表单 */
-      validateSubFrom01() {
-        // 需要校验的表单 ref
-        const validFormRefArr = [
-            #foreach ($subTable in $subTables)
-                #set ($index = $foreach.count - 1)
-                #set ($subClassNameVar = $subClassNameVars.get($index))
-              "${subClassNameVar}FormRef",
-            #end
-        ];
-        const validArr = []; // 校验
-        for (const item of validFormRefArr) {
-          validArr.push(this.validateSubFrom(item));
-        }
-        return new Promise((resolve, reject) => {
-          // 校验所有
-          Promise.all(validArr).then(() => {
-            resolve();
-          }).catch((err) => {
-            reject(err);
-          })
-        })
-      },
-#end
-#end
         ## 特殊：树表专属逻辑
         #if ( $table.templateType == 2 )
           /** 获得${table.classComment}树 */
-          get${simpleClassName}Tree() {
-            const that = this;
-            that.${classNameVar}Tree = [];
-                  ${simpleClassName}Api.get${simpleClassName}List().then(res=>{
-              const root = { id: 0, name: '顶级${table.classComment}', children: [] };
-              root.children = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}')
-              that.${classNameVar}Tree.push(root)
-            });
+         async get${simpleClassName}Tree() {
+            this.${classNameVar}Tree = [];
+            const res = await ${simpleClassName}Api.get${simpleClassName}List();
+            const root = { id: 0, name: '顶级${table.classComment}', children: [] };
+            root.children = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}')
+            this.${classNameVar}Tree.push(root)
           },
         #end
         ## 特殊：树表专属逻辑
@@ -361,7 +314,7 @@
             #end
         };
         this.resetForm("formRef");
-      },
+      }
     }
   };
 </script>
@@ -262,19 +262,17 @@ export default {
   },
   methods: {
     /** 查询列表 */
-    getList() {
+    async getList() {
       try {
       this.loading = true;
       ## 特殊：树表专属逻辑（树不需要分页接口）
       #if ( $table.templateType == 2 )
-        ${simpleClassName}Api.get${simpleClassName}List(this.queryParams).then(response => {
-          this.list = this.handleTree(response.data, 'id', '${treeParentColumn.javaField}');
-        })
+       const res = await ${simpleClassName}Api.get${simpleClassName}List(this.queryParams);
+       this.list = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}');
       #else
-      ${simpleClassName}Api.get${simpleClassName}Page(this.queryParams).then(response => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-      });
+        const res = await ${simpleClassName}Api.get${simpleClassName}Page(this.queryParams);
+        this.list = res.data.list;
+        this.total = res.data.total;
       #end
       } finally {
         this.loading = false;
@@ -295,31 +293,25 @@ export default {
       this.#[[$]]#refs["formRef"].open(id);
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
-      const that = this;
-      try {
+    async handleDelete(row) {
       const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
-      this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?').then(()=>{
-          return ${simpleClassName}Api.delete${simpleClassName}(${primaryColumn.javaField});
-        }).then(() => {
-        that.getList();
-        that.#[[$modal]]#.msgSuccess("删除成功");
-        }).catch(() => {});
+      await this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?')
+      try {
+       await ${simpleClassName}Api.delete${simpleClassName}(${primaryColumn.javaField});
+       this.getList();
+       this.#[[$modal]]#.msgSuccess("删除成功");
       } catch {}
     },
     /** 导出按钮操作 */
-    handleExport() {
-      const that = this;
+    async handleExport() {
+      await this.#[[$modal]]#.confirm('是否确认导出所有${table.classComment}数据项?');
       try {
-          this.#[[$modal]]#.confirm('是否确认导出所有${table.classComment}数据项?').then(() => {
-              that.exportLoading = true;
-              return ${simpleClassName}Api.export${simpleClassName}Excel(params);
-            }).then(response => {
-              that.#[[$]]#download.excel(response, '${table.classComment}.xls');
-            });
+        this.exportLoading = true;
+        const res = await ${simpleClassName}Api.export${simpleClassName}Excel(this.queryParams);
+        this.#[[$]]#download.excel(res.data, '${table.classComment}.xls');
       } catch {
       } finally {
-        that.exportLoading = false;
+        this.exportLoading = false;
       }
     },
       ## 特殊：主子表专属逻辑