xt_vue/src/xt_pages/role/components/PermissionSettings.vue

<template>
  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
    <div class="roleSettings">
      <div class="roleName">
        <div class="roleNameLeft">
          <p>角色名称</p>
          <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
        </div>
        <p style="color:#338AFB">删除该角色</p>
      </div>
      <div class="roleMain">
        <div class="roleMainLeft">
          <p class="roletitle">选择权限</p>
          <div class="roleMainLeftBox">
            <el-tree
              :props="defaultProps"
              :data="data"
              :default-checked-keys="data"
              node-key="id"
              ref="tree"
              default-expand-all
              show-checkbox
            >
              <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ data.name }}</span>
              </span>-->
            </el-tree>
          </div>
        </div>
        <div class="roleMainRight">
          <div class="hasChoose">已选择权限</div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </div>
    </div>
  </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      visible: false,
      data: [
        {
          id: 1,
          label: "一级 2",
          children: [
            {
              id: 3,
              label: "二级 2-1",
              children: [
                {
                  id: 4,
                  label: "三级 3-1-1"
                },
                {
                  id: 5,
                  label: "三级 3-1-2"
                }
              ]
            },
            {
              id: 2,
              label: "二级 2-2",
              children: [
                {
                  id: 6,
                  label: "三级 3-2-1"
                },
                {
                  id: 7,
                  label: "三级 3-2-2"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    show() {
      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.roleSettings {
  .roleName {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .roleNameLeft {
    display: flex;
    align-items: center;
    p {
      width: 100px;
    }
  }
  .roleMain {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    .roleMainLeft {
      display: flex;
      .roletitle {
        width: 74px;
      }
      .roleMainLeftBox {
        width: 300px;
        height: 706px;
        overflow-y: auto;
        border: 1px solid rgba(234, 238, 240, 1);
        border-radius: 4px;
        padding: 20px 0 0 10px;
      }
    }
    .roleMainRight {
      width: 280px;
      height: 706px;
      overflow-y: auto;
      border: 1px solid rgba(235, 238, 240, 1);
      color: #303133;
      .hasChoose {
        height: 42px;
        line-height: 42px;
        padding-left: 20px;
        background: #f6f8f9;
      }
    }
  }
}
</style>


<style lang="scss">
.settingDialog {
  .el-dialog__body {
    max-height: 600px !important;
  }
}
</style>