更新 Role.vue

src/api/devops.js

@@ -236,6 +236,14 @@ export function getRoleList() {
   return get(devopsApi.getRoleList)
 }
 
+export function getRoleUser(roleId) {
+  return get(devopsApi.getRoleList + '/users?roleId=' + roleId)
+}
+
+export function getRoleMenu(roleId) {
+  return get(devopsApi.getRoleList + '/menus?id=' + roleId)
+}
+
 export function getUserList() {
   return get(devopsApi.getUserList)
 }

src/views/devops/rbac/Role.vue

@@ -78,7 +78,21 @@
       :visible.sync="showUserDialog"
       center
     >
-      <template />
+      <template>
+        <el-table
+          :data="roleUsers"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="username"
+            label="登入名"
+          />
+          <el-table-column
+            prop="screenName"
+            label="用户名"
+          />
+        </el-table>
+      </template>
     </el-dialog>
     <el-dialog
       title="设置角色可访问的资源"
@@ -86,13 +100,38 @@
       :visible.sync="showUpdateDialog"
       center
     >
-      <template />
+      <template>
+        <div style="height: 70vh;">
+          <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
+            <el-card class="box-card" :body-style="{ paddingTop: '5px' }">
+              <div class="text item">
+                <el-tree
+                  :default-expand-all="true"
+                  node-key="id"
+                  :data="allMenus"
+                  :props="defaultProps"
+                  :default-checked-keys="roleMenuIds"
+                  :check-strictly="true"
+                  show-checkbox
+                  highlight-current
+                  @check-change="handleCheckChange"
+                >
+                  <span slot-scope="{ node, data }">
+                    <span :class="data.icon">{{ node.label }}</span>
+                  </span>
+                </el-tree>
+              </div>
+            </el-card>
+          </el-scrollbar>
+          <el-button type="primary" size="mini" @click="onUpdateMenu">确定</el-button>
+        </div>
+      </template>
     </el-dialog>
   </el-container>
 </template>
 
 <script>
-import { getRoleList } from '@/api/devops'
+import { getRoleList, getRoleMenu, getRoleUser } from '@/api/devops'
 
 export default {
   name: 'Role',
@@ -101,8 +140,16 @@ export default {
       dataList: [],
       // **********************************************************************
       showUserDialog: false,
+      roleUsers: [],
       // **********************************************************************
-      showUpdateDialog: false
+      showUpdateDialog: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      },
+      allMenus: [],
+      roleMenuIds: []
     }
   },
   created() {
@@ -123,13 +170,50 @@ export default {
       })
     },
     handleShowUser(index, row) {
-      this.showUserDialog = true
+      getRoleUser((row.id)).then(resp => {
+        if (resp.code === 0) {
+          this.roleUsers = resp.data
+          this.showUserDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
     handleUpdateResource(index, row) {
-      this.showUpdateDialog = true
+      getRoleMenu((row.id)).then(resp => {
+        if (resp.code === 0) {
+          this.allMenus = resp.data.allMenus
+          this.roleMenuIds = resp.data.roleMenuIds
+          console.log(this.roleMenuIds.length)
+          this.showUpdateDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
     },
     handleDelete(index, row) {
       this.$message.info('delete -> ' + row.name)
+    },
+    handleCheckChange(data, checked, indeterminate) {
+      const menuId = data.id
+      if (checked) {
+        this.roleMenuIds.push(menuId)
+      } else {
+        // this.roleMenuIds.push(data.id)
+        const index = this.roleMenuIds.indexOf(menuId)
+        if (index > -1) {
+          this.roleMenuIds.splice(index, 1)
+        }
+      }
+    },
+    onUpdateMenu() {
+      this.showUpdateDialog = false
+      this.$message.info('update role menu')
+      console.log(this.roleMenuIds.length)
     }
   }
 }

src/views/devops/user/UserProfile.vue

@@ -19,7 +19,7 @@
                   <el-form-item label="用户名">
                     <el-input v-model="loginUser.username" style="width: 70%; padding-right: 10px" readonly />
                   </el-form-item>
-<!--                  <el-form-item label="显示名">
+                  <!-- <el-form-item label="显示名">
                     <el-input v-model="loginUser.screenName" style="width: 70%; padding-right: 10px" readonly />
                   </el-form-item>
                   <el-form-item label="手机">