<template> <div class="app-dr-tab"> <div v-for="(item, index) in items" :class="{ 'app-dr-tab-item': true, 'dr-tab-item': true, 'is-disabled': item.disabled, 'is-active': selection.id === item.id }" @click="handleDrTabChange(item)"> <span class="text">{{ item.text }}</span> </div> </div> </template> <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 DemoIBIZORDERCounterService from '@/counter/demo-ibizorder/demo-ibizorder-counter'; import IBIZOrderEntityService from '@/service/ibizorder/ibizorder-service'; import DefaultService from './default-drtab-service'; import IBIZOrderUIService from '@/uiservice/ibizorder/ibizorder-ui-service'; @Component({ components: { } }) export default class DefaultBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof DefaultBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof DefaultBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof DefaultBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof DefaultBase */ @Prop() public viewparams!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof DefaultBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof DefaultBase */ public getControlType(): string { return 'DRTAB' } /** * DemoIBIZORDERCounterService计数器服务对象 * * @type {DemoIBIZORDERCounterService} * @memberof DefaultBase */ public demoibizordercounterservice: DemoIBIZORDERCounterService = new DemoIBIZORDERCounterService({context:this.context,viewparams:this.viewparams}); /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof DefaultBase */ public counterServiceArray:Array<any> = [this.demoibizordercounterservice]; /** * 建构部件服务对象 * * @type {DefaultService} * @memberof DefaultBase */ public service: DefaultService = new DefaultService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZOrderService} * @memberof DefaultBase */ public appEntityService: IBIZOrderEntityService = new IBIZOrderEntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof DefaultBase */ 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 DefaultBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof DefaultBase */ 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(); } }) } } /** * 是否默认加载数据 * * @type {boolean} * @memberof DefaultBase */ @Prop({ default: false }) public selectDefault?: boolean; /** * 应用实体参数名称 * * @type string * @memberof DefaultBase */ @Prop() public parentName!: string; /** * 表单数据 * * @type {*} * @memberof DefaultBase */ public formData: any; /** * 获取多项数据 * * @returns {any[]} * @memberof DefaultBase */ public getDatas(): any[] { return this.items; } /** * 获取单项树 * * @returns {*} * @memberof DefaultBase */ public getData(): any { return this.selection; } /** * 数据选中项 * * @type {*} * @memberof DefaultBase */ public selection: any = {}; /** * 父数据 * * @public * @type {*} * @memberof DefaultBase */ public parentData: any = {}; /** * 关系栏数据项 * * @type {any[]} * @memberof DefaultBase */ public items: any[] = [ { id: 'e3de96606cd87a3561ec172c1da48022', name: 'e3de96606cd87a3561ec172c1da48022', text: '订单明细', disabled: true, navView: 'ibizorder-detail-sgrid-view', localContext: {CONTEXTPARAM1:"%orderstate%"}, localViewParam: {param2:"%orderstate%"} } ]; /** * 生命周期 * * @memberof DefaultBase */ public created(): void { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof DefaultBase */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } if (Object.is('state', action)) { this.handleFormDataChange(data); } if (Object.is('change', action)) { this.selection = data; } }); } } /** * vue 生命周期 * * @memberof DefaultBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof DefaultBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } /** * 处理表单数据变化 * * @memberof DefaultBase */ public handleFormDataChange(data: any) { this.formData = data; if (data && Object.is(data.srfuf, '1')) { this.items.forEach((item: any) => { item.disabled = false; }) } else { this.items.forEach((item: any) => { item.disabled = true; }) } if (this.selectDefault && this.items.length > 0) { this.handleDrTabChange(this.items[0]); } } /** * 处理分页项变化 * * @memberof DefaultBase */ public handleDrTabChange(item: any) { if (this.selection && this.selection.id === item.id) { return; } this.selection = item; const tempContext = Util.deepCopy(this.context); const tempViewParams = Util.deepCopy(this.viewparams); if (item.localContext && Object.keys(item.localContext).length > 0) { const _context: any = this.$util.computedNavData(this.formData, tempContext, tempViewParams, item.localContext); Object.assign(tempContext, _context); } if (this.formData.srfparentkey) { Object.assign(tempContext, { srfparentkey: this.formData.srfparentkey }); Object.assign(tempViewParams, { srfparentkey: this.formData.srfparentkey }); } if (item.localViewParam && Object.keys(item.localViewParam).length > 0) { const _params: any = this.$util.computedNavData(this.formData, tempContext, tempViewParams, item.localViewParam); Object.assign(tempViewParams, _params); } if (this.formData.srfparentdename) { Object.assign(tempContext, { srfparentdename: this.formData.srfparentdename }); Object.assign(tempViewParams, { srfparentdename: this.formData.srfparentdename }); } const drItem = { id: item.id, navView: item.navView, srfnavdata: { context: tempContext, viewparams: tempViewParams } } this.$emit('selectionchange', drItem); } } </script> <style lang='less'> @import './default-drtab.less'; </style>