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

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="权限管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <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="overflow: auto;" :style="{height:height+'px'}">
              <el-scrollbar style="flex: 1">
                <el-tabs tab-position="left" v-model="activeRole" @tab-click="roleChange">
                  <el-tab-pane :label="item.name" :name="item.rowid" v-for="(item,index) in rolelist">
                  </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="overflow: auto;" :style="{height:height+'px'}">
              <el-scrollbar style="flex: 1">
                <el-tree ref="tree" :data="tree" show-checkbox style="padding: 15px" node-key="id" default-expand-all
                  :expand-on-click-node="false">
                  <div class="action-group" slot-scope="{ node, data }">
                    <div class="action-text" :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }">
                      {{ data.name }}
                    </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
    },
    created() {

    },
    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 (var mod of response) {
            mod.rowid = mod.id.toString();
            if (cur == 0) {
              that.activeRole = mod.rowid;
              that.loadPermisstions(0, that.activeRole);
            }
            cur++;
          }

        }).catch(error => {
          //reject(error)
        })
      },
      load(callback) {
        var that = this;
        listmenu().then(response => {
          this.tree = response;
          callback();
        }).catch(error => {
          //reject(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;
        this.$refs.tree.setCheckedNodes(select);
      },
      savepermission() {
        var checkedList = this.$refs.tree.getCheckedNodes();
        if (checkedList.length == 0) {
          this.$message.error("请选择菜单");
          return false;
        }
        let data = {};
        data.id = this.activeRole;
        let permission = [];
        for (var m of checkedList) {
          permission.push(m.id);
        }
        data.permission_id = permission;
        setPermissions(data).then(response => {
          console.log(response)
          this.$Message.success('操作成功');
          that.dialogFormVisible = false;
          that.load();
        }).catch(error => {
          //reject(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>