权限管理修改排版

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

@@ -1,261 +0,0 @@
-<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()">保存</el-button>
-    </div>
-
-    <el-table :data="menuData" border stripe>
-      <el-table-column prop="label" label="菜单" width="180"></el-table-column>
-      <el-table-column prop="authority2" label="权限" class="roleLeft">
-        <template #default="scope">
-          <el-radio-group
-            v-model="scope.row.authority2"
-            @change="listTabsChange(scope.row)"
-          >
-            <el-radio label="1" :disabled="radio1 == 1 ? true : false">
-              是
-            </el-radio>
-            <el-radio label="0" :disabled="radio1 == 1 ? true : false">
-              否
-            </el-radio>
-          </el-radio-group>
-        </template>
-      </el-table-column>
-    </el-table>
-    <br />
-    <br />
-
-    <!-- 树结构的表格 start -->
-    <el-table
-      :data="tableData"
-      style="width: 100%; margin-bottom: 20px"
-      row-key="id"
-      border
-      
-    >
-      <el-table-column prop="date" label="菜单" width="180" />
-      <el-table-column prop="name" label="权限" >
-        <template #default="scope">
-          <el-radio-group
-            v-model="scope.row.authority2"
-       
-          >
-            <el-radio label="1">是</el-radio>
-            <el-radio label="0">否</el-radio>
-          </el-radio-group>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 树结构的表格 end -->
-
-    <!-- 带复选框的树结构 start -->
-
-    <!-- 带复选框的树结构 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'],
-
-  // props: {
-  //   menuData: Object,
-  //   objItem: Object,
-  //   radio1: String,
-  // },
-
-  setup(props) {
-    const aa = ref([])
-    const saveArr = ref([])
-    const tableData = ref([
-      {
-        id: 1,
-        date: '告警管理',
-        name: 'wangxiaohu',
-        authority2: '1',
-        children: [
-          {
-            id: 11,
-            date: '新增',
-            name: 'wangxiaohu',
-            authority2: '1',
-          },
-          {
-            id: 12,
-            date: '修改',
-            name: 'wangxiaohu',
-            authority2: '1',
-          },
-          {
-            id: 13,
-            date: '删除',
-            name: 'wangxiaohu',
-            authority2: '0',
-          },
-        ],
-      },
-      {
-        id: 2,
-        date: '站点管理',
-        name: 'wangxiaohu',
-        authority2: '1',
-        children: [
-          {
-            id: 21,
-            date: '新增',
-            name: 'wangxiaohu',
-            authority2: '1',
-          },
-          {
-            id: 22,
-            date: '修改',
-            name: 'wangxiaohu',
-            authority2: '1',
-          },
-          {
-            id: 23,
-            date: '删除',
-            name: 'wangxiaohu',
-            authority2: '0',
-          },
-        ],
-      },
-      {
-        id: 3,
-        date: '数据管理',
-        name: 'wangxiaohu',
-        authority2: '0',
-        children: [
-          {
-            id: 31,
-            date: '同比分析报表',
-            name: 'wangxiaohu',
-            authority2: '0',
-
-            children: [
-              {
-                id: 41,
-                date: '新增',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-              {
-                id: 42,
-                date: '修改',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-              {
-                id: 43,
-                date: '删除',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-            ],
-          },
-
-          {
-            id: 32,
-            date: '台区管理',
-            name: 'wangxiaohu',
-            authority2: '0',
-            children: [
-              {
-                id: 51,
-                date: '新增',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-              {
-                id: 52,
-                date: '修改',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-              {
-                id: 53,
-                date: '删除',
-                name: 'wangxiaohu',
-                authority2: '0',
-              },
-            ],
-          },
-        ],
-      },
-    ])
-
-    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)
-          }
-        })
-    }
-
-    const listTabsChange = (value) => {
-      saveArr.value = []
-      value
-
-      props.menuData.forEach(function (item) {
-        if (item.authority2 == '1') {
-          saveArr.value.push(item.id)
-          var aa = item.children
-          aa.forEach(function (item) {
-            saveArr.value.push(item.id)
-          })
-        }
-      })
-    }
-
-    onMounted(() => {})
-    //监听变化
-    watch(
-      () => props.radio1,
-      (newVal) => {
-        newVal
-
-        // if (newVal == '1') {
-        //   alert(1)
-        //   props.menuData.forEach(function (item) {
-        //     item.authority2 = '1'
-        //     saveArr.value.push(item.id)
-        //   })
-        //   console.log(' 22props.menuData')
-        //   console.log(props.menuData)
-        // }
-      }
-    )
-
-    return {
-      saveMenu,
-      aa,
-      listTabsChange,
-      saveArr,
-      tableData,
-    }
-  },
-})
-</script>
-
-<style  lang="scss">
-</style>

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

@@ -0,0 +1,122 @@
+<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()">保存</el-button>
+    </div>
+
+    <el-table :data="menuData" border stripe>
+      <el-table-column prop="label" label="菜单" width="180"></el-table-column>
+      <el-table-column prop="authority2" label="权限" class="roleLeft">
+        <template #default="scope">
+          <el-radio-group
+            v-model="scope.row.authority2"
+            @change="listTabsChange(scope.row)"
+          >
+            <el-radio label="1" :disabled="radio1 == 1 ? true : false">
+              是
+            </el-radio>
+            <el-radio label="0" :disabled="radio1 == 1 ? true : false">
+              否
+            </el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+    </el-table>
+  </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'],
+
+  // props: {
+  //   menuData: Object,
+  //   objItem: Object,
+  //   radio1: String,
+  // },
+
+  setup(props) {
+    const aa = ref([])
+    const saveArr = ref([])
+
+    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)
+          }
+        })
+    }
+
+    const listTabsChange = (value) => {
+      saveArr.value = []
+      value
+
+
+      props.menuData.forEach(function (item) {
+        if (item.authority2 == '1') {
+          saveArr.value.push(item.id)
+          var aa = item.children
+          aa.forEach(function (item) {
+              saveArr.value.push(item.id)
+            
+          })
+        }
+      })
+   
+    }
+
+    onMounted(() => {})
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+
+     
+        // if (newVal == '1') {
+        //   alert(1)
+        //   props.menuData.forEach(function (item) {
+        //     item.authority2 = '1'
+        //     saveArr.value.push(item.id)
+        //   })
+        //   console.log(' 22props.menuData')
+        //   console.log(props.menuData)
+        // }
+      }
+    )
+
+    return {
+      saveMenu,
+      aa,
+      listTabsChange,
+      saveArr,
+    }
+  },
+})
+</script>
+
+<style  lang="scss">
+</style>

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

@@ -5,7 +5,7 @@
       <el-button type="primary" @click="saveMenu()">保存</el-button>
     </div>
 
-    <el-table :data="menuData" border stripe>
+    <!-- <el-table :data="menuData" border stripe>
       <el-table-column prop="label" label="菜单" width="180"></el-table-column>
       <el-table-column prop="authority2" label="权限" class="roleLeft">
         <template #default="scope">
@@ -22,7 +22,42 @@
           </el-radio-group>
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
+    <!-- <br />
+    <br /> -->
+
+    <!-- 树结构的表格 start -->
+    <!-- <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="id"
+      border
+    >
+      <el-table-column prop="date" label="菜单" width="180" />
+      <el-table-column prop="name" label="权限">
+        <template #default="scope">
+          <el-radio-group v-model="scope.row.authority2">
+            <el-radio label="1">是</el-radio>
+            <el-radio label="0">否</el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+    </el-table> -->
+
+    <!-- 树结构的表格 end -->
+
+    <!-- 带复选框的树结构 start -->
+
+    <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      :default-checked-keys="[11,2,31,32,4,51,52,53,81]"
+      :props="defaultProps"
+      @check="currentChecked"
+    />
+
+    <!-- 带复选框的树结构 end -->
   </div>
 </template>
 
@@ -44,12 +79,265 @@ export default defineComponent({
   setup(props) {
     const aa = ref([])
     const saveArr = ref([])
+    const tableData = ref([
+      {
+        id: 1,
+        date: '告警管理',
+        name: 'wangxiaohu',
+        authority2: '1',
+        children: [
+          {
+            id: 11,
+            date: '新增',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 12,
+            date: '修改',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 13,
+            date: '删除',
+            name: 'wangxiaohu',
+            authority2: '0',
+          },
+        ],
+      },
+      {
+        id: 2,
+        date: '站点管理',
+        name: 'wangxiaohu',
+        authority2: '1',
+        children: [
+          {
+            id: 21,
+            date: '新增',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 22,
+            date: '修改',
+            name: 'wangxiaohu',
+            authority2: '1',
+          },
+          {
+            id: 23,
+            date: '删除',
+            name: 'wangxiaohu',
+            authority2: '0',
+          },
+        ],
+      },
+      {
+        id: 3,
+        date: '数据管理',
+        name: 'wangxiaohu',
+        authority2: '0',
+        children: [
+          {
+            id: 31,
+            date: '同比分析报表',
+            name: 'wangxiaohu',
+            authority2: '0',
 
-    function saveMenu() {
-   
+            children: [
+              {
+                id: 41,
+                date: '新增',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 42,
+                date: '修改',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 43,
+                date: '删除',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+            ],
+          },
 
+          {
+            id: 32,
+            date: '台区管理',
+            name: 'wangxiaohu',
+            authority2: '0',
+            children: [
+              {
+                id: 51,
+                date: '新增',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 52,
+                date: '修改',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+              {
+                id: 53,
+                date: '删除',
+                name: 'wangxiaohu',
+                authority2: '0',
+              },
+            ],
+          },
+        ],
+      },
+    ])
+    const data = ref([
+      {
+        id: 1,
+        label: '告警管理',
+        children: [
+           {
+            id: 11,
+            label: '查询',
+          },
+          {
+            id: 12,
+            label: '新增',
+          },
+          {
+            id: 13,
+            label: '修改',
+          },
+          {
+            id: 14,
+            label: '删除',
+          },
+        ],
+      },
+      {
+        id: 2,
+        label: '站点管理',
+      },
+      {
+        id: 3,
+        label: '台区管理',
+        children: [
+           {
+            id: 31,
+            label: '查询',
+          },
+          {
+            id: 32,
+            label: '新增',
+          },
+          {
+            id: 33,
+            label: '编辑',
+          },
+          {
+            id: 34,
+            label: '删除',
+          },
+        ],
+      },
+      {
+        id: 4,
+        label: '设备管理',
+      },
+      {
+        id: 5,
+        label: '数据管理',
+        children: [
+          {
+            id: 51,
+            label: '同比分析报表',
+          },
+          {
+            id: 52,
+            label: '环比分析报表',
+          },
+          {
+            id: 53,
+            label: '用能月报',
+          },
+          {
+            id: 54,
+            label: '需量分析',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: '电能质量',
+        children: [
+          {
+            id: 61,
+            label: '谐波报表',
+          },
+          {
+            id: 62,
+            label: '实时监测',
+          },
+          {
+            id: 63,
+            label: '实时评估',
+          },
+          {
+            id: 64,
+            label: '三项不平衡分析',
+          },
+        ],
+      },
+       {
+        id: 7,
+        label: '计划停电',
+        children: [
+           {
+            id: 71,
+            label: '查询',
+          },
+          {
+            id: 72,
+            label: '新增',
+          },
+          {
+            id: 73,
+            label: '编辑',
+          },
+          {
+            id: 74,
+            label: '删除',
+          },
+        ],
+      },
+      {
+        id: 8,
+        label: '系统管理',
+        children: [
+          {
+            id: 81,
+            label: '用户管理',
+          },
+          {
+            id: 82,
+            label: '权限管理',
+          },
+        ],
+      },
+    ])
 
+    function currentChecked (nodeObj, SelectedObj) {
+      console.log(SelectedObj)
+      console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
+      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组  
+ 
+    }
 
+    function saveMenu() {
       api
         .saveMenu({
           menuIds: saveArr.value,
@@ -74,18 +362,15 @@ export default defineComponent({
       saveArr.value = []
       value
 
-
       props.menuData.forEach(function (item) {
         if (item.authority2 == '1') {
           saveArr.value.push(item.id)
           var aa = item.children
           aa.forEach(function (item) {
-              saveArr.value.push(item.id)
-            
+            saveArr.value.push(item.id)
           })
         }
       })
-   
     }
 
     onMounted(() => {})
@@ -95,7 +380,6 @@ export default defineComponent({
       (newVal) => {
         newVal
 
-     
         // if (newVal == '1') {
         //   alert(1)
         //   props.menuData.forEach(function (item) {
@@ -113,6 +397,9 @@ export default defineComponent({
       aa,
       listTabsChange,
       saveArr,
+      tableData,
+      data,
+      currentChecked
     }
   },
 })