CONTROL-BASE.vue.ftl 8.5 KB

<template>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
  <div class='tabviewpanel<#if ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>' style="height:100%;">
        <tabs :value="tabValue" :animated="false" class='tabexppanel' name='${ctrl.getCodeName()?lower_case}' @on-click="tabPanelClick">
        <#list ctrl.getPSControls() as tabviewpanel>
        <tab-pane :index="${tabviewpanel_index}" name='${tabviewpanel.name}' tab='${ctrl.getCodeName()?lower_case}' class='<#if tabviewpanel.getPSSysCss?? && tabviewpanel.getPSSysCss()??>${tabviewpanel.getPSSysCss().getCssName()}</#if>'  v-if="computedAuthorizedPanel('${tabviewpanel.name}')"
            :label="(h) =>{
                return h('div', [
                    <#if tabviewpanel.getPSSysImage()??>
                    <#assign sysimage = tabviewpanel.getPSSysImage()/>
                    <#if sysimage.getImagePath() ==  "">
                    h('i',{
                        class:'${sysimage.getCssClass()}',
                        style:{
                            'margin-right' : '2px'
                        }
                    }),
                    <#else>
                    h('img',{
                        src:'${sysimage.getImagePath()}',
                        style:{
                            'margin-right' : '2px'
                        }
                    }),
                    </#if>
                    </#if>
                    h('span', '${tabviewpanel.getCaption()}'),
                    h('Badge', {
                        props: {
                            count: <#if tabviewpanel.getPSSysCounterRef?? && tabviewpanel.getPSSysCounterRef()?? && tabviewpanel.getPSSysCounterRef().getPSAppCounter()??><#assign appCounter = tabviewpanel.getPSSysCounterRef().getPSAppCounter()/>${appCounter.getCodeName()?lower_case}counterservice.counterData.<#if tabviewpanel.getCounterId()??>${tabviewpanel.getCounterId()}</#if><#else>undefined</#if>,
                            type: 'primary'
                        }
                    })
                ])
            }" >
            ${P.getCtrlCode(tabviewpanel, 'CONTROL.html').code}
        </tab-pane>
        </#list>
    </tabs>
  </div>
</#if>
</template>
<#assign import_block>
import ${srfclassname('${appde.getCodeName()}')}AuthService from '@/authservice/${srffilepath2(appde.getCodeName())}/${srffilepath2(appde.getCodeName())}-auth-service';
import { Environment } from '@/environments/environment';
</#assign>
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>
    /**
     * 实体权限服务对象
     *
     * @type {${appde.getCodeName()}AuthService}
     * @memberof TabExpViewtabexppanelBase
     */
    public appAuthService: ${appde.getCodeName()}AuthService = new ${appde.getCodeName()}AuthService();

    /**
     * 是否初始化
     *
     * @returns {any}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public isInit: any = {
<#list ctrl.getPSControls() as tabviewpanel>
        ${tabviewpanel.name}: <#if tabviewpanel_index == 0> true <#else> false </#if>,
</#list>
    }

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
        return [];
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getData(): any {
        return null;
    }

    /**
     * 从父传入的当前分页面板panel值
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public tabValue?: string;

    /**
     * 值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Watch('tabValue')
    public onValueChange(newVal: any, oldVal: any) {
        this.tabPanelClick(newVal);
    }

    /**
     * 行为参数
     *
     * @public
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public action:any = '';

    /**
     * 分页面板统一资源存储对象
     *
     * @public
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public authResourceObject:any = {<#list ctrl.getPSControls() as tabviewpanel>'${tabviewpanel.name}':<#if tabviewpanel.getEmbeddedPSAppDEView()?? && tabviewpanel.getEmbeddedPSAppDEView().getAccessKey()??>'${tabviewpanel.getEmbeddedPSAppDEView().getAccessKey()}'<#else>null</#if><#if tabviewpanel_has_next>,</#if></#list>};

    /**
     * 被激活的分页面板
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public activiedTabViewPanel: string = '<#list ctrl.getPSControls() as tabviewpanel><#if tabviewpanel_index==0>${tabviewpanel.name}</#if></#list>';

    /**
     * 计算激活分页面板
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public computedActiviedPanel(){
        if(this.$store.getters['authresource/getEnablePermissionValid']){
            if(Object.keys(this.authResourceObject).length >0){
                let targetResult:Array<any> = [];
                Object.keys(this.authResourceObject).forEach((item:any) =>{
                    if(this.computedAuthorizedPanel(item)) 
                        targetResult.push(item);
                })
                if(targetResult.length >0){
                    this.activiedTabViewPanel = targetResult[0];
                    this.tabPanelClick(targetResult[0]);
                }
            }
        }
    }

    /**
     * 计算分页面板是否显示
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public computedAuthorizedPanel(name:string){
        if(!this.$store.getters['authresource/getEnablePermissionValid'])
            return true;
        if(!this.authResourceObject[name]) 
            return true;
        return this.appAuthService.getResourcePermission(this.authResourceObject[name]);
    }

    /**
     * 分页视图面板数据变更
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public tabViewPanelDatasChange(){
        this.counterRefresh();
    }

    /**
     * vue 生命周期
     *
     * @returns
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public created() {
        this.afterCreated();
    }

    /**
     * 执行created后的逻辑
     *
     *  @memberof ${srfclassname('${ctrl.codeName}')}Base
     */    
    public afterCreated(){
        //设置分页导航srfparentdename和srfparentkey
        <#if ctrl.getPSAppDataEntity()??>
        <#assign appDataEntity = ctrl.getPSAppDataEntity()/>
        if(this.context.${appDataEntity.getCodeName()?lower_case}){
            Object.assign(this.context,{srfparentdename:'${appDataEntity.getCodeName()}',srfparentkey:this.context.${appDataEntity.getCodeName()?lower_case}})
        }
        </#if>
        this.computedActiviedPanel();
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                this.action = action;
                this.viewState.next({ tag: this.activiedTabViewPanel, action: action, data: data });
                this.$forceUpdate();
            });
        }
    }    

    /**
     * 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>
    }

    /**
     * 分页面板选中
     *
     * @param {*} $event
     * @returns
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public tabPanelClick($event: any) {
        if (!$event) {
            return;
        }
        this.isInit[$event] = true;
        if (!this.viewState) {
            return;
        }
        this.activiedTabViewPanel = $event;
        this.viewState.next({ tag: this.activiedTabViewPanel, action: this.action, data: {}});
    }



<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>