szbd-visitor-web/src/views/system/permission.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="权限管理">
          <div slot="content"></div>
          <slot>
          </slot>
        </LxHeader>
      </div>


      <el-row :gutter="20">
        <el-col :span="3">
          <Card class="box-card">
            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
              <span>角色列表</span>
            </div>
            <div :style="{height:height+'px'}" style="overflow: auto;">
              <el-scrollbar style="flex: 1">
                <el-tabs v-model="activeRole" tab-position="left" @tab-click="roleChange">
                  <el-tab-pane v-for="(item,index) in rolelist" :key="item.id" :label="item.name" :name="item.rowid">
                  </el-tab-pane>
                </el-tabs>
              </el-scrollbar>
            </div>
          </Card>
        </el-col>
        <el-col :span="21">
          <Card class="box-card">
            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
              <span>菜单列表</span>
              <Button style="float: right;" type="primary" @click="savepermission">保存</Button>
            </div>

            <div :style="{height:height+'px'}" style="overflow: auto;">
              <el-scrollbar style="flex: 1">
                <el-tree ref="tree" :data="tree" :expand-on-click-node="false" default-expand-all node-key="id" show-checkbox
                         style="padding: 15px"
                >
                  <div slot-scope="{ node, data }" class="action-group">
                    <div :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }" class="action-text">
                      {{ data.name }}
                    </div>
                    <div class="action-item">
                      <el-checkbox v-for="(item, index) in data.auth_node_tags_array" :key="index"
                                   v-model="item.checked" @change="()=>{}"
                      >
                        {{ item.name }}
                      </el-checkbox>
                    </div>
                  </div>
                </el-tree>
              </el-scrollbar>
            </div>
          </Card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import LxHeader from '@/components/LxHeader/index.vue'
import {
  list
} from '../../api/system/role.js'
import {
  listmenu
} from '../../api/system/menu.js'
import {
  setPermissions
} from '../../api/system/permission.js'

export default {
  components: {
    LxHeader
  },
  mounted() {
  },
  data() {
    return {
      activeRole: '',
      rolelist: [],
      selectIndex: -1,
      checked: false,
      data: [],
      tree: [],
      height: 0

    }
  },
  created() {
    var that = this
    this.initLoad()
    this.load(function() {
      that.loadrole()
    })
  },
  methods: {
    initLoad() {
      var that = this
      var clientHeight = document.documentElement.clientHeight
      var lxHeader_height = 67 //查询 头部
      var card_Height = 109 //分页的高度
      var topHeight = 50 //页面 头部
      let height = clientHeight - lxHeader_height - topHeight - card_Height
      that.height = height
    },
    loadrole() {
      var that = this
      list().then(response => {
        let cur = 0
        that.rolelist = response

        for (let mod of response) {
          mod.rowid = mod.id.toString()
          console.log(mod)
          if (cur == 0) {
            that.activeRole = mod.rowid
            that.loadPermisstions(0, that.activeRole)
          }
          cur++
        }

      }).catch(error => {
      })
    },
    load(callback) {
      var that = this
      listmenu().then(response => {
        this.tree = response

        this.tree.forEach((tree, index1) => {

          let children = tree.children
          children.forEach((menu, index3) => {

            menu.auth_node_tags_array.map((m, index4) => {
              m.checked = false
              that.$forceUpdate()

            })
          })
        })
        callback()
      }).catch(error => {
      })
    },
    roleChange(tab, event) {
      this.loadPermisstions(parseInt(tab.index), tab.name)
    },
    loadPermisstions(index, name) {
      let select = this.rolelist[index].permissions
      this.$refs.tree.setCheckedKeys([])
      this.activeRole = name

      let that = this
      this.tree.forEach((tree, index1) => {
        let children = tree.children
        select.forEach((item, index2) => {
          let selectMenu = children.filter(m => {
            return m.id == item.id
          })

          selectMenu.forEach((menu, index3) => {
            if (item.has_auth_node_tags.length > 0) {
              menu.auth_node_tags_array.forEach((m, index4) => {
                if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
                  that.$set(m,
                    'checked', true)
                } else {
                  that.$set(m,
                    'checked', false)
                }
              })
            } else {
              menu.auth_node_tags_array.map(m => {
                m.checked = false
              })
            }
          })
        })
        this.$refs.tree.updateKeyChildren(tree.id, JSON.parse(JSON.stringify(children)))
      })
      this.$refs.tree.setCheckedNodes(select)
      that.$forceUpdate()
    },

    savepermission() {
      var checkedList = this.$refs.tree.getCheckedNodes()
      console.log(checkedList)
      if (checkedList.length == 0) {
        this.$message.error('请选择菜单')
        return false
      }
      let data = {}
      data.id = this.activeRole
      let permission = []
      for (var m of checkedList) {
        let tags = []
        var mod = {}
        mod.permission_id = m.id
        m.auth_node_tags_array.map(item => {
          if (item.checked) {
            tags.push(item.tag)
          }
        })
        mod.auth_node_tags = tags.join(',')
        permission.push(mod)

      }
      data.permission_list = permission
      setPermissions(data).then(response => {
        console.log(response)
        this.$Message.success('操作成功')
        that.dialogFormVisible = false
        that.load()
      }).catch(error => {
      })

    }
  }
}
</script>

<style lang="less" scoped>
.t-tree {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 12px;
  background: #eee;
  /* padding: 100px; */
}

.header {
  background: #f9f8f8;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  position: relative;
  font-size: 15px;
  padding: 0 15px;

  button {
    position: absolute;
    right: 15px;
    top: 4px;
  }
}

.action-container {
  border-radius: 4px;
  flex: 1;
  margin-left: 15px;
  background: white;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.role-list {
  width: 200px;
  border: 1px solid #eee;
  border-bottom: 0;
}

.actived {
  color: #409efe !important;
  background-color: #f3f7f9;
}
</style>
<style scoped>
.roleitem {
  margin-bottom: 5px;
}

.action-group {
  width: 100%;
  display: flex;
}

.action-text {
  font-size: 14px;
  margin-right: 10px;
}

.action-item {
  flex: 1;
}

.action-item > label {
  width: 55px;
  margin-left: 3px;
}

.action-container >>> .el-tree-node {
  padding: 5px 0;
}

.action-container >>> .el-checkbox__label {
  padding-left: 5px;
}
</style>