<template> <modal ref="curmodal" :class-name="`app-modal ${style && style.height ? 'modal-height' : ''}`" v-model="isShow" :fullscreen="isfullscreen" :title="title" :footerHide="true" :maskClosable="false" :width="width" :styles="style" :zIndex="zIndex" @on-visible-change="onVisibleChange($event)" > <component :is="viewname" class="view-container2" :dynamicProps="{ viewdata: JSON.stringify(viewdata), viewparam: JSON.stringify(viewparams), navdatas: navdatas, }" :staticProps="{ viewDefaultUsage: false, viewModelData: view.viewModelData, noViewCaption: true }" @viewdataschange="dataChange($event)" @viewdatasactivated="viewDatasActivated($event)" @close="close($event)" :ref="viewname" ></component> </modal> </template> <script lang="ts"> import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator'; import { Subject } from 'rxjs'; import {AppModal} from './app-modal' @Component({ components: {}, }) export default class AppModalCompponent extends Vue { /** * 视图UI参数 * * @type {any} * @memberof AppModal */ @Prop() public view!: any; /** * 视图上下文参数 * * @type {any} * @memberof AppModal */ @Prop({ default: {} }) public viewdata?: any; /** * 视图参数 * * @type {any} * @memberof AppModal */ @Prop({ default: {} }) public viewparams?: any; /** * 导航数据 * * @type {*} * @memberof AppModal */ @Prop({ default: [] }) public navdatas?: any; /** * 数据传递对象 * * @type {any} * @memberof AppModal */ public subject: null | Subject<any> = new Subject<any>(); /** * 是否显示 * * @type {boolean} * @memberof AppModal */ public isShow: boolean = false; /** * 是否满屏 * * @type {boolean} * @memberof AppModal */ public isfullscreen: boolean = false; /** * 零时结果 * * @type {any} * @memberof AppModal */ public tempResult: any = { ret: '' }; /** * 视图名称 * * @type {string} * @memberof AppModal */ public viewname: string = ''; /** * 视图标题 * * @type {string} * @memberof AppModal */ public title: string = ''; /** * 视图宽度 * * @type {number} * @memberof AppModal */ public width: number = 0; /** * 视图层级 * * @type {any} * @memberof AppModal */ public zIndex: any = null; /** * 视图样式 * * @type {any} * @memberof AppModal */ public style: any = {}; /** * 获取数据传递对象 * * @memberof AppModal */ public getSubject() { return this.subject; } /** * Vue生命周期created * * @memberof AppModal */ public created() { this.viewname = this.view.viewname; this.title = this.view.title; this.isfullscreen = this.view.isfullscreen ? this.view.isfullscreen : false; if (this.isfullscreen) { this.isfullscreen = true; Object.assign(this.style, { height: 'auto' }); } else { if (!this.view.width || this.view.width === 0 || Object.is(this.view.width, '0px')) { let width = 600; if (window && window.innerWidth > 100) { if (window.innerWidth > 100) { width = window.innerWidth - 100; } else { width = window.innerWidth; } } this.width = width; } else { this.width = this.view.width; } if (this.view.height && !Object.is(this.view.height, '0px')) { Object.assign(this.style, { height: this.view.height + 'px' }); } } } /** * Vue生命周期mounted * * @memberof AppModal */ public mounted() { const curmodal: any = this.$refs.curmodal; curmodal.handleGetModalIndex = () => { return 0; }; const zIndex = this.$store.getters.getZIndex(); if (zIndex) { this.zIndex = zIndex + 100; this.$store.commit('updateZIndex', this.zIndex); } this.isShow = true; } /** * Vue生命周期beforeDestroy * * @memberof AppModal */ public beforeDestroy() { if (this.zIndex) { const zIndex: any = this.zIndex; this.$store.commit('updateZIndex', zIndex - 100); } } /** * 视图关闭 * * @memberof AppModal */ public close(result: any) { if (result && Array.isArray(result) && result.length > 0) { Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) }); } this.isShow = false; } /** * 视图数据变化 * * @memberof AppModal */ public dataChange(result: any) { this.tempResult = { ret: '' }; if (result && Array.isArray(result) && result.length > 0) { Object.assign(this.tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) }); } } /** * 视图数据激活 * * @memberof AppModal */ public viewDatasActivated(result: any) { if (result && Array.isArray(result) && result.length > 0) { this.close(result); } } /** * 模态显示隐藏切换回调 * * @memberof AppModal */ public onVisibleChange($event: any) { const component: any = this.$refs[this.viewname]; if (component) { const viewInstance = component.$children[0]; const viewDataChange = this.$store.getters["viewAction/getStateByViewTag"](viewInstance?.viewtag); if (viewDataChange) { this.isShow = true; const title: any = this.$t('app.tabpage.sureclosetip.title'); const contant: any = this.$t('app.tabpage.sureclosetip.content'); this.$Modal.confirm({ title: title, content: contant, onOk: () => { this.$store.commit('viewAction/removeViewByViewTag', viewInstance.viewtag); this.isShow = false; }, onCancel: () => { this.isShow = true; } }); } else { this.handleShowState($event); } } } /** * 处理数据,向外抛值 * * @memberof AppModal */ public handleShowState($event: any) { if ($event) { return; } if (this.subject && this.tempResult) { this.subject.next(this.tempResult); } setTimeout(() => { document.body.removeChild(this.$el); this.$destroy(); AppModal.getInstance().destroyVueExample(); this.subject = null; }, 500); } } </script> <style lang="less" scoped> @import './app-modal.less'; </style>