[JavaScript知识库]改写el-tree实现角色权限设置

改写el-tree实现角色权限设置

• 取消el-tree自带的父子关系，自己通过递归实现父子关系，这样在选中其中一个子级的时候，父级也会勾选，点击父级也可以全选和取消全选等 ，能够随心控制

<template>
 
      <el-tree
        ref="tree"
        :data="data"
        node-key="menuId"
        :check-strictly="true"
        :props="props"
        show-checkbox
        :default-expanded-keys="[-1]"
        @check="handleCheckChange"
      />
</template>

<script>

export default {
  name: 'TrialEthicsWebRoleMenu',
  data() {
    return {
      data: [
        {
          menuName: '全选',
          menuId: -1,
          children: []
        }
      ],
      props: {
        children: 'children',
        label: 'menuName'
      },
      postId: ''
    }
  },
  created() {
    this.getList()
  },
  mounted() {},

  methods: {
    handleCheckChange(node, flag) {
      node.flag = !node.flag
      if (node.flag) {
        if (node.children?.length) {
          this.recuision(node.children)
          return
        }
        if (node.parentId == 0) {
          return
        }
        this.a(node.parentId)
      } else {
        const arr = this.$refs.tree.getCheckedKeys()
        this.$refs.tree.setCheckedKeys(arr.filter((v) => v !== -1))
        this.data[0].flag = false
        if (node.children?.length) {
          this.recuisionClose(node.children)
        }
        if (node.parentId == 0) {
          return
        }
      }
    },
    // 从子级递归找父级 并选中
    a(parentId) {
      const find = this.findId(this.data, parentId)
      find.flag = true
      this.$refs.tree.setCheckedKeys([
        ...this.$refs.tree.getCheckedKeys(),
        parentId
      ])
      if (find.parentId !== 0) {
        this.a(find.parentId)
      }
    },
    // 查找Id节点
    findId(array, parentId) {
      var obj = {}
      for (let index = 0; index < array.length; index++) {
        const item = array[index]
        if (item.menuId === parentId) {
          obj = item
          break
        }
        if (item.children?.length) {
          if (JSON.stringify(this.findId(item.children, parentId)) != '{}') {
            obj = this.findId(item.children, parentId)
          }
        }
      }
      return obj
    },
    // 点父节点全选中
    recuision(array) {
      for (let index = 0; index < array.length; index++) {
        const item = array[index]
        item.flag = true
        this.$refs.tree.setCheckedKeys([
          ...this.$refs.tree.getCheckedKeys(),
          item.menuId
        ])
        if (item.children?.length) {
          this.recuision(item.children)
        }
      }
    },
    // 点父节点 取消
    recuisionClose(array) {
      for (let index = 0; index < array.length; index++) {
        const item = array[index]
        const arr = this.$refs.tree.getCheckedKeys()
        item.flag = false
        this.$refs.tree.setCheckedKeys(arr.filter((v) => v !== item.menuId))
        if (item.children?.length) {
          this.recuisionClose(item.children)
        }
      }
    },
    submit() {
      if (!this.postId) {
        this.$message.warning('请选择角色')
        return
      }
      if (!this.$refs.tree.getCheckedKeys().length) {
        this.$message.warning('请选择权限')
        return
      }
      const data = {
        belong: 'ethics',
        menuIds: this.$refs.tree.getCheckedKeys(),
        postId: this.postId
      }
      this.system('postPermission', data, (res) => {
        this.$message.success('保存成功')
      })
    },
    getCheckList(postId) {
      this.postId = postId
      const data = {
        postId: postId,
        belong: 'ethics'
      }
      this.system('menuRoleId', this.$qs.stringify(data), (res) => {
        this.getList(res.data)
      })
    },
    getList(arr) {
      const data = {
        belong: 'ethics'
      }
      this.system('menuListAll', data, (res) => {
        this.data[0].children = res.data
        this.resour(this.data)
      })
    },
    resour(array) {
      for (let index = 0; index < array.length; index++) {
        const item = array[index]
        item.flag = false
        if (item.children) {
          this.resour(item.children)
        }
      }
    }
  }
}
</script>

阅读世界，共赴山海

423全民读书节，邀你共读