<template> <div class='tabviewpanel' style="height:100%;" v-if = 'isActivied' > <ibizsoftware-suit-grid-view9 class='viewcontainer2' :viewdata="viewdata" :viewparam="viewparam" @viewload="viewDatasChange($event)" :viewDefaultUsage="false" > </ibizsoftware-suit-grid-view9> </div> </template> // 基于 @CONTROL/分页视图面板/CONTROL-BASE.vue.ftl 生成 <script lang='tsx'> import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator'; import { CreateElement } from 'vue'; import { Subject, Subscription } from 'rxjs'; import { ControlInterface } from '@/interface/control'; import { UIActionTool,Util,ViewTool } from '@/utils'; import NavDataService from '@/service/app/navdata-service'; import AppCenterService from "@service/app/app-center-service"; import IBIZSample0003EntityService from '@/service/ibizsample0003/ibizsample0003-service'; import STabExpView_layouttabviewpanel3Service from './stab-exp-view-layouttabviewpanel3-tabviewpanel-service'; import IBIZSample0003UIService from '@/uiservice/ibizsample0003/ibizsample0003-ui-service'; @Component({ components: { } }) export default class STabExpView_layouttabviewpanel3Base extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public viewparams!: any; /** * 视图操作参数(父级) * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public pViewCtx!: any; /** * 视图操作参数 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ public viewCtx: any = {}; /** * 监听视图操作参数变化 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ @Watch('pViewCtx', { immediate: true }) public onViewCtxChange(newVal: any, oldVal: any) { Object.assign(this.viewCtx, newVal, { xData: this, ctrl: this }); } /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof STabExpView_layouttabviewpanel3Base */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof STabExpView_layouttabviewpanel3Base */ public getControlType(): string { return 'TABVIEWPANEL' } /** * 建构部件服务对象 * * @type {STabExpView_layouttabviewpanel3Service} * @memberof STabExpView_layouttabviewpanel3Base */ public service: STabExpView_layouttabviewpanel3Service = new STabExpView_layouttabviewpanel3Service({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZSample0003Service} * @memberof STabExpView_layouttabviewpanel3Base */ public appEntityService: IBIZSample0003EntityService = new IBIZSample0003EntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof STabExpView_layouttabviewpanel3Base */ public transformData(args: any) { let _this: any = this; if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){ return _this.service.handleRequestData('transform',_this.context,args)['data']; } } /** * 关闭视图 * * @param {any} args * @memberof STabExpView_layouttabviewpanel3Base */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof STabExpView_layouttabviewpanel3Base */ public counterRefresh(){ const _this:any =this; if(_this.counterServiceArray && _this.counterServiceArray.length >0){ _this.counterServiceArray.forEach((item:any) =>{ if(item.refreshData && item.refreshData instanceof Function){ item.refreshData(); } }) } } /** * 处理部件事件 * * @memberof STabExpView_layouttabviewpanel3Base */ public async handleCtrlEvents(eventName: string, args: any = {}): Promise<boolean> { const actionData = { data: this.getData() || {}, context: Util.deepCopy(this.context), viewparams: Util.deepCopy(this.viewparams), xData: this } let result: boolean = true; Object.assign(actionData, args); if (!result) { return false; } this.$emit(eventName, actionData); return true; } /** * 获取多项数据 * * @returns {any[]} * @memberof STabExpView_layouttabviewpanel3Base */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof STabExpView_layouttabviewpanel3Base */ public getData(): any { return null; } /** * 是否被激活 * * @type {boolean} * @memberof STabExpView_layouttabviewpanel3Base */ public isActivied: boolean = true; /** * 当前激活数据 * * @type {boolean} * @memberof STabExpView_layouttabviewpanel3Base */ @Prop() public activeData?:any; /** * 局部上下文 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ public localContext: any = null; /** * 局部视图参数 * * @type {*} * @memberof STabExpView_layouttabviewpanel3Base */ public localViewParam: any = null; /** * 传入上下文 * * @type {string} * @memberof STabExpView_layouttabviewpanel3Base */ public viewdata: string = JSON.stringify(this.context); /** * 传入视图参数 * * @type {string} * @memberof PickupViewpickupviewpanel */ public viewparam: string = JSON.stringify(this.viewparams); /** * 视图面板过滤项 * * @type {string} * @memberof STabExpView_layouttabviewpanel3Base */ public navfilter: string = ""; /** * vue 生命周期 * * @returns * @memberof STabExpView_layouttabviewpanel3Base */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof STabExpView_layouttabviewpanel3Base */ public afterCreated(){ this.initNavParam(); if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } this.$forceUpdate(); this.$nextTick(() => { this.initNavParam(); }); }); } } /** * 初始化导航参数 * * @memberof STabExpView_layouttabviewpanel3Base */ public initNavParam(){ if(!Object.is(this.navfilter,"")){ Object.assign(this.viewparams,{[this.navfilter]:this.context['ibizsample0003']}) } if(this.localContext && Object.keys(this.localContext).length >0){ let _context:any = this.$util.computedNavData(this.activeData?JSON.parse(this.activeData):{},this.context,this.viewparams,this.localContext); Object.assign(this.context,_context); } if(this.localViewParam && Object.keys(this.localViewParam).length >0){ let _param:any = this.$util.computedNavData(this.activeData?JSON.parse(this.activeData):{},this.context,this.viewparams,this.localViewParam); Object.assign(this.viewparams,_param); } this.viewdata =JSON.stringify(this.context); this.viewparam = JSON.stringify(this.viewparams); } /** * 视图数据变化 * * @memberof STabExpView_layouttabviewpanel3Base */ public viewDatasChange($event:any){ this.$emit('viewpanelDatasChange',$event); } /** * vue 生命周期 * * @memberof STabExpView_layouttabviewpanel3Base */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof STabExpView_layouttabviewpanel3Base */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } } </script> <style lang='scss'> @import './stab-exp-view-layouttabviewpanel3-tabviewpanel.scss'; </style>