fix(bpm): 修复分类和单据选择联动问题并优化表单加载逻辑

src/views/bpm/collaborative/index.vue

@@ -82,7 +82,7 @@
                         >
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="分类：" label-width="60px">
-                              <el-select v-model="params.dictType">
+                              <el-select v-model="params.dictType" @change="changeDictTypeChange">
                                 <el-option
                                   v-for="(item, index) in dictList[
                                     'collaborative_type'
@@ -96,10 +96,10 @@
                           </el-col>
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="单据：" label-width="60px">
-                              <el-select v-model="params.formId">
+                              <el-select v-model="params.formId" @change="changeFormIdChange">
                                 <el-option
                                   v-for="(item, index) in templateList[
-                                    params.dictType
+                                    currentDictType
                                   ]"
                                   :key="index"
                                   :value="item.id"
@@ -289,7 +289,7 @@
                         >
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="分类：" label-width="60px">
-                              <el-select v-model="params.dictType">
+                              <el-select v-model="params.dictType" @change="changeDictTypeChange">
                                 <el-option
                                   v-for="(item, index) in dictList[
                                     'collaborative_type'
@@ -303,7 +303,7 @@
                           </el-col>
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="单据：" label-width="60px">
-                              <el-select v-model="params.formId">
+                              <el-select v-model="params.formId" @change="changeFormIdChange">
                                 <el-option
                                   v-for="(item, index) in defaultTemplateList"
                                   :key="index"
@@ -488,8 +488,8 @@
                           style="display: flex; align-items: center"
                         >
                           <el-col v-bind="{ span: 4 }">
-                            <el-form-item label="单据：" label-width="60px">
-                              <el-select v-model="params.dictType">
+                            <el-form-item label="分类：" label-width="60px">
+                              <el-select v-model="params.dictType" @change="changeDictTypeChange">
                                 <el-option
                                   v-for="(item, index) in dictList[
                                     'collaborative_type'
@@ -502,8 +502,8 @@
                             </el-form-item>
                           </el-col>
                           <el-col v-bind="{ span: 4 }">
-                            <el-form-item label="分类：" label-width="60px">
-                              <el-select v-model="params.formId">
+                            <el-form-item label="单据：" label-width="60px">
+                              <el-select v-model="params.formId" @change="changeFormIdChange">
                                 <el-option
                                   v-for="(item, index) in defaultTemplateList"
                                   :key="index"
@@ -690,7 +690,7 @@
                         >
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="分类：" label-width="60px">
-                              <el-select v-model="params.dictType">
+                              <el-select v-model="params.dictType" @change="changeDictTypeChange">
                                 <el-option
                                   v-for="(item, index) in dictList[
                                     'collaborative_type'
@@ -704,7 +704,7 @@
                           </el-col>
                           <el-col v-bind="{ span: 4 }">
                             <el-form-item label="单据：" label-width="60px">
-                              <el-select v-model="params.formId">
+                              <el-select v-model="params.formId" @change="changeFormIdChange">
                                 <el-option
                                   v-for="(item, index) in defaultTemplateList"
                                   :key="index"
@@ -900,6 +900,8 @@
     mixins: [dictMixins, tabMixins],
     data() {
       return {
+        currentDictType: '',
+        currentFormId: '',
         cacheKeyUrl: 'wt-eaf1548b-collaborative',
         configFormDialogFlag: false,
         processSubmitDialogFlag: false,
@@ -1134,23 +1136,26 @@
       }
     },
     watch: {
-      'params.formId': {
-        handler(val) {
-          this.allReload();
-          this.reload();
-          this.deptReload();
-          this.noticeReload();
-        }
-      },
-      'params.dictType': {
-        handler(val) {
-          this.params.formId = this.templateList[val][0].id;
-          this.allReload();
-          this.reload();
-          this.deptReload();
-          this.noticeReload();
-        }
-      }
+      // currentFormId: {
+      //   handler(val) {
+      //     this.params.formId =  this.params.dictType ? this.templateList[val][0].id : '';
+      //     this.currentFormId = this.templateList[this.currentDictType][0].id;
+      //     this.allReload();
+      //     this.reload();
+      //     this.deptReload();
+      //     this.noticeReload();
+      //   }
+      // },
+      // currentDictType: {
+      //   handler(val) {
+      //     this.params.formId =  this.templateList[val][0].id;
+      //     this.currentFormId = this.templateList[val][0].id;
+      //     this.allReload();
+      //     this.reload();
+      //     this.deptReload();
+      //     this.noticeReload();
+      //   }
+      // }
     },
     async created() {
       await this.getDictList('collaborative_type');
@@ -1207,8 +1212,10 @@
         this.templateList = _.groupBy(this.defaultTemplateList, 'dictType');
         this.params.dictType = this.dictList['collaborative_type'][0].value;
         this.params.formId = this.defaultTemplateList[0]?.id;
+        this.currentDictType = this.dictList['collaborative_type'][0].value;
+        this.currentFormId = this.templateList[this.currentDictType][0]?.id;
         let makingJson =
-          JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {};
+          JSON.parse(this.defaultTemplateList?.[0]?.formJson?.makingJson) || {};
           console.log('makingJson~~~', makingJson);
         this.formColumnList = makingJson.list;
         console.log(this.formColumnList);
@@ -1221,6 +1228,7 @@
       },
       /* 表格数据源 */
       async allDatasource({ page, limit, where, order }) {
+        console.log('allDatasource~~~', this.params);
         let [createTimeBegin, createTimeEnd] = this.createTime1 || [];
         let data = await getProcessInstanceAllPage({
           pageNo: page,
@@ -1248,20 +1256,26 @@
       },
       /* 刷新表格 */
       allReload(where) {
+        console.log('allReload~~~', this.params); 
         let find =
           this.defaultTemplateList.find(
-            (item) => item.id == this.params.formId
+            (item) => item.id == this.currentFormId
           ) || {};
-        let makingJson = JSON.parse(find.formJson.makingJson) || {};
+        let makingJson = find.formJson?.makingJson ? JSON.parse(find.formJson.makingJson) || {} : {};
         this.formColumnList = makingJson.list;
-        this.$refs.allTable.reload({ page: 1, where });
+        this.$nextTick(() => {
+            this.$refs.allTable.reload({ page: 1, where });
+        });
       },
       /*  重置 */
       allReset() {
         this.params = { ...defaultParams };
         this.createTime1 = [];
-        this.params.formId = this.defaultTemplateList[0]?.id;
-        this.params.dictType = this.dictList['collaborative_type'][0].value;
+        this.currentDictType = this.dictList['collaborative_type'][0].value;
+        this.currentFormId = this.templateList?.[this.currentDictType]?.[0]?.id;
+        this.params.dictType = '';
+        this.params.formId = '';
+        console.log('allReset~~~', this.params); 
         this.allReload();
       },
       /* 表格数据源 */
@@ -1288,12 +1302,13 @@
       reload(where) {
         let find =
           this.defaultTemplateList.find(
-            (item) => item.id == this.params.formId
+            (item) => item.id == this.currentFormId
           ) || {};
-        let makingJson = JSON.parse(find.formJson.makingJson) || {};
+        let makingJson = find.formJson?.makingJson ? JSON.parse(find.formJson.makingJson) || {} : {};
         this.formColumnList = makingJson.list;
-        this.$refs.table.reload({ page: 1, where });
-        this.$refs.table.reRenderTable();
+        this.$nextTick(() => {
+              this.$refs.table.reload({ page: 1, where });
+        });
       },
 
       /*  重置 */
@@ -1302,7 +1317,8 @@
         this.createTime1 = [];
         this.params.dictType = this.dictList['collaborative_type'][0].value;
         this.params.formId = this.templateList[this.params.dictType][0]?.id;
-
+        this.currentDictType = this.dictList['collaborative_type'][0].value;
+        this.currentFormId = this.templateList[this.currentDictType][0]?.id;
         this.reload();
       },
       /* 表格数据源 */
@@ -1328,12 +1344,13 @@
       deptReload(where) {
         let find =
           this.defaultTemplateList.find(
-            (item) => item.id == this.params.formId
+            (item) => item.id == this.currentFormId
           ) || {};
-        let makingJson = JSON.parse(find.formJson.makingJson) || {};
+        let makingJson = find.formJson?.makingJson ? JSON.parse(find.formJson.makingJson) || {} : {};
         this.formColumnList = makingJson.list;
-
-        this.$refs.deptTable.reload({ page: 1, where });
+        this.$nextTick(() => {
+            this.$refs.deptTable.reload({ page: 1, where });
+        });
       },
       /*  重置 */
       deptReset() {
@@ -1341,6 +1358,8 @@
         this.createTime1 = [];
         this.params.formId = this.defaultTemplateList[0]?.id;
         this.params.dictType = this.dictList['collaborative_type'][0].value;
+        this.currentDictType = this.dictList['collaborative_type'][0].value;
+        this.currentFormId = this.templateList[this.currentDictType][0]?.id;
         this.deptReload();
       },
       /* 表格数据源 */
@@ -1369,7 +1388,7 @@
           this.defaultTemplateList.find(
             (item) => item.id == this.params.formId
           ) || {};
-        let makingJson = JSON.parse(find.formJson.makingJson) || {};
+        let makingJson = find.formJson?.makingJson ? JSON.parse(find.formJson.makingJson) || {} : {};
         this.formColumnList = makingJson.list;
         this.$refs.noticeTable.reload({ page: 1, where });
       },
@@ -1380,6 +1399,8 @@
 
         this.params.formId = this.defaultTemplateList[0]?.id;
         this.params.dictType = this.dictList['collaborative_type'][0].value;
+        this.currentDictType = this.dictList['collaborative_type'][0].value;
+        this.currentFormId = this.templateList[this.currentDictType][0]?.id;
         this.noticeReload();
       },
       /**  */
@@ -1422,7 +1443,23 @@
         } else if (this.activeName == 'notice') {
           this.noticeReset();
         }
-      }
+      },
+      changeDictTypeChange(v) {
+        this.currentDictType = v;
+        this.params.formId = this.templateList[v][0]?.id;
+        this.currentFormId = this.templateList[v][0]?.id;
+        this.allReload();
+        this.reload();
+        this.deptReload();
+        this.noticeReload();
+      },
+      changeFormIdChange(v) {
+        this.currentFormId = v;
+        this.allReload();
+        this.reload();
+        this.deptReload();
+        this.noticeReload();
+      },
     }
   };
 </script>