系统菜单下组织增加成员列

frontend/src/i18n/en-US.js

@@ -54,6 +54,9 @@ export default {
     'search_by_name': 'Search by name',
     'input_name': 'Please enter a workspace name',
   },
+  member: {
+    'create': 'Create'
+  },
   load_test: {
     'recent': 'Recent Tests',
     'search_by_name': 'Search by name',

frontend/src/i18n/zh-CN.js

@@ -54,6 +54,9 @@ export default {
     'search_by_name': '根据名称搜索',
     'input_name': '请输入项目名称',
   },
+  member: {
+    'create': '添加成员'
+  },
   load_test: {
     'recent': '最近的测试',
     'search_by_name': '根据名称搜索',

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

@@ -152,7 +152,7 @@
         return JSON.parse(user);
       },
       initTableData() {
-        if (this.currentUser.lastWorkspaceId === null) {
+        if (this.currentUser().lastWorkspaceId === null) {
           return false;
         }
         this.loading = true;

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

@@ -13,11 +13,15 @@
           </span>
         </el-row>
       </div>
-      <el-table :data="tableData" style="width: 100%" @cell-click="cellClick">
+      <el-table :data="tableData" style="width: 100%">
         <el-table-column type="selection" width="55"/>
         <el-table-column prop="name" :label="$t('commons.name')"/>
         <el-table-column prop="description" :label="$t('commons.description')"/>
-        <el-table-column prop="member" :label="$t('commons.member')"> 123 </el-table-column>
+        <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 :label="$t('commons.operating')">
           <template slot-scope="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
@@ -45,6 +49,53 @@
       </div>
     </el-card>
 
+    <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">成员
+            <ms-create-box :tips="btnTips" :exec="addMember"/>
+          </span>
+        <span class="search">
+          <el-input type="text" size="small" placeholder="根据用户名搜索" prefix-icon="el-icon-search"
+                    maxlength="60" v-model="condition" clearable/>
+        </span>
+      </el-row>
+      <el-table :data="memberLineData" style="width: 100%">
+        <el-table-column prop="name" label="用户名"/>
+        <el-table-column prop="email" label="邮箱"/>
+        <el-table-column prop="phone" label="电话"/>
+        <el-table-column label="角色" 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="操作">
+          <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>
+
     <el-dialog :title="$t('organization.create')" :visible.sync="createVisible" width="30%" @closed="closeFunc" :destroy-on-close="true">
       <el-form :model="form" label-position="left" label-width="100px" size="small" :rules="rule" ref="createOrganization">
         <el-form-item :label="$t('commons.name')" prop="name">
@@ -73,6 +124,66 @@
       </span>
     </el-dialog>
 
+    <el-dialog title="添加成员" :visible.sync="addMemberVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+      <el-form :model="memberForm" ref="form" :rules="rule" label-position="left" label-width="100px" size="small">
+        <el-form-item label="成员" prop="userIds">
+          <el-select v-model="memberForm.userIds" multiple placeholder="请选择成员" class="select-width">
+            <el-option
+              v-for="item in memberForm.userList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+              <span class="org-member-name">{{ item.name }}</span>
+              <span class="org-member-email">{{ item.email }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色" prop="roleIds">
+          <el-select v-model="memberForm.roleIds" multiple placeholder="请选择角色" 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">保存</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="修改成员" :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="用户名" prop="name">
+          <el-input v-model="memberForm.name" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="memberForm.email" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="memberForm.phone" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item label="角色" prop="roleIds">
+          <el-select v-model="memberForm.roleIds" multiple placeholder="请选择角色" 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">保存</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -91,14 +202,23 @@
         result: {},
         createVisible: false,
         updateVisible: false,
+        memberVisible: false,
+        addMemberVisible: false,
+        updateMemberVisible: false,
         multipleSelection: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
-        btnTips: this.$t('organization.create'),
+        currentMemberPage: 1,
+        pageMemberSize: 5,
+        memberTotal: 0,
+        currentRow: {},
+        btnTips: this.$t('member.create'),
         condition: "",
         tableData: [],
+        memberLineData: [],
         form: {},
+        memberForm: {},
         rule: {
           name: [
             {required: true, message: this.$t('organization.input_name'), trigger: 'blur'},
@@ -123,13 +243,51 @@
       create() {
         this.createVisible = true;
       },
+      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/org', response => {
+          this.$set(this.memberForm, "roles", response.data);
+        })
+      },
       edit(row) {
         // this.loading = true;
         this.updateVisible = true;
         this.form = row;
       },
-      cellClick(){
-        alert(1)
+      editMember(row) {
+        this.updateMemberVisible = true;
+        this.memberForm = row;
+        let roleIds = this.memberForm.roles.map(r => r.id);
+        this.result = this.$get('/role/list/org', response => {
+          this.$set(this.memberForm, "allroles", response.data);
+        })
+        // 编辑时填充角色信息
+        this.$set(this.memberForm, 'roleIds', roleIds);
+      },
+      cellClick(row){
+        this.currentRow = row;
+        this.memberVisible = true;
+        let param = {
+          name: '',
+          organizationId: row.id
+        };
+        let path = "/user/orgmember/list";
+        this.result = this.$post(this.buildPagePath(path), param, res => {
+          let data = res.data;
+          this.memberLineData = data.listObject;
+          let url = "/userrole/list/org/" + 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;
+        });
       },
       del(row) {
         this.$confirm(this.$t('organization.delete_confirm'), '', {
@@ -151,6 +309,26 @@
           });
         });
       },
+      delMember(row) {
+        this.$confirm('是否删除用户 ' + row.name + ' ?', '', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.result = this.$get('/user/orgmember/delete/' + this.currentRow.id + '/' + row.id, () => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.cellClick(this.currentRow);
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      },
       createOrganization(createOrganizationForm) {
         this.$refs[createOrganizationForm].validate( valide => {
           if (valide) {
@@ -184,15 +362,30 @@
         })
       },
       initTableData() {
-        this.result = this.$post(this.buildPagePath(this.queryPath),{},response => {
+        this.$post(this.buildPagePath(this.queryPath),{},response => {
           let data = response.data;
-          this.total = data.itemCount;
           this.tableData = data.listObject;
+          for (let i = 0; i < this.tableData.length; i++) {
+            let param = {
+              name: '',
+              organizationId: this.tableData[i].id
+            }
+            let path = "user/orgmember/list/all";
+            this.$post(path, param, res => {
+              let member = res.data;
+              this.$set(this.tableData[i], "memberSize", member.length);
+            })
+          }
+          this.total = data.itemCount;
         })
       },
       closeFunc() {
         this.form = {};
       },
+      closeMemberFunc() {
+        this.memberLineData = [];
+        this.initTableData();
+      },
       buildPagePath(path) {
         return path + "/" + this.currentPage + "/" + this.pageSize;
       },
@@ -204,9 +397,53 @@
         this.currentPage = current;
         this.initTableData();
       },
+      //
+      handleMemberSizeChange(size) {
+        this.pageMemberSize = size;
+        this.cellClick(this.currentRow);
+      },
+      handleMemberCurrentChange(current) {
+        this.currentMemberPage = current;
+        this.cellClick(this.currentRow);
+      },
       handleSelectionChange(val) {
         this.multipleSelection = val;
-      }
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let param = {
+              userIds: this.memberForm.userIds,
+              roleIds: this.memberForm.roleIds,
+              organizationId: this.currentRow.id
+            };
+            this.result = this.$post("user/orgmember/add", param,() => {
+              this.cellClick(this.currentRow);
+              this.addMemberVisible = false;
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      updateOrgMember() {
+        let param = {
+          id: this.memberForm.id,
+          name: this.memberForm.name,
+          email: this.memberForm.email,
+          phone: this.memberForm.phone,
+          roleIds: this.memberForm.roleIds,
+          organizationId: this.currentRow.id
+        }
+        this.result = this.$post("/organization/member/update", param,() => {
+          this.$message({
+            type: 'success',
+            message: '修改成功!'
+          });
+          this.updateMemberVisible = false;
+          this.cellClick(this.currentRow);
+        });
+      },
     }
 
   }
@@ -222,4 +459,30 @@
     margin-right: -9px;
     float: right;
   }
+
+  .member-size {
+    text-decoration:underline;
+    cursor:pointer;
+  }
+
+  .title {
+    margin-bottom: 50px;
+    font-size: 32px;
+    letter-spacing: 0;
+    text-align: center;
+  }
+
+  .org-member-name {
+    float: left;
+  }
+
+  .org-member-email {
+    float: right;
+    color: #8492a6;
+    font-size: 13px;
+  }
+
+  .select-width {
+    width: 100%;
+  }
 </style>