fix(测试跟踪): 微前端子应用新增更新逻辑，修复查看报告时切换不同的测试场景展示错误问题

--bug=1027023 --user=白奇 【测试跟踪】测试计划-报告统计中查看场景报告详情显示未同步变更 https://www.tapd.cn/55049933/s/1381694

api-test/frontend/src/main.js

@@ -106,7 +106,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

framework/sdk-parent/frontend/src/components/MicroApp.vue

@@ -21,7 +21,18 @@ export default {
       microApp: null,
     }
   },
-
+  watch: {
+    routeParams: {
+      handler() {
+        this.microApp.update({
+          defaultPath: this.to,
+          routeParams: this.routeParams,
+          routeName: this.routeName,
+        });
+      },
+      deep: true,
+    }
+  },
   mounted() {
     this.microAppInit()
     this.messageInit()

performance-test/frontend/src/main.js

@@ -97,7 +97,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

project-management/frontend/src/main.js

@@ -92,7 +92,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

report-stat/frontend/src/main.js

@@ -93,7 +93,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

system-setting/frontend/src/main.js

@@ -90,7 +90,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

test-track/frontend/src/business/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue

@@ -58,21 +58,8 @@
     </ms-aside-container>
     <el-main>
       <div v-if="showResponse">
-        <micro-app
-          v-if="!isTemplate"
-          route-name="ApiScenarioReportView"
-          service="api"
-          :route-params="{
-            reportId,
-            isShare,
-            shareId,
-            isPlanReport: true,
-            isTemplate,
-            response,
-          }"
-        />
         <ms-api-report
-          v-else
+          v-show="isTemplate"
           :report-id="reportId"
           :is-share="isShare"
           :share-id="shareId"
@@ -80,6 +67,12 @@
           :is-template="isTemplate"
           :template-report="response"
         />
+        <micro-app
+          v-show="!isTemplate"
+          route-name="ApiScenarioReportView"
+          service="api"
+          :route-params="routeParams"
+        />
       </div>
 
       <div class="empty" v-else>
@@ -90,6 +83,7 @@
 </template>
 
 <script>
+import { debounce } from "lodash-es";
 import MsApiReport from "../api/ApiReportDetail";
 
 import PriorityTableItem from "../../../../../../common/tableItems/planview/PriorityTableItem";
@@ -146,6 +140,14 @@ export default {
       reportId: null,
       response: {},
       showResponse: false,
+      routeParams: {
+        reportId: this.reportId,
+        isShare: this.isShare,
+        shareId: this.shareId,
+        isPlanReport: true,
+        isTemplate: this.isTemplate,
+      },
+      debouncedRenderReport: debounce(this.renderReport, 300), // 300ms防抖
     };
   },
   mounted() {
@@ -239,31 +241,24 @@ export default {
       }
     },
     rowClick(row) {
-
+      this.debouncedRenderReport(row);
-      if (!this.isTemplate) {
+    },
-        if (this.reportId === row.reportId) {
+    renderReport(row) {
-          return;
+      if (this.isTemplate) {
+        if (row.response) {
+          this.response = row.response;
+          this.showResponse = true;
+        }
+      } else {
+        if (
+          row.reportId &&
+          row.lastResult !== "Running" &&
+          row.lastResult !== "Waiting"
+        ) {
+          this.routeParams.reportId = row.reportId;
+          this.showResponse = true;
         }
       }
-
-      this.showResponse = false;
-      this.$nextTick(() => {
-        if (this.isTemplate) {
-          if (row.response) {
-            this.response = row.response;
-            this.showResponse = true;
-          }
-        } else {
-          if (
-            row.reportId &&
-            row.lastResult !== "Running" &&
-            row.lastResult !== "Waiting"
-          ) {
-            this.reportId = row.reportId;
-            this.showResponse = true;
-          }
-        }
-      });
     },
   },
 };

test-track/frontend/src/business/plan/view/comonents/report/detail/component/UiScenarioResult.vue

@@ -1,47 +1,51 @@
 <template>
   <el-container class="scenario-info">
-    <ms-aside-container width="500px" :default-hidden-bottom-top="200" :enable-auto-height="true">
+    <ms-aside-container
+      width="500px"
+      :default-hidden-bottom-top="200"
+      :enable-auto-height="true"
+    >
       <el-card>
         <el-scrollbar>
-          <ms-table v-loading="loading"
+          <ms-table
-                    :show-select-all="false"
+            v-loading="loading"
-                    :screen-height="null"
+            :show-select-all="false"
-                    :enable-selection="false"
+            :screen-height="null"
-                    :highlight-current-row="true"
+            :enable-selection="false"
-                    @refresh="getScenarioApiCase"
+            :highlight-current-row="true"
-                    @handleRowClick="rowClick"
+            @refresh="getScenarioApiCase"
-                    :data="scenarioCases">
+            @handleRowClick="rowClick"
-
+            :data="scenarioCases"
-            <ms-table-column
+          >
-                :width="80"
+            <ms-table-column :width="80" :label="$t('commons.id')" prop="num">
-                :label="$t('commons.id')"
-                prop="num">
             </ms-table-column>
-            <ms-table-column
+            <ms-table-column :label="$t('commons.name')" prop="name">
-                :label="$t('commons.name')"
-                prop="name">
             </ms-table-column>
             <el-table-column
               prop="principalName"
-              :label="$t('test_track.plan.plan_principal')"/>
+              :label="$t('test_track.plan.plan_principal')"
+            />
             <ms-table-column
-                :label="$t('test_track.case.priority')"
+              :label="$t('test_track.case.priority')"
-                :width="80">
+              :width="80"
+            >
               <template v-slot:default="scope">
-                <priority-table-item :value="scope.row.level" ref="priority"/>
+                <priority-table-item :value="scope.row.level" ref="priority" />
               </template>
             </ms-table-column>
             <ms-table-column
-                :width="70"
+              :width="70"
-                :label="$t('api_test.automation.step')"
+              :label="$t('api_test.automation.step')"
-                prop="stepTotal">
+              prop="stepTotal"
+            >
             </ms-table-column>
             <ms-table-column
-                :width="80"
+              :width="80"
-                :label="$t('test_track.plan_view.execute_result')"
+              :label="$t('test_track.plan_view.execute_result')"
-                prop="lastResult">
+              prop="lastResult"
-              <template v-slot:default="{row}">
+            >
-                <ms-test-plan-api-status :status="row.lastResult"/>
+              <template v-slot:default="{ row }">
+                <ms-test-plan-api-status :status="row.lastResult" />
               </template>
             </ms-table-column>
           </ms-table>
@@ -50,36 +54,32 @@
     </ms-aside-container>
     <el-main>
       <div v-if="showResponse">
-        <micro-app v-if="!isTemplate"
+        <micro-app
-                   service="ui"
+          v-show="!isTemplate"
-                   route-name="ApiReportView"
+          service="ui"
-                   :route-params="{
+          route-name="ApiReportView"
-                    reportId,
+          :route-params="routeParams"
-                    isShare,
+        />
-                    shareId,
-                    isPlanReport: true,
-                    isTemplate,
-                    response,
-                    showCancelButton: false,
-                    showReportNameButton: false
-                 }"/>
         <UiShareReportDetail
-          v-else
+          v-show="isTemplate"
           :report-id="reportId"
           :share-id="shareId"
           :is-share="isShare"
           :template-report="response"
           :is-template="true"
           :is-plan="true"
-          :show-cancel-button="false"/>
+          :show-cancel-button="false"
+        />
+      </div>
+      <div class="empty" v-else>
+        {{ $t("test_track.plan.load_case.content_empty") }}
       </div>
-      <div class="empty" v-else>{{ $t('test_track.plan.load_case.content_empty') }}</div>
     </el-main>
   </el-container>
 </template>
 
 <script>
-import UiShareReportDetail from "../ui/UiShareReportDetail"
+import UiShareReportDetail from "../ui/UiShareReportDetail";
 import PriorityTableItem from "../../../../../../common/tableItems/planview/PriorityTableItem";
 import TypeTableItem from "../../../../../../common/tableItems/planview/TypeTableItem";
 import MethodTableItem from "../../../../../../common/tableItems/planview/MethodTableItem";
@@ -98,8 +98,13 @@ export default {
     MsMainContainer,
     MsAsideContainer,
     MicroApp,
-    MsTableColumn, MsTable, StatusTableItem, MethodTableItem, TypeTableItem, PriorityTableItem,
+    MsTableColumn,
-    UiShareReportDetail
+    MsTable,
+    StatusTableItem,
+    MethodTableItem,
+    TypeTableItem,
+    PriorityTableItem,
+    UiShareReportDetail,
   },
   props: {
     planId: String,
@@ -122,13 +127,23 @@ export default {
       response: {},
       showResponse: false,
       resultMap: {
-        'Success' : 'Pass',
+        Success: "Pass",
-        'Error' : 'Failure',
+        Error: "Failure",
-        'STOP' : 'STOP',
+        STOP: "STOP",
-        'Running' : 'Running',
+        Running: "Running",
-        'UnExecute' : 'Prepare',
+        UnExecute: "Prepare",
-      }
+      },
-    }
+      routeParams: {
+        reportId: this.reportId,
+        isShare: this.isShare,
+        shareId: this.shareId,
+        isPlanReport: true,
+        isTemplate: this.isTemplate,
+        response: this.response,
+        showCancelButton: false,
+        showReportNameButton: false,
+      },
+    };
   },
   mounted() {
     this.getScenarioApiCase();
@@ -136,18 +151,18 @@ export default {
   watch: {
     scenarioCases() {
       if (this.scenarioCases) {
-        this.$emit('setSize', this.scenarioCases.length);
+        this.$emit("setSize", this.scenarioCases.length);
       }
     },
     uiAllCases() {
       this.getScenarioApiCase();
-    }
+    },
   },
   methods: {
     getScenarioApiCase() {
       this.scenarioCases = [];
       if (this.filterStatus && this.filterStatus.length > 0) {
-        this.uiAllCases.forEach(item => {
+        this.uiAllCases.forEach((item) => {
           if (this.filterStatus.indexOf(item.lastResult) > -1) {
             this.scenarioCases.push(item);
           }
@@ -157,32 +172,29 @@ export default {
       }
     },
     rowClick(row) {
-      if (!this.isTemplate) {
-        if (this.reportId === row.reportId) {
-          return;
-        }
-      }
-      this.showResponse = false;
       this.$nextTick(() => {
         if (this.isTemplate) {
           if (row.response) {
-            this.showResponse = true;
             this.response = row.response;
+            this.showResponse = true;
           }
         } else {
-          if (row.reportId && row.lastResult !== "Running" && row.lastResult !== "Waiting") {
+          if (
-            this.showResponse = true;
+            row.reportId &&
+            row.lastResult !== "Running" &&
+            row.lastResult !== "Waiting"
+          ) {
             this.reportId = row.reportId;
+            this.showResponse = true;
           }
-       }
+        }
-      })
+      });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 .padding-col {
   padding-right: 0px;
 }

test-track/frontend/src/main.js

@@ -108,7 +108,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }

workstation/frontend/src/main.js

@@ -94,7 +94,16 @@ export async function unmount(props) {
 }
 
 /**
- * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+ * 更新钩子，目前只有routeParams更新，后续有其他属性更新再添加
  */
-export async function update(props) {
+export async function update (props) {
+  const { defaultPath, routeParams, routeName } = props;
+  // 微服务过来的路由
+  if (defaultPath || routeName) {
+    microRouter.push({
+      path: defaultPath,
+      params: routeParams,
+      name: routeName,
+    });
+  }
 }