refactor(环境组): 对环境组选项进行过滤分组

--bug=1008140 --user=lyh 【环境组】-项目不属于环境组可见环境组选项 和需求不一致
https://www.tapd.cn/55049933/s/1076963

backend/src/main/java/io/metersphere/controller/EnvironmentGroupController.java

@@ -7,6 +7,7 @@ import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.controller.request.EnvironmentGroupRequest;
+import io.metersphere.dto.EnvironmentGroupDTO;
 import io.metersphere.service.EnvironmentGroupService;
 import org.springframework.web.bind.annotation.*;
 
@@ -71,4 +72,9 @@ public class EnvironmentGroupController {
     public void copy(@PathVariable String id) {
         environmentGroupService.copy(id);
     }
+
+    @PostMapping("/get/option")
+    public List<EnvironmentGroupDTO> getEnvOptionGroup(@RequestBody EnvironmentGroupRequest request) {
+        return environmentGroupService.getEnvOptionGroup(request.getProjectIds());
+    }
 }

backend/src/main/java/io/metersphere/controller/request/EnvironmentGroupRequest.java

@@ -19,4 +19,5 @@ public class EnvironmentGroupRequest extends EnvironmentGroup {
      */
     private Map<String, String> map;
     private List<String> groupIds;
+    private List<String> projectIds;
 }

backend/src/main/java/io/metersphere/dto/EnvironmentGroupDTO.java

@@ -0,0 +1,11 @@
+package io.metersphere.dto;
+
+import io.metersphere.base.domain.EnvironmentGroup;
+import lombok.Getter;
+import lombok.Setter;
+
+@Setter
+@Getter
+public class EnvironmentGroupDTO extends EnvironmentGroup {
+    private Boolean disabled = false;
+}

backend/src/main/java/io/metersphere/service/EnvironmentGroupService.java

@@ -10,15 +10,19 @@ import io.metersphere.base.mapper.ext.ExtEnvironmentGroupMapper;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.controller.request.EnvironmentGroupRequest;
+import io.metersphere.dto.EnvironmentGroupDTO;
 import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.ibatis.session.ExecutorType;
 import org.apache.ibatis.session.SqlSession;
 import org.apache.ibatis.session.SqlSessionFactory;
+import org.springframework.beans.BeanUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.UUID;
@@ -46,6 +50,8 @@ public class EnvironmentGroupService {
     private ApiTestEnvironmentMapper apiTestEnvironmentMapper;
     @Resource
     private ApiAutomationService apiAutomationService;
+    @Resource
+    private EnvironmentGroupProjectService environmentGroupProjectService;
 
     public EnvironmentGroup add(EnvironmentGroupRequest request) {
         request.setWorkspaceId(SessionUtils.getCurrentWorkspaceId());
@@ -246,4 +252,24 @@ public class EnvironmentGroupService {
         }
         sqlSession.flushStatements();
     }
+
+    public List<EnvironmentGroupDTO> getEnvOptionGroup(List<String> projectIds) {
+        EnvironmentGroupExample example = new EnvironmentGroupExample();
+        example.createCriteria().andWorkspaceIdEqualTo(SessionUtils.getCurrentWorkspaceId());
+        List<EnvironmentGroupDTO> result = new ArrayList<>();
+        List<EnvironmentGroup> groups = environmentGroupMapper.selectByExample(example);
+        for (EnvironmentGroup group : groups) {
+            Map<String, String> envMap = environmentGroupProjectService.getEnvMap(group.getId());
+            EnvironmentGroupDTO dto = new EnvironmentGroupDTO();
+            BeanUtils.copyProperties(group, dto);
+            if (CollectionUtils.isNotEmpty(projectIds)) {
+                boolean b = envMap.keySet().containsAll(projectIds);
+                if (BooleanUtils.isFalse(b)) {
+                    dto.setDisabled(true);
+                }
+            }
+            result.add(dto);
+        }
+        return result;
+    }
 }

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -137,7 +137,7 @@
                                  :group-id="envGroupId" :project-list="projectList"
                                  :show-config-button-with-out-permission="showConfigButtonWithOutPermission"
                                  @setProjectEnvMap="setProjectEnvMap" @setEnvGroup="setEnvGroup"
-                                 @showPopover="showPopover"
+                                 @showPopover="showPopover" :has-option-group="true"
                                  ref="envPopover" class="ms-message-right"/>
                     <el-tooltip v-if="!debugLoading" content="Ctrl + R" placement="top">
                       <el-dropdown split-button type="primary" @click="runDebug" class="ms-message-right" size="mini" @command="handleCommand" v-permission="['PROJECT_API_SCENARIO:READ+EDIT', 'PROJECT_API_SCENARIO:READ+CREATE']">

frontend/src/business/components/api/automation/scenario/EnvGroup.vue

@@ -2,7 +2,6 @@
   <div>
     <div style="margin-left: 20px;">
       <el-select v-model="envGroupId" placeholder="请选择用户组" style="margin-top: 8px;width: 200px;" size="small">
-        <!--  todo  如果缺少对应的项目进行提示 -->
         <el-option v-for="(group, index) in groups" :key="index"
                    :label="group.name"
                    :value="group.id"/>
@@ -23,7 +22,6 @@
 </template>
 
 <script>
-import {getCurrentProjectID} from "@/common/js/utils";
 import EnvironmentGroup from "@/business/components/settings/workspace/environment/EnvironmentGroupList";
 
 export default {
@@ -58,8 +56,6 @@ export default {
       this.envGroupId = this.groupId;
     },
     init() {
-      // todo  params 查询包含当前项目ID的工作空间下用户组。
-      // 如果项目组中缺少项目项 在选项上进行警告提示，并且禁用选项。
       this.$post('/environment/group/get/all',{}, res => {
         let data = res.data;
         this.groups = data ? data : [];

frontend/src/business/components/api/automation/scenario/EnvGroupWithOption.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div style="margin-left: 20px;">
+      <el-select v-model="envGroupId" placeholder="请选择用户组" style="margin-top: 8px;width: 200px;" size="small">
+        <el-option-group
+          v-for="group in groups"
+          :key="group.label"
+          :label="group.label">
+          <el-option
+            v-for="item in group.options"
+            :key="item.name"
+            :label="item.name"
+            :disabled="item.disabled"
+            :value="item.id">
+          </el-option>
+        </el-option-group>
+      </el-select>
+      <span style="margin-left: 8px;">环境组</span>
+      <i class="el-icon-view icon-view-btn" @click="viewGroup"></i>
+    </div>
+    <el-button type="primary" @click="handleConfirm" size="small" class="env-confirm">确 定</el-button>
+    <el-dialog :visible="visble" append-to-body :title="'环境组'" @close="visble = false" style="height: 800px;">
+      <template>
+        <environment-group style="overflow-y: auto;"
+                           :screen-height="'350px'"
+                           :read-only="true"
+        ></environment-group>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import EnvironmentGroup from "@/business/components/settings/workspace/environment/EnvironmentGroupList";
+
+export default {
+  name: "EnvGroupWithOption",
+  components: {EnvironmentGroup},
+  data() {
+    return {
+      groups: [],
+      envGroupId: this.groupId,
+      visble: false,
+      disabledGroups: [],
+      notDisabledGroups: [],
+      result: {}
+    }
+  },
+  props: {
+    groupId: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    projectIds: Set,
+  },
+  watch: {
+    groupId(val) {
+      this.envGroupId = val;
+    }
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    open() {
+      this.envGroupId = this.groupId;
+    },
+    init() {
+      this.result = this.$post("/environment/group/get/option", {projectIds: [...this.projectIds]}, res => {
+        let groups = res.data;
+        this.disabledGroups = groups.filter(group => group.disabled === true);
+        this.notDisabledGroups = groups.filter(group => group.disabled === false);
+        this.$set(this.groups, 0, {
+          label: '可用环境组',
+          options: this.notDisabledGroups
+        });
+        this.$set(this.groups, 1, {
+          label: '不可用环境组(缺少项目环境)',
+          options: this.disabledGroups
+        });
+      })
+    },
+    viewGroup() {
+      this.visble = true;
+    },
+    async handleConfirm() {
+      const sign = await this.checkEnv();
+      if (sign) {
+        this.$emit("setEnvGroup", this.envGroupId);
+        this.$emit('close');
+      }
+    },
+    checkEnv() {
+      return new Promise((resolve) => {
+        if (!this.envGroupId) {
+          this.$warning("请选择环境组！");
+          resolve(false);
+          return false;
+        }
+        this.$get("/environment/group/project/map/" + this.envGroupId, res => {
+          let data = res.data;
+          if (!data) {
+            this.$warning("环境组缺少环境！");
+            resolve(false);
+            return;
+          }
+          let map = new Map(Object.entries(data));
+          for (let id of this.projectIds) {
+            if (!map.get(id)) {
+              this.$warning("此环境组缺少必要的项目环境！");
+              resolve(false);
+              return;
+            }
+          }
+          resolve(true);
+        });
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.env-confirm {
+  margin-left: 20px;
+  width: 360px;
+  margin-top: 10px;
+}
+.icon-view-btn {
+  margin-left: 5px;
+}
+.icon-view-btn:hover {
+  cursor: pointer;
+}
+</style>

frontend/src/business/components/api/automation/scenario/EnvPopover.vue

@@ -19,9 +19,13 @@
                 @setProjectEnvMap="setProjectEnvMap"
                 v-show="!radio || radio === ENV_TYPE.JSON"
                 ref="envSelect"/>
-    <!-- todo 如果工作空间下的环境组都不包含当前项目则不显示 -->
+    <env-group ref="envGroup" v-show="radio === ENV_TYPE.GROUP && !hasOptionGroup" @close="visible = false"
-    <env-group ref="envGroup" v-show="radio === ENV_TYPE.GROUP" @close="visible = false" :project-ids="projectIds"
+               :project-ids="projectIds"
                @setEnvGroup="setEnvGroup" :group-id="groupId"></env-group>
+    <!-- 对环境组选项进行分类 可用｜不可用 -->
+    <env-group-with-option ref="envOptionGroup" v-show="radio === ENV_TYPE.GROUP && hasOptionGroup" @close="visible = false"
+                           :project-ids="projectIds"
+                           @setEnvGroup="setEnvGroup" :group-id="groupId"></env-group-with-option>
     <el-button type="primary" slot="reference" size="mini" style="margin-top: 2px;">
       {{ $t('api_test.definition.request.run_env') }}
       <i class="el-icon-caret-bottom el-icon--right"></i>
@@ -33,10 +37,11 @@
 import EnvSelect from "@/business/components/api/automation/scenario/EnvSelect";
 import {ENV_TYPE} from "@/common/js/constants";
 import EnvGroup from "@/business/components/api/automation/scenario/EnvGroup";
+import EnvGroupWithOption from "@/business/components/api/automation/scenario/EnvGroupWithOption";
 
 export default {
   name: "EnvPopover",
-  components: {EnvGroup, EnvSelect},
+  components: {EnvGroup, EnvSelect, EnvGroupWithOption},
   props: {
     envMap: Map,
     projectIds: Set,
@@ -77,6 +82,12 @@ export default {
       default() {
         return "bottom";
       }
+    },
+    hasOptionGroup: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     }
   },
   data() {
@@ -105,8 +116,13 @@ export default {
     },
     openEnvSelect() {
       this.$refs.envSelect.open();
+      if (!this.hasOptionGroup) {
         this.$refs.envGroup.init();
         this.$refs.envGroup.open();
+      } else {
+        this.$refs.envOptionGroup.init();
+        this.$refs.envOptionGroup.open();
+      }
     },
     setProjectEnvMap(map) {
       this.$emit("setProjectEnvMap", map);
@@ -123,7 +139,8 @@ export default {
           let res = this.$refs.envSelect.checkEnv(data);
           resolve(res);
         } else if (this.environmentType === ENV_TYPE.GROUP) {
-          let res = this.$refs.envGroup.checkEnv();
+          let res = !this.hasOptionGroup ? this.$refs.envGroup.checkEnv() :
+            this.$refs.envOptionGroup.checkEnv();
           res.then(r => {
             resolve(r);
           })

frontend/src/business/components/api/automation/scenario/maximize/ScenarioHeader.vue

@@ -28,7 +28,7 @@
           <env-popover :disabled="scenarioDefinition.length < 1" :isReadOnly="scenarioDefinition.length < 1"
                        :env-map="envMap" :project-ids="projectIds" @setProjectEnvMap="setProjectEnvMap"
                        :environment-type.sync="envType" :group-id="envGroupId"
-                       @showPopover="showPopover" :project-list="projectList" ref="envPopover" class="ms-right"
+                       @showPopover="showPopover" :project-list="projectList" ref="envPopover" class="ms-right" :has-option-group="true"
                        :result="envResult"/>
 
           <el-dropdown split-button type="primary" @click="runDebug" style="margin-right: 10px" size="mini" @command="handleCommand" v-if="!debug">