用户权限查看

src/api/system/user.js

@@ -98,3 +98,11 @@ export function syncUser() {
     method: 'get'
   })
 }
+
+// 根据用户ID查询用户权限（菜单按钮ID）
+export function getPermissionByUserId(userId) {
+  return request({
+    url: '/system/role/getPermissionByUserId/' + userId,
+    method: 'get'
+  })
+}

src/views/system/user.vue

@@ -77,7 +77,7 @@
                 v-model="scope.row.status"
                 active-value="0"
                 inactive-value="1"
-                :disabled="scope.row.id === 1"
+                :disabled="scope.row.id === '1'"
                 @change="handleStatusChange(scope.row)"
               ></el-switch>
             </template>
@@ -91,9 +91,8 @@
             label="操作"
             align="center"
             width="200"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope" v-if="scope.row.id !== 1">
+            class-name="small-padding fixed-width">
+            <template slot-scope="scope" v-if="scope.row.id != 1">
               <el-button
                 size="mini"
                 type="text"
@@ -102,22 +101,23 @@
                 v-hasPermi="['system:user:edit']"
               >修改
               </el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:delete']"
-              >删除
-              </el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-key"
-                @click="handleResetPwd(scope.row)"
-                v-hasPermi="['system:user:resetPwd']"
-              >重置密码
-              </el-button>
+              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                           v-hasPermi="['system:user:delete','system:user:resetPwd']">
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="handleDelete" icon="el-icon-delete"
+                                    v-hasPermi="['system:user:delete']"
+                  >删除
+                  </el-dropdown-item>
+                  <el-dropdown-item command="handlePermission" icon="el-icon-edit-outline"
+                  >查看权限
+                  </el-dropdown-item>
+                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
+                                    v-hasPermi="['system:user:resetPwd']"
+                  >重置密码
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
@@ -230,6 +230,21 @@
       </div>
     </el-dialog>
 
+    <el-dialog title="用户权限" :visible.sync="permissionOpen" width="500px" append-to-body class="custom-dialog"
+               :close-on-click-modal="false">
+      <div style="height:500px;overflow: auto">
+        <el-tree
+          class="tree-border"
+          :data="menuOptions"
+          show-checkbox
+          ref="menuTree"
+          node-key="id"
+          empty-text="加载中，请稍候"
+          :props="defaultProps"
+        ></el-tree>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -243,13 +258,15 @@ import {
   resetUserPwd,
   changeUserStatus,
   deptTreeSelect,
-  syncUser
+  syncUser,
+  getPermissionByUserId
 } from "@/api/system/user";
 
 import Dept from './components/dept'
 
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {treeselect as menuTreeselect} from "@/api/system/menu";
 
 export default {
   name: "User",
@@ -307,7 +324,14 @@ export default {
             trigger: "blur"
           }
         ]
+      },
+      permissionOpen: false,
+      menuOptions: [],
+      defaultProps: {
+        children: "children",
+        label: "menuName"
       }
+
     };
   },
   watch: {
@@ -450,11 +474,7 @@ export default {
       }).catch(() => {
       });
     },
-    /** 分配角色操作 */
-    handleAuthRole(row) {
-      const id = row.id;
-      this.$router.push("/system/user-auth/role/" + id);
-    },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -475,20 +495,50 @@ export default {
         }
       });
     },
+    /** 更多操作触发 */
+    handleCommand(command, row) {
+      switch (command) {
+        case 'handleDelete':
+          this.handleDelete(row)
+          break
+        case 'handlePermission':
+          this.handlePermission(row)
+          break
+        case 'handleResetPwd':
+          this.handleResetPwd(row)
+          break
+        default:
+          break
+      }
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
-      if(row.fuserId){
-
+      if (row.fuserId) {
+        this.$message.info('不可删除飞书同步用户')
+        return
       }
       this.$confirm('是否确认删除用户编号为"' + row.id + '"的数据项？').then(function () {
-        return delUser(ids);
+        return delUser(row.id);
       }).then(() => {
         this.getList();
         this.$message.success("删除成功");
       }).catch(() => {
       });
     },
-
+    /** 查看用户角色权限 */
+    handlePermission(row) {
+      menuTreeselect().then(res => {
+        this.menuOptions = res.data;
+        this.permissionOpen = true
+        getPermissionByUserId(row.id).then(res => {
+          res.data.forEach((v) => {
+            this.$nextTick(() => {
+              this.$refs.menuTree.setChecked(v, true, false);
+            })
+          })
+        })
+      });
+    },
 
   }
 };
@@ -500,4 +550,7 @@ export default {
   margin-bottom: 10px;
 }
 
+.custom-dialog::v-deep .el-dialog__body {
+  padding: 0 20px 10px 20px;
+}
 </style>