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

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div>
      <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 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
    },
    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;

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

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

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

              })
            })
          })

          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;


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

            selectMenu.map((menu, index3) => {
                if (item.has_auth_node_tags.length > 0) {
                  menu.auth_node_tags_array.map((m, index4) => {
                    if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
                      that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
                        "checked", true);
                    }
                    else{
                      that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
                        "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 => {
          //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>