CONTROL-BASE.vue.ftl

<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>>
        <#if portlet.getPSPortlets?? && portlet.getPSPortlets()??>
        <card class="portlet-card" :bordered="false" dis-hover :padding="0">
        <#else>
        <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
        </#if>
          <#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content>
          <#if ctrl.getViewStyle?? && ctrl.getViewStyle()?? && ctrl.getViewStyle() != 'DEFAULT'>
          <a slot='extra'></a>
          <#else>
          <p slot='title'>
            ${portlet.getTitle()}
            <span class="line"></span>
          </p>
          <a slot='extra'></a>
          </#if>
          </#if> 
          <span>
            <@ibizindent blank=10><#t>
            ${P.getCtrlCode(portlet, 'CONTROL.html').code}
            </@ibizindent>
          </span>
        </card>
      </i-col>
    <#--  ELSE：门户部件绘制，Flex  -->
    <#else>
      <#if portlet.getPSPortlets?? && portlet.getPSPortlets()??>
        <card class="portlet-card" :bordered="false" dis-hover :padding="0">
        <#else>
        <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
        </#if>
        <#if portlet.getPortletType() == 'CONTAINER' && portlet.isShowTitleBar() && portlet.getTitle()?has_content>
        <#if ctrl.getViewStyle?? && ctrl.getViewStyle()?? && ctrl.getViewStyle() != 'DEFAULT'>
        <a slot='extra'></a>
        <#else>
        <p slot='title'>
          ${portlet.getTitle()}
          <span class="line"></span>
        </p>
        <a slot='extra'></a>
        </#if>
        </#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>