From 5af43ac612ad32a40e45766ce0719492d56f725f Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Wed, 23 Nov 2022 17:06:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=BA=E6=99=AF=E6=89=B9=E9=87=8F=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=8D=E8=83=BD=E9=80=89=E7=8E=AF=E5=A2=83=E7=BB=84?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--user=郭雨琦
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001020163
---
 .../automation/scenario/EnvSelectPopover.vue  | 53 +++++++++++++++++--
 .../automation/scenario/common/ApiRunMode.vue |  1 +
 .../business/plan/env/EnvSelectPopover.vue    |  9 +++-
 3 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/api-test/frontend/src/business/automation/scenario/EnvSelectPopover.vue b/api-test/frontend/src/business/automation/scenario/EnvSelectPopover.vue
index 40a2a555be..4081fe8c28 100644
--- a/api-test/frontend/src/business/automation/scenario/EnvSelectPopover.vue
+++ b/api-test/frontend/src/business/automation/scenario/EnvSelectPopover.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <div v-for="(pe, pIndex) in eventData" :key="pe.id">
+    <el-radio-group v-model="radio" style="width: 100%" @change="radioChange" class="radio-change">
+      <el-radio :label="ENV_TYPE.JSON">{{ $t('workspace.env_group.env_list') }}</el-radio>
+      <el-radio :label="ENV_TYPE.GROUP"  v-if="isScenario">{{ $t('workspace.env_group.name') }}<i class="el-icon-tickets mode-span" @click="viewGroup"></i></el-radio>
+    </el-radio-group>
+    <div v-for="(pe, pIndex) in eventData" :key="pe.id" v-show="!radio || radio === ENV_TYPE.JSON">
       <el-card shadow="never" style="margin-top: 8px; background: #f5f6f7; border-radius: 4px">
         <i
           @click="expandCard(pIndex)"
@@ -46,6 +50,26 @@
         </div>
       </el-card>
     </div>
+    <div v-show="radio === ENV_TYPE.GROUP">
+      <div>
+        <el-select v-model="envGroupId" :placeholder="$t('workspace.env_group.select')" @change="chooseEnvGroup"
+                   style="margin-top: 8px;width: 100%;" size="small">
+          <el-option v-for="(group, index) in groups" :key="index"
+                     :label="group.name"
+                     :value="group.id"/>
+        </el-select>
+
+      </div>
+      <el-dialog :visible="visible" append-to-body :title="$t('workspace.env_group.name')" @close="visible = false"
+                 style="height: 800px;">
+        <template>
+          <environment-group style="overflow-y: auto;"
+                             :screen-height="'350px'"
+                             :read-only="true"
+          ></environment-group>
+        </template>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -55,10 +79,11 @@ import { environmentGetALL } from 'metersphere-frontend/src/api/environment';
 import MsTag from 'metersphere-frontend/src/components/MsTag';
 import { parseEnvironment } from 'metersphere-frontend/src/model/EnvironmentModel';
 import { getEnvironmentByProjectId } from '@/api/api-environment';
+import EnvironmentGroup from '@/business/commons/EnvironmentGroupList';
 
 export default {
   name: 'EnvSelectPopover',
-  components: { MsTag },
+  components: { EnvironmentGroup,MsTag },
   data() {
     return {
       radio: ENV_TYPE.JSON,
@@ -69,6 +94,7 @@ export default {
       eventData: [],
       evnList: [],
       selectEnvMap: new Map(),
+      envGroupId: this.groupId,
     };
   },
   computed: {
@@ -92,12 +118,33 @@ export default {
       type: Boolean,
       default: true,
     },
+    hasOptionGroup: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    btnStyle: {
+      type: Object,
+      default() {
+        return { width: '360px' };
+      },
+    },
+  },
+  watch: {
+    groupId(val) {
+      this.envGroupId = val;
+    },
   },
   methods: {
     open() {
+      this.envGroupId = this.groupId;
       this.initDefaultEnv();
       this.getgroups();
     },
+    chooseEnvGroup(envGroupId){
+      this.$emit("setEnvGroup", envGroupId);
+    },
     radioChange(val) {
       this.radio = val;
     },
@@ -155,7 +202,7 @@ export default {
           if (this.isScenario) {
             if (this.projectEnvMap) {
               let projectEnvMapElement = this.projectEnvMap[d];
-              if (projectEnvMapElement.length > 0) {
+              if (projectEnvMapElement && projectEnvMapElement.length > 0) {
                 projectEnvMapElement.forEach((envId) => {
                   let filter = envs.filter((e) => e.id === envId);
                   if (!this.selectedEnvName.has(d)) {
diff --git a/api-test/frontend/src/business/automation/scenario/common/ApiRunMode.vue b/api-test/frontend/src/business/automation/scenario/common/ApiRunMode.vue
index a8146ee296..9d3f6076bd 100644
--- a/api-test/frontend/src/business/automation/scenario/common/ApiRunMode.vue
+++ b/api-test/frontend/src/business/automation/scenario/common/ApiRunMode.vue
@@ -13,6 +13,7 @@
           :project-list="projectList"
           :case-id-env-name-map="caseIdEnvNameMap"
           :is-scenario="isScenario"
+          :has-option-group="true"
           :project-env-map="projectEnvListMap"
           :group-id="runConfig.environmentGroupId"
           @setProjectEnvMap="setProjectEnvMap"
diff --git a/test-track/frontend/src/business/plan/env/EnvSelectPopover.vue b/test-track/frontend/src/business/plan/env/EnvSelectPopover.vue
index e7c03c3f37..5e3e9be896 100644
--- a/test-track/frontend/src/business/plan/env/EnvSelectPopover.vue
+++ b/test-track/frontend/src/business/plan/env/EnvSelectPopover.vue
@@ -31,7 +31,7 @@
     </div>
     <div v-show="radio === ENV_TYPE.GROUP">
       <div>
-        <el-select v-model="groupId" :placeholder="$t('workspace.env_group.select')" @change="chooseEnvGroup"
+        <el-select v-model="envGroupId" :placeholder="$t('workspace.env_group.select')" @change="chooseEnvGroup"
                    style="margin-top: 8px;width: 100%;" size="small">
           <el-option v-for="(group, index) in groups" :key="index"
                      :label="group.name"
@@ -75,8 +75,14 @@ export default {
       eventData:[],
       evnList:[],
       selectEnvMap:new Map(),
+      envGroupId: this.groupId,
     }
   },
+  watch: {
+    groupId(val) {
+      this.envGroupId = val;
+    },
+  },
   computed: {
     ENV_TYPE() {
       return ENV_TYPE;
@@ -96,6 +102,7 @@ export default {
   },
   methods: {
     open(){
+      this.envGroupId = this.groupId;
       this.initDefaultEnv();
       this.getgroups();
     },