refactor(用户组): 列表添加成员列

backend/src/main/java/io/metersphere/base/mapper/ext/ExtGroupMapper.xml

@@ -4,7 +4,8 @@
 
 
     <select id="getGroupList" resultType="io.metersphere.dto.GroupDTO">
-        select * from (
+        select *, (select count(distinct user_group.user_id) from user_group where user_group.group_id = temp.id) as memberSize
+        from (
             select g.*, o.name as scopeName from `group` g, organization o
             <where>
                 and g.scope_id = o.id

backend/src/main/java/io/metersphere/base/mapper/ext/ExtUserGroupMapper.java

@@ -2,6 +2,7 @@ package io.metersphere.base.mapper.ext;
 
 import io.metersphere.base.domain.Group;
 import io.metersphere.base.domain.User;
+import io.metersphere.controller.request.group.EditGroupRequest;
 import io.metersphere.controller.request.member.QueryMemberRequest;
 import io.metersphere.controller.request.organization.QueryOrgMemberRequest;
 import io.metersphere.dto.RelatedSource;
@@ -30,4 +31,6 @@ public interface ExtUserGroupMapper {
     List<Group> getProjectMemberGroups(@Param("projectId") String projectId,@Param("userId") String userId);
 
     List<RelatedSource> getRelatedSource(@Param("userId") String userId);
+
+    List<User> getGroupUser(@Param("request")EditGroupRequest request);
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtUserGroupMapper.xml

@@ -95,4 +95,13 @@
                  JOIN organization o ON user_group.source_id = o.id
         WHERE user_id = #{userId} -- org_admin org_member aaa
     </select>
+    <select id="getGroupUser" resultType="io.metersphere.base.domain.User">
+        select distinct user.id, user.name, user.email, user.phone, user.create_time
+          from user join user_group ug on user.id = ug.user_id
+         where ug.group_id = #{request.userGroupId}
+        <if test="request.name != null and request.name !=''">
+            and user.name like concat('%', #{request.name},'%')
+        </if>
+        order by ug.update_time desc
+    </select>
 </mapper>

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

@@ -1,11 +1,16 @@
 package io.metersphere.controller;
 
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import io.metersphere.base.domain.Group;
 import io.metersphere.base.domain.Organization;
+import io.metersphere.base.domain.User;
 import io.metersphere.commons.constants.PermissionConstants;
+import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.controller.request.GroupRequest;
 import io.metersphere.controller.request.group.EditGroupRequest;
+import io.metersphere.controller.request.group.EditGroupUserRequest;
 import io.metersphere.dto.GroupDTO;
 import io.metersphere.dto.GroupPermissionDTO;
 import io.metersphere.service.GroupService;
@@ -106,4 +111,30 @@ public class GroupController {
     public List<?> getResource(@PathVariable String type, @PathVariable String id) {
         return groupService.getResource(type, id);
     }
+
+    @PostMapping("/user/{goPage}/{pageSize}")
+    public Pager<List<User>> getGroupUser(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody EditGroupRequest editGroupRequest) {
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        return PageUtils.setPageInfo(page, groupService.getGroupUser(editGroupRequest));
+    }
+
+    @GetMapping("/rm/{userId}/{groupId}")
+    public void removeGroupMember(@PathVariable String userId, @PathVariable String groupId) {
+        groupService.removeGroupMember(userId, groupId);
+    }
+
+    @GetMapping("/source/{userId}/{groupId}")
+    public List<?> getGroupSource(@PathVariable String userId, @PathVariable String groupId) {
+        return groupService.getGroupSource(userId, groupId);
+    }
+
+    @PostMapping("/add/member")
+    public void addGroupUser(@RequestBody EditGroupUserRequest request) {
+        groupService.addGroupUser(request);
+    }
+
+    @PostMapping("/edit/member")
+    public void editGroupUser(@RequestBody EditGroupUserRequest request) {
+        groupService.editGroupUser(request);
+    }
 }

backend/src/main/java/io/metersphere/controller/request/group/EditGroupUserRequest.java

@@ -0,0 +1,14 @@
+package io.metersphere.controller.request.group;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.List;
+
+@Getter
+@Setter
+public class EditGroupUserRequest {
+    private List<String> userIds;
+    private List<String> sourceIds;
+    private String groupId;
+}

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

@@ -8,4 +8,5 @@ import lombok.Setter;
 @Setter
 public class GroupDTO extends Group {
     private String scopeName;
+    private Long memberSize;
 }

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

@@ -14,7 +14,9 @@ import io.metersphere.commons.user.SessionUser;
 import io.metersphere.commons.utils.*;
 import io.metersphere.controller.request.GroupRequest;
 import io.metersphere.controller.request.group.EditGroupRequest;
+import io.metersphere.controller.request.group.EditGroupUserRequest;
 import io.metersphere.dto.*;
+import io.metersphere.i18n.Translator;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -57,6 +59,8 @@ public class GroupService {
     @Resource
     private ProjectMapper projectMapper;
 
+    private static final String GLOBAL = "global";
+
     private static final Map<String, List<String>> map = new HashMap<String, List<String>>(4){{
         put(UserGroupType.SYSTEM, Arrays.asList(UserGroupType.SYSTEM, UserGroupType.ORGANIZATION, UserGroupType.WORKSPACE, UserGroupType.PROJECT));
         put(UserGroupType.ORGANIZATION, Arrays.asList(UserGroupType.ORGANIZATION, UserGroupType.WORKSPACE, UserGroupType.PROJECT));
@@ -83,7 +87,7 @@ public class GroupService {
         group.setCreateTime(System.currentTimeMillis());
         group.setUpdateTime(System.currentTimeMillis());
         if (BooleanUtils.isTrue(request.getGlobal())) {
-            group.setScopeId("global");
+            group.setScopeId(GLOBAL);
         } else {
             group.setScopeId(request.getScopeId());
         }
@@ -237,7 +241,7 @@ public class GroupService {
     public List<Group> getGroupsByType(GroupRequest request) {
         String resourceId = request.getResourceId();
         String type = request.getType();
-        List<String> scopeList = Arrays.asList("global", resourceId);
+        List<String> scopeList = Arrays.asList(GLOBAL, resourceId);
         GroupExample groupExample = new GroupExample();
         groupExample.createCriteria().andScopeIdIn(scopeList)
                 .andTypeEqualTo(type);
@@ -300,7 +304,7 @@ public class GroupService {
     private Pager<List<GroupDTO>> getUserGroup(String groupType, EditGroupRequest request) {
         List<String> types;
         String orgId = SessionUtils.getCurrentOrganizationId();
-        List<String> scopes = Arrays.asList("global", orgId);
+        List<String> scopes = Arrays.asList(GLOBAL, orgId);
         int goPage = request.getGoPage();
         int pageSize = request.getPageSize();
         Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
@@ -348,11 +352,11 @@ public class GroupService {
         return groupMapper.selectByExample(new GroupExample());
     }
 
-    public List<? extends Object> getResource(String type, String groupId) {
+    public List<?> getResource(String type, String groupId) {
         List<T> resource = new ArrayList<>();
         Group group = groupMapper.selectByPrimaryKey(groupId);
         String orgId = group.getScopeId();
-        if (!StringUtils.equals("global", orgId)) {
+        if (!StringUtils.equals(GLOBAL, orgId)) {
             Organization organization = organizationMapper.selectByPrimaryKey(orgId);
             if (organization == null) {
                 return resource;
@@ -362,7 +366,7 @@ public class GroupService {
         if (StringUtils.equals(UserGroupType.ORGANIZATION, type)) {
             OrganizationExample organizationExample = new OrganizationExample();
             OrganizationExample.Criteria criteria = organizationExample.createCriteria();
-            if (!StringUtils.equals(orgId, "global")) {
+            if (!StringUtils.equals(orgId, GLOBAL)) {
                 criteria.andIdEqualTo(orgId);
             }
            return organizationMapper.selectByExample(organizationExample);
@@ -371,7 +375,7 @@ public class GroupService {
         if (StringUtils.equals(UserGroupType.WORKSPACE, type)) {
             WorkspaceExample workspaceExample = new WorkspaceExample();
             WorkspaceExample.Criteria criteria = workspaceExample.createCriteria();
-            if (!StringUtils.equals(orgId, "global")) {
+            if (!StringUtils.equals(orgId, GLOBAL)) {
                 criteria.andOrganizationIdEqualTo(orgId);
             }
             return workspaceMapper.selectByExample(workspaceExample);
@@ -382,7 +386,7 @@ public class GroupService {
             ProjectExample.Criteria pc = projectExample.createCriteria();
             WorkspaceExample workspaceExample = new WorkspaceExample();
             WorkspaceExample.Criteria criteria = workspaceExample.createCriteria();
-            if (!StringUtils.equals(orgId, "global")) {
+            if (!StringUtils.equals(orgId, GLOBAL)) {
                 criteria.andOrganizationIdEqualTo(orgId);
                 List<Workspace> workspaces = workspaceMapper.selectByExample(workspaceExample);
                 List<String> list = workspaces.stream().map(Workspace::getId).collect(Collectors.toList());
@@ -393,4 +397,125 @@ public class GroupService {
 
         return resource;
     }
+
+    public List<User> getGroupUser(EditGroupRequest request) {
+        return extUserGroupMapper.getGroupUser(request);
+    }
+
+    public void removeGroupMember(String userId, String groupId) {
+        UserGroupExample userGroupExample = new UserGroupExample();
+        userGroupExample.createCriteria()
+                .andGroupIdEqualTo(groupId)
+                .andUserIdEqualTo(userId);
+        userGroupMapper.deleteByExample(userGroupExample);
+    }
+
+    public List<?> getGroupSource(String userId, String groupId) {
+        UserGroupExample userGroupExample = new UserGroupExample();
+        userGroupExample.createCriteria().andUserIdEqualTo(userId).andGroupIdEqualTo(groupId);
+        List<UserGroup> userGroups = userGroupMapper.selectByExample(userGroupExample);
+        List<String> sources = userGroups.stream().map(UserGroup::getSourceId).collect(Collectors.toList());
+        if (sources.isEmpty()) {
+            return new ArrayList<>();
+        }
+
+        Group group = groupMapper.selectByPrimaryKey(groupId);
+        String type = group.getType();
+
+        if (StringUtils.equals(type, UserGroupType.ORGANIZATION)) {
+            OrganizationExample organizationExample = new OrganizationExample();
+            organizationExample.createCriteria().andIdIn(sources);
+            return organizationMapper.selectByExample(organizationExample);
+        }
+
+        if (StringUtils.equals(type, UserGroupType.WORKSPACE)) {
+            WorkspaceExample workspaceExample = new WorkspaceExample();
+            workspaceExample.createCriteria().andIdIn(sources);
+            return workspaceMapper.selectByExample(workspaceExample);
+        }
+
+        if (StringUtils.equals(type, UserGroupType.PROJECT)) {
+            ProjectExample projectExample = new ProjectExample();
+            projectExample.createCriteria().andIdIn(sources);
+            return projectMapper.selectByExample(projectExample);
+        }
+
+        return new ArrayList<>();
+    }
+
+    public void addGroupUser(EditGroupUserRequest request) {
+        String groupId = request.getGroupId();
+        Group group = groupMapper.selectByPrimaryKey(groupId);
+        List<String> userIds = request.getUserIds();
+        for (String userId : userIds) {
+            UserGroupExample userGroupExample = new UserGroupExample();
+            userGroupExample.createCriteria().andUserIdEqualTo(userId)
+                    .andGroupIdEqualTo(groupId);
+            List<UserGroup> userGroups = userGroupMapper.selectByExample(userGroupExample);
+            if (userGroups.size() > 0) {
+                MSException.throwException(Translator.get("user_already_exists") + ": " + userId);
+            } else {
+                this.addGroupUser(group, userId, request.getSourceIds());
+            }
+        }
+    }
+
+    private void addGroupUser(Group group, String userId, List<String> sourceIds) {
+        String id = group.getId();
+        String type = group.getType();
+        if (StringUtils.equals(type, UserGroupType.SYSTEM)) {
+            UserGroup userGroup = new UserGroup();
+            userGroup.setId(UUID.randomUUID().toString());
+            userGroup.setUserId(userId);
+            userGroup.setGroupId(id);
+            userGroup.setSourceId("system");
+            userGroup.setCreateTime(System.currentTimeMillis());
+            userGroup.setUpdateTime(System.currentTimeMillis());
+            userGroupMapper.insertSelective(userGroup);
+        } else {
+            SqlSession sqlSession = sqlSessionFactory.openSession(ExecutorType.BATCH);
+            UserGroupMapper mapper = sqlSession.getMapper(UserGroupMapper.class);
+            for (String sourceId : sourceIds) {
+                UserGroup userGroup = new UserGroup();
+                userGroup.setId(UUID.randomUUID().toString());
+                userGroup.setUserId(userId);
+                userGroup.setGroupId(id);
+                userGroup.setSourceId(sourceId);
+                userGroup.setCreateTime(System.currentTimeMillis());
+                userGroup.setUpdateTime(System.currentTimeMillis());
+                mapper.insertSelective(userGroup);
+            }
+            sqlSession.flushStatements();
+        }
+    }
+
+    public void editGroupUser(EditGroupUserRequest request) {
+        String groupId = request.getGroupId();
+        Group group = groupMapper.selectByPrimaryKey(groupId);
+        if (!StringUtils.equals(group.getType(), UserGroupType.SYSTEM)) {
+            List<String> userIds = request.getUserIds();
+            if (CollectionUtils.isNotEmpty(userIds)) {
+                // 编辑单个用户
+                String userId = userIds.get(0);
+                List<String> sourceIds = request.getSourceIds();
+                UserGroupExample userGroupExample = new UserGroupExample();
+                userGroupExample.createCriteria().andGroupIdEqualTo(groupId).andUserIdEqualTo(userId);
+                userGroupMapper.deleteByExample(userGroupExample);
+
+                SqlSession sqlSession = sqlSessionFactory.openSession(ExecutorType.BATCH);
+                UserGroupMapper mapper = sqlSession.getMapper(UserGroupMapper.class);
+                for (String sourceId : sourceIds) {
+                    UserGroup userGroup = new UserGroup();
+                    userGroup.setId(UUID.randomUUID().toString());
+                    userGroup.setUserId(userId);
+                    userGroup.setGroupId(groupId);
+                    userGroup.setSourceId(sourceId);
+                    userGroup.setCreateTime(System.currentTimeMillis());
+                    userGroup.setUpdateTime(System.currentTimeMillis());
+                    mapper.insertSelective(userGroup);
+                }
+                sqlSession.flushStatements();
+            }
+        }
+    }
 }

frontend/src/business/components/common/components/MsTableOperator.vue

@@ -1,7 +1,7 @@
 <template>
   <span>
     <slot name="front"></slot>
-    <ms-table-operator-button v-permission="editPermission" :tip="tip1" icon="el-icon-edit" @exec="editClick" @click.stop="editClickStop"/>
+    <ms-table-operator-button v-permission="editPermission" v-if="showEdit" :tip="tip1" icon="el-icon-edit" @exec="editClick" @click.stop="editClickStop"/>
     <slot name="middle"></slot>
     <ms-table-operator-button v-permission="deletePermission" v-if="showDelete" :tip="tip2" icon="el-icon-delete" type="danger" @exec="deleteClick" @click.stop="deleteClickStop"/>
     <slot name="behind"></slot>
@@ -48,6 +48,12 @@
           default() {
             return true;
           }
+        },
+        showEdit: {
+          type: Boolean,
+          default() {
+            return true;
+          }
         }
       },
       methods: {

frontend/src/business/components/settings/system/group/GroupMember.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="65%" top="15vh"
+
+               :destroy-on-close="true" @close="close" v-loading="result.loading"
+               class="group-member"
+    >
+      <ms-table-header :condition.sync="condition" @create="addMemberBtn" @search="search"
+                       :create-tip="$t('member.create')" :title="$t('commons.member')"/>
+      <el-table :border="true" class="adjust-table" :data="memberData" style="width: 100%;margin-top:5px;">
+        <el-table-column prop="id" label="ID"/>
+        <el-table-column prop="name" :label="$t('commons.username')" show-overflow-tooltip/>
+        <el-table-column prop="email" :label="$t('commons.email')" show-overflow-tooltip/>
+        <el-table-column prop="phone" :label="$t('commons.phone')" show-overflow-tooltip>
+          <template v-slot="scope">
+            {{scope.row.phone || '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="typeLabel" v-if="showTypeLabel">
+          <template v-slot:default="scope">
+            <el-popover
+              placement="top"
+              width="250"
+              trigger="click"
+            >
+              <div v-loading="source.loading" style="height: 150px;overflow: auto;">
+                <el-tag
+                  v-for="item in groupSource"
+                  :key="item.id"
+                  :type="item.name"
+                  size="small"
+                  style="margin-left: 5px;margin-top: 5px;"
+                >
+                  {{ item.name }}
+                </el-tag>
+              </div>
+              <el-link type="primary" @click="getGroupSource(scope.row)" slot="reference">点击查看</el-link>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('commons.operating')">
+          <template v-slot:default="scope">
+            <div>
+              <ms-table-operator :tip2="$t('commons.remove')"
+                                 :show-edit="showTypeLabel"
+                                 @editClick="editMemberBtn(scope.row)"
+                                 @deleteClick="removeMember(scope.row)"/>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <ms-table-pagination :change="search" :current-page.sync="currentPage"
+                           :page-size.sync="pageSize"
+                           :total="total"/>
+    </el-dialog>
+    <el-dialog :close-on-click-modal="false" :visible.sync="memberVisible" width="45%"
+               :title="title" :destroy-on-close="true" v-loading="memberResult.loading" @close="memberDialogClose">
+      <el-form ref="memberFrom" label-position="right" :model="form" size="small" :rules="rules" label-width="120px" style="margin-right: 40px;">
+        <el-form-item :label="$t('commons.member')" prop="userIds">
+          <el-select
+            v-model="form.userIds"
+            multiple
+            filterable
+            :popper-append-to-body="false"
+            style="width: 100%"
+            :disabled="userSelectDisable"
+            :placeholder="$t('member.please_choose_member')">
+            <el-option
+              v-for="item in users"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id">
+              <template>
+                <span class="user-select-left">{{ item.name }} ({{ item.id }})</span>
+                <span class="user-select-right">{{ item.email }}</span>
+              </template>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="typeLabel" v-if="showTypeLabel" prop="sourceIds">
+          <el-select v-model="form.sourceIds" :placeholder="typeLabel" style="width: 100%;" clearable multiple
+                     filterable>
+            <el-option v-for="item in sourceData" :key="item.id" :label="item.name" :value="item.id"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="memberVisible = false" size="medium">{{ $t('commons.cancel') }}</el-button>
+          <el-button type="primary" @click="addMember" @keydown.enter.native.prevent size="medium">
+            {{ $t('commons.confirm') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MsTableHeader from "@/business/components/common/components/MsTableHeader";
+import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+import {GROUP_ORGANIZATION, GROUP_PROJECT, GROUP_SYSTEM, GROUP_WORKSPACE} from "@/common/js/constants";
+import MsTableOperator from "@/business/components/common/components/MsTableOperator";
+
+export default {
+  name: "GroupMember",
+  components: {
+    MsTableHeader,
+    MsTablePagination,
+    MsTableOperator
+  },
+  data() {
+    return {
+      visible: false,
+      memberVisible: false,
+      condition: {},
+      memberData: [],
+      currentPage: 1,
+      pageSize: 5,
+      total: 0,
+      result: {},
+      source: {},
+      memberResult: {},
+      group: {},
+      groupSource: [],
+      sourceData: [],
+      users: [],
+      form: {},
+      title: '',
+      submitType: '',
+      userSelectDisable: false,
+      rules: {
+        userIds: {required: true, message: this.$t('member.please_choose_member'), trigger: 'blur'},
+        sourceIds: {required: true, message: this.$t('group.select_belong_source'), trigger: 'blur'}
+      }
+    }
+  },
+  computed: {
+    typeLabel() {
+      let type = this.group.type;
+      if (type === GROUP_ORGANIZATION) {
+        return this.$t('group.belong_organization');
+      }
+      if (type === GROUP_WORKSPACE) {
+        return this.$t('group.belong_workspace');
+      }
+      if (type === GROUP_PROJECT) {
+        return this.$t('group.belong_project');
+      }
+      return '';
+    },
+    showTypeLabel() {
+      return this.group.type !== GROUP_SYSTEM;
+    }
+  },
+  methods: {
+    init() {
+      this.condition.userGroupId = this.group.id;
+      this.result = this.$post("/user/group/user/" + this.currentPage + "/" + this.pageSize, this.condition, res => {
+        let data = res.data;
+        if (data) {
+          let {itemCount, listObject} = data;
+          this.total = itemCount;
+          this.memberData = listObject;
+        }
+      })
+    },
+    open(group) {
+      this.visible = true;
+      this.group = group;
+      this.init();
+    },
+    close() {
+      this.visible = false;
+      this.$emit("refresh");
+    },
+    addMemberBtn() {
+      this.title = this.$t('member.create');
+      this.memberVisible = true;
+      this.submitType = 'ADD';
+      this.getUser();
+      this.getResource();
+    },
+    search() {
+      this.init();
+    },
+    editMemberBtn(row) {
+      this.title = this.$t('member.modify');
+      this.userSelectDisable = true;
+      this.memberVisible = true;
+      this.submitType = 'EDIT';
+      this.getUser();
+      this.getResource();
+      let userId = row.id;
+      let groupId = this.group.id;
+      this.$get('/user/group/source/' + userId + "/" + groupId, res => {
+        let data = res.data;
+        let userIds = [];
+        userIds.push(row.id);
+        let sourceIds = data.map(d => d.id);
+        this.$set(this.form, 'userIds', userIds);
+        this.$set(this.form, 'sourceIds', sourceIds);
+      })
+    },
+    editMember() {
+      this.form.groupId = this.group.id;
+      this.$refs['memberFrom'].validate(valid => {
+        if (valid) {
+          this.result = this.$post('/user/group/edit/member', this.form, () => {
+            this.$success(this.$t('commons.save_success'));
+            this.init();
+            this.memberVisible = false;
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    getUser() {
+      this.memberResult = this.$get('/user/list/', response => {
+        this.users = response.data;
+      })
+    },
+    removeMember(row) {
+      this.$confirm(this.$t('member.remove_member'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.result = this.$get('/user/group/rm/' + row.id + '/' + this.group.id, () => {
+          this.$success(this.$t('commons.remove_success'));
+          this.init();
+        });
+      }).catch(() => {
+        this.$info(this.$t('commons.remove_cancel'));
+      });
+    },
+    getGroupSource(row) {
+      this.groupSource = [];
+      let userId = row.id;
+      let groupId = this.group.id;
+      this.source = this.$get('/user/group/source/' + userId + "/" + groupId, res => {
+        this.groupSource = res.data;
+      })
+    },
+    addMember() {
+      if (this.submitType === 'ADD') {
+        this._addMember();
+      } else if (this.submitType === 'EDIT') {
+        this.editMember();
+      }
+    },
+    _addMember() {
+      this.form.groupId = this.group.id;
+      this.$refs['memberFrom'].validate(valid => {
+        if (valid) {
+          this.result = this.$post('/user/group/add/member', this.form, () => {
+            this.$success(this.$t('commons.save_success'));
+            this.init();
+            this.memberVisible = false;
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    getResource() {
+      let id = this.group.id;
+      let type = this.group.type;
+      this.memberResult = this.$get('/organization/list/resource/' + id + "/" + type, res => {
+        let data = res.data;
+        if (data) {
+          this._setResource(type, data);
+        }
+      })
+    },
+    _setResource(type, data) {
+      switch (type) {
+        case GROUP_ORGANIZATION:
+          this.sourceData = data.organizations;
+          break;
+        case GROUP_WORKSPACE:
+          this.sourceData = data.workspaces;
+          break;
+        case GROUP_PROJECT:
+          this.sourceData = data.projects;
+          break;
+        default:
+      }
+    },
+    memberDialogClose() {
+      this.memberVisible = false;
+      this.userSelectDisable = false;
+      this.form = {};
+    }
+  }
+}
+</script>
+
+<style scoped>
+.group-member >>> .el-dialog__header {
+  padding: 0;
+}
+.user-select-left {
+  float: left;
+}
+
+.user-select-right {
+  float: right;
+  margin-right: 18px;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>

frontend/src/business/components/settings/system/group/UserGroup.vue

@@ -8,19 +8,26 @@
 
       <el-table :data="groups" border class="adjust-table" style="width: 100%"
                 :height="screenHeight" @sort-change="sort">
-        <el-table-column prop="name" :label="$t('commons.name')"/>
+        <el-table-column prop="name" :label="$t('commons.name')" show-overflow-tooltip/>
         <el-table-column prop="type" :label="$t('group.type')">
           <template v-slot="scope">
             <span>{{ userGroupType[scope.row.type] ? userGroupType[scope.row.type] : scope.row.type }}</span>
           </template>
         </el-table-column>
+        <el-table-column :label="$t('commons.member')" width="100">
+          <template v-slot:default="scope">
+            <el-link type="primary" class="member-size" @click="memberClick(scope.row)">
+              {{ scope.row.memberSize || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
         <el-table-column prop="scopeName" :label="$t('group.scope')"/>
-        <el-table-column prop="createTime" :label="$t('commons.create_time')" sortable>
+        <el-table-column prop="createTime" :label="$t('commons.create_time')" sortable show-overflow-tooltip>
           <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="updateTime" :label="$t('commons.update_time')" sortable>
+        <el-table-column prop="updateTime" :label="$t('commons.update_time')" sortable show-overflow-tooltip>
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
@@ -48,7 +55,7 @@
       <ms-table-pagination :change="initData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
     </el-card>
-
+    <group-member ref="groupMember" @refresh="initData"/>
     <edit-user-group ref="editUserGroup" @refresh="initData"/>
     <edit-permission ref="editPermission"/>
     <ms-delete-confirm :title="$t('group.delete')" @delete="_handleDel" ref="deleteConfirm"/>
@@ -65,10 +72,12 @@ import MsTableOperatorButton from "@/business/components/common/components/MsTab
 import EditPermission from "@/business/components/settings/system/group/EditPermission";
 import MsDeleteConfirm from "@/business/components/common/components/MsDeleteConfirm";
 import {_sort} from "@/common/js/tableUtils";
+import GroupMember from "@/business/components/settings/system/group/GroupMember";
 
 export default {
   name: "UserGroup",
   components: {
+    GroupMember,
     EditUserGroup,
     MsTableHeader,
     MsTableOperator,
@@ -85,7 +94,8 @@ export default {
       pageSize: 10,
       total: 0,
       screenHeight: 'calc(100vh - 275px)',
-      groups: []
+      groups: [],
+      currentGroup: {}
     };
   },
   activated() {
@@ -143,6 +153,9 @@ export default {
       _sort(column, this.condition);
       this.initData();
     },
+    memberClick(row) {
+      this.$refs.groupMember.open(row);
+    }
   }
 };
 </script>

frontend/src/i18n/en-US.js

@@ -499,6 +499,9 @@ export default {
     project: 'Project',
     global_group: 'Global Group',
     belong_organization: 'Belong Organization',
+    belong_workspace: 'Belong Workspace',
+    belong_project: 'Belong Project',
+    select_belong_source: 'Please select belong source',
     select_belong_organization: 'please select belong organization',
     functional_menu: 'Functional Menu',
     operation_object: 'Operation Object',

frontend/src/i18n/zh-CN.js

@@ -497,6 +497,9 @@ export default {
     project: '项目',
     global_group: '全局用户组',
     belong_organization: '所属组织',
+    belong_workspace: '所属工作空间',
+    belong_project: '所属项目',
+    select_belong_source: '请选择所属资源',
     select_belong_organization: '请选择所属组织',
     functional_menu: '功能菜单',
     operation_object: '操作对象',

frontend/src/i18n/zh-TW.js

@@ -497,6 +497,9 @@ export default {
     project: '項目',
     global_group: '全局用戶組',
     belong_organization: '所屬組織',
+    belong_workspace: '所屬工作空間',
+    belong_project: '所屬項目',
+    select_belong_source: '請選擇所屬資源',
     select_belong_organization: '請選擇所屬組織',
     functional_menu: '功能菜單',
     operation_object: '操作對象',