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>