系统工作空间增加成员列

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

@@ -4,6 +4,7 @@ import com.github.pagehelper.Page;
 import com.github.pagehelper.PageHelper;
 import io.metersphere.base.domain.Role;
 import io.metersphere.base.domain.User;
+import io.metersphere.commons.constants.RoleConstants;
 import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.controller.request.member.AddMemberRequest;
@@ -16,6 +17,7 @@ import io.metersphere.dto.UserRoleDTO;
 import io.metersphere.service.UserService;
 import io.metersphere.user.SessionUser;
 import io.metersphere.user.SessionUtils;
+import org.apache.shiro.authz.annotation.RequiresRoles;
 import org.springframework.beans.BeanUtils;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
@@ -88,7 +90,7 @@ public class UserController {
     }
 
     /**
-     * 获取成员用户
+     * 获取工作空间成员用户
      */
     @PostMapping("/member/list/{goPage}/{pageSize}")
     //@RequiresRoles(RoleConstants.TEST_MANAGER)
@@ -97,6 +99,15 @@ public class UserController {
         return PageUtils.setPageInfo(page, userService.getMemberList(request));
     }
 
+    /**
+     * 获取工作空间成员用户 不分页
+     */
+    @PostMapping("/member/list/all")
+    @RequiresRoles(RoleConstants.ADMIN)
+    public List<User> getMemberList(@RequestBody QueryMemberRequest request) {
+        return userService.getMemberList(request);
+    }
+
     /**
      * 添加成员
      */

frontend/src/performance/components/settings/Organization.vue

@@ -66,14 +66,14 @@
         <el-table-column prop="name" :label="$t('commons.username')"/>
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
-        <el-table-column label="角色" width="140">
+        <el-table-column :label="$t('commons.role')" width="140">
           <template slot-scope="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作">
+        <el-table-column :label="$t('commons.operating')">
           <template slot-scope="scope">
             <el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>

frontend/src/performance/components/settings/OrganizationWorkspace.vue

@@ -72,7 +72,6 @@
     computed: {
       currentUser: () => {
         let user = localStorage.getItem(TokenKey);
-        window.console.log(user);
         return JSON.parse(user);
       }
     },

frontend/src/performance/components/settings/SystemWorkspace.vue

@@ -8,16 +8,23 @@
             <ms-create-box :tips="btnTips" :exec="create"/>
           </span>
           <span class="search">
-                    <el-input type="text" size="small" :placeholder="$t('workspace.search_by_name')"
-                              prefix-icon="el-icon-search"
-                              maxlength="60" v-model="condition" clearable/>
-                </span>
+            <el-input type="text" size="small"
+                      :placeholder="$t('workspace.search_by_name')"
+                      prefix-icon="el-icon-search"
+                      maxlength="60" v-model="condition" clearable/>
+          </span>
         </el-row>
       </div>
+      <!-- workspace table -->
       <el-table :data="items" style="width: 100%">
         <el-table-column prop="name" :label="$t('commons.name')"/>
         <el-table-column prop="description" :label="$t('commons.description')"/>
         <el-table-column prop="organizationName" :label="$t('workspace.organization_name')"/>
+        <el-table-column :label="$t('commons.member')">
+          <template slot-scope="scope">
+            <el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}</el-button>
+          </template>
+        </el-table-column>
         <el-table-column>
           <template slot-scope="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
@@ -44,6 +51,7 @@
       </div>
     </el-card>
 
+    <!-- add workspace dialog -->
     <el-dialog :title="$t('workspace.create')" :visible.sync="createVisible" width="30%">
       <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
@@ -68,6 +76,7 @@
       </span>
     </el-dialog>
 
+    <!-- update workspace dialog -->
     <el-dialog :title="$t('workspace.update')" :visible.sync="updateVisible" width="30%">
       <el-form :model="form" :rules="rules" ref="updateForm" label-position="left" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
@@ -91,6 +100,120 @@
         <el-button type="primary" @click="updateWorkspace('updateForm')" size="medium">{{$t('commons.save')}}</el-button>
       </span>
     </el-dialog>
+
+    <!-- dialog of workspace member -->
+    <el-dialog :visible.sync="memberVisible" width="70%" :destroy-on-close="true" @close="closeMemberFunc">
+      <el-row type="flex" justify="space-between" align="middle">
+        <span class="title">{{$t('commons.member')}}
+          <ms-create-box :tips="addTips" :exec="addMember"/>
+        </span>
+        <span class="search">
+          <el-input type="text" size="small"
+                    :placeholder="$t('organization.search_by_name')"
+                    prefix-icon="el-icon-search"
+                    maxlength="60" v-model="condition" clearable/>
+        </span>
+      </el-row>
+      <!-- organization member table -->
+      <el-table :data="memberLineData" style="width: 100%">
+        <el-table-column prop="name" :label="$t('commons.username')"/>
+        <el-table-column prop="email" :label="$t('commons.email')"/>
+        <el-table-column prop="phone" :label="$t('commons.phone')"/>
+        <el-table-column :label="$t('commons.role')" width="120">
+          <template slot-scope="scope">
+            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
+              {{ role.name }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('commons.operating')">
+          <template slot-scope="scope">
+            <el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            <el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-row>
+          <el-col :span="22" :offset="1">
+            <div class="table-page">
+              <el-pagination
+                @size-change="handleMemberSizeChange"
+                @current-change="handleMemberCurrentChange"
+                :current-page.sync="currentMemberPage"
+                :page-sizes="[5, 10, 20, 50, 100]"
+                :page-size="pageMemberSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="memberTotal">
+              </el-pagination>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+
+    <!-- add workspace member dialog -->
+    <el-dialog :title="$t('member.create')" :visible.sync="addMemberVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+      <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="left" label-width="100px" size="small">
+        <el-form-item :label="$t('commons.member')" prop="userIds">
+          <el-select v-model="memberForm.userIds" multiple :placeholder="$t('member.please_choose_member')" class="select-width">
+            <el-option
+              v-for="item in memberForm.userList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+              <span class="ws-member-name">{{ item.name }}</span>
+              <span class="ws-member-email">{{ item.email }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('commons.role')" prop="roleIds">
+          <el-select v-model="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')" class="select-width">
+            <el-option
+              v-for="item in memberForm.roles"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm('form')" size="medium">{{$t('commons.save')}}</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- update workspace member dialog -->
+    <el-dialog :title="$t('member.modify')" :visible.sync="updateMemberVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+      <el-form :model="memberForm" label-position="left" label-width="100px" size="small" ref="updateUserForm">
+        <el-form-item label="ID" prop="id">
+          <el-input v-model="memberForm.id" autocomplete="off" :disabled="true"/>
+        </el-form-item>
+        <el-form-item :label="$t('commons.username')" prop="name">
+          <el-input v-model="memberForm.name" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item :label="$t('commons.email')" prop="email">
+          <el-input v-model="memberForm.email" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item :label="$t('commons.phone')" prop="phone">
+          <el-input v-model="memberForm.phone" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item :label="$t('commons.role')" prop="roleIds">
+          <el-select v-model="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')" class="select-width">
+            <el-option
+              v-for="item in memberForm.allroles"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="updateOrgMember('updateUserForm')" size="medium">{{$t('commons.save')}}</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -129,6 +252,39 @@
           }
         });
       },
+      addMember() {
+        this.addMemberVisible = true;
+        this.memberForm = {};
+        this.result = this.$get('/user/list/', response => {
+          this.$set(this.memberForm, "userList", response.data);
+        });
+        this.result = this.$get('/role/list/test', response => {
+          this.$set(this.memberForm, "roles", response.data);
+        })
+      },
+      cellClick(row){
+        // 保存当前点击的组织信息到currentRow
+        this.currentWorkspaceRow = row;
+        this.memberVisible = true;
+        let param = {
+          name: '',
+          workspaceId: row.id
+        };
+        let path = "/user/member/list";
+        this.result = this.$post(this.buildPagePath(path), param, res => {
+          let data = res.data;
+          this.memberLineData = data.listObject;
+          let url = "/userrole/list/ws/" + row.id;
+          // 填充角色信息
+          for (let i = 0; i < this.memberLineData.length; i++) {
+            this.$get(url + "/" + this.memberLineData[i].id, response => {
+              let roles = response.data;
+              this.$set(this.memberLineData[i], "roles", roles);
+            })
+          }
+          this.memberTotal = data.itemCount;
+        });
+      },
       edit(row) {
         this.updateVisible = true;
         // copy user
@@ -136,13 +292,6 @@
         this.$get("/organization/list", response => {
           this.$set(this.form, "orgList1", response.data);
         })
-        // let self = this;
-        // let getUser1 = this.$get("/test/user");
-        // let getUser2 = this.$get("/test/sleep");
-        // this.$all([getUser1, getUser2], function (r1, r2) {
-        //   window.console.log(r1.data.data, r2.data.data);
-        //   self.loading = false;
-        // });
       },
       updateWorkspace(updateForm) {
         this.$refs[updateForm].validate(valide => {
@@ -174,14 +323,35 @@
 
         });
       },
+      closeFunc() {
+        this.form = {};
+      },
+      closeMemberFunc() {
+        this.memberLineData = [];
+        this.list();
+      },
       list() {
         let url = '/workspace/list/all/' + this.currentPage + '/' + this.pageSize;
         this.result = this.$post(url, {name: this.condition}, response => {
           let data = response.data;
           this.items = data.listObject;
+          for (let i = 0; i < this.items.length; i++) {
+            let param = {
+              name: '',
+              workspaceId: this.items[i].id
+            }
+            let path = "user/member/list/all";
+            this.$post(path, param, res => {
+              let member = res.data;
+              this.$set(this.items[i], "memberSize", member.length);
+            })
+          }
           this.total = data.itemCount;
         });
       },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
       handleSizeChange(size) {
         this.pageSize = size;
         this.list();
@@ -190,6 +360,79 @@
         this.currentPage = current;
         this.list();
       },
+      handleMemberSizeChange(size) {
+        this.pageMemberSize = size;
+        this.cellClick(this.currentWorkspaceRow);
+      },
+      handleMemberCurrentChange(current) {
+        this.currentMemberPage = current;
+        this.cellClick(this.currentWorkspaceRow);
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let param = {
+              userIds: this.memberForm.userIds,
+              roleIds: this.memberForm.roleIds,
+              workspaceId: this.currentWorkspaceRow.id
+            };
+            this.result = this.$post("user/member/add", param,() => {
+              this.cellClick(this.currentWorkspaceRow);
+              this.addMemberVisible = false;
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      editMember(row) {
+        this.updateMemberVisible = true;
+        this.memberForm = row;
+        let roleIds = this.memberForm.roles.map(r => r.id);
+        this.result = this.$get('/role/list/test', response => {
+          this.$set(this.memberForm, "allroles", response.data);
+        })
+        // 编辑时填充角色信息
+        this.$set(this.memberForm, 'roleIds', roleIds);
+      },
+      delMember(row) {
+        this.$confirm(this.$t('member.delete_confirm'), '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          cancelButtonText: this.$t('commons.cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.result = this.$get('/user/member/delete/' + this.currentWorkspaceRow.id + '/' + row.id, () => {
+            this.$message({
+              type: 'success',
+              message: this.$t('commons.delete_success')
+            });
+            this.cellClick(this.currentWorkspaceRow);
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: this.$t('commons.delete_cancel')
+          });
+        });
+      },
+      updateOrgMember() {
+        let param = {
+          id: this.memberForm.id,
+          name: this.memberForm.name,
+          email: this.memberForm.email,
+          phone: this.memberForm.phone,
+          roleIds: this.memberForm.roleIds,
+          workspaceId: this.currentWorkspaceRow.id
+        }
+        this.result = this.$post("/workspace/member/update", param,() => {
+          this.$message({
+            type: 'success',
+            message: this.$t('commons.modify_success')
+          });
+          this.updateMemberVisible = false;
+          this.cellClick(this.currentWorkspaceRow);
+        });
+      },
     },
     data() {
       return {
@@ -197,12 +440,21 @@
         loading: false,
         createVisible: false,
         updateVisible: false,
+        memberVisible: false,
+        addMemberVisible: false,
+        updateMemberVisible: false,
         btnTips: this.$t('workspace.add'),
+        addTips: this.$t('member.create'),
         condition: "",
         items: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
+        currentMemberPage: 1,
+        pageMemberSize: 5,
+        memberTotal: 0,
+        memberLineData: [],
+        memberForm: {},
         form: {
           // name: "",
           // description: ""
@@ -213,9 +465,18 @@
             {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}
           ],
           organizationId: [
-            {required: true, message: '请选择组织', trigger: ['blur']}
+            {required: true, message: this.$t('organization.select_organization'), trigger: ['blur']}
           ]
         },
+        wsMemberRule: {
+          userIds: [
+            {required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
+          ],
+          roleIds: [
+            {required: true, message: this.$t('role.please_choose_role'), trigger: ['blur']}
+          ]
+        },
+        currentWorkspaceRow: {},
       }
     }
   }
@@ -239,5 +500,25 @@
     margin-right: -9px;
     float: right;
   }
+
+  .member-size {
+    text-decoration:underline;
+    cursor:pointer;
+  }
+
+  .ws-member-name {
+    float: left;
+  }
+
+  .ws-member-email {
+    float: right;
+    color: #8492a6;
+    font-size: 13px;
+  }
+
+  .select-width {
+    width: 100%;
+  }
+
 </style>