ibiz-group-menu.component.ts

Vue.component('ibiz-group-menu', {
    template: `
        <div class="ibiz-group-menu">
            <row>
                <i-col span="24" class="first-level" v-for="first in menu.items" v-if="first.items && first.items.length > 0">
                    <div class="first-level-title">
                        <h2>
                            <span class="first-level-title-icon">
                                <i v-if="first.icon == ''" :class="[first.iconcls == '' ? '' : first.iconcls ]"></i>
                                <img v-else :src="first.icon"/>
                            </span>
                            <span class="first-level-title-text">{{first.text}}</span>
                        </h2>
                    </div>
                    <row>
	                    <i-col :xs="6" v-for="second in first.items" class="second-level">
		                    <div @click="openMenu(second)">
                                <div class="second-level-icon">
                                    <i v-if="second.icon == ''" :class="[second.iconcls == '' ? 'fa fa-cogs' : second.iconcls ]"></i>
                                    <img v-else :src="second.icon"/>
                                </div>
                                <h4 class="second-level-text">{{second.text}}</h4>
                                
                                <span v-if="counterdata[second.counterid] && counterdata[second.counterid] > 0">
                                    <badge :count="counterdata[second.counterid]" :overflow-count="maxNumber">
                                    </badge>
                                </span>

		                    </div>
		                </i-col>
                    </row>
                </i-col>
            </row>
        </div>
    `,
    props: {
        menu: {
            type: Object
        },
        viewController: {
            type: Object
        }
    },
    data: function () {
        let data: any = {
            counterdata: {},
            uiCounterEvent: null,
            maxNumber: IBizEnvironment.AppMenuUICounterMaxNumber ? IBizEnvironment.AppMenuUICounterMaxNumber : 9999,
        };
        return data;
    },
    mounted: function () {
        this.subscribeUICounter();
    },
    destroyed: function () {
        this.unSubscribeUICounter();
    },
    methods: {
        subscribeUICounter() {
            if (!this.menu.getUICounterName() || Object.is(this.menu.getUICounterName(), '')) {
                return;
            }
            const UICounter = this.viewController.uicounters.get(this.menu.getUICounterName());
            this.counterdata = {};
            Object.assign(this.counterdata, UICounter.getData());
            this.uiCounterEvent = UICounter.on(IBizUICounter.COUNTERCHANGED).subscribe((data) => {
                this.counterdata = {};
                Object.assign(this.counterdata, data);
            });
        },
        unSubscribeUICounter() {
            if (this.uiCounterEvent) {
                this.uiCounterEvent.unsubscribe();
            }
        },
        // 打开菜单节点
        openMenu(second: any = {}) {
            if (this.menu) {
                this.menu.onSelectChange(second);
            }
        }
    }
});