<template> <div class='tabviewpanel' style="height:100%;"> <tabs :value="activiedTabViewPanel" :animated="false" class='tabexppanel' name='stabexpview_layouttabexppanel' @on-click="tabPanelClick"> <tab-pane :index="0" name='tabviewpanel3' tab='stabexpview_layouttabexppanel' class='' v-if="authResourceObject['tabviewpanel3'].visabled" :label="(h) =>{ return h('div', [ h('span', '软件'), h('Badge', { props: { count: undefined, type: 'primary' } }) ]) }" > <view_tabviewpanel3 :viewState="viewState" :viewparams="JSON.parse(JSON.stringify(viewparams))" :context="JSON.parse(JSON.stringify(context))" :activeData="JSON.stringify(activeData)" v-if="isInit.tabviewpanel3" name="tabviewpanel3" ref='tabviewpanel3' @viewpanelDatasChange = "tabViewPanelDatasChange" @closeview="closeView($event)"> </view_tabviewpanel3> </tab-pane> <tab-pane :index="1" name='tabviewpanel2' tab='stabexpview_layouttabexppanel' class='' v-if="authResourceObject['tabviewpanel2'].visabled" :label="(h) =>{ return h('div', [ h('span', '硬件'), h('Badge', { props: { count: undefined, type: 'primary' } }) ]) }" > <view_tabviewpanel2 :viewState="viewState" :viewparams="JSON.parse(JSON.stringify(viewparams))" :context="JSON.parse(JSON.stringify(context))" :activeData="JSON.stringify(activeData)" v-if="isInit.tabviewpanel2" name="tabviewpanel2" ref='tabviewpanel2' @viewpanelDatasChange = "tabViewPanelDatasChange" @closeview="closeView($event)"> </view_tabviewpanel2> </tab-pane> </tabs> </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_layouttabexppanelService from './stab-exp-view-layouttabexppanel-tabexppanel-service'; import IBIZSample0003UIService from '@/uiservice/ibizsample0003/ibizsample0003-ui-service'; import IBIZSample0003AuthService from '@/authservice/ibizsample0003/ibizsample0003-auth-service'; import { Environment } from '@/environments/environment'; @Component({ components: { } }) export default class STabExpView_layouttabexppanelBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public viewparams!: any; /** * 视图操作参数(父级) * * @type {*} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public pViewCtx!: any; /** * 视图操作参数 * * @type {*} * @memberof STabExpView_layouttabexppanelBase */ public viewCtx: any = {}; /** * 监听视图操作参数变化 * * @type {*} * @memberof STabExpView_layouttabexppanelBase */ @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_layouttabexppanelBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof STabExpView_layouttabexppanelBase */ public getControlType(): string { return 'TABEXPPANEL' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof STabExpView_layouttabexppanelBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {STabExpView_layouttabexppanelService} * @memberof STabExpView_layouttabexppanelBase */ public service: STabExpView_layouttabexppanelService = new STabExpView_layouttabexppanelService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZSample0003Service} * @memberof STabExpView_layouttabexppanelBase */ public appEntityService: IBIZSample0003EntityService = new IBIZSample0003EntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof STabExpView_layouttabexppanelBase */ 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_layouttabexppanelBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof STabExpView_layouttabexppanelBase */ 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_layouttabexppanelBase */ 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; } /** * 实体权限服务对象 * * @type {IBIZSample0003AuthService} * @memberof TabExpViewtabexppanelBase */ public appAuthService: IBIZSample0003AuthService = new IBIZSample0003AuthService(); /** * 界面UI服务对象 * * @type {IBIZSample0003UIService} * @memberof STabExpView_layouttabexppanelBase */ public appUIService:IBIZSample0003UIService = new IBIZSample0003UIService(); /** * 是否初始化 * * @returns {any} * @memberof STabExpView_layouttabexppanelBase */ public isInit: any = { tabviewpanel3: true , tabviewpanel2: false , } /** * 获取多项数据 * * @returns {any[]} * @memberof STabExpView_layouttabexppanelBase */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof STabExpView_layouttabexppanelBase */ public getData(): any { return null; } /** * 从父传入的当前分页面板panel值 * * @type {string} * @memberof STabExpView_layouttabexppanelBase */ @Prop() public tabValue?: string; /** * 值变化 * * @param {*} newVal * @param {*} oldVal * @memberof STabExpView_layouttabexppanelBase */ @Watch('tabValue') public onValueChange(newVal: any, oldVal: any) { this.tabPanelClick(newVal); } /** * 行为参数 * * @public * @type {*} * @memberof STabExpView_layouttabexppanelBase */ public action:any = ''; /** * 当前激活数据 * * @public * @type {*} * @memberof STabExpView_layouttabexppanelBase */ public activeData:any = {}; /** * 分页面板权限标识存储对象 * * @public * @type {*} * @memberof STabExpView_layouttabexppanelBase */ public authResourceObject:any = {'tabviewpanel3':{resourcetag:null,visabled: true,disabled: false},'tabviewpanel2':{resourcetag:null,visabled: true,disabled: false}}; /** * 被激活的分页面板 * * @type {string} * @memberof STabExpView_layouttabexppanelBase */ public activiedTabViewPanel: string = 'tabviewpanel3'; /** * 计算分页面板权限 * * @memberof STabExpView_layouttabexppanelBase */ public computedAuthPanel(data:any){ if(!data || Object.keys(data).length === 0){ return; } if(this.authResourceObject && Object.keys(this.authResourceObject).length >0){ Object.keys(this.authResourceObject).forEach((key:string) =>{ if(this.authResourceObject[key] && this.authResourceObject[key]['dataaccaction']){ let tempUIAction:any = Util.deepCopy(this.authResourceObject[key]); let result: any[] = ViewTool.calcActionItemAuthState(data,[tempUIAction],this.appUIService); this.authResourceObject[key].visabled = this.computedPanelWithResource(key,tempUIAction.visabled); this.authResourceObject[key].disabled = this.computedPanelWithResource(key,tempUIAction.disabled); } }) const keys:any = Object.keys(this.authResourceObject); for(let i=0;i<keys.length;i++){ if(this.authResourceObject[keys[i]].visabled){ this.tabPanelClick(keys[i]); return; } } } } /** * 合入统一资源权限 * * @memberof STabExpView_layouttabexppanelBase */ public computedPanelWithResource(name:string,mainState:boolean){ if(!this.$store.getters['authresource/getEnablePermissionValid']) return mainState === false?false:true; if(!this.authResourceObject[name]) return mainState === false?false:true; const resourceAuth:boolean = this.appAuthService.getResourcePermission(this.authResourceObject[name]['resourcetag']); return !resourceAuth?false:mainState?true:false; } /** * 分页视图面板数据变更 * * @memberof STabExpView_layouttabexppanelBase */ public tabViewPanelDatasChange(){ this.counterRefresh(); } /** * vue 生命周期 * * @memberof STabExpView_layouttabexppanelBase */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof STabExpView_layouttabexppanelBase */ public afterCreated(){ //设置分页导航srfparentdename和srfparentkey if(this.context.ibizsample0003){ Object.assign(this.context,{srfparentdename:'IBIZSample0003',srfparentkey:this.context.ibizsample0003}) } if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } if(Object.is(action,'loadmodel')){ this.activeData = data; this.computedAuthPanel(data); }else{ this.action = action; this.viewState.next({ tag: this.activiedTabViewPanel, action: action, data: data }); this.$forceUpdate(); } }); } } /** * vue 生命周期 * * @memberof STabExpView_layouttabexppanelBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof STabExpView_layouttabexppanelBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } /** * 分页面板选中 * * @param {*} $event * @returns * @memberof STabExpView_layouttabexppanelBase */ public tabPanelClick($event: any) { if (!$event) { return; } this.isInit = []; this.isInit[$event] = true; if (!this.viewState) { return; } this.activiedTabViewPanel = $event; this.viewState.next({ tag: this.activiedTabViewPanel, action: this.action, data: this.activeData}); } } </script> <style lang='scss'> @import './stab-exp-view-layouttabexppanel-tabexppanel.scss'; </style>