1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<div class="app-modal">
<component
:is="viewName"
class="view-container2"
:dynamicProps="{ _context: JSON.stringify(context), _viewparams: JSON.stringify(viewparams) }"
:staticProps="{ viewDefaultUsage: 'INCLUDEDVIEW', viewModelData: view.viewModelData }"
@viewdataschange="dataChange($event)"
@close="close($event)"
:ref="viewName"
>
</component>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Subject } from 'rxjs';
@Component({
components: {},
})
export default class AppModalComponent extends Vue {
/**
* 视图参数
*
* @type {*}
* @memberof AppModalComponent
*/
@Prop() public view!: any;
/**
* 视图动态参数
*
* @type {any}
* @memberof AppDrawerCompponent
*/
@Prop({ default: {} }) public context?: any;
/**
* 视图静态参数
*
* @type {any}
* @memberof AppDrawerCompponent
*/
@Prop({ default: {} }) public viewparams?: any;
/**
* 数据传递对象
*
* @type {(null | Subject<any>)}
* @memberof AppModalComponent
*/
public subject: null | Subject<any> = new Subject<any>();
/**
* 临时结果
*
* @type {*}
* @memberof AppModalComponent
*/
public tempResult: any = { ret: '' };
/**
* 视图名称
*
* @type {string}
* @memberof AppModalComponent
*/
public viewName: string = '';
/**
* 获取数据传递对象
*
* @returns {(null | Subject<any>)}
* @memberof AppModalComponent
*/
public getSubject(): null | Subject<any> {
return this.subject;
}
/**
* Vue生命周期created
*
* @memberof AppModalComponent
*/
public created() {
this.viewName = this.view.viewname;
}
/**
* 视图关闭
*
* @memberof AppModalComponent
*/
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.onVisibleChange(true);
}
/**
* 视图数据变化
*
* @memberof AppModalComponent
*/
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 AppModalComponent
*/
public async onVisibleChange($event: any): Promise<any> {
const component: any = this.$refs[this.viewName];
if (component) {
this.handleShowState($event);
}
}
/**
* 处理数据，向外抛值
*
* @memberof AppModalComponent
*/
public handleShowState($event: any) {
if (!$event) {
return;
}
if (this.subject) {
if (this.tempResult && Object.is(this.tempResult.ret, 'OK')) {
this.subject.next(this.tempResult);
} else {
this.subject.complete();
}
}
}
}
</script>
<style lang="less">
@import './app-modal.less';
</style>