wenhuaDate_admin/src/components/Sidebar.vue

<template>
  <div class="sidebar_body">
    <a-menu theme="dark" mode="inline" :default-selected-keys="[key]"  class="sidebar" :defaultOpenKeys="[openKey]" :open-keys="openKeys" @openChange="onOpenChange">
      <template v-for="item in items1">
        <a-menu-item v-if="!item.children " :key="item.key" :disabled="item.isShow">
          <router-link :to="item.url">
            <!-- <a-icon :type="item.icon" /> -->
            <span class="f_title">{{ item.title }}</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu :key="item.key" v-bind="$props" v-on="$listeners" v-else>
          <span slot="title">
            <!-- <a-icon :type="item.icon" /> -->
            <span class="f_title">{{ item.title }}</span>
          </span>
          <template v-for="item1 in item.children">
            <a-menu-item v-if="!item1.children " :key="item1.key" :disabled="item.isShow">
              <router-link :to="item1.url">
                <!-- <a-icon :type="item1.icon" /> -->
                <span>{{ item1.title }}</span>
              </router-link>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>
<script>
export default {
  props:{
    auth:{
      type:Array
    }
  },
  data() {
    return{
      key:'',
      openKey:'',
      openKeys:[],
      auth1:[],
      items:[
        {
          icon:'',
          url:'',
          key:'1',
          title:'文化数据分类管理',
          children:[
            {icon:'',url:"DataQuery",title:"全部文化数据查询",key:'/DataQuery',auth:'NationalCulturalDataQuery',isShow:true},
            {icon:'',url:"Category",title:"文化数据类别管理",key:'/Category',auth:'CulturalDataCategoryManagement',isShow:true},
          ]
        },
        {
          icon:'',
          url:'admission',
          key:'/admission',
          title:'文化数据入场管理',
          auth:'CulturalDataAdmissionManagement',
          isShow:true,
          children:[]
        },
        {
          icon:'',
          url:'',
          key:'3',
          title:'交易订单管理',
          children:[
            {icon:'',url:"allOrder",title:"全部交易订单",key:'/allOrder',auth:'AllTradeOrders',isShow:true},
            {icon:'',url:"pendingPayment",title:"待付款订单",key:'/pendingPayment',auth:'PendingPayment',isShow:true},
            {icon:'',url:"toBeDelivered",title:"待交付订单",key:'/toBeDelivered',auth:'PendDelivery',isShow:true},
            {icon:'',url:"toBeSettled",title:"待结算订单",key:'/toBeSettled',auth:'PendBalance',isShow:true},
            {icon:'',url:"completed",title:"已完成订单",key:'/completed',auth:'OrderCompleted',isShow:true},
            {icon:'',url:"closed",title:"已关闭订单",key:'/closed',auth:'OrderClosed',isShow:true},
          ]
        },
        {
          icon:'',
          url:'',
          key:'4',
          title:'交易订单售后服务管理',
          children:[
            {icon:'',url:"invoice",title:"服务发票",key:'/invoice',auth:'ServiceInvoice',isShow:true},
          ]
        },
        {
          icon:'',
          url:'',
          key:'5',
          title:'资金结算分账管理',
          children:[
            {icon:'',url:"fundSettlement",title:"资金结算对账单",key:'/fundSettlement',auth:'FundsSettlementStatement',isShow:true},
            {icon:'',url:"splitProportion",title:"分账比例设置",key:'/splitProportion',auth:'AccountSharingRatioSetting',isShow:true},
            {icon:'',url:"paymentMethod",title:"支付方式设置",key:'/paymentMethod',auth:'PaymentMethodSettings',isShow:true},
          ]
        },
        {
          icon:'',
          url:'layout',
          key:'/layout',
          title:'数据展示布局管理',
          auth:'DataDisplayLayoutManagement',
          isShow:true,
          children:[]
        },
      ],
      items1:[]
    }
  },
  created(){
    this.key=this.$route.path
    // this.showMenu()
  },
  methods:{
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      // console.info(latestOpenKey)
      // console.info(openKeys)
      if (this.items.length <=latestOpenKey) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    showMenu(){
      console.info(this.auth1)
      if(this.auth1.length==0){
        this.items=[]
      }else{
        let List=[]
        for(let i3 in this.items){
          let item=this.items[i3]
        // this.items.map(item=>{
          if(item.children.length!=0){
            let data={
              url:item.url,
              key:item.key,
              title:item.title,
              children:[]
            }
            for(let i in item.children){
              let item1=item.children[i]
              if(item1.key==this.key){
                this.openKey=item.key
                this.openKeys.push(item.key)
              }
              for(let i1 in this.auth1){
                let item2=this.auth1[i1]
                if(item2==item1.auth){
                  let children={
                    url:item1.url,
                    key:item1.key,
                    title:item1.title,
                  }
                  data.children.push(children)
                  // this.items[i3].children[i].isShow=false
                  // item1.isShow=true
                }
              }
            }
            console.info(data)
            List.push(data)
          }else{
            for(let i1 in this.auth1){
              let item2=this.auth1[i1]
              if(item2==item.auth){
                let data={
                  url:item.url,
                  key:item.key,
                  title:item.title,
                }
                List.push(data)
                // this.items[i3].isShow=false
                // item.isShow=true
              }
            }
          }
        }
        this.items1=List
      }

    },
  },
  watch:{
    auth(val,oldVal){
      this.auth1=val
      this.showMenu()
    },
    $route(to,form){
      // console.info(to)
      // this.key=to.path
      // this.showMenu()
    }
  }
}
</script>
<style scoped>
  .sidebar_body{
    width: 200px;
    /* height: 100%; */
  }
  .sidebar{
    height: 100%;
    background: #001529;
  }
</style>