<template> <div class='dashboard'> <row v-if="isEnableCustomized"> <app-build @handleClick="handleClick"></app-build> </row> <row v-if="!isHasCustomized"> <#-- BEGIN:看板Flex布局-前 --> <#if ctrl.getLayoutMode?? && ctrl.getLayoutMode() == 'FLEX'> <div style = 'display : flex; <#if ctrl.getFlexAlign()??> justify-content :${ctrl.getFlexAlign()};</#if> <#if ctrl.getFlexDir()??> flex-direction:${ctrl.getFlexDir()};</#if> <#if ctrl.getFlexVAlign()??>align-items:${ctrl.getFlexVAlign()};</#if> '> </#if> <#-- END:看板Flex布局-前 --> <#list ctrl.getPSPortlets() as portlet><#t> <#if portlet.getPortletType?? && portlet.getPortletType()??><#t> <#-- BEGIN:获取父的layout,自己的LayoutPos --> <#assign layout=ctrl.getLayoutMode()> <#assign LayoutPos = portlet.getPSLayoutPos()> <#-- END:获取父的layout,自己的LayoutPos --> <#-- BEGIN:门户部件绘制,栅格布局 --> <#if layout == 'TABLE_12COL'> <#assign multiple = 2/> <#else> <#assign multiple = 1/> </#if> <#macro format_numer num> <#if num lt 0 > 0<#t> <#elseif num gt 24> 24<#t> <#else> ${num}<#t> </#if> </#macro> <#if (layout == 'TABLE_24COL' || layout == 'TABLE_12COL') && LayoutPos??><#t> <i-col<#if LayoutPos.getColXS() != -1> :xs="{ span: <@format_numer LayoutPos.getColXS()*multiple/>, offset: <#if LayoutPos.getColXSOffset() != -1><@format_numer LayoutPos.getColXSOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColSM() != -1> :sm="{ span: <@format_numer LayoutPos.getColSM()*multiple />, offset: <#if LayoutPos.getColSMOffset() != -1><@format_numer LayoutPos.getColSMOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColMD() != -1> :md="{ span: <@format_numer LayoutPos.getColMD()*multiple />, offset: <#if LayoutPos.getColMDOffset() != -1><@format_numer LayoutPos.getColMDOffset()*multiple /><#else>0</#if> }"</#if><#if LayoutPos.getColLG() != -1> :lg="{ span: <@format_numer LayoutPos.getColLG()*multiple />, offset: <#if LayoutPos.getColLGOffset() != -1><@format_numer LayoutPos.getColLGOffset()*multiple /><#else>0</#if> }"</#if>> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content> <p slot='title'> ${portlet.getTitle()} <span class="line"></span> </p> <a slot='extra'></a> </#if> <span> <@ibizindent blank=10><#t> ${P.getCtrlCode(portlet, 'CONTROL.html').code} </@ibizindent> </span> </card> </i-col> <#-- ELSE:门户部件绘制,Flex --> <#else> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content> <p slot='title'> ${portlet.getTitle()} <span class="line"></span> </p> <a slot='extra'></a> </#if> <span> <@ibizindent blank=10><#t> ${P.getCtrlCode(portlet, 'CONTROL.html').code} </@ibizindent> </span> </card> </#if> <#-- END:门户部件绘制 --> </#if> </#list> <#-- BEGIN:看板Flex布局-后 --> <#if ctrl.getLayoutMode?? && ctrl.getLayoutMode() == 'FLEX'> </div> </#if> <#-- END:看板Flex布局-后 --> </row> <row v-if="isHasCustomized" style="width: 100%;min-height: calc(100% - 40px);"> <div class="portlet-container" style="position: relative;width:100%;"> <template v-for="(item, index) of modelDta"> <#noparse><div :key="index" :style="{zIndex: 10, position: 'absolute', height: item.h*layoutRowH + 'px', width: `calc(100% / ${layoutColNum} * ${item.w})`,top: item.y*layoutRowH + 'px', left: `calc(100% / ${layoutColNum} * ${item.x})`}"></#noparse> <component :key="$util.createUUID()" :is="item.componentName" :name="item.portletCodeName" :context="JSON.parse(JSON.stringify(context))" :viewDefaultUsage="false" :isAdaptiveSize="true" :viewState="viewState"></component> </div> </template> </div> </row> </div> </template> <#assign import_block> import UtilService from '@/utilservice/util-service'; </#assign> <#ibizinclude> ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl </#ibizinclude> /** * 是否支持看板定制 * * @public * @type {(boolean)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public isEnableCustomized!:boolean; /** * 是否已有看板定制 * * @public * @type {(boolean)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public isHasCustomized:boolean = false; /** * 模型数据 * * @public * @type {(*)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public modelDta:any; /** * modleId * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public modelId:string = "dashboard_<#if ctrl.getPSAppDataEntity()??>${ctrl.getPSAppDataEntity().getCodeName()?lower_case}<#else>app</#if>_${ctrl.getCodeName()?lower_case}"; /** * 建构功能服务对象 * * @type {UtilService} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public utilService:UtilService = new UtilService(); /** * 功能服务名称 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public utilServiceName:string = "<#if ctrl.getPSAppDynaDashboardUtil?? && ctrl.getPSAppDynaDashboardUtil()??>${ctrl.getPSAppDynaDashboardUtil().getCodeName()?lower_case}</#if>"; /** * 获取多项数据 * * @returns {any[]} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getData(): any { return {}; } /** * vue 生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } if (Object.is('load', action)) { this.loadModel(); } }); } } /** * 动态设计水平列数 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public layoutColNum:number = 12; /** * 动态设计单元格高度,80px * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public layoutRowH:number = 80; /** * 通知状态 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public notifyState(){ this.$nextTick(() =>{ if (this.isHasCustomized) { if (this.modelDta && this.modelDta.length > 0) { this.modelDta.forEach((item: any) => { this.viewState.next({ tag: item.portletCodeName, action: "load", data: JSON.parse(JSON.stringify(this.viewparams)) }); }); } } else { if (this.viewState) { const refs: any = this.$refs; Object.keys(refs).forEach((name: string) => { this.viewState.next({ tag: name, action: "load", data: JSON.parse(JSON.stringify(this.viewparams)) }); }); } } }) } /** * 加载布局与数据模型 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public loadModel(){ if(this.isEnableCustomized){ this.utilService.getService(this.utilServiceName).then((service:any) =>{ service.loadModelData(JSON.parse(JSON.stringify(this.context)),{modelid:this.modelId,utilServiceName:this.utilServiceName}).then((res:any) =>{ if(res && res.status == 200){ const data:any = res.data; if(data && data.length >0){ this.isHasCustomized = true; this.modelDta = data; this.$forceUpdate(); }else{ this.isHasCustomized = false; } this.notifyState(); }else{ console.error("加载面板模型异常"); this.isHasCustomized = false; this.notifyState(); } }).catch((error:any)=>{ console.error("加载面板模型异常"); console.error(error); this.isHasCustomized = false; this.notifyState(); }); }) }else{ this.notifyState(); } } /** * 处理私人定制按钮 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public handleClick(){ const view:any ={ viewname: 'app-portal-design', title: (this.$t('app.dashBoard.handleClick.title')), width: 1600, placement: 'DRAWER_RIGHT' } const viewparam:any ={ modelid:this.modelId, utilServiceName:this.utilServiceName, appdeName:<#if ctrl.getPSAppDataEntity?? && ctrl.getPSAppDataEntity()??>'${ctrl.getPSAppDataEntity().getCodeName()}'<#else>'app'</#if> } const appdrawer = this.$appdrawer.openDrawer(view, JSON.parse(JSON.stringify(this.context)), viewparam); appdrawer.subscribe((result: any) => { if(Object.is(result.ret,'OK')){ this.loadModel(); } }); } /** * vue 生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } <#if destroyed_block??> ${destroyed_block} </#if> } <#ibizinclude> ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl </#ibizinclude> <#ibizinclude> ../@MACRO/CONTROL/CONTROL-BASE.style.ftl </#ibizinclude>