<template> <#if ctrl.render??> ${ctrl.render.code} <#else> <split id="${ctrl.getCodeName()?lower_case}" class="app-dataview-exp-bar <#if ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>" v-model="split" mode="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>" @on-move-end="onSplitChange"> <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">left<#else>top</#if>'> <#if ctrl.isShowTitleBar()> <div class='dataview-exp-bar-header'> <div><icon type='ios-home-outline'/><#if ctrl.getTitle() == ''>{{ $t('app.dataViewExpBar.title') }}<#else>${ctrl.getTitle()}</#if></div> </div> </#if> <div class="container-header"> <#if ctrl.isEnableSearch()> <div class='search-container'> <i-input :search="true" @on-change="($event) => { this.searchText = $event.target.value; }" @on-search="onSearch"> </i-input> </div> </#if> <#if ctrl.getPSControls()??> <#assign controls = ctrl.getPSControls()/> <#list controls as singleControl> <#if singleControl.getControlType() == "TOOLBAR"> ${P.getCtrlCode(singleControl, 'CONTROL.html').code} </#if> </#list> </#if> </div> <div class='<#if ctrl.isShowTitleBar()>dataview-exp-bar-content<#else>dataview-exp-bar-content2</#if>'> <#if ctrl.getPSControls()??> <#assign controls = ctrl.getPSControls()/> <#list controls as singleControl> <#if singleControl.getControlType() == "DATAVIEW"> ${P.getCtrlCode(singleControl, 'CONTROL.html').code} </#if> </#list> </#if> </div> </div> <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">right<#else>bottom</#if>'> <component v-if="selection.view && !Object.is(this.selection.view.viewname, '')" :is="selection.view.viewname" class="viewcontainer2" :viewDefaultUsage="false" :viewdata="JSON.stringify(selection.context)" :viewparam="JSON.stringify(selection.viewparam)"> </component> </div> </split> </#if> </template> <#ibizinclude> ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl </#ibizinclude> <#ibizinclude> ../@MACRO/FUNC/MACRO.ftl </#ibizinclude> <#if view.getPSAppViewLogics?? && view.getPSAppViewLogics()??> <#list view.getPSAppViewLogics() as logic> <#if logic.getPFLogicCodeType() == 'APP_NEWDATA'> /** * 打开新建数据视图 * * @type {any} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public newdata: any; </#if> <#if logic.getPFLogicCodeType() == 'APP_OPENDATA'> /** * 打开编辑数据视图 * * @type {any} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public opendata: any; </#if> </#list> </#if> /** * 视图唯一标识 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public viewUID!:string; /** * 是否单选 * * @public * @type {(boolean)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public isSingleSelect:boolean = true; /** * 呈现模式,可选值:horizontal或者vertical * * @public * @type {(string)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public showMode:string ="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>"; /** * 控件宽度 * * @type {number} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public ctrlWidth:number = <#if ctrl.getWidth()??>${ctrl.getWidth()?c}<#else>0</#if>; /** * 控件高度 * * @type {number} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public ctrlHeight: number = <#if ctrl.getHeight()??>${ctrl.getHeight()?c}<#else>0</#if>; /** * 搜素值 * * @public * @type {(string)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public searchText:string = ""; /** * 分割宽度 * * @type {number} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public split: number = 0.5; <#if ctrl.getXDataPSControl()??> <#assign xDataControl = ctrl.getXDataPSControl() /> /** * 导航视图名称 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navViewName: string = "<#if xDataControl.getNavPSAppView()??><#assign navPSAppView = xDataControl.getNavPSAppView() />${srffilepath2(navPSAppView.getCodeName())}</#if>"; /** * 导航视图参数 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navViewParam: string = '<#if xDataControl.getNavViewParamJO()??>${xDataControl.getNavViewParamJO()}</#if>'; /** * 导航过滤项 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navFilter: string = "<#if xDataControl.getNavFilter()??>${xDataControl.getNavFilter()}</#if>"; /** * 导航关系 * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navPSDer: string = "<#if xDataControl.getNavPSDER()??>n_${xDataControl.getNavPSDER().getPSPickupDEField().getCodeName()?lower_case}_eq</#if>"; /** * 导航上下文参数 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navigateContext:any = <#if xDataControl.getPSNavigateContexts?? && xDataControl.getPSNavigateContexts()??><@getNavigateContext xDataControl /><#else>null</#if>; /** * 导航视图参数 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public navigateParams:any = <#if xDataControl.getPSNavigateParams?? && xDataControl.getPSNavigateParams()??><@getNavigateParams xDataControl /><#else>null</#if>; </#if> /** * 显示处理提示 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop({ default: true }) public showBusyIndicator!: boolean; <#if ctrl.getPSControls()??> <#assign controls = ctrl.getPSControls()/> <#list controls as singleControl> <#if singleControl.getControlType() == "TOOLBAR"> ${P.getCtrlCode(singleControl, 'CONTROL.vue').code} </#if> </#list> </#if> /** * 获取多项数据 * * @returns {any[]} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getData(): any { return null; } /** * 选中数据 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public selection: any = {}; /** * split值变化事件 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public onSplitChange() { if(this.split){ this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split}); } } /** * 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 ctrl.getPSDEDataView()??> <#assign dataview = ctrl.getPSDEDataView()/> this.viewState.next({ tag: '${dataview.name}', action: action, data: data }); </#if> }); } } /** * Vue声明周期(组件渲染完毕) * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public mounted() { this.afterMounted(); } /** * 执行mounted后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterMounted(){ if(this.$store.getters.getViewSplit(this.viewUID)){ this.split = this.$store.getters.getViewSplit(this.viewUID); }else{ let containerWidth:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetWidth; let containerHeight:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetHeight; if(Object.is(this.showMode,'horizontal')){ if(this.ctrlWidth){ this.split = this.ctrlWidth/containerWidth; } }else{ if(this.ctrlHeight){ this.split = this.ctrlHeight/containerHeight; } } this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split}); } } /** * 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 {any []} args * @param {string} [tag] * @param {*} [$event2] * @returns {void} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public ${ctrl.name}_selectionchange(args: any [], tag?: string, $event2?: any): void { let tempContext:any = {}; let tempViewParam:any = {}; if (args.length === 0) { return ; } const arg:any = args[0]; if(this.context){ Object.assign(tempContext,JSON.parse(JSON.stringify(this.context))); } <#if ctrl.getXDataPSControl()??> <#assign xDataControl = ctrl.getXDataPSControl()/> <#if xDataControl.getPSAppDataEntity()??> <#assign curDataEntity = xDataControl.getPSAppDataEntity()/> Object.assign(tempContext,{'${curDataEntity.getCodeName()?lower_case}':arg['${curDataEntity.getCodeName()?lower_case}']}); Object.assign(tempContext,{srfparentdename:'${curDataEntity.getCodeName()}',srfparentkey:arg['${curDataEntity.getCodeName()?lower_case}']}); if(this.navFilter && !Object.is(this.navFilter,"")){ Object.assign(tempViewParam,{[this.navFilter]:arg['${curDataEntity.getCodeName()?lower_case}']}); } if(this.navPSDer && !Object.is(this.navPSDer,"")){ Object.assign(tempViewParam,{[this.navPSDer]:arg['${curDataEntity.getCodeName()?lower_case}']}); } </#if> </#if> if(this.navigateContext && Object.keys(this.navigateContext).length >0){ let _context:any = this.$util.computedNavData(arg,tempContext,tempViewParam,this.navigateContext); Object.assign(tempContext,_context); } if(this.navigateParams && Object.keys(this.navigateParams).length >0){ let _params:any = this.$util.computedNavData(arg,tempContext,tempViewParam,this.navigateParams); Object.assign(tempViewParam,_params); } this.selection = {}; Object.assign(this.selection, { view: { viewname: this.navViewName },context:tempContext,viewparam:tempViewParam}); this.$emit('selectionchange',args); this.$forceUpdate(); } /** * 卡片视图加载完成 * * @param {any[]} args * @param {string} [tag] * @param {*} [$event2] * @returns {void} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public ${ctrl.name}_load(args: any[], tag?: string, $event2?: any): void { this.$emit('load',args); } /** * 执行搜索 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public onSearch() { <#if ctrl.getPSDEDataView()??> <#assign dataview = ctrl.getPSDEDataView()/> this.viewState.next({ tag: '${dataview.name}', action: 'filter', data: { query: this.searchText} }); </#if> } <#ibizinclude> ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl </#ibizinclude> <#ibizinclude> ../@MACRO/CONTROL/CONTROL-BASE.style.ftl </#ibizinclude>