refactor(系统设置): 全局前后置脚本增加历史记录变更详情页面显示优化

--bug=1010312 --user=周骏弘 【系统设置】/【项目设置】-环境管理-前置脚本变更记录-变更前后详情页面-日志详情标题显示不符 https://www.tapd.cn/55049933/s/1105981

backend/src/main/java/io/metersphere/log/utils/ApiTestEnvironmentDiffUtil.java

@@ -19,6 +19,39 @@ public class ApiTestEnvironmentDiffUtil {
 
             // 对比全局脚本配置参数
             if (!StringUtils.equals(bloBsNew.getString("globalScriptConfig"), bloBsOld.getString("globalScriptConfig"))) {
+                JSONObject globalScriptNew = JSON.parseObject(bloBsNew.getString("globalScriptConfig"));
+                JSONObject globalScriptOld = JSON.parseObject(bloBsOld.getString("globalScriptConfig"));
+                // 前置脚本过滤请求类型
+                if (!StringUtils.equals(globalScriptNew.getString("filterRequestPreScript"), globalScriptOld.getString("filterRequestPreScript"))) {
+                    diffMap.put("filterRequestPreScriptRaw1", globalScriptNew.getString("filterRequestPreScript"));
+                    diffMap.put("filterRequestPreScriptRaw2", globalScriptOld.getString("filterRequestPreScript"));
+                }
+                // 后置脚本过滤请求类型
+                if (!StringUtils.equals(globalScriptNew.getString("filterRequestPostScript"), globalScriptOld.getString("filterRequestPostScript"))) {
+                    diffMap.put("filterRequestPostScriptRaw1", globalScriptNew.getString("filterRequestPostScript"));
+                    diffMap.put("filterRequestPostScriptRaw2", globalScriptOld.getString("filterRequestPostScript"));
+                }
+                // 前置脚本执行顺序
+                if (!StringUtils.equals(globalScriptNew.getString("isPreScriptExecAfterPrivateScript"), globalScriptOld.getString("isPreScriptExecAfterPrivateScript"))) {
+                    diffMap.put("isPreScriptExecAfterPrivateScriptRaw1", globalScriptNew.getString("isPreScriptExecAfterPrivateScript"));
+                    diffMap.put("isPreScriptExecAfterPrivateScriptRaw2", globalScriptOld.getString("isPreScriptExecAfterPrivateScript"));
+                }
+                // 后置脚本执行顺序
+                if (!StringUtils.equals(globalScriptNew.getString("isPostScriptExecAfterPrivateScript"), globalScriptOld.getString("isPostScriptExecAfterPrivateScript"))) {
+                    diffMap.put("isPostScriptExecAfterPrivateScriptRaw1", globalScriptNew.getString("isPostScriptExecAfterPrivateScript"));
+                    diffMap.put("isPostScriptExecAfterPrivateScriptRaw2", globalScriptOld.getString("isPostScriptExecAfterPrivateScript"));
+                }
+                // 前置关联场景结果
+                if (!StringUtils.equals(globalScriptNew.getString("connScenarioPreScript"), globalScriptOld.getString("connScenarioPreScript"))) {
+                    diffMap.put("connScenarioPreScriptRaw1", globalScriptNew.getString("connScenarioPreScript"));
+                    diffMap.put("connScenarioPreScriptRaw2", globalScriptOld.getString("connScenarioPreScript"));
+                }
+                // 后置关联场景结果
+                if (!StringUtils.equals(globalScriptNew.getString("connScenarioPostScript"), globalScriptOld.getString("connScenarioPostScript"))) {
+                    diffMap.put("connScenarioPostScriptRaw1", globalScriptNew.getString("connScenarioPostScript"));
+                    diffMap.put("connScenarioPostScriptRaw2", globalScriptOld.getString("connScenarioPostScript"));
+                }
+                // 全局脚本设置
                 diffMap.put("globalScriptConfigRaw1", bloBsNew.getString("globalScriptConfig"));
                 diffMap.put("globalScriptConfigRaw2", bloBsOld.getString("globalScriptConfig"));
             }

frontend/src/business/components/history/api/EnvironmentEditParams.vue

@@ -3,18 +3,42 @@
   <div style="border:1px #DCDFE6 solid;" v-if="!loading">
     <el-tabs v-model="activeName" class="request-tabs">
       <!--全局前置脚本-->
-      <el-tab-pane :label="$t('api_test.definition.request.all_pre_script')" name="allPreScript" v-if="request.script
+      <el-tab-pane :label="$t('api_test.definition.request.all_pre_script')" name="allPreScript" v-if="showPre">
-      && (request.script.preProcessorRaw1 || request.script.preProcessorRaw2 || request.script.preStepProcessorRaw1 || request.script.preStepProcessorRaw2)">
+
+
+        <div v-if="(request.script.globalScriptConfigRaw1 || request.script.globalScriptConfigRaw2)">
+          <div v-if="request.script.globalScriptConfig">
+            <div v-if="request.script.globalScriptConfig.filterRequestPreScriptRaw1 || request.script.globalScriptConfig.filterRequestPreScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.pre_script_filter_request_type')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.filterRequestPreScriptRaw2, request.script.globalScriptConfig.filterRequestPreScriptRaw1)"></div>
+            </div>
+            <div v-if="request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw1 || request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.pre_script_exec_order')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw2, request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw1)"></div>
+            </div>
+            <div v-if="request.script.globalScriptConfig.connScenarioPreScriptRaw1 || request.script.globalScriptConfig.connScenarioPreScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.pre_link_scenario_result')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.connScenarioPreScriptRaw2, request.script.globalScriptConfig.connScenarioPreScriptRaw1)"></div>
+            </div>
+          </div>
+        </div>
+
 
         <div v-if="request.script.preProcessorRaw1 || request.script.preProcessorRaw2">
-          <el-radio-group v-model="preProcessor" size="mini">
+          <el-radio-group size="mini">
             <el-radio-button :label="$t('api_test.script.execute_before_step')" />
           </el-radio-group>
           <div v-html="getDiff(request.script.preProcessorRaw2, request.script.preProcessorRaw1)"></div>
         </div>
 
         <div v-if="request.script.preStepProcessorRaw1 || request.script.preStepProcessorRaw2">
-          <el-radio-group v-model="preStepProcessor" size="mini">
+          <el-radio-group size="mini">
             <el-radio-button :label="$t('api_test.script.execute_before_all_steps')" />
           </el-radio-group>
           <div v-html="getDiff(request.script.preStepProcessorRaw2, request.script.preStepProcessorRaw1)"></div>
@@ -22,31 +46,45 @@
       </el-tab-pane>
 
       <!--全局后置脚本-->
-      <el-tab-pane :label="$t('api_test.definition.request.all_post_script')" name="allPostScript" v-if="request.script
+      <el-tab-pane :label="$t('api_test.definition.request.all_post_script')" name="allPostScript" v-if="showPost">
-      && (request.script.postProcessorRaw1 || request.script.postProcessorRaw2 || request.script.postStepProcessorRaw1 || request.script.postStepProcessorRaw2)">
+
+        <div v-if="(request.script.globalScriptConfigRaw1 || request.script.globalScriptConfigRaw2)">
+          <div v-if="request.script.globalScriptConfig">
+            <div v-if="request.script.globalScriptConfig.filterRequestPostScriptRaw1 || request.script.globalScriptConfig.filterRequestPostScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.post_script_filter_request_type')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.filterRequestPostScriptRaw2, request.script.globalScriptConfig.filterRequestPostScriptRaw1)"></div>
+            </div>
+            <div v-if="request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw1 || request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.post_script_exec_order')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw2, request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw1)"></div>
+            </div>
+            <div v-if="request.script.globalScriptConfig.connScenarioPostScriptRaw1 || request.script.globalScriptConfig.connScenarioPostScriptRaw2">
+              <el-radio-group size="mini">
+                <el-radio-button :label="$t('api_test.script.post_link_scenario_result')"/>
+              </el-radio-group>
+              <div v-html="getDiff(request.script.globalScriptConfig.connScenarioPostScriptRaw2, request.script.globalScriptConfig.connScenarioPostScriptRaw1)"></div>
+            </div>
+          </div>
+        </div>
 
         <div v-if="request.script.postProcessorRaw1 || request.script.postProcessorRaw2">
-          <el-radio-group v-model="postProcessor" size="mini">
+          <el-radio-group size="mini">
             <el-radio-button :label="$t('api_test.script.execute_post_step')"/>
           </el-radio-group>
           <div v-html="getDiff(request.script.postProcessorRaw2, request.script.postProcessorRaw1)"></div>
         </div>
 
         <div v-if="request.script.postStepProcessorRaw1 || request.script.postStepProcessorRaw2">
-          <el-radio-group v-model="postStepProcessor" size="mini">
+          <el-radio-group size="mini">
             <el-radio-button :label="$t('api_test.script.execute_post_all_steps')"/>
           </el-radio-group>
           <div v-html="getDiff(request.script.postStepProcessorRaw2, request.script.postStepProcessorRaw1)"></div>
         </div>
       </el-tab-pane>
-
-      <!--通用全局脚本配置-->
-      <el-tab-pane :label="$t('api_test.script.global_script_config')" name="globalScriptConfig" v-if="request.script
-      && (request.script.globalScriptConfigRaw1 || request.script.globalScriptConfigRaw2)">
-        <template v-slot:default="scope">
-          <div v-html="getDiff(request.script.globalScriptConfigRaw2, request.script.globalScriptConfigRaw1)"></div>
-        </template>
-      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -76,21 +114,34 @@
         preStepProcessor: "preStepProcessor",
         postStepProcessor: "preStepProcessor",
         loading: false,
+
+        showPre: false,
+        showPost: false,
       }
     },
     methods: {
       active() {
+        if (this.request.script && (this.request.script.postProcessorRaw1 || this.request.script.postProcessorRaw2
+          || this.request.script.postStepProcessorRaw1 || this.request.script.postStepProcessorRaw2)
+          || ((this.request.script.globalScriptConfigRaw1 || this.request.script.globalScriptConfigRaw2) &&
+            (this.request.script.globalScriptConfig.filterRequestPostScriptRaw1 || this.request.script.globalScriptConfig.filterRequestPostScriptRaw2
+              || this.request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw1 || this.request.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw2
+              || this.request.script.globalScriptConfig.connScenarioPostScriptRaw1 || this.request.script.globalScriptConfig.connScenarioPostScriptRaw2))){
+          this.showPost = true;
+          this.activeName = 'allPostScript';
+        }else {
+          this.showPost = false;
+        }
         if (this.request.script && (this.request.script.preProcessorRaw1 || this.request.script.preProcessorRaw2
-          || this.request.script.preStepProcessorRaw1 || this.request.script.preStepProcessorRaw2)) {
+          || this.request.script.preStepProcessorRaw1 || this.request.script.preStepProcessorRaw2)
-          this.activeName = "allPreScript";
+          || ((this.request.script.globalScriptConfigRaw1 || this.request.script.globalScriptConfigRaw2) &&
-        }
+            (this.request.script.globalScriptConfig.filterRequestPreScriptRaw1 || this.request.script.globalScriptConfig.filterRequestPreScriptRaw2
-        else if (this.request.script
+              || this.request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw1 || this.request.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw2
-          && (this.request.script.postProcessorRaw1 || this.request.script.postProcessorRaw2
+              || this.request.script.globalScriptConfig.connScenarioPreScriptRaw1 || this.request.script.globalScriptConfig.connScenarioPreScriptRaw2))) {
-            || this.request.script.postStepProcessorRaw1 || this.request.script.postStepProcessorRaw2)) {
+          this.showPre = true;
-          this.activeName = "allPostScript";
+          this.activeName = 'allPreScript';
-        }
+        }else {
-        else if (this.request.script && (this.request.script.globalScriptConfigRaw1 || this.request.script.globalScriptConfigRaw2)) {
+          this.showPre = false;
-          this.activeName = "globalScriptConfig";
         }
       },
       getDiff(v1, v2) {

frontend/src/business/components/history/api/EnvironmentHistoryDetail.vue

@@ -56,6 +56,27 @@
       formatScript(diffValue) {
         this.detail.script = {};
         if (diffValue.globalScriptConfigRaw1 || diffValue.globalScriptConfigRaw2) {
+
+          this.detail.script.globalScriptConfig = {};
+          this.detail.script.globalScriptConfig.filterRequestPreScriptRaw1 = diffValue.filterRequestPreScriptRaw1;
+          this.detail.script.globalScriptConfig.filterRequestPreScriptRaw2 = diffValue.filterRequestPreScriptRaw2;
+
+          this.detail.script.globalScriptConfig.filterRequestPostScriptRaw1 = diffValue.filterRequestPostScriptRaw1;
+          this.detail.script.globalScriptConfig.filterRequestPostScriptRaw2 = diffValue.filterRequestPostScriptRaw2;
+
+          this.detail.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw1 = diffValue.isPreScriptExecAfterPrivateScriptRaw1;
+          this.detail.script.globalScriptConfig.isPreScriptExecAfterPrivateScriptRaw2 = diffValue.isPreScriptExecAfterPrivateScriptRaw2;
+
+          this.detail.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw1 = diffValue.isPostScriptExecAfterPrivateScriptRaw1;
+          this.detail.script.globalScriptConfig.isPostScriptExecAfterPrivateScriptRaw2 = diffValue.isPostScriptExecAfterPrivateScriptRaw2;
+
+          this.detail.script.globalScriptConfig.connScenarioPreScriptRaw1 = diffValue.connScenarioPreScriptRaw1;
+          this.detail.script.globalScriptConfig.connScenarioPreScriptRaw2 = diffValue.connScenarioPreScriptRaw2;
+
+          this.detail.script.globalScriptConfig.connScenarioPostScriptRaw1 = diffValue.connScenarioPostScriptRaw1;
+          this.detail.script.globalScriptConfig.connScenarioPostScriptRaw2 = diffValue.connScenarioPostScriptRaw2;
+
+          // 全局脚本配置
           this.detail.script.globalScriptConfigRaw1 = diffValue.globalScriptConfigRaw1;
           this.detail.script.globalScriptConfigRaw2 = diffValue.globalScriptConfigRaw2;
         }

frontend/src/i18n/en-US.js

@@ -1865,6 +1865,13 @@ export default {
       after_the_post_script_step: "After the script is placed in the step",
       before_the_post_script_step: "Post-in-step before script",
       global_script_config: "Global script config",
+
+      pre_script_filter_request_type: "Pre script filter request type",
+      post_script_filter_request_type: "Post script filter request type",
+      pre_script_exec_order: "Pre script exec order",
+      post_script_exec_order: "Post script exec order",
+      pre_link_scenario_result: "Pre link scenario result",
+      post_link_scenario_result: "Post link scenario result",
     }
   },
   api_report: {

frontend/src/i18n/zh-CN.js

@@ -1870,6 +1870,13 @@ export default {
       after_the_post_script_step: "步骤内后置脚本后",
       before_the_post_script_step: "步骤内后置脚本前",
       global_script_config: "全局脚本配置",
+
+      pre_script_filter_request_type: "前置脚本过滤请求类型",
+      post_script_filter_request_type: "后置脚本过滤请求类型",
+      pre_script_exec_order: "前置脚本执行顺序",
+      post_script_exec_order: "后置脚本执行顺序",
+      pre_link_scenario_result: "前置关联场景结果",
+      post_link_scenario_result: "后置关联场景结果",
     }
   },
   api_report: {

frontend/src/i18n/zh-TW.js

@@ -1870,6 +1870,13 @@ export default {
       after_the_post_script_step: "步驟內後置腳本後",
       before_the_post_script_step: "步驟內後置腳本前",
       global_script_config: "全局腳本配置",
+
+      pre_script_filter_request_type: "前置腳本過濾請求類型",
+      post_script_filter_request_type: "後置腳本過濾請求類型",
+      pre_script_exec_order: "前置腳本執行順序",
+      post_script_exec_order: "後置腳本執行順序",
+      pre_link_scenario_result: "前置關聯場景結果",
+      post_link_scenario_result: "後置關聯場景結果",
     }
   },
   api_report: {