From 7a6a21c52b5c9678a5a5224d26e3e17e57ee133c Mon Sep 17 00:00:00 2001
From: zhaoyz <11@22.com>
Date: Fri, 26 Apr 2024 18:53:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86=E6=8E=88?=
 =?UTF-8?q?=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu.ts                               |  24 ++
 src/api/role.ts                               |  25 +-
 .../form/empower-dialog.vue                   | 168 +++++-----
 src/views/permissions-manage/role-manage.vue  |  35 ++-
 src/views/remote-manage/remote-control.vue    | 286 +++++++++---------
 5 files changed, 301 insertions(+), 237 deletions(-)

diff --git a/src/api/menu.ts b/src/api/menu.ts
index d6c547e..1b432e5 100644
--- a/src/api/menu.ts
+++ b/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) => {
@@ -52,4 +62,18 @@ export function deleteById(id: string) {
 			resolve(err);
 		})
 	})
+}
+
+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);
+		});
+	})
 }
\ No newline at end of file
diff --git a/src/api/role.ts b/src/api/role.ts
index 61b1530..0889019 100644
--- a/src/api/role.ts
+++ b/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);
+		})
+	})
+}
+
diff --git a/src/views/permissions-manage/form/empower-dialog.vue b/src/views/permissions-manage/form/empower-dialog.vue
index 30a686d..e85c4c7 100644
--- a/src/views/permissions-manage/form/empower-dialog.vue
+++ b/src/views/permissions-manage/form/empower-dialog.vue
@@ -1,122 +1,108 @@
 <template>
-    <el-dialog v-model="dialogVisible" width="30%">
-        <template #header>
-            <span class="el-dialog__title" style="margin-right: 50px;">授权权限</span>
-            <el-checkbox v-model="toggleExpand" @change="toggleExpandChange">展开 / 折叠</el-checkbox>
-            <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" />
-        </div>
-        <div style="text-align: right;margin-top: 20px;">
-            <el-button class="f18" @click="dialogVisible = false">取消</el-button>
-            <el-button class="f18" type="primary" @click="updateData">更新</el-button>
-        </div>
-    </el-dialog>
+	<el-dialog v-model="dialogVisible" width="30%">
+		<template #header>
+			<span class="el-dialog__title" style="margin-right: 50px;">授权权限</span>
+			<el-checkbox v-model="toggleExpand" @change="toggleExpandChange">展开 / 折叠</el-checkbox>
+			<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" :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>
+			<el-button class="f18" type="primary" @click="updateData">更新</el-button>
+		</div>
+	</el-dialog>
 </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',
-    children: 'children'
+	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(() => {
-
+	open,
+	close
 })
 
-function open() {
-    dialogVisible.value = true
-    setTimeout(() => {
-        setTreeChecked(['0'])
-    }, 0)
+function open(role: any) {
+	dialogVisible.value = true
+	roleObj = role;
+	getMenuTree();
+	getRoleMenu();
 }
+
 function close() {
-    dialogVisible.value = false
+	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: '医生删除' }
-                    ]
-                }
-            ]
-        },
-        {
-            id: '2', label: '患者管理', children: [
-                {
-                    id: '2-1', label: '医生管理', children: [
-                        { id: '2-1-1', label: '医生新增' }
-                    ]
-                }
-            ]
-        }
-    ]
-    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)
+
+const getMenuTree = () => {
+	menuApi.getMenuTree().then((res: any) => {
+		treeData.value = res.data;
+		setTreeIds(res.data, treeIds);
+	});
 }
-function setTreeChecked(e?: Array<any>) {
-    e && treeRef.value.setCheckedKeys(e)
+
+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);
+		}
+	});
 }
 
 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()
+	if (!e) treeRef.value.setCheckedNodes(treeIds)
+	else treeRef.value.setCheckedKeys(treeIds)
 }
+
 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>
 
diff --git a/src/views/permissions-manage/role-manage.vue b/src/views/permissions-manage/role-manage.vue
index f35a110..a2971ca 100644
--- a/src/views/permissions-manage/role-manage.vue
+++ b/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>
diff --git a/src/views/remote-manage/remote-control.vue b/src/views/remote-manage/remote-control.vue
index a64a745..73434d2 100644
--- a/src/views/remote-manage/remote-control.vue
+++ b/src/views/remote-manage/remote-control.vue
@@ -783,169 +783,171 @@ function startAI() {
 						border-radius: 10px;
 					}
 
-          .unusual-box {
-            width: 100%;
-            height: calc(100% - 45px);
-            // background: #F8F8F8;
-            border-left: 1px dashed #C1C1C1;
-            // border-radius: 4px;
-            margin-top: 5px;
-            padding: 8px 16px;
-            overflow-y: auto;
+					.unusual-box {
+						width: 100%;
+						height: calc(100% - 45px);
+						// background: #F8F8F8;
+						border-left: 1px dashed #C1C1C1;
+						// border-radius: 4px;
+						margin-top: 5px;
+						padding: 8px 16px;
+						overflow-y: auto;
 
-            li {
-              color: #F80000;
-              font-size: 14px;
-              line-height: 22px;
-            }
-          }
-        }
+						li {
+							color: #F80000;
+							font-size: 14px;
+							line-height: 22px;
+						}
+					}
+				}
 
-        & > .right-box {
-          width: calc(100% - 205px);
-          height: 100%;
+				& > .right-box {
+					width: calc(100% - 205px);
+					height: 100%;
 
-          .video-box {
-            position: relative;
-            width: 100%;
-            height: 270px;
-            background: $main-color;
-            /* background: url(@/assets/imgs/video_bck.png);
+					.video-box {
+						position: relative;
+						width: 100%;
+						height: 270px;
+						background: $main-color;
+						/* background: url(@/assets/imgs/video_bck.png);
         background-size: 100% 100%; */
 
-            &:hover {
-              .icon-box {
-                display: flex;
-              }
-            }
+						&:hover {
+							.icon-box {
+								display: flex;
+							}
+						}
 
-            .icon-box {
-              display: none;
-              position: absolute;
-              top: 0;
-              left: 0;
-              bottom: 0;
-              right: 0;
-              font-size: 60px;
-              color: white;
-              background: rgba(black, .3);
-              justify-content: center;
-              align-items: center;
-            }
+						.icon-box {
+							display: none;
+							position: absolute;
+							top: 0;
+							left: 0;
+							bottom: 0;
+							right: 0;
+							font-size: 60px;
+							color: white;
+							background: rgba(black, .3);
+							justify-content: center;
+							align-items: center;
+						}
 
-            video {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
+						video {
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+						}
+					}
 
-          .message-box {
-            width: 100%;
-            height: 270px;
-            // margin-bottom: 5px;
+					.message-box {
+						width: 100%;
+						//            height: 270px;
+						height: 149px;
+						// margin-bottom: 5px;
 
-            .message-log {
-              width: 100%;
-              height: calc(100% - 40px);
-              padding: 16px 20px;
-              box-sizing: border-box;
-              border: 1px solid #c8c8c8;
-              background: #f8f8f8;
-              overflow-y: auto;
+						.message-log {
+							width: 100%;
+							height: calc(100% - 40px);
+							max-height: 109px;
+							padding: 16px 20px;
+							box-sizing: border-box;
+							border: 1px solid #c8c8c8;
+							background: #f8f8f8;
+							overflow-y: auto;
 
-              li {
-                width: 100%;
-                font-size: 14px;
-                line-height: 1.6;
-                margin: 5px 0;
+							li {
+								width: 100%;
+								font-size: 14px;
+								line-height: 1.6;
+								margin: 5px 0;
 
-                &.align-right {
-                  text-align: right;
-                }
+								&.align-right {
+									text-align: right;
+								}
 
-                span {
-                  display: inline-block;
-                  max-width: 80%;
-                  padding: 6px 8px;
-                  box-sizing: border-box;
-                  border-radius: 8px;
-                  color: white;
-                  letter-spacing: 1px;
-                  background: $main-color;
-                  text-align: left;
-                }
-              }
-            }
+								span {
+									display: inline-block;
+									max-width: 80%;
+									padding: 6px 8px;
+									box-sizing: border-box;
+									border-radius: 8px;
+									color: white;
+									letter-spacing: 1px;
+									background: $main-color;
+									text-align: left;
+								}
+							}
+						}
 
-            .send-box {
-              width: 100%;
-              height: 40px;
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-end;
+						.send-box {
+							width: 100%;
+							height: 40px;
+							display: flex;
+							justify-content: space-between;
+							align-items: flex-end;
 
-              .el-input {
-                width: calc(100% - 110px);
-                height: 32px;
+							.el-input {
+								width: calc(100% - 110px);
+								height: 32px;
 
-                :deep(.el-input__wrapper) {
-                  background-color: #F2F3F5;
-                  border-color: #C1C1C1;
-                }
-              }
+								:deep(.el-input__wrapper) {
+									background-color: #F2F3F5;
+									border-color: #C1C1C1;
+								}
+							}
 
-              .el-button {
-                padding: 0;
-                width: 100px;
-                line-height: 30px;
-              }
-            }
-          }
-        }
-      }
+							.el-button {
+								padding: 0;
+								width: 100px;
+								line-height: 30px;
+							}
+						}
+					}
+				}
+			}
 
-      .table-box {
-        width: 100%;
-        height: calc(50% - 264.5px);
-        margin-bottom: 20px;
-        flex-grow: 1;
+			.table-box {
+				width: 100%;
+				height: calc(50% - 264.5px);
+				margin-bottom: 20px;
+				flex-grow: 1;
 
-        :deep(.el-table__inner-wrapper) {
-          .el-table__cell {
-            padding: 6px 0;
-          }
+				:deep(.el-table__inner-wrapper) {
+					.el-table__cell {
+						padding: 6px 0;
+					}
 
-          .cell {
-            padding: 0 2px;
-          }
+					.cell {
+						padding: 0 2px;
+					}
 
-          .el-table__header-wrapper {
-            tr {
-              background-color: $main-color;
-            }
+					.el-table__header-wrapper {
+						tr {
+							background-color: $main-color;
+						}
 
-            th.el-table__cell {
-              color: white;
-              background-color: $main-color;
-              padding: 8px 0;
-              font-weight: 400;
-            }
-          }
-        }
+						th.el-table__cell {
+							color: white;
+							background-color: $main-color;
+							padding: 8px 0;
+							font-weight: 400;
+						}
+					}
+				}
 
-        .table-btn-box {
-          .el-button {
-            padding: 0 7px;
-            height: 24px;
-            line-height: 22px;
+				.table-btn-box {
+					.el-button {
+						padding: 0 7px;
+						height: 24px;
+						line-height: 22px;
 
-            &:not(:first-of-type) {
-              margin-left: 4px;
-            }
-          }
-        }
-      }
-    }
-  }
+						&:not(:first-of-type) {
+							margin-left: 4px;
+						}
+					}
+				}
+			}
+		}
+	}
 }</style>