角色管理授权

src/api/menu.ts

@@ -24,6 +24,16 @@ export function getMenuTree(menuName?: string, parent?: string, type?: string) {
 	})
 }
 
+export function getRoleTree(roleId: string) {
+	return new Promise(resolve => {
+		request.get(getMenuTreeUrl + "/" + roleId).then(res => {
+			resolve(res.data);
+		}).catch(err => {
+			resolve(err);
+		});
+	})
+}
+
 export function saveMenu(menu: any) {
 	return new Promise((resolve, reject) => {
 		request.post(menuUrl, menu).then((res: any) => {
@@ -53,3 +63,17 @@ export function deleteById(id: string) {
 		})
 	})
 }
+
+export function getUserMenu(type?: string, parentId?: string) {
+	return new Promise(resolve => {
+		const params: string[] = [];
+		if (type) params.push("type=" + type);
+		if (parentId) params.push("parentId=" + parentId);
+		request.get(menuUrl + (params.length > 0 ? "?" + params.join("&") : ""))
+			.then((res: any) => {
+				resolve(res.data);
+			}).catch(err => {
+			resolve(err);
+		});
+	})
+}

src/api/role.ts

@@ -1,7 +1,9 @@
 import request, {getData} from "@/utils/request";
 
-const getRoleListUrl = '/admin/role/page';
+const getRoleListUrl = '/admin/role/tree';
 const roleUrl = "/admin/role";
+const saveRoleMenuUrl = "/admin/role/menu";
+const getDetailsUrl = "/admin/role/details";
 
 export function getRoleList(current: number, size: number, name?: string) {
 	return new Promise((resolve, reject) => {
@@ -25,3 +27,24 @@ export function addRole(role: any) {
 	})
 }
 
+export function saveRoleMenus(roleId: string, menuIds: string) {
+	return new Promise(resolve => {
+		request.put(saveRoleMenuUrl, {roleId, menuIds})
+			.then(res => {
+				resolve(res.data);
+			}).catch(err => {
+			resolve(err);
+		})
+	})
+}
+
+export function getDetails(id: string) {
+	return new Promise(resolve => {
+		request(getDetailsUrl + "/" + id).then(res => {
+			resolve(res.data);
+		}).catch(err => {
+			resolve(err);
+		})
+	})
+}
+

src/views/permissions-manage/form/empower-dialog.vue

@@ -6,8 +6,9 @@
 			<el-checkbox v-model="toggleSelectAll" @change="toggleSelectAllChange">全选 / 全不选</el-checkbox>
 		</template>
 		<div style="min-height: 200px;max-height: 500px;overflow-y: auto;">
-            <el-tree ref="treeRef" :key="treeKey" :props="props" :data="treeData" :default-expanded-keys="expandedKey" node-key="id"
-                show-checkbox @check-change="checkChange" />
+			<el-tree ref="treeRef" :props="props" :data="treeData" :default-expanded-keys="expandedKey"
+							 node-key="id"
+							 show-checkbox/>
 		</div>
 		<div style="text-align: right;margin-top: 20px;">
 			<el-button class="f18" @click="dialogVisible = false">取消</el-button>
@@ -17,106 +18,91 @@
 </template>
 
 <script lang='ts' setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { getMenuData } from '@/static-data/menu'
+import {ref} from 'vue'
+import {ElMessage} from 'element-plus'
+import * as menuApi from "@/api/menu";
+import * as roleApi from "@/api/role";
 
 const props = {
-    label: 'menuName',
+	label: 'name',
 	children: 'children'
 }
-let treeIds: Array<string> = []
-let checkDatas: Array<any> = []
-
+const treeIds: Array<string> = []
 const treeRef = ref()
-const treeKey = ref(0)
 const dialogVisible = ref(false)
 const toggleExpand = ref(false)
 const toggleSelectAll = ref(false)
 const treeData = ref()
 const expandedKey = ref<Array<string>>([])
-
-initTree()
+let roleObj: any;
 
 defineExpose({
 	open,
-    close,
-    initTree,
-})
-onMounted(() => {
-
+	close
 })
 
-function open() {
+function open(role: any) {
 	dialogVisible.value = true
-    setTimeout(() => {
-        setTreeChecked(['0'])
-    }, 0)
+	roleObj = role;
+	getMenuTree();
+	getRoleMenu();
 }
+
 function close() {
 	dialogVisible.value = false
 }
-function initTree() {
-    treeData.value = [
-        {
-            id: '1', label: '权限管理', children: [
-                {
-                    id: '1-1', label: '医生管理', children: [
-                        { id: '1-1-1', label: '医生新增' },
-                        { id: '1-1-2', label: '医生删除' }
-                    ]
+
+const getMenuTree = () => {
+	menuApi.getMenuTree().then((res: any) => {
+		treeData.value = res.data;
+		setTreeIds(res.data, treeIds);
+	});
 }
-            ]
-        },
-        {
-            id: '2', label: '患者管理', children: [
-                {
-                    id: '2-1', label: '医生管理', children: [
-                        { id: '2-1-1', label: '医生新增' }
-                    ]
+
+const getRoleMenu = () => {
+	menuApi.getRoleTree(roleObj.roleId).then((res: any) => {
+		treeRef.value.setCheckedKeys(res.data);
+	})
 }
-            ]
+
+const setTreeIds = (data: any[], container: string[]) => {
+	data.forEach((menu: any) => {
+		container.push(menu.id);
+		if (menu.children) {
+			setTreeIds(menu.children, container);
 		}
-    ]
-    treeData.value = getMenuData()
-    treeIds = []
-    const setTreeIds = (ary: any) => {
-        for (let i = 0; i < ary.length; i++) {
-            const obj = ary[i]
-            treeIds.push(obj.id)
-            if(obj.children && obj.children.length > 0) setTreeIds(obj.children)
-        }
-    }
-    // 储存所有节点id，全选、展开使用
-    setTreeIds(treeData.value)
-}
-function setTreeChecked(e?: Array<any>) {
-    e && treeRef.value.setCheckedKeys(e)
+	});
 }
 
 const toggleExpandChange = (e: boolean) => {
-    if (e) expandedKey.value = JSON.parse(JSON.stringify(treeIds))
-    else {
-        expandedKey.value = []
-        const storeCheck = JSON.parse(JSON.stringify(checkDatas)) // 储存上次更新的值
-        treeKey.value++ // 刷新组件
-        setTimeout(() => {
-            setTreeChecked(storeCheck)
-        })
+	setTreeExpand(treeRef.value.store.root, e)
+}
 
+const setTreeExpand = (node: any, status: boolean) => {
+	node.expanded = status;
+	if (node.childNodes) {
+		node.childNodes.forEach((node: any) => {
+			setTreeExpand(node, status);
+		})
 	}
 }
+
 const toggleSelectAllChange = (e: boolean) => {
-    // console.log(e)
 	if (!e) treeRef.value.setCheckedNodes(treeIds)
 	else treeRef.value.setCheckedKeys(treeIds)
 }
-const checkChange = () => {
-    checkDatas = treeRef.value.getCheckedKeys()
-}
+
 const updateData = () => {
-    ElMessage.success('更新成功')
-    close()
+	const menuIds = treeRef.value.getCheckedKeys().join(",");
+	roleApi.saveRoleMenus(roleObj.roleId, menuIds)
+		.then((res: any) => {
+			if (res.code == 0) {
+				ElMessage.success('更新成功');
+				close();
+			} else {
+				ElMessage.error(res.msg ? res.msg : "更新失败");
+			}
+		});
 }
 </script>
 

src/views/permissions-manage/role-manage.vue

@@ -25,7 +25,20 @@
 				<el-table-column property="roleName" label="角色名称" width="120" align="center"/>
 				<el-table-column property="roleCode" label="角色标识" width="180" align="center"/>
 				<el-table-column property="roleDesc" label="角色描述" width="120" align="center"/>
-				<el-table-column property="dataPermissions" label="数据权限" width="120" align="center"/>
+				<el-table-column label="数据权限" width="120" align="center">
+					<template #default="scope">
+						<el-popover
+							trigger="hover"
+							:content="scope.row.menu"
+						>
+							<template #reference>
+								<div class="cell-content">
+									{{ scope.row.menu }}
+								</div>
+							</template>
+						</el-popover>
+					</template>
+				</el-table-column>
 				<el-table-column label="创建时间" width="220" align="center">
 					<template #default="scope">{{ scope.row.createTime }}</template>
 				</el-table-column>
@@ -128,7 +141,7 @@ const removeData = (e?: any) => {
 }
 const empower = (e: any) => {
 	setTimeout(() => {
-		empowerDialogRef.value.open()
+		empowerDialogRef.value.open(e)
 	})
 }
 const editData = (e: any) => {
@@ -150,4 +163,20 @@ const paginationChange = (page: number, s: number) => {
 }
 </script>
 
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+:deep(.el-table__body) {
+	.cell {
+		max-height: 49px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.cell-content {
+		max-height: 49px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
+</style>

src/views/remote-manage/remote-control.vue

@@ -842,12 +842,14 @@ function startAI() {
 
 					.message-box {
 						width: 100%;
-            height: 270px;
+						//            height: 270px;
+						height: 149px;
 						// margin-bottom: 5px;
 
 						.message-log {
 							width: 100%;
 							height: calc(100% - 40px);
+							max-height: 109px;
 							padding: 16px 20px;
 							box-sizing: border-box;
 							border: 1px solid #c8c8c8;