权限管理重新排版

src/views/systemManage/rolePermission/index.vue

@@ -138,7 +138,7 @@ export default defineComponent({
       api.roleMenuTreeselect({}, radio1.value).then((requset) => {
         if (requset.code == 200) {
           menuData.value = requset.data.menus
-          getTreeData2(menuData.value) //对树结构返回值进行重组
+          // getTreeData2(menuData.value) //对树结构返回值进行重组
           checkedKeys.value = requset.data.checkedKeys
 
           //当返回值没有选中菜单时,否

src/views/systemManage/rolePermission/roleInfoCom/index-old2.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <div style="text-align: right; margin-bottom: 20px">
+      <!-- <el-button type="success" >新增</el-button> -->
+      <el-button
+        type="primary"
+        @click="saveMenu()"
+        :disabled="radio1 == 1 ? true : false"
+      >
+        保存
+      </el-button>
+    </div>
+
+  
+
+    <!-- 带复选框的树结构 start -->
+
+    <el-tree
+      ref="box"
+      :data="menuData"
+      show-checkbox
+      node-key="id"
+      :default-checked-keys="checkedKeys"
+      :props="defaultProps"
+      check-strictly="false"
+      @check="currentChecked"
+    />
+
+    <!-- 带复选框的树结构 end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'RoleInfoCom',
+  props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],
+
+  setup(props) {
+    let box = ref(null)
+    const aa = ref([])
+    const saveArr = ref([])
+    function currentChecked(nodeObj, SelectedObj) {
+      saveArr.value = SelectedObj.checkedKeys
+      console.log('saveArr.value')
+      console.log(saveArr.value)
+      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
+    }
+
+    function saveMenu() {
+      api
+        .saveMenu({
+          menuIds: saveArr.value,
+          roleId: props.radio1,
+          roleKey: props.objItem.roleKey,
+          roleName: props.objItem.roleName,
+          roleSort: props.objItem.roleSort,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '权限修改成功',
+              type: 'success',
+            })
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+  
+
+    // start
+
+    function getTreeData(data) {
+      // 第二种 修改涉及级联选择器 最后一个空白的情况
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        data[i]['disabled'] = true
+        if (!data[i].children) {
+          // children若为空数组，则不作操作
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          getTreeData(data[i].children)
+        }
+      }
+      return data
+    }
+
+ 
+
+    // end
+
+    onMounted(() => {
+      saveArr.value = props.checkedKeys
+      if (props.radio1 == 1) {
+        getTreeData(props.menuData)
+        console.log('box.value', box.value)
+        // box.value.setCheckedNodes(props.menuData)   //全选
+      }
+    })
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+
+        
+      }
+    )
+
+    return {
+      saveMenu,
+      aa,
+      saveArr,
+
+      currentChecked,
+      getTreeData,
+      box,
+    }
+  },
+})
+</script>
+
+<style  lang="scss">
+</style>

src/views/systemManage/rolePermission/roleInfoCom/index.vue

@@ -1,7 +1,33 @@
 <template>
   <div class="siteManage-main roleInfoPage">
-    <div style="text-align: right; margin-bottom: 20px">
-      <!-- <el-button type="success" >新增</el-button> -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :cell-style="cellStyle"
+      row-key="id"
+      default-expand-all
+    >
+      <el-table-column prop="menu" label="菜单" width="180"></el-table-column>
+      <el-table-column
+        prop="authority"
+        label="权限"
+        align="left"
+        class="roleLeft"
+      >
+        <template #default="scope">
+          <el-checkbox
+            v-for="item in scope.row.authority"
+            :label="item.name"
+            :key="item.actionid"
+            v-model="item.checked"
+            :disabled="radio1 == 1 ? true : false"
+          ></el-checkbox>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div style="text-align: right; margin-top: 20px">
       <el-button
         type="primary"
         @click="saveMenu()"
@@ -10,26 +36,10 @@
         保存
       </el-button>
     </div>
-
-  
-
-    <!-- 带复选框的树结构 start -->
-
-    <el-tree
-      ref="box"
-      :data="menuData"
-      show-checkbox
-      node-key="id"
-      :default-checked-keys="checkedKeys"
-      :props="defaultProps"
-      check-strictly="false"
-      @check="currentChecked"
-    />
-
-    <!-- 带复选框的树结构 end -->
   </div>
 </template>
 
+
 <script>
 import { defineComponent, ref, onMounted, watch } from 'vue'
 import * as api from '@/api/systemManage/rolePermission.js'
@@ -40,14 +50,145 @@ export default defineComponent({
   props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],
 
   setup(props) {
-    let box = ref(null)
-    const aa = ref([])
     const saveArr = ref([])
-    function currentChecked(nodeObj, SelectedObj) {
-      saveArr.value = SelectedObj.checkedKeys
-      console.log('saveArr.value')
-      console.log(saveArr.value)
-      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
+
+    const tableData = ref([
+      {
+        id: '1',
+        menu: '告警管理',
+        authority: [
+          { id:'111',name: '查询', checked: true },
+          { id:'112',name: '修改', checked: true },
+        ],
+      },
+      {
+        id: '2',
+        menu: '站点管理',
+        authority: [
+          {id:'211',name: '查询', checked: true },
+          {id:'212',name: '新增', checked: true },
+          {id:'213', name: '修改', checked: true },
+          {id:'214',name: '删除', checked: true },
+        ],
+      },
+      {
+        id: '3',
+        menu: '台区管理',
+        authority: [
+          {id:'311', name: '查询', checked: true },
+          {id:'312', name: '新增', checked: true },
+          {id:'313', name: '修改', checked: true },
+          {id:'314', name: '删除', checked: true },
+        ],
+      },
+      {
+        id: '4',
+        menu: '设备管理',
+        authority: [
+          {id:'411', name: '查询', checked: true },
+          {id:'412', name: '新增', checked: true },
+          {id:'413', name: '修改', checked: true },
+          {id:'414', name: '删除', checked: true },
+        ],
+      },
+
+      {
+        id: '5',
+        menu: '数据管理',
+        children: [
+          {
+            id: '51',
+            menu: '同比分析报表',
+            authority: [{id:'511', name: '查询', checked: true }],
+          },
+          {
+            id: '52',
+            menu: '环比分析报表',
+            authority: [{ id:'521',name: '查询', checked: true }],
+          },
+          {
+            id: '53',
+            menu: '用能月报',
+            authority: [{id:'531', name: '查询', checked: true }],
+          },
+          {
+            id: '54',
+            menu: '需量分析',
+            authority: [{id:'541', name: '查询', checked: true }],
+          },
+        ],
+      },
+      {
+        id: '6',
+        menu: '电能质量',
+        children: [
+          {
+            id: '61',
+            menu: '谐波报表',
+            authority: [{id:'611', name: '查询', checked: true }],
+          },
+          {
+            id: '62',
+            menu: '实时监测',
+            authority: [{id:'621', name: '查询', checked: true }],
+          },
+          {
+            id: '63',
+            menu: '评估报告',
+            authority: [{id:'631', name: '查询', checked: true }],
+          },
+          {
+            id: '64',
+            menu: '三项不平衡分析',
+            authority: [{id:'641', name: '查询', checked: true }],
+          },
+        ],
+      },
+
+      {
+        id: '7',
+        menu: '计划停电',
+        authority: [
+          {id:'711', name: '查询', checked: true },
+          {id:'712', name: '新增', checked: true },
+          {id:'713', name: '修改', checked: true },
+          {id:'714', name: '删除', checked: true },
+        ],
+      },
+
+      {
+        id: '8',
+        menu: '系统管理',
+        children: [
+          {
+            id: '81',
+            menu: '用户管理',
+            authority: [
+              {id:'811', name: '查询', checked: true },
+              {id:'812', name: '新增', checked: true },
+              {id:'813', name: '修改', checked: true },
+              {id:'814', name: '删除', checked: true },
+            ],
+          },
+          {
+            id: '82',
+            menu: '权限管理',
+            authority: [
+              {id:'821', name: '查询', checked: true },
+              {id:'822', name: '新增', checked: true },
+              {id:'823', name: '修改', checked: true },
+              {id:'824', name: '删除', checked: true },
+            ],
+          },
+        ],
+      },
+    ])
+
+    function cellStyle({ row, column, rowIndex, columnIndex }) {
+      row, column, rowIndex
+      if (columnIndex) {
+        return `text-align:left!important;cursor:pointer;`
+      }
     }
 
     function saveMenu() {
@@ -71,15 +212,10 @@ export default defineComponent({
         })
     }
 
-  
-
-    // start
-
     function getTreeData(data) {
-      // 第二种 修改涉及级联选择器 最后一个空白的情况
       // 循环遍历json数据
       for (var i = 0; i < data.length; i++) {
-        data[i]['disabled'] = true
+        data[i]['disabled'] = true;
         if (!data[i].children) {
           // children若为空数组，则不作操作
         } else {
@@ -90,40 +226,45 @@ export default defineComponent({
       return data
     }
 
- 
-
-    // end
-
     onMounted(() => {
       saveArr.value = props.checkedKeys
+      //当为超级管理员禁止修改权限
       if (props.radio1 == 1) {
         getTreeData(props.menuData)
-        console.log('box.value', box.value)
-        // box.value.setCheckedNodes(props.menuData)   //全选
+       
       }
     })
+
     //监听变化
     watch(
       () => props.radio1,
       (newVal) => {
         newVal
-
-        
       }
     )
 
     return {
+      tableData,
+      cellStyle,
       saveMenu,
-      aa,
       saveArr,
-
-      currentChecked,
       getTreeData,
-      box,
+   
     }
   },
 })
 </script>
 
-<style  lang="scss">
-</style>
+
+<style  lang="scss" >
+.roleInfoPage .el-table .cell {
+  text-align: left !important;
+}
+
+.el-table [class*='el-table__row--level'] .el-table__expand-icon {
+  display: none !important;
+}
+.el-table__indent {
+  padding-left: 10px !important;
+}
+</style>