platform-customsdeclaration-ssr/components/default/leftSide.vue

<template>
  <div class="side">
    <div class="top">
      <span v-if="!isCollapse">导 航</span>
      <a @click="collapseClick"><i v-if="!isCollapse" class="el-icon-d-arrow-left"></i><i v-if="isCollapse" class="el-icon-d-arrow-right"></i></a>
    </div>
    <div class="side_info">
      <template v-if="isTab === 'client'">
        <el-menu unique-opened router :default-active="$route.path" :collapse="isCollapse">
          <el-menu-item-group>
            <div v-for="item in listClient">
              <el-menu-item :index="String(item.link)">
                <i :class="item.icon"></i>
                <span slot="title" v-text="item.title">账号管理</span>
              </el-menu-item>
            </div>
          </el-menu-item-group>
        </el-menu>
      </template>
      <template v-if="isTab === 'sever'">
        <el-menu unique-opened router :default-active="$route.path" :collapse="isCollapse">
          <div v-for="type in listSever">
            <el-submenu :index="type.label">
              <template slot="title">
                <i :class="type.icon"></i>
                <span v-text="type.label" class="menu-title">委托报关申请</span>
              </template>
              <el-menu-item-group>
                <div v-for="item in type.sub">
                  <el-menu-item :index="String(item.link)" :route="item.link" :disabled="item.isDisabled" v-text="item.title">账号管理</el-menu-item>
                </div>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AdminSide',
    props: ['isTab'],
    data () {
      return {
        isCollapse: false,
        listClient: [{
          icon: 'iconfont icon-weituo',
          title: '委托报关申请',
          link: '/clientPage/entrustApply'
        }, {
          icon: 'iconfont icon-ziliao-copy-copy',
          title: '企业资料信息管理',
          link: '/clientPage/entrustInfo'
        }, {
          icon: 'iconfont icon-danju',
          title: '单证管理',
          link: '/clientPage'
        }, {
          icon: 'iconfont icon-xitongshezhi',
          title: '系统设置',
          link: '/clientPage/config'
        }, {
          icon: 'iconfont icon-quanxian',
          title: '权限管理',
          link: '/clientPage/jurisdiction'
        }, {
          icon: 'iconfont icon-dizhi',
          title: '地址管理',
          link: '/clientPage/address'
        }, {
          icon: 'iconfont icon-zhanghu',
          title: '付汇账号管理',
          link: '/clientPage/paymentAccount'
        }],
        listSever: [{
          icon: 'iconfont icon-fuwushang',
          label: '服务商管理中心',
          sub: [{
            title: '单证管理',
            link: '/severPage'
          }, {
            title: '委托报关申请',
            link: '/severPage/entrustApply'
          },{
            title: '客户资料管理',
            link: '/severPage/customer'
          },{
            title: '汇率管理',
            link: '/severPage/exchange'
          },{
            title: '地址管理',
            link: '/severPage/address'
          }, {
            title: '关务汇总单',
            link: '/severPage/customs',
          }, {
            title: '申报要素维护',
            link: '/severPage/elements'
          }]}, {
          icon: 'iconfont icon-fengxian',
          label: '信用风险管理',
          sub: [{
            title: '信用风险管理',
            // link: '/severPage',
            isDisabled: true
          }]}
        ]
      }
    },
    methods: {
      collapseClick () {
        this.isCollapse = !this.isCollapse
        this.$emit('collapseEvent', this.isCollapse)
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  .side{
    -moz-box-shadow: 0  5px 5px #bcd2ff;;
    box-shadow:0  5px 5px #bcd2ff;
    margin:0 3px 3px 3px;
    .top{
      position:relative;
      line-height: 30px;
      height:30px;
      text-align: center;
      font-size: 14px;
      color:#fff;
      background: #b9dbfa;
      margin-bottom:1px;
      a{
        position:absolute;
        right:5px;
        color:#fff;
      }
    }
    .side_info{}
    .el-submenu__title{
      padding: 0 !important;
      background: #6093f6;
      color:#fff;
      i{
        color:#fff;
        padding: 0 5px;
      }
    }
    .menu-title{
      font-weight: bold;
      color:#fff;
    }
    .el-menu-item.is-active{
      background: #40a9ff;
      color:#fff;
    }
    .el-menu-item{
      height:40px;
      line-height: 40px;
      padding: 0!important;
      i{
        padding: 0 5px;
      }
      .el-tooltip{
        padding: 0 !important;
      }
    }
    .el-submenu__icon-arrow{
      right:5px;
      margin-top:-5px;
    }
    .el-submenu .el-menu-item{
      min-width:10px;
      padding-left: 30px !important;
      background: #e7f2fb;
      margin-bottom:1px;
      line-height: 40px;
      height:40px;
    }
    .el-menu-item.is-active{
      position:relative;
      background: #d6edff;
      color:#0d5ffe;
      &:after{
        content: '';
        position:absolute;
        top:0;
        right:0;
        display:block;
        width:2px;
        height:40px;
        background: #0d5ffe;
      }
    }
    .el-menu-item-group__title{
      height:0;
      display:none;
    }
    .el-menu--collapse{
      width:25px;
    }
  }
</style>