From 74c8be756aade4a76111c95a202c8c864e1f1ba5 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Thu, 7 May 2020 14:35:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/UserRoleController.java        |  2 +-
 .../common/components/MsRolesTag.vue          | 35 +++++++++++++++++++
 .../organization/OrganizationMember.vue       |  7 ++--
 .../organization/OrganizationWorkspace.vue    | 16 +++++----
 .../settings/system/Organization.vue          |  7 ++--
 .../settings/system/SystemWorkspace.vue       | 13 +++----
 .../settings/workspace/WorkspaceMember.vue    | 14 ++++----
 7 files changed, 65 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/business/components/common/components/MsRolesTag.vue

diff --git a/backend/src/main/java/io/metersphere/controller/UserRoleController.java b/backend/src/main/java/io/metersphere/controller/UserRoleController.java
index 35a3645201..132f1ba5c7 100644
--- a/backend/src/main/java/io/metersphere/controller/UserRoleController.java
+++ b/backend/src/main/java/io/metersphere/controller/UserRoleController.java
@@ -27,7 +27,7 @@ public class UserRoleController {
 
     @GetMapping("/list/ws/{workspaceId}/{userId}")
     @RequiresRoles(value = {RoleConstants.ADMIN,RoleConstants.ORG_ADMIN}, logical = Logical.OR)
-    public List<Role> getWorkspaceMemberRole(@PathVariable String workspaceId, @PathVariable String userId) {
+    public List<Role> getWorkspaceMemberRoles(@PathVariable String workspaceId, @PathVariable String userId) {
         return userRoleService.getWorkspaceMemberRoles(workspaceId, userId);
     }
 }
diff --git a/frontend/src/business/components/common/components/MsRolesTag.vue b/frontend/src/business/components/common/components/MsRolesTag.vue
new file mode 100644
index 0000000000..a51f13c988
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsRolesTag.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <ms-tag v-for="(role, index) in roles"
+            :key="index"
+            :effect="effect"
+            :type="type"
+            :content="role.name"/>
+  </div>
+</template>
+
+<script>
+  import MsTag from "./MsTag";
+
+  export default {
+    name: "MsRolesTag",
+    components: {MsTag},
+    props: {
+      type: {
+        type: String,
+        default: 'primary',
+      },
+      roles: {
+        type: Array
+      },
+      effect: {
+        type: String,
+        default: 'dark',
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index 22fe460ff9..affb01751c 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -11,9 +11,7 @@
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="roles" :label="$t('commons.role')" width="140">
           <template v-slot:default="scope">
-            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark">
-              {{ role.name }}
-            </el-tag>
+            <ms-roles-tag :roles="scope.row.roles"/>
           </template>
         </el-table-column>
         <el-table-column>
@@ -105,10 +103,11 @@
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsOrganizationMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag},
     created() {
       this.initTableData();
     },
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 027c90d6de..6b7e5714cc 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -55,9 +55,7 @@
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="120">
           <template v-slot:default="scope">
-            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
-              {{ role.name }}
-            </el-tag>
+            <ms-roles-tag :roles="scope.row.roles" type="success"/>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
@@ -69,12 +67,14 @@
           </template>
         </el-table-column>
       </el-table>
-      <ms-table-pagination :change="dialogSearch" :current-page.sync="dialogCurrentPage" :page-size.sync="dialogPageSize"
+      <ms-table-pagination :change="dialogSearch" :current-page.sync="dialogCurrentPage"
+                           :page-size.sync="dialogPageSize"
                            :total="dialogTotal"/>
     </el-dialog>
 
     <!-- add workspace member dialog -->
-    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
+               :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
                size="small">
@@ -112,7 +112,8 @@
     </el-dialog>
 
     <!-- update workspace member dialog -->
-    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
+               :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
@@ -156,10 +157,11 @@
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsOrganizationWorkspace",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index 6df8ccbebd..0aa3dac8ee 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -41,9 +41,7 @@
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="140">
           <template v-slot:default="scope">
-            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark">
-              {{ role.name }}
-            </el-tag>
+            <ms-roles-tag :roles="scope.row.roles"/>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
@@ -185,10 +183,11 @@
   import MsCreateBox from "../CreateBox";
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsOrganization",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag},
     data() {
       return {
         queryPath: '/organization/list',
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index 42b247a3ff..5d0b105953 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -96,9 +96,7 @@
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="120">
           <template v-slot:default="scope">
-            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
-              {{ role.name }}
-            </el-tag>
+            <ms-roles-tag :roles="scope.row.roles" type="success"/>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
@@ -116,7 +114,8 @@
     </el-dialog>
 
     <!-- add workspace member dialog -->
-    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
+               :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
                size="small">
@@ -153,7 +152,8 @@
     </el-dialog>
 
     <!-- update workspace member dialog -->
-    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
+               :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
@@ -197,10 +197,11 @@
   import {Message} from "element-ui";
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsSystemWorkspace",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index aaacfb980b..5a183344e8 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -11,9 +11,7 @@
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="roles" :label="$t('commons.role')" width="120">
           <template v-slot:default="scope">
-            <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
-              {{ role.name }}
-            </el-tag>
+            <ms-roles-tag :roles="scope.row.roles" type="success"/>
           </template>
         </el-table-column>
         <el-table-column>
@@ -29,7 +27,8 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+               @close="closeFunc">
       <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.member')" prop="userIds">
           <el-select v-model="form.userIds" multiple :placeholder="$t('member.please_choose_member')"
@@ -63,7 +62,8 @@
       </template>
     </el-dialog>
 
-    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
+    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
+               @close="closeFunc">
       <el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
           <el-input v-model="form.id" autocomplete="off" :disabled="true"/>
@@ -104,11 +104,11 @@
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsTableHeader from "../../common/components/MsTableHeader";
-  import MsTag from "../../common/components/MsTag";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTag},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag},
     data() {
       return {
         result: {},