<template> <#if quick_menus??> ${quick_menus} <#else> <div class="app-app-menu"> <el-menu class="app-menu" :default-openeds="defaultOpeneds" :mode="mode" :menu-trigger="trigger" :collapse="isCollapse" @select="select" :default-active="defaultActive"> <template v-for="item0 in menus"> <template v-if="item0.items && Array.isArray(item0.items) && item0.items.length > 0"> <el-submenu v-show="!item0.hidden" :index="item0.name" :popper-class="popperClass" :key="item0.id"> <template slot='title'> <template v-if="item0.icon && item0.icon != ''"> <img :src="item0.icon" class='app-menu-icon' /> </template> <template v-else-if="item0.iconcls && item0.iconcls != ''"> <i :class="[item0.iconcls, 'app-menu-icon']"></i> </template> <template v-else> <i class='fa fa-cogs app-menu-icon'></i> </template> <span class='text' :title="$t('app.menus.${ctrl.codeName?lower_case}.' + item0.name)">{{$t('app.menus.${ctrl.codeName?lower_case}.' + item0.name)}}</span> </template> <template v-for="item1 in item0.items"> <template v-if="item1.items && Array.isArray(item1.items) && item1.items.length > 0"> <el-submenu v-show="!item1.hidden" :index="item1.name" :popper-class="popperClass" :key="item1.id"> <template slot='title'> <template v-if="item1.icon && item1.icon != ''"> <img :src="item1.icon" class='app-menu-icon' /> </template> <template v-else-if="item1.iconcls && item1.iconcls != ''"> <i :class="[item1.iconcls, 'app-menu-icon']"></i> </template> <span class='text' :title="$t('app.menus.${ctrl.codeName?lower_case}.' + item1.name)">{{$t('app.menus.${ctrl.codeName?lower_case}.' + item1.name)}}</span> </template> <template v-for="item2 in item1.items"> <template v-if="item2.type =='MENUITEM'"> <el-menu-item v-show="!item2.hidden" :index="item2.name" :key="item2.id"> <template v-if="item2.icon && item2.icon != ''"> <img :src="item2.icon" class='app-menu-icon' /> </template> <template v-else-if="item2.iconcls && item2.iconcls != ''"> <i :class="[item2.iconcls, 'app-menu-icon']"></i> </template> <template slot="title"> <span class="text" :title="$t('app.menus.${ctrl.codeName?lower_case}.' + item2.name)">{{$t('app.menus.${ctrl.codeName?lower_case}.' + item2.name)}}</span> <template v-if="counterdata && counterdata[item2.counterid] && counterdata[item2.counterid] > 0"> <span class="pull-right"> <badge :count="counterdata[item2.counterid]" :overflow-count="9999"></badge> </span> </template> </template> </el-menu-item> </template> <template v-if="item2.type =='SEPERATOR'"> <divider :key="item2.id" /> </template> </template> </el-submenu> </template> <template v-else> <template v-if="item1.type =='MENUITEM'"> <el-menu-item v-show="!item1.hidden" :index="item1.name" :key="item1.id"> <template v-if="item1.icon && item1.icon != ''"> <img :src="item1.icon" class='app-menu-icon' /> </template> <template v-else-if="item1.iconcls && item1.iconcls != ''"> <i :class="[item1.iconcls, 'app-menu-icon']"></i> </template> <template slot="title"> <span class="text" :title="$t('app.menus.${ctrl.codeName?lower_case}.' + item1.name)">{{$t('app.menus.${ctrl.codeName?lower_case}.' + item1.name)}} </span> <template v-if="counterdata && counterdata[item1.counterid] && counterdata[item1.counterid] > 0"> <span class="pull-right"> <badge :count="counterdata[item1.counterid]" :overflow-count="9999"></badge> </span> </template> </template> </el-menu-item> </template> <template v-if="item1.type =='SEPERATOR'"> <divider :key="item1.id" /> </template> </template> </template> </el-submenu> </template> <template v-else> <template v-if="item0.type =='MENUITEM'"> <el-menu-item v-show="!item0.hidden" :index="item0.name" :key="item0.id"> <template v-if="item0.icon && item0.icon != ''"> <img :src="item0.icon" class='app-menu-icon' /> </template> <template v-else-if="item0.iconcls && item0.iconcls != ''"> <i :class="[item0.iconcls, 'app-menu-icon']"></i> </template> <template v-else> <i class='fa fa-cogs app-menu-icon'></i> </template> <template slot="title"> <span class="text" :title="$t('app.menus.${ctrl.codeName?lower_case}.' + item0.name)">{{$t('app.menus.${ctrl.codeName?lower_case}.' + item0.name)}}</span> <template v-if="counterdata && counterdata[item0.counterid] && counterdata[item0.counterid] > 0"> <span class="pull-right"> <badge :count="counterdata[item0.counterid]" :overflow-count="9999"></badge> </span> </template> </template> </el-menu-item> </template> <template v-if="item0.type =='SEPERATOR'"> <divider :key="item0.id" /> </template> </template> </template> </el-menu> </div> </#if> </template> <#assign import_block> import ${srfclassname('${ctrl.codeName}')}Model from './${srffilepath2(ctrl.codeName)}-${ctrl.getControlType()?lower_case}-model'; </#assign> <#ibizinclude> ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl </#ibizinclude> /** * 获取多项数据 * * @returns {any[]} * @memberof ${srfclassname('${ctrl.codeName}')} */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ public getData(): any { return null; } /** * 菜单模型 * * @public * @type {${srfclassname('${ctrl.codeName}')}Model} * @memberof ${srfclassname('${ctrl.codeName}')} */ public menuMode: ${srfclassname('${ctrl.codeName}')}Model = new ${srfclassname('${ctrl.codeName}')}Model(); /** * 显示处理提示 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Prop({ default: true }) public showBusyIndicator?: boolean; /** * 菜单数据 * * @public * @type {any[]} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Provide() public menus: any[] = []; /** * 菜单收缩改变 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Model() public collapsechange?: boolean; /** * 监听菜单收缩 * * @param {*} newVal * @param {*} oldVal * @memberof ${srfclassname('${ctrl.codeName}')} */ @Watch('collapsechange') onCollapsechangeChange(newVal: any, oldVal: any) { if (newVal !== this.isCollapse) { this.isCollapse = !this.isCollapse; } } /** * 当前模式,菜单在顶部还是在底部 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Prop() mode: any; /** * 当前菜单是否在默认视图上 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Prop({ default: false }) isDefaultPage?: boolean; /** * 默认打开视图 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Prop() defPSAppView: any; /** * 默认激活的index * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Provide() defaultActive: any = null; /** * 当前选中主题 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Prop() selectTheme: any; /** * 默认打开的index数组 * * @type {any[]} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Provide() public defaultOpeneds: any[] = []; /** * 是否展开 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Provide() public isCollapse: boolean = false; /** * 触发方式,默认click * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')} */ @Provide() trigger: string = 'click'; /** * 计数器数据 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')} */ public counterdata: any = {}; /** * vue 生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')} */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')} */ public afterCreated(){ if (Object.is(this.mode, 'horizontal')) { this.trigger = 'hover'; } if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } this.load(data); }); } } /** * vue 生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')} */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')} */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } <#if destroyed_block??> ${destroyed_block} </#if> } <#if view.isDefaultPage?? && view.isDefaultPage()> /** * 处理菜单默认选中项 * * @public * @memberof ${srfclassname('${ctrl.codeName}')} */ public doMenuSelect(): void { if (!this.isDefaultPage) { return; } const appFuncs: any[] = this.menuMode.getAppFuncs(); if (this.$route && this.$route.matched && this.$route.matched.length == 2) { // 存在二级路由 const [{ }, matched] = this.$route.matched; const appfunc: any = appFuncs.find((_appfunc: any) => Object.is(_appfunc.routepath, matched.path) && Object.is(_appfunc.appfuncyype, 'APPVIEW')); if (appfunc) { this.computeMenuSelect(this.menus, appfunc.appfunctag); } return; } else if (this.defPSAppView && Object.keys(this.defPSAppView).length > 0) { // 存在默认视图 const appfunc: any = appFuncs.find((_appfunc: any) => Object.is(_appfunc.routepath, this.defPSAppView.routepath) && Object.is(_appfunc.appfuncyype, 'APPVIEW')); if (appfunc) { this.computeMenuSelect(this.menus, appfunc.appfunctag); } const viewparam: any = {}; const path: string = this.$viewTool.buildUpRoutePath(this.$route, {}, this.defPSAppView.deResParameters, this.defPSAppView.parameters, [], viewparam); this.$router.push(path); return; } this.computeMenuSelect(this.menus, ''); let item = this.compute(this.menus, this.defaultActive); if (Object.keys(item).length === 0) { return; } if(!item.hidden){ this.click(item); } } /** * 计算菜单选中项 * * @public * @param {any[]} items * @param {string} appfunctag * @returns {boolean} * @memberof ${srfclassname('${ctrl.codeName}')} */ public computeMenuSelect(items: any[], appfunctag: string): boolean { const appFuncs: any[] = this.menuMode.getAppFuncs(); return items.some((item: any) => { if (Object.is(appfunctag, '') && !Object.is(item.appfunctag, '')) { const appfunc = appFuncs.find((_appfunc: any) => Object.is(_appfunc.appfunctag, item.appfunctag)); if (appfunc.routepath) { this.defaultActive = item.name; this.setHideSideBar(item); return true; } } if (Object.is(item.appfunctag, appfunctag)) { this.setHideSideBar(item); this.defaultActive = item.name; return true; } if (item.items && item.items.length > 0) { const state = this.computeMenuSelect(item.items, appfunctag); if (state) { this.defaultOpeneds.push(item.name); return true; } } return false; }); } </#if> /** * 获取菜单项数据 * * @public * @param {any[]} items * @param {string} name * @returns * @memberof ${srfclassname('${ctrl.codeName}')} */ public compute(items: any[], name: string) { const item: any = {}; items.some((_item: any) => { if (name && Object.is(_item.name, name)) { Object.assign(item, _item); this.setHideSideBar(_item); return true; } if (_item.items && Array.isArray(_item.items)) { const subItem = this.compute(_item.items, name); if (Object.keys(subItem).length > 0) { Object.assign(item, subItem); return true; } } return false; }); return item; } /** * 设置是否隐藏菜单栏 * * @public * @param {*} item * @memberof ${srfclassname('${ctrl.codeName}')} */ public setHideSideBar(item: any): void { <#if view.isDefaultPage?? && view.isDefaultPage()> if (item.hidesidebar) { this.$emit('collapsechange', true); } </#if> } /** * 菜单项选中处理 * * @param {*} index * @param {any[]} indexs * @returns * @memberof ${srfclassname('${ctrl.codeName}')} */ public select(index: any, indexs: any[]) { let item = this.compute(this.menus, index); if (Object.keys(item).length === 0) { return; } this.click(item); } /** * 菜单点击 * * @public * @param {*} item 菜单数据 * @memberof ${srfclassname('${ctrl.codeName}')} */ public click(item: any) { if (item) { switch (item.appfunctag) { <#if ctrl.getPSAppFuncs()??> <#assign appFuncs = ctrl.getPSAppFuncs()> <#list appFuncs as singFuncs> case '${singFuncs.getCodeName()}': this.click${singFuncs.codeName}(item); return; </#list> </#if> default: console.warn('未指定应用功能'); } } } <#if ctrl.getPSAppFuncs()??> <@ibizindent blank=4> <#list ctrl.getPSAppFuncs() as singleFuncs> ${P.getLogicCode(singleFuncs,"LOGIC.vue").code} </#list> </@ibizindent> </#if> /** * 数据加载 * * @param {*} data * @memberof ${srfclassname('${ctrl.codeName}')} */ public load(data: any) { this.handleMenusResource(this.menuMode.getAppMenuItems()); } /** * 通过统一资源标识计算菜单 * * @param {*} data * @memberof ${srfclassname('${ctrl.codeName}')} */ public handleMenusResource(inputMenus:Array<any>){ if(this.$store.getters['unifiedresource/getEnablePermissionValid']){ this.computedEffectiveMenus(inputMenus); } this.dataProcess(this.menuMode.getAppMenuItems()); this.menus = this.menuMode.getAppMenuItems(); <#if view.isDefaultPage?? && view.isDefaultPage()> this.doMenuSelect(); </#if> } /** * 计算有效菜单项 * * @param {*} data * @memberof ${srfclassname('${ctrl.codeName}')} */ public computedEffectiveMenus(inputMenus:Array<any>){ inputMenus.forEach((_item:any) =>{ if(_item.resourcetag && !this.$store.getters['unifiedresource/getResourceData'](_item.resourcetag)){ _item.hidden = true; if (_item.items && _item.items.length > 0) { this.computedEffectiveMenus(_item.items); } } }) } /** * 数据处理 * * @public * @param {any[]} items * @memberof ${srfclassname('${ctrl.codeName}')} */ public dataProcess(items: any[]): void { items.forEach((_item: any) => { if (_item.expanded) { this.defaultOpeneds.push(_item.name); } if (_item.items && _item.items.length > 0) { this.dataProcess(_item.items) } }); } /** * 提示框主题样式 * * @readonly * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')} */ get popperClass(): string { return 'app-popper-menu ' + this.selectTheme; } <#ibizinclude> ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl </#ibizinclude> <#ibizinclude> ../@MACRO/CONTROL/CONTROL-BASE.style.ftl </#ibizinclude>