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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<template>
<div class="app-quick-group">
<span class="app-quick-item" v-for="item in renderArray" :key="item.id" @click="handleClick(item)">
<span v-if="!item.children" :style="{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
<i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
<img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
<span class="app-quick-item-label">{{item.label}}</span>
<span v-show="isSelectedItem(item) && counterService && counterService.counterData && counterService.counterData[item.codename.toLowerCase()]" class="app-quick-item-counter">{{itemTag(item)}}</span>
</span>
<el-dropdown v-if="item.children" style="outline: none !important;" trigger="click" @command="handleCommand($event,item)">
<span :style="{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
<i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
<img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
<span class="app-quick-item-label">{{item.label}}</span>
<span v-show="isSelectedItem(item) && counterService && counterService.counterData && counterService.counterData[item.codename.toLowerCase()]" class="app-quick-item-counter">{{itemTag(item)}}</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="childitem in item.children" :command="childitem" :key="childitem.id">
<span :style="{color:childitem.color}">
<i v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')" :class="childitem.iconcls"></i>
<img v-else-if="childitem.icon && !Object.is(childitem.icon, '')" :src="childitem.icon" />
<span :style="{color:(childitem.label == item.label)?'#0c64eb':''}">{{childitem.label}}</span>
</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
@Component({})
export default class AppQuickGroup extends Vue {
/**
* 传入渲染项
*
* @type {Array<any>}
* @memberof AppQuickGroup
*/
@Prop() public items!:Array<any>;
/**
* 计数器服务名
*
* @type {string}
* @memberof AppQuickGroup
*/
@Prop() public counterService?:any;
/**
* UI选中项
*
* @type {*}
* @memberof AppQuickGroup
*/
public selectedUiItem:any;
/**
* 传入渲染项
*
* @type {Array<any>}
* @memberof AppQuickGroup
*/
get renderArray(){
if(this.items && this.items.length >0){
this.handleClick(this.items[0]);
return this.handleDataSet(this.items)
}else{
return [];
}
}
public itemTag(item:any){
if(this.counterService && this.counterService.counterData && item.codename){
return this.counterService.counterData[item.codename.toLowerCase()];
}else{
return "";
}
}
/**
* 是否选中当前项
*
* @param item 传入当前项
* @memberof AppQuickGroup
*/
public isSelectedItem(item:any){
if(this.selectedUiItem && (this.selectedUiItem.id === item.id)){
return true;
}else{
return false;
}
}
/**
* 处理代码表返回数据(树状结构)
*
* @param result 返回数组
* @memberof AppQuickGroup
*/
public handleDataSet(result:Array<any>){
let list:Array<any> = [];
if(result.length === 0){
return list;
}
result.forEach((codeItem:any) =>{
if(!codeItem.pvalue){
let valueField:string = codeItem.value;
this.setChildCodeItems(valueField,result,codeItem);
list.push(codeItem);
}
})
return list;
}
/**
* 处理非根节点数据
*
* @param pValue 父值
* @param result 返回数组
* @param codeItem 代码项
* @memberof AppQuickGroup
*/
public setChildCodeItems(pValue:string,result:Array<any>,codeItem:any){
result.forEach((item:any) =>{
if(item.pvalue == pValue){
let valueField:string = item.value;
this.setChildCodeItems(valueField,result,item);
if(!codeItem.children){
codeItem.children = [];
}
codeItem.children.push(item);
}
})
}
/**
* 处理点击事件
*
* @param $event 值
* @param isswitch 是否切换UI选中项
* @memberof AppQuickGroup
*/
public handleClick($event:any,isswitch:boolean = true){
if((this.selectedUiItem && (this.selectedUiItem.id === $event.id)) || $event.children) {
return;
}
this.$emit('valuechange',$event);
if(isswitch){
this.selectedUiItem = $event;
}
this.$forceUpdate();
}
/**
* 处理子项点击事件
*
* @param $event 值
* @param item 父值
* @memberof AppQuickGroup
*/
public handleCommand($event:any,item:any){
item.label = $event.label;
item.codename = $event.codename;
this.handleClick($event,false);
}
}
</script>
<style lang='less'>
@import "./app-quick-group.less";
</style>