import Vue from 'vue'; import { Subject } from 'rxjs'; import AppDrawerCompponent from "./app-drawer.vue"; import { appTopDrawerContainer } from '../app-top-drawer/app-top-drawer-container'; import { AppServiceBase, LogUtil } from 'ibiz-core'; export class AppDrawer { /** * 实例对象 * * @private * @static * @memberof AppDrawer */ private static readonly $drawer = new AppDrawer(); /** * store对象 * * @private * @memberof AppDrawer */ private store: any; /** * i18n对象 * * @private * @memberof AppDrawer */ private i18n: any; /** * router对象 * * @private * @memberof AppDrawer */ private router: any; /** * 构造方法 * * @memberof AppDrawer */ constructor() { this.initBasicData(); if (AppDrawer.$drawer) { return AppDrawer.$drawer; } } /** * 初始化基础数据 * * @memberof AppDrawer */ private initBasicData(){ const appService = AppServiceBase.getInstance(); this.store = appService.getAppStore(); this.i18n = appService.getI18n(); this.router = appService.getRouter(); } /** * vue 实例 * * @private * @type {Vue | null} * @memberof AppDrawer */ private vueExample:Vue | null = null; /** * 获取实例对象 * * @static * @returns * @memberof AppDrawer */ public static getInstance() { return AppDrawer.$drawer; } /** * 创建 Vue 实例对象 * * @private * @param {{ viewname: string, title: string, width?: number, height?: number, placement?: any }} view * @param {*} [context={}] 应用上下文参数 * @param {*} [viewparams={}] 视图参数 * @param {string} uuid 标识 * @returns {Subject<any>} * @memberof AppDrawer */ private createVueExample(view: { viewname: string, title: string, width?: number, height?: number, placement?: any }, dynamicProps: any = {}, staticProps: any = {}, uuid: string): Subject<any> { const self: any = this; if(!self.store || !self.i18n) { self.initBasicData(); } try { let props = { view: view, dynamicProps: dynamicProps, staticProps: staticProps, uuid: uuid }; this.vueExample = new Vue({ store: this.store, router: this.router, i18n: this.i18n, render(h) { return h(AppDrawerCompponent, { props }); } }).$mount(); document.body.appendChild(this.vueExample.$el); const comp: any = this.vueExample.$children[0]; return comp.getSubject(); } catch (error) { console.error(error); return new Subject<any>(); } } /** * 打开抽屉 * * @param {({ viewname: string, title: string, width?: number, height?: number, placement?: 'DRAWER_LEFT' | 'DRAWER_RIGHT' })} view 视图 * @param {*} [context={}] 应用上下文参数 * @param {any[]} deResParameters 关系实体参数对象 * @param {any[]} parameters 当前应用视图参数对象 * @param {any[]} args 多项数据 * @param {*} [data={}] 行为参数 * @returns {Subject<any>} * @memberof AppDrawer */ public openDrawer(view: { viewname: string, title: string, width?: number, height?: number, placement?: 'DRAWER_LEFT' | 'DRAWER_RIGHT' }, dynamicProps: any = {}, staticProps: any = {}): Subject<any> { if (view.placement && Object.is(view.placement, 'DRAWER_TOP')) { return appTopDrawerContainer.openDrawer(view, dynamicProps, staticProps) as any; } try { const uuid = this.getUUID(); const subject = this.createVueExample(view, dynamicProps, staticProps, uuid); return subject; } catch (error) { LogUtil.log(error); return new Subject<any>(); } } /** * 打开上方抽屉 * * @param {({ viewname: string, title: string, width?: number, height?: number, placement?: 'DRAWER_LEFT' | 'DRAWER_RIGHT' })} view 视图 * @param {*} [context={}] 应用上下文参数 * @param {any[]} deResParameters 关系实体参数对象 * @param {any[]} parameters 当前应用视图参数对象 * @param {any[]} args 多项数据 * @param {*} [data={}] 行为参数 * @returns {Subject<any>} * @memberof AppDrawer */ public openTopDrawer(view: { viewname: string, title: string, width?: number, height?: number, placement?: 'DRAWER_TOP' }, dynamicProps: any = {}, staticProps: any = {}): Subject<any> { return appTopDrawerContainer.openDrawer(view, dynamicProps, staticProps) as any; } /** * 生成uuid * * @private * @returns {string} * @memberof AppDrawer */ private getUUID(): string { function s4() { return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } /** * @description 销毁临时vue对象 * @memberof AppDrawer */ destroyVueExample() { if (this.vueExample) { this.vueExample.$destroy(); this.vueExample = null; } } }