<template> <split class='app-workflow-exp-bar' v-model="split"> <div slot='left'> <div class='workflow-exp-bar-header'> <div><icon type='ios-home-outline'/>{{$t('app.wfExpBar.title')}}</div> </div> <div class='workflow-exp-content'> <el-menu class="el-menu-vertical-demo" @select="select"> <el-submenu index="wfstep"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">订单审批</span> </template> <el-menu-item index="wfstep-1">发起人调整</el-menu-item> <el-menu-item index="wfstep-5">部门经理审核</el-menu-item> <el-menu-item index="wfstep-10">财务经理审核</el-menu-item> <el-menu-item index="wfstep-20">总经理审核</el-menu-item> <el-menu-item index="wfstep-30">财务总监审批</el-menu-item> </el-submenu> </el-menu> </div> </div> <div slot='right'> <component v-if="selection && !Object.is(this.selection.viewName, '')" :is="selection.viewName" class="viewcontainer2" :viewDefaultUsage="false" :viewdata="JSON.stringify(selection.data)" @viewdataschange="onViewDatasChange" @viewdatasactivated="viewDatasActivated" @viewload="onViewLoad"> </component> </div> </split> </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 WFExpBarCounterService from '@/counter/wfexp-bar/wfexp-bar-counter'; import IBIZOrderService from '@/service/ibizorder/ibizorder-service'; import ODSP_WFExpViewexpbarService from './odsp-wfexp-viewexpbar-wfexpbar-service'; import IBIZOrderUIService from '@/uiservice/ibizorder/ibizorder-ui-service'; @Component({ components: { } }) export default class ODSP_WFExpViewexpbarBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof ODSP_WFExpViewexpbarBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof ODSP_WFExpViewexpbarBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof ODSP_WFExpViewexpbarBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof ODSP_WFExpViewexpbarBase */ @Prop() public viewparams!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof ODSP_WFExpViewexpbarBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof ODSP_WFExpViewexpbarBase */ public getControlType(): string { return 'WFEXPBAR' } /** * WFExpBarCounterService计数器服务对象 * * @type {WFExpBarCounterService} * @memberof ODSP_WFExpViewexpbarBase */ public wfexpbarcounterservice: WFExpBarCounterService = new WFExpBarCounterService({$store: this.$store,context:this.context,viewparams:this.viewparams}); /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof ODSP_WFExpViewexpbarBase */ public counterServiceArray:Array<any> = [this.wfexpbarcounterservice]; /** * 建构部件服务对象 * * @type {ODSP_WFExpViewexpbarService} * @memberof ODSP_WFExpViewexpbarBase */ public service: ODSP_WFExpViewexpbarService = new ODSP_WFExpViewexpbarService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZOrderService} * @memberof ODSP_WFExpViewexpbarBase */ public appEntityService: IBIZOrderService = new IBIZOrderService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof ODSP_WFExpViewexpbarBase */ 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 ODSP_WFExpViewexpbarBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof ODSP_WFExpViewexpbarBase */ 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(); } }) } } /** * 获取多项数据 * * @returns {any[]} * @memberof ODSP_WFExpViewexpbarBase */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof ODSP_WFExpViewexpbarBase */ public getData(): any { return {}; } /** * 选中数据 * * @type {*} * @memberof ODSP_WFExpViewexpbarBase */ public selection: any = {}; /** * 可搜索字段名称 * * * @type {(string)} * @memberof ODSP_WFExpViewexpbarBase */ public placeholder="订单名称"; /** * 过滤值 * * @type {string} * @memberof ODSP_WFExpViewexpbarBase */ public srffilter: string = ''; /** * 关联视图信息集合 * * @public * @type {boolean} * @memberof ODSP_WFExpViewexpbarBase */ public refViews: any = [ { viewName:"ibizorder-odsp-d30-wfgrid-view", wfstepValue:"30", }, { viewName:"ibizorder-odsp-d-wfgrid-view", wfstepValue:"", }, { viewName:"ibizorder-odsp-d20-wfgrid-view", wfstepValue:"20", }, { viewName:"ibizorder-odsp-d40-wfgrid-view", wfstepValue:"40", }, { viewName:"ibizorder-odsp-d10-wfgrid-view", wfstepValue:"10", }, { viewName:"ibizorder-odsp-w10-wfgrid-view", wfstepValue:"10", }, { viewName:"ibizorder-odsp-w-wfgrid-view", wfstepValue:"", }, ]; /** * 分割宽度 * * @type {string} * @memberof ODSP_WFExpViewexpbarBase */ public split: number = 0.2; /** * 获取关系项视图 * * @param {*} [arg={}] * @returns {*} * @memberof ODSP_WFExpViewexpbarBase */ public select(index: any, indexs: any[]) { this.refViews.some((item:any) =>{ if(Object.is("wfstep-"+item.wfstepValue, index)){ this.selection = { viewName: item.viewName }; return true; } }); } /** * vue 声明周期 * * @memberof ODSP_WFExpViewexpbar */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof ODSP_WFExpViewexpbarBase */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } }); } } /** * vue 生命周期 * * @memberof ODSP_WFExpViewexpbarBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof ODSP_WFExpViewexpbarBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } /** * 视图数据变化 * * @param {*} $event * @memberof ODSP_WFExpViewexpbarBase */ public onViewDatasChange($event: any): void { this.$emit('selectionchange', $event); } /** * 视图数据被激活 * * @param {*} $event * @memberof ODSP_WFExpViewexpbarBase */ public viewDatasActivated($event: any): void { this.$emit('activated', $event); } /** * 视图数据加载完成 * * @param {*} $event * @memberof ODSP_WFExpViewexpbarBase */ public onViewLoad($event: any): void { this.$emit('load', $event); } } </script> <style lang='less'> @import './odsp-wfexp-viewexpbar-wfexpbar.less'; </style>