mkl_power_box/components/header-btn.js

Vue.component("header-btn", {
    template: `
        <div class="header-btn-max" @mouseleave="mouseleaveBtn">
            <div :class="nav==chooseMenu.mainMenu?'head-nav active':'head-nav'" @mouseenter="mouseenterBtn" @click="pageJump(nav,menu.menuDeptUrl,menu.menuProjectUrl)">{{label}}</div>
            <div class="header-btn-list" v-show="show" style="display: none" v-if="sonMenuList.length != 0 && !red" >
                <div class="header-btn-list-arrow"></i></div>
                <div class="header-btn-list-item" :style="{width:widths+'px'}">
                    <div class="header-btn-list-padding">
                        <button type="button" :class="(i==chooseMenu.itemMenu && nav==chooseMenu.mainMenu )?'active':''" v-for="(item,i) in sonMenuList" @click="buttonClick(i,item)">{{item.text}}</button>
                    </div>
                </div>
            </div>
            <div class="header-btn-list" v-show="show" style="display: none" v-if="sonMenuList.length != 0 && red"  >
                <div class="header-btn-list-arrow-active"></i></div>
                <div class="header-btn-list-item-active" :style="{width:widths+'px'}">
                    <div class="header-btn-list-padding-red">
                        <button type="button" :class="(i==chooseMenu.itemMenu && nav==chooseMenu.mainMenu )?' actives':''" v-for="(item,i) in sonMenuList" @click="buttonClick(i,item)">{{item.text}}</button>
                    </div>
                </div>
            </div>
        </div>
    `,
    props: {
        red:{
            type:String
        },
        menu:{
          type: Object
        },
        index:{
          type: Number
        },
        label: {
            type: String
        },
        nav: {
            type: Number
        },
        list: {
            type: Array
        },
        type:{
            type:String
        }
    },
    data() {
        return {
            show: false,
            widths: 0,
            btnNav: -1,
            chooseMenu: {},
            localStorage:{},
            sonMenuList: []
        }
    },
    mounted() {
        this.localStorage=JSON.parse(localStorage.getItem("data"))
        this.filterList()
        this.init()
    },
    methods: {
        init() {
            this.width()
            this.chooseMenu = localStorage.getItem("chooseMenu");
            if (!this.chooseMenu) {
                this.chooseMenu = {}
            } else {
                this.chooseMenu = JSON.parse(localStorage.getItem("chooseMenu"))
            }

        },
        filterList(){
          for(let l of this.list){
              // if(this.localStorage.type == 1 && l.menuDeptUrl){
              //     this.sonMenuList.push(l)
              // }
              // if(this.localStorage.type != 1 && l.menuProjectUrl){
              //     this.sonMenuList.push(l)
              // }
              if(
                  this.localStorage.type == undefined
                  ||
                  this.localStorage.type == null
                  ||
                  this.localStorage.type == 1)
              {
                  if(l.menuDeptUrl && l.menuDeptUrl != "" ){
                      this.sonMenuList.push(l)
                  }
              }else{
                  if(l.menuProjectUrl && l.menuProjectUrl != "" ){
                      this.sonMenuList.push(l)
                  }
              }
          }
        },
        width() {
            if (this.sonMenuList) {
                if (this.list.length > 4) {
                    this.widths = 536
                } else {
                    this.widths = this.sonMenuList.length * 130 + 16
                }
            }
        },
        mouseenterBtn() {
            this.show = true
            this.$emit('showsmallui',{"flag":true,"data":this.list,"label":this.label,"index":this.index});
        },
        mouseleaveBtn() {
            this.show = false
            this.$emit('showsmallui',{"flag":false,"data":this.list,"label":this.label,"index":this.index});
        },
        //点击主菜单触发
        pageJump(n,url,itemurl){
            if(this.localStorage.type == 1){
                if(url){
                    let chooseMenu = {
                        mainMenu:n,
                    }
                    localStorage.setItem("chooseMenu",JSON.stringify(chooseMenu));
                    location.href = url
                }
            }else{
                if(itemurl){
                    this.chooseMenu = {
                        mainMenu:n
                    }
                    localStorage.setItem("chooseMenu",JSON.stringify(this.chooseMenu));
                    location.href = itemurl
                }
            }
        },
        //点击子菜单触发
        buttonClick(i, item) {
            this.btnNav = i
            localStorage.setItem("chooseProcessControlMenu", i)
            if(
                this.localStorage.type == undefined
                ||
                this.localStorage.type == null
                ||
                this.localStorage.type == 1)
            {
                if (item.menuDeptUrl && item.menuDeptUrl != "") {
                    this.chooseMenu = {
                        mainMenu: this.nav,
                        itemMenu: i,
                    }
                    localStorage.setItem("chooseMenu", JSON.stringify(this.chooseMenu));
                    location.href = item.menuDeptUrl
                }
            }else{
                if (item.menuProjectUrl && item.menuProjectUrl != "") {
                    this.chooseMenu = {
                        mainMenu: this.nav,
                        itemMenu: i,
                    }
                    localStorage.setItem("chooseMenu", JSON.stringify(this.chooseMenu));
                    location.href = item.menuProjectUrl
                }
            }
        },
    },
    watch: {
        list: function () {
            this.width()
        }
    },

})