|
|
@@ -72,6 +72,21 @@
|
|
|
<el-form-item label="角色名称" prop="roleName">
|
|
|
<el-input v-model="roleForm.roleName" placeholder="请输入角色名称" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="菜单权限">
|
|
|
+ <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
|
|
|
+ <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
|
|
|
+ <el-checkbox v-model="roleForm.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
|
|
|
+ <el-tree
|
|
|
+ class="tree-border"
|
|
|
+ :data="menuOptions"
|
|
|
+ show-checkbox
|
|
|
+ ref="menuRef"
|
|
|
+ node-key="id"
|
|
|
+ :check-strictly="!roleForm.menuCheckStrictly"
|
|
|
+ empty-text="加载中，请稍候"
|
|
|
+ :props="{ label: 'title', children: 'children' }"
|
|
|
+ ></el-tree>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
@@ -88,6 +103,97 @@ import Pagination from "@/components/ProTable/components/Pagination.vue";
|
|
|
import { ref, reactive } from "vue";
|
|
|
import { ColumnProps } from "@/components/ProTable/interface";
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
+const menuExpand = ref(false)
|
|
|
+const menuNodeAll = ref(false)
|
|
|
+const menuOptions = ref<any>([])
|
|
|
+const menuRef = ref<any>();
|
|
|
+/** 树权限（展开/折叠）*/
|
|
|
+const handleCheckedTreeExpand = (value: boolean, type: string) => {
|
|
|
+ if (type == "menu") {
|
|
|
+ let treeList = menuOptions.value;
|
|
|
+ for (let i = 0; i < treeList.length; i++) {
|
|
|
+ if (menuRef.value) {
|
|
|
+ menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取菜单列表
|
|
|
+const getMenuList= () => {
|
|
|
+ const data = [
|
|
|
+ {
|
|
|
+ title:'实时监测报警',
|
|
|
+ children:[
|
|
|
+ {
|
|
|
+ title:'全网实时数据监测报警',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'全网危险天气监测报警',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'全网设备状态监测报警',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'单站实时数据监测报警',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'软件状态监测报警',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'GIS展示',
|
|
|
+ children:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'数据分析显示',
|
|
|
+ children:[
|
|
|
+ {
|
|
|
+ title:'数据综合分析',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'要素曲线分析',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'风速风向玫瑰图',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'雨量柱状图分析',
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'雷电区域分析',
|
|
|
+ children:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ menuOptions.value = data
|
|
|
+}
|
|
|
+
|
|
|
+/** 树权限（全选/全不选） */
|
|
|
+const handleCheckedTreeNodeAll = (value: any, type: string) => {
|
|
|
+ if (type == "menu") {
|
|
|
+ menuRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
|
|
|
+ }
|
|
|
+}
|
|
|
+/** 树权限（父子联动） */
|
|
|
+const handleCheckedTreeConnect = (value: any, type: string) => {
|
|
|
+ if (type == "menu") {
|
|
|
+ roleForm.value.menuCheckStrictly = value;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
const pageable = ref<any>({
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
@@ -157,6 +263,7 @@ const rules = ref<any>(
|
|
|
const initFormData = ref<any>(
|
|
|
{
|
|
|
roleName: "",
|
|
|
+ menuCheckStrictly: true
|
|
|
}
|
|
|
);
|
|
|
|
|
|
@@ -168,6 +275,7 @@ const handleAdd = () => {
|
|
|
reset();
|
|
|
dialog.visible = true;
|
|
|
dialog.title = "新增";
|
|
|
+ getMenuList()
|
|
|
}
|
|
|
|
|
|
/** 修改按钮操作 */
|
|
|
@@ -199,7 +307,7 @@ const submitForm = () => {
|
|
|
|
|
|
/** 删除按钮操作 */
|
|
|
const handleDelete = async (row?: any) => {
|
|
|
- ElMessageBox.confirm('是否确认删除岗位编号为"' + row.b + '"的数据项？', {
|
|
|
+ ElMessageBox.confirm('是否确认删除角色编号为"' + row.a + '"的数据项？', {
|
|
|
confirmButtonText: '删除',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
cxs