From aa704da18cdc01cdb550c316993605281e82e4dd Mon Sep 17 00:00:00 2001
From: zhangdahai112 <dahai.zhang@fit2cloud.com>
Date: Sun, 25 Dec 2022 17:07:03 +0800
Subject: [PATCH] =?UTF-8?q?revert(UI=E8=87=AA=E5=8A=A8=E5=8C=96):=20?=
 =?UTF-8?q?=E6=94=BE=E5=BC=80UI=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../environment/EnvironmentHttpConfig.vue     |  78 +++++++--
 .../commons/ApiScenarioVariables.vue          | 151 ++++++++++++++----
 .../menu/environment/EnvironmentList.vue      |   8 +-
 .../components/EnvironmentEdit.vue            |   2 +-
 .../plan/service/TestPlanService.java         |  32 +++-
 .../comonents/ui/RelevanceUiScenarioList.vue  |  35 +++-
 .../ui/TestCaseUiScenarioRelevance.vue        |   6 +-
 .../comonents/ui/TestPlanUiScenarioList.vue   |  32 ++--
 .../plan/view/comonents/ui/UiRunMode.vue      |  47 +++++-
 .../src/business/utils/track-table-header.js  |   1 +
 10 files changed, 328 insertions(+), 64 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/environment/EnvironmentHttpConfig.vue b/framework/sdk-parent/frontend/src/components/environment/EnvironmentHttpConfig.vue
index a1596704c6..d1b6f0918d 100644
--- a/framework/sdk-parent/frontend/src/components/environment/EnvironmentHttpConfig.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/EnvironmentHttpConfig.vue
@@ -45,11 +45,57 @@
           </el-input>
         </div>
 
-        <p>{{ $t('api_test.request.headers') }}</p>
-        <el-row>
-          <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
-        </el-row>
-        <ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
+        <!-- 接口测试配置       -->
+        <form-section :title="$t('commons.api')" :init-active=true>
+          <p>{{ $t('api_test.request.headers') }}</p>
+          <el-row>
+            <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{
+                $t("commons.batch_add")
+              }}
+            </el-link>
+          </el-row>
+          <ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
+        </form-section>
+
+        <!--    UI 配置    -->
+        <form-section :title="$t('commons.ui_test')" :init-active=false v-if="condition.type !== 'MODULE'">
+          <el-row :gutter="10" style="padding-top: 10px;">
+            <el-col :span="6">
+              <!-- 浏览器驱动 -->
+              <span style="margin-right: 10px;">{{ $t("ui.browser") }}</span>
+              <el-select
+                size="mini"
+                v-model="httpConfig.browser"
+                style="width: 100px"
+              >
+                <el-option
+                  v-for="b in browsers"
+                  :key="b.value"
+                  :value="b.value"
+                  :label="b.label"
+                ></el-option>
+              </el-select>
+
+            </el-col>
+            <el-col :span="6">
+              <!-- 性能模式 -->
+              <el-checkbox
+                v-model="httpConfig.headlessEnabled"
+              >
+                <span> {{ $t("ui.performance_mode") }}</span>
+              </el-checkbox>
+              <ms-instructions-icon size="10" :content="$t('ui.per_tip')"/>
+            </el-col>
+          </el-row>
+
+          <!--          当前版本实现免登录是基于 cookie 的但是现在由于安全性问题绝大多数网站都不支持 cookie登录所以先屏蔽了-->
+          <!--          <el-row :gutter="10">-->
+          <!--            <el-col :span="24">-->
+          <!--              <ms-ui-scenario-cookie-table :items="httpConfig.cookie" ref="cookieTable"/>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
+        </form-section>
+
         <div style="margin-top: 20px">
           <el-button v-if="!condition.id" type="primary" style="float: right" size="mini" @click="add">
             {{ $t('commons.add') }}
@@ -121,10 +167,12 @@ import {getUUID} from "../../utils";
 import {KeyValue} from "../../model/EnvTestModel";
 import Vue from "vue";
 import BatchAddParameter from "./commons/BatchAddParameter";
+import FormSection from "metersphere-frontend/src/components/form/FormSection";
+import MsInstructionsIcon from 'metersphere-frontend/src/components/MsInstructionsIcon';
 
 export default {
   name: "MsEnvironmentHttpConfig",
-  components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter},
+  components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter, FormSection, MsInstructionsIcon},
   props: {
     httpConfig: new HttpConfig(),
     projectId: String,
@@ -165,9 +213,21 @@ export default {
         socket: "",
         domain: "",
         port: 0,
-        headers: [new KeyValue()]
+        headers: [new KeyValue()],
+        headlessEnabled: true,
+        browser: 'CHROME'
       },
-      beforeCondition: {}
+      beforeCondition: {},
+      browsers: [
+        {
+          label: this.$t("chrome"),
+          value: "CHROME",
+        },
+        {
+          label: this.$t("firefox"),
+          value: "FIREFOX",
+        },
+      ],
     };
   },
   watch: {
@@ -289,7 +349,7 @@ export default {
     list() {
       if (this.projectId) {
         this.result = getApiModuleByProjectIdAndProtocol(this.projectId, "HTTP").then((response) => {
-          if (response.data  && response.data !== null) {
+          if (response.data && response.data !== null) {
             this.moduleOptions = response.data;
           }
         });
diff --git a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
index 91a9ded583..9c1799bbb6 100644
--- a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
@@ -18,12 +18,18 @@
           :content="$t('commons.import')"
           @click="importJSON"
         />
-        <ms-table-button
-          v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
-          icon="el-icon-box"
-          :content="$t('commons.export')"
-          @click="exportJSON"
-        />
+        <el-dropdown @command="handleExportCommand" class="scenario-ext-btn" trigger="hover"
+                     v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
+          <ms-table-button
+            style="margin-left: 10px"
+            icon="el-icon-box"
+            :content="$t('commons.export')"
+          />
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="exportApi">{{ $t('envrionment.export_variable_tip') }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
         <el-link
           style="margin-left: 10px"
           @click="batchAdd"
@@ -58,6 +64,31 @@
       >
         <ms-table-column prop="num" sortable label="ID" min-width="60">
         </ms-table-column>
+
+        <ms-table-column
+          prop="scope"
+          sortable
+          :label="$t('commons.scope')"
+          :filters="scopeTypeFilters"
+          :filter-method="filterScope"
+          min-width="120">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.scope"
+              :placeholder="$t('commons.please_select')"
+              size="mini"
+              @change="changeType(scope.row)"
+            >
+              <el-option
+                v-for="item in scopeTypeFilters"
+                :key="item.value"
+                :label="item.text"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </ms-table-column>
+
         <ms-table-column
           prop="name"
           :label="$t('api_test.variable_name')"
@@ -84,9 +115,9 @@
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.type"
+              v-if="!scope.row.scope || scope.row.scope == 'api'"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType(scope.row)"
             >
               <el-option
                 v-for="item in typeSelectOptions"
@@ -95,6 +126,20 @@
                 :value="item.value"
               />
             </el-select>
+
+            <el-select
+              v-else
+              v-model="scope.row.type"
+              :placeholder="$t('commons.please_select')"
+              size="mini"
+            >
+              <el-option
+                v-for="item in uiTypeSelectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </template>
         </ms-table-column>
 
@@ -128,14 +173,14 @@
           sortable
         >
           <template slot-scope="scope">
-            <el-input v-model="scope.row.description" size="mini" />
+            <el-input v-model="scope.row.description" size="mini"/>
           </template>
         </ms-table-column>
 
         <ms-table-column :label="$t('commons.operating')" width="150">
           <template v-slot:default="scope">
             <span>
-              <el-switch v-model="scope.row.enable" size="mini" />
+              <el-switch v-model="scope.row.enable" size="mini"/>
               <el-tooltip
                 effect="dark"
                 :content="$t('commons.remove')"
@@ -171,7 +216,7 @@
         </ms-table-column>
       </ms-table>
     </div>
-    <batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
     <api-variable-setting ref="apiVariableSetting"></api-variable-setting>
     <variable-import
       ref="variableImport"
@@ -181,7 +226,7 @@
 </template>
 
 <script>
-import { KeyValue } from "../../../model/EnvTestModel";
+import {KeyValue} from "../../../model/EnvTestModel";
 import MsApiVariableInput from "./ApiVariableInput";
 import BatchAddParameter from "./BatchAddParameter";
 import MsTableButton from "../../MsTableButton";
@@ -189,8 +234,9 @@ import MsTable from "../../table/MsTable";
 import MsTableColumn from "../../table/MsTableColumn";
 import ApiVariableSetting from "./ApiVariableSetting";
 import CsvFileUpload from "./variable/CsvFileUpload";
-import { downloadFile, getUUID, operationConfirm } from "../../../utils";
+import {downloadFile, getUUID, operationConfirm} from "../../../utils";
 import VariableImport from "./variable/VariableImport";
+import _ from "lodash";
 
 export default {
   name: "MsApiScenarioVariables",
@@ -230,15 +276,25 @@ export default {
         },
       ],
       typeSelectOptions: [
-        { value: "CONSTANT", label: this.$t("api_test.automation.constant") },
-        { value: "LIST", label: this.$t("test_track.case.list") },
-        { value: "CSV", label: "CSV" },
-        { value: "COUNTER", label: this.$t("api_test.automation.counter") },
-        { value: "RANDOM", label: this.$t("api_test.automation.random") },
+        {value: "CONSTANT", label: this.$t("api_test.automation.constant")},
+        {value: "LIST", label: this.$t("test_track.case.list")},
+        {value: "CSV", label: "CSV"},
+        {value: "COUNTER", label: this.$t("api_test.automation.counter")},
+        {value: "RANDOM", label: this.$t("api_test.automation.random")},
+      ],
+      uiTypeSelectOptions: [
+        {value: "STRING", label: this.$t("api_test.automation.string")},
+        {value: "ARRAY", label: this.$t("api_test.automation.array")},
+        {value: "JSON", label: this.$t("api_test.automation.json")},
+        {value: "NUMBER", label: this.$t("api_test.automation.number")},
       ],
       variables: {},
       selectVariable: "",
       editData: {},
+      scopeTypeFilters: [
+        {text: this.$t("commons.api"), value: "api"},
+        {text: this.$t("commons.ui_test"), value: "ui"},
+      ]
     };
   },
   watch: {
@@ -279,15 +335,15 @@ export default {
       if (repeatKey !== "") {
         this.$warning(
           this.$t("api_test.environment.common_config") +
-            "【" +
-            repeatKey +
-            "】" +
-            this.$t("load_test.param_is_duplicate")
+          "【" +
+          repeatKey +
+          "】" +
+          this.$t("load_test.param_is_duplicate")
         );
       }
       if (isNeedCreate) {
         this.variables.push(
-          new KeyValue({ enable: true, id: getUUID(), type: "CONSTANT" })
+          new KeyValue({enable: true, id: getUUID(), type: "CONSTANT", scope: "api"})
         );
       }
       this.$emit("change", this.variables);
@@ -304,6 +360,10 @@ export default {
         data.files = [];
         data.quotedData = "false";
       }
+
+      if (!data.scope || data.scope == "ui") {
+        data.type = 'STRING';
+      }
     },
     valueText(data) {
       switch (data.type) {
@@ -320,11 +380,11 @@ export default {
     },
     querySearch(queryString, cb) {
       let restaurants = [
-        { value: "UTF-8" },
-        { value: "UTF-16" },
-        { value: "GB2312" },
-        { value: "ISO-8859-15" },
-        { value: "US-ASCll" },
+        {value: "UTF-8"},
+        {value: "UTF-16"},
+        {value: "GB2312"},
+        {value: "ISO-8859-15"},
+        {value: "US-ASCll"},
       ];
       let results = queryString
         ? restaurants.filter(this.createFilter(queryString))
@@ -346,6 +406,9 @@ export default {
           this.$set(item, "description", item.remark);
           item.remark = undefined;
         }
+        if (!item.scope) {
+          this.$set(item, "scope", "api");
+        }
         index++;
       });
     },
@@ -369,7 +432,7 @@ export default {
         }
       );
     },
-    filter() {
+    filter(scope) {
       let datas = [];
       this.variables.forEach((item) => {
         if (this.selectVariable && this.selectVariable != "" && item.name) {
@@ -389,6 +452,12 @@ export default {
       });
       this.variables = datas;
     },
+    filterScope(value, row) {
+      if (value == "ui") {
+        return row.scope == "ui";
+      }
+      return !row.scope || row.scope == "api";
+    },
     openSetting(data) {
       this.$refs.apiVariableSetting.open(data);
     },
@@ -449,8 +518,15 @@ export default {
       this.sortParameters();
     },
     exportJSON() {
-      if (this.$refs.variableTable.selectIds.length < 1) {
-        this.$warning(this.$t("api_test.environment.select_variable"));
+      let apiVariable = [];
+      this.$refs.variableTable.selectRows.forEach((r) => {
+        if (!r.scope || r.scope != "ui") {
+          apiVariable.push(r);
+        }
+      });
+
+      if (apiVariable.length < 1) {
+        this.$warning(this.$t("api_test.environment.select_api_variable"));
         return;
       }
       let variablesJson = [];
@@ -460,7 +536,7 @@ export default {
         if (row.type === "CSV") {
           messages = this.$t("variables.csv_download");
         }
-        if (row.name) {
+        if (row.name && (!row.scope || row.scope == "api")) {
           variablesJson.push(row);
         }
       });
@@ -493,10 +569,21 @@ export default {
         }
       });
     },
+    handleExportCommand(command){
+      this.exportJSON();
+    }
   },
   created() {
     if (this.items.length === 0) {
-      this.items.push(new KeyValue({ enable: true }));
+      this.items.push(new KeyValue({enable: true, scope: "api"}));
+    } else {
+      //历史数据默认是 api 应用场景
+      _.forEach(this.items, item => {
+        if (!item.scope) {
+          this.$set(item, "scope", "api");
+        }
+      })
+      this.variables = this.items;
     }
   },
 };
diff --git a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
index 91eba967d2..00a6e06d42 100644
--- a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
+++ b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue
@@ -136,8 +136,8 @@ import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator
 import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOperatorButton";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import ApiEnvironmentConfig from "metersphere-frontend/src/components/environment/ApiEnvironmentConfig";
-import {Environment, parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel";
-import EnvironmentEdit from "metersphere-frontend/src/components/environment/EnvironmentEdit";
+import {Environment, parseEnvironment, HttpConfig} from "metersphere-frontend/src/model/EnvironmentModel";
+import EnvironmentEdit from "./components/EnvironmentEdit";
 import MsAsideItem from "metersphere-frontend/src/components/MsAsideItem";
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import ProjectSwitch from "metersphere-frontend/src/components/head/ProjectSwitch";
@@ -174,7 +174,7 @@ export default {
       projectList: [],
       condition: {},   //封装传递给后端的查询条件
       environments: [],
-      currentEnvironment: new Environment(),
+      currentEnvironment: new Environment({httpConfig: new HttpConfig()}),
       result: {},
       loading: false,
       dialogVisible: false,
@@ -288,7 +288,7 @@ export default {
     createEnv() {
       this.dialogTitle = this.$t('api_test.environment.create');
       this.dialogVisible = true;
-      this.currentEnvironment = new Environment();
+      this.currentEnvironment = new Environment({httpConfig: new HttpConfig()});
       this.currentEnvironment.projectId = this.currentProjectId;
       this.currentEnvironment.currentProjectId = this.currentProjectId;
       this.ifCreate = true;
diff --git a/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue b/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
index d94de0077b..59a82d41a7 100644
--- a/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
+++ b/project-management/frontend/src/business/menu/environment/components/EnvironmentEdit.vue
@@ -155,7 +155,7 @@ import {REQUEST_HEADERS} from "metersphere-frontend/src/utils/constants";
 import {CommonConfig, Environment} from "metersphere-frontend/src/model/EnvironmentModel";
 import MsApiHostTable from "metersphere-frontend/src/components/environment/commons/ApiHostTable";
 import MsDatabaseConfig from "metersphere-frontend/src/components/environment/database/DatabaseConfig";
-import MsEnvironmentHttpConfig from "metersphere-frontend/src/components/environment/EnvironmentHttpConfig";
+import MsEnvironmentHttpConfig from "./EnvironmentHttpConfig";
 import MsEnvironmentCommonConfig from "metersphere-frontend/src/components/environment/EnvironmentCommonConfig";
 import MsEnvironmentSSLConfig from "metersphere-frontend/src/components/environment/EnvironmentSSLConfig";
 import MsApiAuthConfig from "metersphere-frontend/src/components/environment/auth/ApiAuthConfig";
diff --git a/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java b/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
index 12702565bf..8b7065a1c7 100644
--- a/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
+++ b/test-track/backend/src/main/java/io/metersphere/plan/service/TestPlanService.java
@@ -65,8 +65,6 @@ import org.springframework.kafka.core.KafkaTemplate;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
 
 import javax.annotation.Resource;
 import javax.servlet.ServletOutputStream;
@@ -1554,6 +1552,10 @@ public class TestPlanService {
         envMap = planTestPlanApiCaseService.getApiCaseEnv(planId);
         Map<String, List<String>> scenarioEnv = planTestPlanScenarioCaseService.getApiScenarioEnv(planId);
 
+        if (DiscoveryUtil.hasService(MicroServiceName.UI_TEST)) {
+            scenarioEnv = mergeUiScenarioEnv(planId, scenarioEnv);
+        }
+
         Set<String> projectIds = scenarioEnv.keySet();
         for (String projectId : projectIds) {
             if (envMap.containsKey(projectId)) {
@@ -1576,6 +1578,32 @@ public class TestPlanService {
         return envMap;
     }
 
+    /**
+     * 合并ui场景的环境信息
+     * @param planId
+     * @param scenarioEnv
+     * @return
+     */
+    private Map<String, List<String>> mergeUiScenarioEnv(String planId, Map<String, List<String>> scenarioEnv) {
+        Map<String, List<String>> uiScenarioEnv = planTestPlanUiScenarioCaseService.getUiScenarioEnv(planId);
+        if (MapUtils.isEmpty(scenarioEnv)) {
+            return uiScenarioEnv;
+        }
+        if (MapUtils.isNotEmpty(uiScenarioEnv)) {
+            uiScenarioEnv.entrySet().forEach(entry -> {
+                if (scenarioEnv.containsKey(entry.getKey())) {
+                    List<String> environmentIds = scenarioEnv.get(entry.getKey());
+                    entry.getValue().forEach(eId -> {
+                        if (!environmentIds.contains(eId)) {
+                            environmentIds.add(eId);
+                        }
+                    });
+                }
+            });
+        }
+        return scenarioEnv;
+    }
+
     public String runPlan(TestPlanRunRequest testplanRunRequest) {
         //检查测试计划下有没有可以执行的用例；
         if (!haveExecCase(testplanRunRequest.getTestPlanId(), false)) {
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
index 38d9c31e72..0e6c09f61a 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
@@ -1,5 +1,21 @@
 <template>
   <div v-loading="loading">
+    <env-group-popover
+      :env-map="projectEnvMap"
+      :project-ids="projectIds"
+      :show-env-group="false"
+      @setProjectEnvMap="setProjectEnvMap"
+      :environment-type.sync="environmentType"
+      :group-id="envGroupId"
+      :is-scenario="false"
+      @setEnvGroup="setEnvGroup"
+      :show-config-button-with-out-permission="
+        showConfigButtonWithOutPermission
+      "
+      :project-list="projectList"
+      ref="envPopover"
+      class="env-popover"
+    />
 
     <ms-table-adv-search-bar :condition.sync="condition" class="adv-search-bar"
                              v-if="condition.components !== undefined && condition.components.length > 0"
@@ -99,6 +115,9 @@ import {
   getCustomTableWidth
 } from "metersphere-frontend/src/utils/tableUtils";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
+import EnvGroupPopover from "@/business/plan/env/EnvGroupPopover";
+import {getApiScenarioEnvByProjectId} from "@/api/remote/api/api-automation";
+import {getUiScenarioEnvByProjectId} from "@/api/remote/ui/ui-automation";
 
 export default {
   name: "RelevanceUiScenarioList",
@@ -112,6 +131,7 @@ export default {
     MsTag,
     MsTableAdvSearchBar,
     MsTableColumn,
+    EnvGroupPopover,
   },
   props: {
     referenced: {
@@ -147,6 +167,7 @@ export default {
       envGroupId: "",
       versionFilters: [],
       fieldsWidth: getCustomTableWidth('TEST_PLAN_UI_SCENARIO_CASE'),
+      projectIds: new Set()
     };
   },
   computed: {
@@ -244,10 +265,22 @@ export default {
     selectCountChange(data) {
       this.selectRows = this.$refs.scenarioTable.selectRows;
       this.$emit("selectCountChange", data);
+      this.initProjectIds();
     },
     showReport() {
 
-    }
+    },
+    initProjectIds() {
+      this.projectIds.clear();
+      // this.map.clear();
+      this.selectRows.forEach((row) => {
+        getUiScenarioEnvByProjectId(row.id).then((res) => {
+          let data = res.data;
+          data.projectIds.forEach((d) => this.projectIds.add(d));
+          // this.map.set(row.id, data.projectIds);
+        });
+      });
+    },
   }
 };
 </script>
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
index a657c7dcfd..bcb611d342 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
@@ -148,6 +148,10 @@ export default {
       let map = this.$refs.apiScenarioList.map;
       let envGroupId = this.$refs.apiScenarioList.envGroupId;
 
+      if (!envMap || envMap.size == 0) {
+        this.$warning(this.$t('api_test.environment.select_environment'));
+        return;
+      }
       selectRows.forEach(row => {
         selectIds.push(row.id);
       })
@@ -179,8 +183,6 @@ export default {
           this.autoCheckStatus();
           this.$refs.baseRelevance.close();
         });
-
-
     },
     autoCheckStatus() { //  检查执行结果，自动更新计划状态
       if (!this.planId) {
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
index 706ae3fad2..a01391b7d1 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
@@ -147,7 +147,8 @@
                            :filters="apiscenariofilters.RESULT_FILTERS"
                            :label="$t('api_test.automation.last_result')">
             <template v-slot:default="{row}">
-              <el-link @click="showReport(row)" :disabled="!row.lastResult || row.lastResult==='PENDING' || row.lastResult==='UnExecute'">
+              <el-link @click="showReport(row)"
+                       :disabled="!row.lastResult || row.lastResult==='PENDING' || row.lastResult==='UnExecute'">
                 <ms-test-plan-api-status :status="row.lastResult==='UnExecute' ? 'PENDING' : row.lastResult"/>
               </el-link>
             </template>
@@ -176,8 +177,8 @@
                 :select-row="this.$refs.table ? this.$refs.table.selectRows : new Set()" ref="batchEdit"
                 @batchEdit="batchEdit"/>
 
-        <ui-run-mode @handleRunBatch="handleRunBatch" ref="runMode" :custom-run-mode="true"
-                     :custom-serial-on-sample-error="true"/>
+    <ui-run-mode @handleRunBatch="handleRunBatch" ref="runMode" :custom-run-mode="true"
+                 :custom-serial-on-sample-error="true" :request="conditionRequest"/>
 
     <ms-task-center ref="taskCenter" :show-menu="false"/>
   </div>
@@ -327,6 +328,8 @@ export default {
         ]
       },
       versionFilters: [],
+      //
+      conditionRequest: {}
     }
   },
   computed: {
@@ -358,14 +361,14 @@ export default {
     },
     search() {
       initCondition(this.condition, this.condition.selectAll);
-      if(this.condition && this.condition.filters && this.condition.filters.last_result){
-        if(this.condition.filters.last_result.length > 0){
+      if (this.condition && this.condition.filters && this.condition.filters.last_result) {
+        if (this.condition.filters.last_result.length > 0) {
           //校验是否含有PENDING
-          if(this.condition.filters.last_result.includes("PENDING")){
+          if (this.condition.filters.last_result.includes("PENDING")) {
             this.condition.filters.last_result = [...this.condition.filters.last_result, "UnExecute"]
           }
           //校验是否含有ERROR
-          if(this.condition.filters.last_result.includes("ERROR")){
+          if (this.condition.filters.last_result.includes("ERROR")) {
             this.condition.filters.last_result = [...this.condition.filters.last_result, "FAIL"]
           }
         }
@@ -437,12 +440,19 @@ export default {
       let rows = this.orderBySelectRows(this.$refs.table.selectRows);
       this.planCaseIds = [];
       rows.forEach(row => {
-        this.planCaseIds.push(row.id);
+        this.planCaseIds.push(row.caseId);
       })
+      this.conditionRequest.id = getUUID();
+      this.conditionRequest.ids = this.planCaseIds;
+      this.conditionRequest.projectId = this.projectId;
+      this.conditionRequest.condition = this.condition;
       this.$refs.runMode.open();
     },
     orderBySelectRows(rows) {
-      let selectIds = Array.from(rows).map(row => row.id);
+      let selectIds = this.$refs.table.selectIds;
+      if (rows) {
+        selectIds = Array.from(rows).map(row => row.id);
+      }
       let array = [];
       for (let i in this.tableData) {
         if (selectIds.indexOf(this.tableData[i].id) !== -1) {
@@ -499,8 +509,8 @@ export default {
                       },
                     },
                   },
-                this.$t("ui.view_config")
-              ),
+                  this.$t("ui.view_config")
+                ),
               ])
             );
             validate = false;
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue b/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
index 5dc2c51dcc..3d56bbf3ed 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/ui/UiRunMode.vue
@@ -7,6 +7,21 @@
     :visible.sync="runModeVisible"
   >
     <div class="mode-container">
+
+      <div>
+        <div>{{ $t("commons.environment") }}：</div>
+        <env-select-popover :project-ids="projectIds"
+                            :project-list="projectList"
+                            :project-env-map="projectEnvListMap"
+                            :environment-type="'JSON'"
+                            :has-option-group="false"
+                            :group-id="runConfig.environmentGroupId"
+                            @setProjectEnvMap="setProjectEnvMap"
+                            ref="envSelectPopover"
+                            class="mode-row"
+        ></env-select-popover>
+      </div>
+
       <!-- 浏览器 -->
       <div class="browser-row wrap">
         <div class="title">{{ $t("ui.browser") }}：</div>
@@ -175,11 +190,13 @@
 
 <script>
 import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter'
-import {getOwnerProjects} from "@/business/utils/sdk-utils";
+import {getCurrentProjectID, getOwnerProjects, strMapToObj} from "@/business/utils/sdk-utils";
+import {uiScenarioEnvMap} from "@/api/remote/ui/ui-automation";
+import EnvSelectPopover from "@/business/plan/env/EnvSelectPopover";
 
 export default {
   name: "UiRunMode",
-  components: {MsDialogFooter},
+  components: {MsDialogFooter, EnvSelectPopover},
   data() {
     return {
       runModeVisible: false,
@@ -207,6 +224,8 @@ export default {
       },
       projectList: [],
       projectIds: new Set(),
+      projectEnvListMap: {},
+      caseIdEnvNameMap: {},
     };
   },
   props: {
@@ -262,6 +281,7 @@ export default {
       };
       this.runModeVisible = true;
       this.getWsProjects();
+      this.showPopover();
     },
     changeMode() {
       this.runConfig.runWithinResourcePool = false;
@@ -296,6 +316,29 @@ export default {
       this.$emit("handleRunBatch", this.runConfig);
       this.close();
     },
+    setProjectEnvMap(projectEnvMap) {
+      this.runConfig.envMap = strMapToObj(projectEnvMap);
+    },
+    showPopover() {
+      this.showScenarioPopover();
+    },
+    showScenarioPopover() {
+      let currentProjectID = getCurrentProjectID();
+      this.projectIds.clear();
+      uiScenarioEnvMap(this.request).then((res) => {
+        let data = res.data;
+        this.projectEnvListMap = data;
+        if (data) {
+          for (let d in data) {
+            this.projectIds.add(d);
+          }
+        }
+        if (this.projectIds.size === 0) {
+          this.projectIds.add(currentProjectID);
+        }
+        this.$refs.envSelectPopover.open();
+      });
+    },
   },
 };
 </script>
diff --git a/test-track/frontend/src/business/utils/track-table-header.js b/test-track/frontend/src/business/utils/track-table-header.js
index 7b33a4f927..85ed7af597 100644
--- a/test-track/frontend/src/business/utils/track-table-header.js
+++ b/test-track/frontend/src/business/utils/track-table-header.js
@@ -88,6 +88,7 @@ const TRACK_HEADER = {
     {id: 'name', key: '2', label: 'api_test.automation.scenario_name'},
     {id: 'versionId', key: 'd', label: 'commons.version'},
     {id: 'level', key: '3', label: 'api_test.automation.case_level'},
+    {id: 'envs', key: '8', label: 'commons.environment'},
     {id: 'tagNames', key: '4', label: 'api_test.automation.tag'},
     {id: 'stepTotal', key: '7', label: 'api_test.automation.step'},
     {id: 'passRate', key: '9', label: 'api_test.automation.passing_rate'},