fix(测试计划): 更改测试计划执行时环境选择弹窗样式，增加滚动条；关联用例时增加按钮loading防止重复提交

--bug=1024332 --user=宋天阳 【测试跟踪】测试计划执行的弹窗，环境较多时，显示的弹窗没有滚动条
https://www.tapd.cn/55049933/s/1349014

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

@@ -1,29 +1,45 @@
 <template>
-
   <div class="msDialogHeader">
-    <span style="float: left;font-size: 18px;color: #303133;">{{ title }}</span>
+    <span style="float: left; font-size: 18px; color: #303133">{{
+      title
+    }}</span>
 
-    <div style="top: 20px; right: 50px; position: absolute;">
-      <el-tooltip effect="dark" :content="$t('commons.full_screen_editing')"
-                  placement="top-start">
-        <font-awesome-icon class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
+    <div style="top: 20px; right: 50px; position: absolute">
+      <el-tooltip
+        effect="dark"
+        :content="$t('commons.full_screen_editing')"
+        placement="top-start"
+      >
+        <font-awesome-icon
+          class="alt-ico"
+          :icon="['fa', 'expand-alt']"
+          size="lg"
+          @click="fullScreen"
+        />
       </el-tooltip>
     </div>
 
-    <div v-if="!hideButton" style="float: right;width: fit-content;">
-      <div style="float: left; margin-right: 8px;">
+    <div v-if="!hideButton" style="float: right; width: fit-content">
+      <div style="float: left; margin-right: 8px">
         <slot name="other"></slot>
       </div>
       <div class="ms_btn">
-        <el-button v-if="enableCancel" @click="cancel" :size="btnSize">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="confirm" @keydown.enter.native.prevent v-prevent-re-click :size="btnSize">
-          {{ $t('commons.confirm') }}
+        <el-button v-if="enableCancel" @click="cancel" :size="btnSize">{{
+          $t("commons.cancel")
+        }}</el-button>
+        <el-button
+          type="primary"
+          :loading="isButtonSaving"
+          @click="confirm"
+          @keydown.enter.native.prevent
+          v-prevent-re-click
+          :size="btnSize"
+        >
+          {{ $t("commons.confirm") }}
         </el-button>
       </div>
     </div>
-
   </div>
-
 </template>
 
 <script>
@@ -34,11 +50,12 @@ export default {
     btnSize: {
       type: String,
       default() {
-        return 'small';
-      }
+        return "small";
+      },
     },
     hideButton: Boolean,
-    enableCancel: Boolean
+    enableCancel: Boolean,
+    isButtonSaving: Boolean,
   },
   methods: {
     cancel() {
@@ -49,9 +66,9 @@ export default {
     },
     fullScreen() {
       this.$emit("fullScreen");
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>

test-track/frontend/src/business/plan/common/TestPlanRunModeWithEnv.vue

@@ -7,7 +7,7 @@
     @close="close"
     :visible.sync="runModeVisible"
   >
-    <div class="env-container">
+    <div class="env-container" style="max-height: 400px; overflow: auto">
       <div>
         <div>{{ $t("commons.environment") }}：</div>
         <env-select-popover

test-track/frontend/src/business/plan/view/comonents/api/TestCaseApiRelevance.vue

@@ -1,11 +1,11 @@
 <template>
-
   <test-case-relevance-base
     @setProject="setProject"
     @save="saveCaseRelevance"
     :plan-id="planId"
-    ref="baseRelevance">
-
+    :is-saving="isSaving"
+    ref="baseRelevance"
+  >
     <template v-slot:aside>
       <ms-api-module
         :relevance-project-id="projectId"
@@ -16,7 +16,8 @@
         :show-case-num="false"
         :is-read-only="true"
         :is-relevance="true"
-        ref="nodeTree"/>
+        ref="nodeTree"
+      />
     </template>
 
     <relevance-api-list
@@ -31,10 +32,15 @@
       :version-enable="versionEnable"
       @isApiListEnableChange="isApiListEnableChange"
       @selectCountChange="setSelectCounts"
-      ref="apiList">
+      ref="apiList"
+    >
       <template v-slot:version>
-        <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion($event,'api')"
-                           margin-left="10"/>
+        <mx-version-select
+          v-xpack
+          :project-id="projectId"
+          @changeVersion="changeVersion($event, 'api')"
+          margin-left="10"
+        />
       </template>
     </relevance-api-list>
 
@@ -50,27 +56,35 @@
       :plan-id="planId"
       @isApiListEnableChange="isApiListEnableChange"
       @selectCountChange="setSelectCounts"
-      ref="apiCaseList">
+      ref="apiCaseList"
+    >
       <template v-slot:version>
-        <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion($event, 'case')"
-                        margin-left="10"/>
+        <mx-version-select
+          v-xpack
+          :project-id="projectId"
+          @changeVersion="changeVersion($event, 'case')"
+          margin-left="10"
+        />
       </template>
     </relevance-case-list>
-
   </test-case-relevance-base>
-
 </template>
 
 <script>
-
 import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
-import {apiDefinitionListBatch, apiDefinitionRelevance} from "@/api/remote/api/api-definition";
-import {apiTestCaseListBlobs, apiTestCaseRelevance} from "@/api/remote/api/api-case";
+import {
+  apiDefinitionListBatch,
+  apiDefinitionRelevance,
+} from "@/api/remote/api/api-definition";
+import {
+  apiTestCaseListBlobs,
+  apiTestCaseRelevance,
+} from "@/api/remote/api/api-case";
 import RelevanceApiList from "@/business/plan/view/comonents/api/RelevanceApiList";
 import RelevanceCaseList from "@/business/plan/view/comonents/api/RelevanceCaseList";
 import MsApiModule from "@/business/plan/view/comonents/api/module/ApiModule";
-import {getVersionFilters} from "@/business/utils/sdk-utils";
+import { getVersionFilters } from "@/business/utils/sdk-utils";
 
 export default {
   name: "TestCaseApiRelevance",
@@ -79,7 +93,7 @@ export default {
     RelevanceCaseList,
     RelevanceApiList,
     TestCaseRelevanceBase,
-    MxVersionSelect
+    MxVersionSelect,
   },
   data() {
     return {
@@ -94,16 +108,17 @@ export default {
       currentRow: {},
       projectId: "",
       versionFilters: [],
+      isSaving: false,
     };
   },
   props: {
     planId: {
-      type: String
+      type: String,
     },
     versionEnable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
     planId() {
@@ -111,7 +126,7 @@ export default {
     },
     projectId() {
       this.getVersionOptions();
-    }
+    },
   },
   mounted() {
     this.getVersionOptions();
@@ -178,9 +193,10 @@ export default {
     },
 
     saveCaseRelevance() {
-      let url = '';
+      let url = "";
       let environmentId = undefined;
       let selectIds = [];
+      this.isSaving = true;
       if (this.isApiListEnable) {
         //查找所有数据
         let params = this.$refs.apiList.getConditions();
@@ -188,53 +204,75 @@ export default {
           .then((response) => {
             let apis = response.data;
             environmentId = this.$refs.apiList.environmentId;
-            selectIds = Array.from(apis).map(row => row.id);
+            selectIds = Array.from(apis).map((row) => row.id);
             let protocol = this.$refs.apiList.currentProtocol;
-            this.postRelevance(apiDefinitionRelevance, environmentId, selectIds, protocol);
+            this.postRelevance(
+              apiDefinitionRelevance,
+              environmentId,
+              selectIds,
+              protocol
+            );
+          })
+          .catch(() => {
+            this.isSaving = false;
           });
       } else {
         let params = this.$refs.apiCaseList.getConditions();
         apiTestCaseListBlobs(params)
-        .then((response) => {
-          let apiCases = response.data;
-          environmentId = this.$refs.apiCaseList.environmentId;
-          selectIds = Array.from(apiCases).map(row => row.id);
-          let protocol = this.$refs.apiCaseList.currentProtocol;
-          this.postRelevance(apiTestCaseRelevance, environmentId, selectIds, protocol);
-        });
+          .then((response) => {
+            let apiCases = response.data;
+            environmentId = this.$refs.apiCaseList.environmentId;
+            selectIds = Array.from(apiCases).map((row) => row.id);
+            let protocol = this.$refs.apiCaseList.currentProtocol;
+            this.postRelevance(
+              apiTestCaseRelevance,
+              environmentId,
+              selectIds,
+              protocol
+            );
+          })
+          .catch(() => {
+            this.isSaving = false;
+          });
       }
-
     },
 
     postRelevance(relevanceList, environmentId, selectIds, protocol) {
       let param = {};
-      if (protocol !== 'DUBBO') {
+      if (protocol !== "DUBBO") {
         if (!environmentId) {
-          this.$warning(this.$t('api_test.environment.select_environment'));
+          this.isSaving = false;
+          this.$warning(this.$t("api_test.environment.select_environment"));
           return;
         }
       }
       if (selectIds.length < 1) {
-        this.$warning(this.$t('test_track.plan_view.please_choose_test_case'));
+        this.isSaving = false;
+        this.$warning(this.$t("test_track.plan_view.please_choose_test_case"));
         return;
       }
       param.planId = this.planId;
       param.selectIds = selectIds;
       param.environmentId = environmentId;
       relevanceList(param)
-      .then(() => {
-        this.$success(this.$t('commons.save_success'));
-        this.$emit('refresh');
-        this.refresh();
-        this.$refs.baseRelevance.close();
-      });
+        .then(() => {
+          this.$success(this.$t("commons.save_success"));
+          this.$emit("refresh");
+          this.refresh();
+          this.$refs.baseRelevance.close();
+          this.isSaving = false;
+        })
+        .catch(() => {
+          this.isSaving = false;
+        });
     },
     getVersionOptions() {
-      getVersionFilters(this.projectId)
-        .then(r => this.versionFilters = r.data);
+      getVersionFilters(this.projectId).then(
+        (r) => (this.versionFilters = r.data)
+      );
     },
     changeVersion(currentVersion, type) {
-      if (type == 'api') {
+      if (type == "api") {
         this.$refs.apiList.condition.versionId = currentVersion || null;
         this.$refs.apiList.initTable();
       } else {
@@ -245,12 +283,11 @@ export default {
     setSelectCounts(data) {
       this.$refs.baseRelevance.selectCounts = data;
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-
 :deep(.select-menu) {
   margin-bottom: 15px;
 }
@@ -259,5 +296,4 @@ export default {
   float: right;
   margin-right: 10px;
 }
-
 </style>

test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue

@@ -1,11 +1,11 @@
 <template>
-
   <test-case-relevance-base
     @setProject="setProject"
     @save="saveCaseRelevance"
     :plan-id="planId"
-    ref="baseRelevance">
-
+    ref="baseRelevance"
+    :is-saving="isSaving"
+  >
     <template v-slot:aside>
       <ms-api-scenario-module
         @nodeSelectEvent="nodeChange"
@@ -14,7 +14,8 @@
         :show-case-num="false"
         :relevance-project-id="projectId"
         :is-read-only="true"
-        ref="nodeTree"/>
+        ref="nodeTree"
+      />
     </template>
 
     <relevance-scenario-list
@@ -24,21 +25,23 @@
       :plan-id="planId"
       :project-id="projectId"
       @selectCountChange="setSelectCounts"
-      ref="apiScenarioList"/>
-
+      ref="apiScenarioList"
+    />
   </test-case-relevance-base>
-
 </template>
 
 <script>
-
 import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
 import RelevanceScenarioList from "./RelevanceScenarioList";
-import {ENV_TYPE} from "metersphere-frontend/src/utils/constants";
-import {getCurrentProjectID, hasLicense, strMapToObj} from "@/business/utils/sdk-utils";
-import {getVersionFilters} from "@/business/utils/sdk-utils";
-import {testPlanAutoCheck} from "@/api/remote/plan/test-plan";
-import {scenarioRelevance} from "@/api/remote/plan/test-plan-scenario";
+import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
+import {
+  getCurrentProjectID,
+  hasLicense,
+  strMapToObj,
+} from "@/business/utils/sdk-utils";
+import { getVersionFilters } from "@/business/utils/sdk-utils";
+import { testPlanAutoCheck } from "@/api/remote/plan/test-plan";
+import { scenarioRelevance } from "@/api/remote/plan/test-plan-scenario";
 import MsApiScenarioModule from "@/business/plan/view/comonents/api/module/ApiScenarioModule";
 
 export default {
@@ -59,16 +62,17 @@ export default {
       currentRow: {},
       projectId: "",
       versionFilters: [],
+      isSaving: false,
     };
   },
   props: {
     planId: {
-      type: String
+      type: String,
     },
     versionEnable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     open() {
@@ -116,18 +120,19 @@ export default {
       param.environmentType = envType;
       param.envGroupId = envGroupId;
 
-      scenarioRelevance(param)
-        .then(() => {
-          this.$success(this.$t('commons.save_success'));
-          this.$emit('refresh');
-          this.refresh();
-          this.autoCheckStatus();
-          this.$refs.baseRelevance.close();
-        });
+      scenarioRelevance(param).then(() => {
+        this.$success(this.$t("commons.save_success"));
+        this.$emit("refresh");
+        this.refresh();
+        this.autoCheckStatus();
+        this.$refs.baseRelevance.close();
+      });
     },
     async saveCaseRelevance() {
+      this.isSaving = true;
       const sign = await this.$refs.apiScenarioList.checkEnv();
       if (!sign) {
+        this.isSaving = false;
         return false;
       }
       let selectIds = [];
@@ -138,16 +143,19 @@ export default {
       let envGroupId = this.$refs.apiScenarioList.envGroupId;
 
       if (selectRows.size < 1) {
-        this.$warning(this.$t('test_track.plan_view.please_choose_test_case'));
+        this.isSaving = false;
+        this.$warning(this.$t("test_track.plan_view.please_choose_test_case"));
         return;
       }
-      selectRows.forEach(row => {
+      selectRows.forEach((row) => {
         selectIds.push(row.id);
-      })
+      });
       if (envType === ENV_TYPE.JSON && (!envMap || envMap.size < 1)) {
+        this.isSaving = false;
         this.$warning(this.$t("api_test.environment.select_environment"));
         return false;
       } else if (envType === ENV_TYPE.GROUP && !envGroupId) {
+        this.isSaving = false;
         this.$warning(this.$t("api_test.environment.select_environment"));
         return false;
       }
@@ -161,14 +169,19 @@ export default {
       param.condition = this.$refs.apiScenarioList.condition;
       scenarioRelevance(param)
         .then(() => {
-          this.$success(this.$t('commons.save_success'));
-          this.$emit('refresh');
+          this.isSaving = false;
+          this.$success(this.$t("commons.save_success"));
+          this.$emit("refresh");
           this.refresh();
           this.autoCheckStatus();
           this.$refs.baseRelevance.close();
+        })
+        .catch(() => {
+          this.isSaving = false;
         });
     },
-    autoCheckStatus() { //  检查执行结果，自动更新计划状态
+    autoCheckStatus() {
+      //  检查执行结果，自动更新计划状态
       if (!this.planId) {
         return;
       }
@@ -179,16 +192,16 @@ export default {
     },
     getVersionOptions() {
       if (hasLicense()) {
-        getVersionFilters(getCurrentProjectID())
-          .then(r => this.versionFilters = r.data);
+        getVersionFilters(getCurrentProjectID()).then(
+          (r) => (this.versionFilters = r.data)
+        );
       }
     },
-  }
+  },
 };
 </script>
 
 <style scoped>
-
 :deep(.select-menu) {
   margin-bottom: 15px;
 }
@@ -201,5 +214,4 @@ export default {
 :deep(.module-input) {
   width: 243px;
 }
-
 </style>

test-track/frontend/src/business/plan/view/comonents/base/TestCaseRelevanceBase.vue

@@ -1,29 +1,59 @@
 <template>
-  <relevance-dialog :width="width" :title="dialogTitle" ref="relevanceDialog" :full-screen="isFullScreen">
+  <relevance-dialog
+    :width="width"
+    :title="dialogTitle"
+    ref="relevanceDialog"
+    :full-screen="isFullScreen"
+  >
     <!-- todo -->
     <template slot="headerBtn" v-if="$slots.headerBtn">
       <div>
         <slot name="headerBtn"></slot>
       </div>
     </template>
-    <template slot="title" slot-scope="{title}" v-if="!$slots.headerBtn">
-      <ms-dialog-header :title="title" :enable-cancel="false" @confirm="save" btn-size="mini" @fullScreen="isFullScreen=!isFullScreen">
+    <template slot="title" slot-scope="{ title }" v-if="!$slots.headerBtn">
+      <ms-dialog-header
+        :is-button-saving="isSaving"
+        :title="title"
+        :enable-cancel="false"
+        @confirm="save"
+        btn-size="mini"
+        @fullScreen="isFullScreen = !isFullScreen"
+      >
         <template #other>
-          <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
+          <table-select-count-bar
+            :count="selectCounts"
+            style="float: left; margin: 5px"
+          />
 
-          <div v-if="flag" style="margin: 5px; float: left;">
-            <el-checkbox v-model="checked" class="el-checkbox__label">{{ $t('test_track.sync_add_api_load') }}</el-checkbox>
+          <div v-if="flag" style="margin: 5px; float: left">
+            <el-checkbox v-model="checked" class="el-checkbox__label">{{
+              $t("test_track.sync_add_api_load")
+            }}</el-checkbox>
           </div>
         </template>
       </ms-dialog-header>
     </template>
 
     <template v-slot:aside>
-      <span v-if="isAcrossSpace" class="menu-title">{{ '[' + $t('project.version.checkout') + $t('commons.space') + ']' }}</span>
-      <el-select v-if="isAcrossSpace" filterable slot="prepend" v-model="workspaceId" @change="changeWorkspace"
-                 class="ms-header-workspace"
-                 size="small">
-        <el-option v-for="(item,index) in workspaceList" :key="index" :label="item.name" :value="item.id"/>
+      <span v-if="isAcrossSpace" class="menu-title">{{
+        "[" + $t("project.version.checkout") + $t("commons.space") + "]"
+      }}</span>
+      <el-select
+        v-if="isAcrossSpace"
+        filterable
+        slot="prepend"
+        v-model="workspaceId"
+        @change="changeWorkspace"
+        class="ms-header-workspace"
+        size="small"
+      >
+        <el-option
+          v-for="(item, index) in workspaceList"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+        />
       </el-select>
       <select-menu
         :data="projects"
@@ -31,22 +61,25 @@
         width="155px"
         :current-data="currentProject"
         :title="$t('test_track.switch_project')"
-        @dataChange="changeProject"/>
+        @dataChange="changeProject"
+      />
       <slot name="aside"></slot>
     </template>
     <slot></slot>
-
   </relevance-dialog>
 </template>
 
 <script>
-
-import MsDialogHeader from 'metersphere-frontend/src/components/MsDialogHeader'
+import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
 import SelectMenu from "@/business/common/SelectMenu";
 import RelevanceDialog from "./RelevanceDialog";
-import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
-import {getUserWorkspaceList} from "metersphere-frontend/src/api/workspace";
-import {getUserProjectList} from "metersphere-frontend/src/api/project";
+import {
+  getCurrentProjectID,
+  getCurrentUserId,
+  getCurrentWorkspaceId,
+} from "metersphere-frontend/src/utils/token";
+import { getUserWorkspaceList } from "metersphere-frontend/src/api/workspace";
+import { getUserProjectList } from "metersphere-frontend/src/api/project";
 import TableSelectCountBar from "metersphere-frontend/src/components/table/MsTableSelectCountBar";
 
 export default {
@@ -55,31 +88,31 @@ export default {
     RelevanceDialog,
     SelectMenu,
     MsDialogHeader,
-    TableSelectCountBar
+    TableSelectCountBar,
   },
   data() {
     return {
       checked: true,
       currentProject: {},
-      projectId: '',
-      projectName: '',
+      projectId: "",
+      projectName: "",
       projects: [],
-      workspaceId: '',
+      workspaceId: "",
       workspaceList: [],
-      currentWorkSpaceId: '',
+      currentWorkSpaceId: "",
       selectCounts: null,
-      isFullScreen: false
+      isFullScreen: false,
     };
   },
   props: {
     planId: {
-      type: String
+      type: String,
     },
     dialogTitle: {
       type: String,
       default() {
-        return this.$t('test_track.plan_view.relevance_test_case');
-      }
+        return this.$t("test_track.plan_view.relevance_test_case");
+      },
     },
     flag: {
       type: Boolean,
@@ -89,26 +122,26 @@ export default {
       type: Boolean,
       default() {
         return false;
-      }
+      },
     },
     isAcrossSpace: {
       type: Boolean,
       default() {
         return false;
-      }
+      },
     },
     multipleProject: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   methods: {
     refreshNode() {
-      this.$emit('refresh');
+      this.$emit("refresh");
     },
 
     save() {
-      this.$emit('save', this.checked);
+      this.$emit("save", this.checked);
     },
 
     close() {
@@ -123,14 +156,16 @@ export default {
     },
 
     getProject() {
-      let realWorkSpaceId = this.isAcrossSpace ? this.workspaceId : this.currentWorkSpaceId;
-      getUserProjectList( {
+      let realWorkSpaceId = this.isAcrossSpace
+        ? this.workspaceId
+        : this.currentWorkSpaceId;
+      getUserProjectList({
         userId: getCurrentUserId(),
-        workspaceId: realWorkSpaceId
-      }).then( res => {
+        workspaceId: realWorkSpaceId,
+      }).then((res) => {
         let data = res.data;
         if (data && data.length > 0) {
-          const index = data.findIndex(d => d.id === getCurrentProjectID());
+          const index = data.findIndex((d) => d.id === getCurrentProjectID());
           this.projects = data;
           if (index !== -1) {
             this.projectId = data[index].id;
@@ -142,27 +177,31 @@ export default {
             this.changeProject(data[0]);
           }
         } else {
-          this.$message.warning(this.$t('commons.current_workspace') + this.$t('commons.not_exist') + this.$t('commons.project') + "!");
+          this.$message.warning(
+            this.$t("commons.current_workspace") +
+              this.$t("commons.not_exist") +
+              this.$t("commons.project") +
+              "!"
+          );
         }
-      })
+      });
     },
     changeProject(project) {
       if (project) {
         this.currentProject = project;
-        this.$emit('setProject', project.id);
+        this.$emit("setProject", project.id);
         // 获取项目时刷新该项目模块
-        this.$emit('refreshNode');
+        this.$emit("refreshNode");
       }
     },
     getWorkSpaceList() {
-      getUserWorkspaceList()
-        .then((r) => {
-          this.workspaceList = r.data;
-        });
+      getUserWorkspaceList().then((r) => {
+        this.workspaceList = r.data;
+      });
     },
     changeWorkspace() {
       this.getProject();
-    }
+    },
   },
   created() {
     this.currentWorkSpaceId = getCurrentWorkspaceId();
@@ -170,8 +209,8 @@ export default {
     if (this.isAcrossSpace) {
       this.getWorkSpaceList();
     }
-  }
-}
+  },
+};
 </script>
 
 <style scoped>