admin-fiveFollowing/src/views/systemManage/rolePermission/roleInfoCom/index.vue

<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 -->

    <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>

<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',
              },
            ],
          },
        ],
      },
    ])
    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,
          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,
      data,
      currentChecked
    }
  },
})
</script>

<style  lang="scss">
</style>