权限管理页面返回值重排渲染

src/views/systemManage/rolePermission/index.vue

@@ -109,7 +109,6 @@ export default defineComponent({
       // console.log(radio1.value)
       api.roleDetail({}, radio1.value).then((requset) => {
         if (requset.status === 'SUCCESS') {
-
           tableItem.value = {
             roleName: requset.data.roleName,
             roleKey: requset.data.roleKey,
@@ -124,7 +123,6 @@ export default defineComponent({
           ElMessage.error(requset.msg)
         }
       })
-
     }
 
     const listTabsChange = (value, item) => {
@@ -140,6 +138,7 @@ export default defineComponent({
       api.roleMenuTreeselect({}, radio1.value).then((requset) => {
         if (requset.code == 200) {
           menuData.value = requset.data.menus
+          getTreeData2(menuData.value) //对树结构返回值进行重组
           checkedKeys.value = requset.data.checkedKeys
 
           //当返回值没有选中菜单时,否
@@ -164,10 +163,9 @@ export default defineComponent({
               checkedKeys.value.map(function (num) {
                 if (JSON.stringify(item).indexOf(num) != -1) {
                   item.authority2 = '1'
-                } 
+                }
               })
             })
-          
           }
         } else {
           ElMessage.error(requset.msg)
@@ -175,6 +173,16 @@ export default defineComponent({
       })
     }
 
+    function getTreeData2(data) {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].label == data[i].children[0].label) {
+          console.log(data[i].label)
+          data[i].children = data[i].children[0].children
+        }
+      }
+      return data
+    }
+
     // 关闭弹框操作
     const closeDialog = () => {
       showDialog.value = false
@@ -218,6 +226,7 @@ export default defineComponent({
       editRole,
       closeDialog,
       objItem,
+      getTreeData2,
     }
   },
 })

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

@@ -2,59 +2,27 @@
   <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>
+      <el-button
+        type="primary"
+        @click="saveMenu()"
+        :disabled="radio1 == 1 ? true : false"
+      >
+        保存
+      </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 -->
 
     <el-tree
+      ref="box"
       :data="menuData"
       show-checkbox
       node-key="id"
       :default-checked-keys="checkedKeys"
       :props="defaultProps"
-      check-strictly="true"
+      check-strictly="false"
       @check="currentChecked"
     />
 
@@ -69,273 +37,17 @@ import { ElMessage } from 'element-plus'
 
 export default defineComponent({
   name: 'RoleInfoCom',
-  props: ['menuData', 'objItem', 'radio1','checkedKeys'],
-
-  // props: {
-  //   menuData: Object,
-  //   objItem: Object,
-  //   radio1: String,
-  // },
+  props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],
 
   setup(props) {
+    let box = ref(null)
     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',
-              },
-            ],
-          },
-        ],
-      },
-    ])
-    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 currentChecked(nodeObj, SelectedObj) {
+      saveArr.value = SelectedObj.checkedKeys
+      console.log('saveArr.value')
+      console.log(saveArr.value)
+      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
     }
 
     function saveMenu() {
@@ -359,48 +71,55 @@ export default defineComponent({
         })
     }
 
-    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)
-          })
+    // 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
     }
 
-    onMounted(() => {})
+ 
+
+    // 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
 
-        // 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,
-      data,
-      currentChecked
+
+      currentChecked,
+      getTreeData,
+      box,
     }
   },
 })