app-menu-item.vue 5.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
<template>
    <div class="app-menu-item">
        <template v-for="item in menus">
             <template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
                <el-submenu :class="[{'isCollpase' : appMenuCollapseFlag},item.textcls]" v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
                    <template slot='title'>
                        <template v-if="item.icon && item.icon != ''">
                            <img :src="item.icon" class='app-menu-icon' />
                        </template>
                        <template v-else-if="item.iconcls && item.iconcls != ''">
                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
                        </template>
                        <template v-else>
                            <i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
                        </template>
                        <span ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                    </template>
                    <app-menu-item :isCollapse="isCollapse" :menus="item.items" :ctrlName="ctrlName" :isFirst="false" :counterdata="counterdata" :popper-class="popperClass"></app-menu-item>
                </el-submenu>
             </template>
             <template v-else>
                <template v-if="item.type =='MENUITEM'">
                    <el-menu-item :class="[{'isFirst' : isFirst},item.textcls]" v-show="!item.hidden" :index="item.name" :key="item.id">
                        <template v-if="item.icon && item.icon != ''">
                            <img :src="item.icon" class='app-menu-icon' />
                            <span v-if="(isFirst && isCollapse) ? true : false" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                        </template>
                        <template v-else-if="item.iconcls && item.iconcls != ''">
                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
                            <span v-if="(isFirst && isCollapse) ? true : false" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                        </template>
                        <template v-else>
                            <i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
                            <span v-if="(isFirst && isCollapse) ? true : false" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                        </template>
                        <template slot="title">
                            <span :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                            <template v-if="counterdata && counterdata[item.counterid] && counterdata[item.counterid] > 0">
                                <span class="pull-right">
                                    <badge :count="counterdata[item.counterid]" :overflow-count="9999"></badge>
                                </span>
                            </template>
                        </template>
                    </el-menu-item>
                </template>
                <template v-if="item.type =='SEPERATOR'">
                        <divider :key="item.id" />
                </template>
            </template>
        </template>
   </div>     
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({})
export default class AppMenuItem extends Vue {
    
    /**
     * 菜单数据
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop( {default: []} ) public menus!: any;

    /**
     * 部件名称
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public ctrlName!: string;

    /**
     * 计数器数据
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public counterdata!: any;

    /**
     * 提示框主题样式
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public popperClass!: any;

    /**
     * 是否是一级菜单
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public isFirst!: boolean;

    /**
     * 菜单是否缩进
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public isCollapse!: boolean;

    /**
     * 菜单缩进,元素类名标记
     * 
     * @type {*}
     * @memberof AppMenuItem
     */
    public appMenuCollapseFlag: boolean = false;

    /**
     * vue  生命周期
     *
     * @memberof AppIndexViewBase
     */
    public mounted() {
        this.onCollapsechangeChange();
    }

    /**
     * 根据菜单缩进状态修改菜单项值
     */
    onCollapsechangeChange() {
        if(this.isCollapse && this.isFirst) {
            this.appMenuCollapseFlag = true;
            let appMenuCircle: any[] = this.$refs.circleText as any[];
            if(appMenuCircle) {
                appMenuCircle.forEach((item: any) => {
                    let text: string = (item.innerText as string).slice(0,1);
                    item.innerText = text;         
                })
            }
        }
    }


}
</script>