权限控制

src/views/system/role/index.vue

@@ -39,18 +39,18 @@
                     </el-icon>
                   </el-button>
                 </el-tooltip>
-                <el-tooltip
-                  class="box-item"
-                  effect="dark"
-                  content="删除"
-                  placement="top"
-                >
-                  <el-button type="primary" link  @click="handleDelete(scope.row)">
-                    <el-icon >
-                      <Delete />
-                    </el-icon>
-                  </el-button>
-                </el-tooltip>
+<!--                <el-tooltip-->
+<!--                  class="box-item"-->
+<!--                  effect="dark"-->
+<!--                  content="删除"-->
+<!--                  placement="top"-->
+<!--                >-->
+<!--                  <el-button type="primary" link  @click="handleDelete(scope.row)">-->
+<!--                    <el-icon >-->
+<!--                      <Delete />-->
+<!--                    </el-icon>-->
+<!--                  </el-button>-->
+<!--                </el-tooltip>-->
               </template>
             </template>
           </el-table-column>
@@ -71,16 +71,17 @@
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px"  append-to-body>
       <el-form ref="formRef" :model="roleForm" :rules="rules" label-width="120px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" disabled/>
         </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-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand()">展开/折叠</el-checkbox>
+          <el-checkbox v-model="roleForm.menuCheckStrictly" @change="handleCheckedTreeConnect()" disabled>父子联动</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll()" disabled>全选/全不选</el-checkbox>
           <el-tree
+            style="height: 400px;overflow-y: auto"
             disabled
             class="tree-border"
             :data="menuOptions"
@@ -88,7 +89,9 @@
             ref="menuRef"
             node-key="id"
             :check-strictly="!roleForm.menuCheckStrictly"
-            empty-text="加载中，请稍候"
+            :default-expanded-keys="menuData2"
+            :default-checked-keys="menuData"
+             empty-text="加载中，请稍候"
             :props="{ label: 'title', children: 'children' }"
           ></el-tree>
         </el-form-item>
@@ -116,18 +119,43 @@ const menuExpand = ref(false)
 const menuNodeAll = ref(false)
 const menuOptions = ref<any>([])
 const menuRef = ref<any>();
+const menuOptionsData= ref([])
 /** 树权限（展开/折叠）*/
-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 handleCheckedTreeExpand = () => {
+  if (menuExpand.value) {
+    menuExpand.value = true;
+    Object.values(menuRef.value.store.nodesMap).forEach((v: any) => v.expand());
+    return;
+  }
+  menuExpand.value = false;
+  Object.values(menuRef.value.store.nodesMap).forEach((v: any) => v.collapse());
+};
+
+
+
+/** 树权限（全选/全不选） */
+const handleCheckedTreeNodeAll = (value: any, type: string) => {
+  if (menuNodeAll.value) {
+    const allKeys = getAllKeys(menuOptions.value);
+    menuRef.value.setCheckedKeys(allKeys);
+  } else {
+    menuRef.value.setCheckedKeys([]);
   }
 }
 
+const getAllKeys = (data) => {
+  let keys = [];
+  data.forEach(item => {
+    keys.push(item.id);
+    if (item.children) {
+      keys = keys.concat(getAllKeys(item.children));
+    }
+  });
+  return keys;
+};
+/** 树权限（父子联动） */
+const handleCheckedTreeConnect = (value: any, type: string) => {
+}
 
 const convertData = (data: any[]) => {
   return data.map(item => {
@@ -139,139 +167,223 @@ const convertData = (data: any[]) => {
   });
 };
 
+const menuData = ref([])
+const menuData2 = ref([])
+const adminData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,300,301,302,303,304,400,401])//管理员
+const observerData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,300,303,304,400,401])//观测员
+const forecasterData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,400,401])//预报员、装备管理人员
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "编辑";
+  roleForm.value.roleName = row.a
+  if(row.a==="管理员"){
+    menuData.value = adminData.value
+  }else if(row.a ==="观测员"){
+    menuData.value = observerData.value
+  }else if(row.a ==="观测员"){
+    menuData.value = adminData.value
+  }else if(row.a ==="预报员"){
+    menuData.value = forecasterData.value
+  }else if(row.a ==="装备管理人员"){
+    menuData.value = forecasterData.value
+  }
 
+  getMenuList()
 
-
-
+}
 // 获取菜单列表
 const getMenuList= () => {
      const data = [
        {
-         "title": "实时监测报警",
-         "children": [
+         title: "实时监测报警",
+         id:1,
+         disabled: true,
+         children: [
            {
-             "title": "全网实时数据监测报警",
-             "children": []
+             title: "全网实时数据监测报警",
+             children: [],
+             id:2,
+             disabled: true
            },
            {
-             "title": "全网危险天气监测报警",
-             "children": []
+             title: "全网危险天气监测报警",
+             children: [],
+             id:3,
+             disabled: true
            },
            {
-             "title": "全网设备状态监测报警",
-             "children": []
+             title: "全网设备状态监测报警",
+             children: [],
+             id:4,
+             disabled: true
            },
            {
-             "title": "单站实时数据监测报警",
-             "children": []
+             title: "单站实时数据监测报警",
+             children: [],
+             id:5,
+             disabled: true
            },
            {
-             "title": "单站设备状态监测报警",
-             "children": []
+             title: "单站设备状态监测报警",
+             children: [],
+             id:6,
+             disabled: true
            },
            {
-             "title": "软件状态监测报警",
-             "children": []
+             title: "软件状态监测报警",
+             children: [],
+             id:7,
+             disabled: true
            },
            {
-             "title": "GIS展示",
-             "children": []
+             title: "GIS展示",
+             children: [],
+             id:8,
+             disabled: true
            }
          ]
        },
        {
-         "title": "数据分析显示",
-         "children": [
+         title: "数据分析显示",
+         id:100,
+         disabled: true,
+         children: [
            {
-             "title": "数据综合分析",
-             "children": []
+             title: "数据综合分析",
+             children: [],
+             id:101,
+             disabled: true,
            },
            {
-             "title": "要素曲线分析",
-             "children": []
+             title: "要素曲线分析",
+             children: [],
+             id:102,
+             disabled: true,
            },
            {
-             "title": "风速风向玫瑰图",
-             "children": []
+             title: "风速风向玫瑰图",
+             children: [],
+             id:103,
+             disabled: true,
            },
            {
-             "title": "雨量柱状图分析",
-             "children": []
+             title: "雨量柱状图分析",
+             disabled: true,
+             id:104,
+             children: []
            },
            {
-             "title": "雷电区域分析",
-             "children": []
+             title: "雷电区域分析",
+             disabled: true,
+             id:105,
+             children: []
            }
          ]
        },
        {
-         "title": "数据查询输出",
-         "children": [
+         title: "数据查询输出",
+         disabled: true,
+         id:200,
+         children: [
            {
-             "title": "观测数据查询",
-             "children": []
+             title: "观测数据查询",
+             disabled: true,
+             id:201,
+             children: []
            },
            {
-             "title": "设备健康信息查询",
-             "children": []
+             title: "设备健康信息查询",
+             disabled: true,
+             id:202,
+             children: []
            },
            {
-             "title": "危险天气记录查询",
-             "children": []
+             title: "危险天气记录查询",
+             disabled: true,
+             id:203,
+             children: []
            },
            {
-             "title": "质量审核记录",
-             "children": []
+             title: "质量审核记录",
+             disabled: true,
+             id:204,
+             children: []
            },
            {
-             "title": "值班过程管理",
-             "children": []
+             title: "值班过程管理",
+             id:205,
+             disabled: true,
+             children: []
            },
            {
-             "title": "日观测纪要",
-             "children": []
+             title: "日观测纪要",
+             id:206,
+             disabled: true,
+             children: []
            },
            {
-             "title": "记录簿",
-             "children": []
+             title: "记录簿",
+             disabled: true,
+             id:207,
+             children: []
            },
            {
-             "title": "月报表查询",
-             "children": []
+             title: "月报表查询",
+             disabled: true,
+             id:208,
+             children: []
            },
            {
-             "title": "天气日志",
-             "children": []
+             title: "天气日志",
+             disabled: true,
+             id:209,
+             children: []
            }
          ]
        },
        {
-         "title": "系统管理",
-         "children": [
+         title: "系统管理",
+         disabled: true,
+         id:300,
+         children: [
            {
-             "title": "用户管理",
-             "children": []
+             title: "用户管理",
+             disabled: true,
+             id:301,
+             children: []
            },
            {
-             "title": "角色管理",
-             "children": []
+             title: "角色管理",
+             disabled: true,
+             id:302,
+             children: []
            },
            {
-             "title": "台站管理",
-             "children": []
+             title: "台站管理",
+             disabled: true,
+             id:303,
+             children: []
            },
            {
-             "title": "系统配置",
-             "children": []
+             title: "系统配置",
+             disabled: true,
+             id:304,
+             children: []
            }
          ]
        },
        {
-         "title": "维护管理",
-         "children": [
+         title: "维护管理",
+         disabled: true,
+         id:400,
+         children: [
            {
-             "title": "站点维护记录",
-             "children": []
+             title: "站点维护记录",
+             id:401,
+             disabled: true,
+             children: []
            }
          ]
        }
@@ -279,20 +391,6 @@ const getMenuList= () => {
   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,
@@ -395,15 +493,7 @@ const handleAdd = () => {
   getMenuList()
 }
 
-/** 修改按钮操作 */
-const handleUpdate = async (row?: any) => {
-  reset();
-  dialog.visible = true;
-  dialog.title = "编辑";
-  roleForm.value.roleName = row.a
-  getMenuList()
 
-}
 
 /** 取消按钮 */
 const cancel = () => {