exhibition_service_admin/src/views/setting/rolesSetting.vue

<script>
import Vue from 'vue'

export default Vue.extend({
  name: "rolesSetting",
  data() {
    return {
      menuList:[],
      menuRouter: [],
    }
  },
  mounted() {
    this.getRouter()
  },
  methods: {
    getRouter() {
      this.menuRouter = this.$router.options.routes[0].children
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="list-cont">
      <div class="head">
        <el-input prefix-icon="el-icon-search" placeholder="搜索观众姓名/手机号/邮箱" class="input"></el-input>
        <el-button icon="el-icon-plus" type="primary">新增角色</el-button>
      </div>
      <div class="body">
        <el-table height="100%" class="table">
          <el-table-column
            label="角色名称">
          </el-table-column>
          <el-table-column
            label="创建日期">
          </el-table-column>
          <el-table-column
            label="操作">
          </el-table-column>
        </el-table>
      </div>
      <div class="foot">
        <el-pagination
          background
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
    <div class="menu-list">
      <div class="save">
        <el-button type="primary">保存</el-button>
      </div>
      <div class="scroll">
        <div class="menu">
          <template v-for="(item,index) in menuRouter">
            <div  class="menu-item">
              <div class="name">
                <span :class="item.meta.icon">{{item.meta.title}}</span>
                <el-switch class="switch"></el-switch>
              </div>
              <div class="children" v-if="item.meta.func">
                <div class="menu-item" v-for="(func,index) in item.meta.func">
                  <div class="name">
                    <span>{{func.name}}</span>
                    <el-switch class="switch"></el-switch>
                  </div>
                </div>
              </div>
              <div class="children" v-if="item.children">
                <div class="menu-item" v-for="(child,index) in item.children">
                  <div class="name">
                    <span :class="child.meta.icon">{{child.meta.title}}</span>
                    <el-switch class="switch"></el-switch>
                  </div>
                  <div class="children" v-if="child.meta.func">
                    <div class="menu-item" v-for="(func,index) in child.meta.func">
                      <div class="name">
                        <span>{{func.name}}</span>
                        <el-switch class="switch"></el-switch>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="hr"></div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  @use '@/styles/variables.scss' as *;
  .main-box{
    overflow: hidden;
    padding: 0 !important;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 420px;
    .list-cont,.menu-list{
      height: 100%;
      width: 100%;
      position: relative;
    }
    .menu-list{
      position: relative;
      .save{
        display: flex;
        justify-content: flex-end;
        padding: 16px;
        background: #F9FAFB;
      }
      .scroll{
        background: #F9FAFB;
        border-radius: 0 16px 16px 0;
        padding: 16px;
        overflow: hidden;
        overflow-y: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 64px);
      }
      .menu{
        padding: 8px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 8px 0 #00000018;
        width: 100%;
        .hr:not(:last-child){
          width: calc(100% - 16px);
          margin: 8px;
          border-bottom: 1px solid #d8dde4;
        }
        .menu-item{
          border-radius: 8px;
          cursor: default;
          border-right: 2px solid transparent;
          padding: 10px 0 10px 16px;
          .switch{
            margin-right: 16px;
          }
          .name{
            color: $menuText;
            font-size: 17px;
            display: flex;
            justify-content: space-between;
            span{
              &::before{
                margin-right: 8px
              }
            }
          }
          .children{
            margin-top: 10px;
          }
          &:hover{
            background: $menuHover;
            border-left-color: #ffffff88;
            border-top-color: #ffffff88;
            border-bottom-color: #2563EB11;
            border-right-color: #2563EB11;
          }
        }
      }
    }
    .list-cont{
      z-index: 2;
      box-shadow: 0 0 4px 0 #00000022;
      padding: 16px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-gap: 24px;
      .head{
        display: flex;
        .input{
          width: 50%;
          margin-right: auto;
        }
      }
      .body{
        height: 100%;
        position: relative;
        .table{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .foot{
        .el-pagination{
          display: flex;
          .el-pagination__total{
            margin-right: auto;
          }
        }
      }
    }
  }
</style>