zhangyanpeng
2024-05-29 1f227a1cf627526701c652ba84bae3e430bba8d3
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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
        <title>新界面</title>
        
        <script type="text/javascript">
            var vue_ = null;
            var pageVue = null;
            function loadJsCss(callback) {
                var jscss_urls = [];
                window.top.initJsCss(document, jscss_urls, callback);
            };
            
            function initVue() {
                vue_ = new FormVue({
                    el: "#vbody",
                    data: {
                        title: "新界面",
                        delta: {},
                        
                        popupParames: {},
                    },
                    created() {
                        this.popupParames = clone(Root.popupParames);
                        this.title = this.popupParames.title || this.popupParames.text
                        if (this.popupParames.delta) {
                            this.delta = this.popupParames.delta;
                        }
                    },
                    
                    mounted() {
                        var me = this;
                        // this.initData();
                        
                        // 以服务的方式调用的 Loading 需要异步关闭
                        this.$nextTick(() => { 
                            hideLoading();
                            
                            //重新设置弹窗宽高
                            this.$nextTick(function(){
                                //let w_ = this.$refs.popup_body.offsetWidth + "px";
                                let w_ = "500px";
                                let h_ = this.$refs.popup_body.offsetHeight + "px";
                                Root.setPopupWH(w_, h_);
                            })
                        });
                    },
                    
                    methods:{
                        //关闭弹窗
                        closeDialog() {
                            var me = this;
                            if (me.popupParames.totab){
                                Root.tab.removeItem(Root.tab.selected);
                                Root.tab.open(me.popupParames.parentOption, false); 
                            }
                            else {
                                Root.hidePopup();
                            }
                        },
                        //关闭前调回调
                        saveAfter() {
                            var me = this;
                            if(this.popupParames.callback) {
                                let obj = {
                                    //row: this.formData
                                }
                                this.popupParames.callback(obj, function() {
                                    me.closeDialog();
                                });
                            }
                            else {
                                me.closeDialog();
                            }
                        },
                        
                        initData() {
                            let me = this;
                            var url = this.delta.url;
                            
                            uploadAxios.get(url).then(filedata => {
                                me.$refs.formdesigner.document.open();
                                me.$refs.formdesigner.document.write(filedata);
                                me.$refs.formdesigner.document.close();
                            }).catch(error => {
                                console.error(error);
                            });
                            
                        },
                        
                        
                    
                    }
                });
            };
            
            loadJsCss(function () {
                initVue();
            });
        </script>
        <style>
            /*  在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
            [v-cloak] {
                display: none !important;
            }
        </style>
        
    </head>
    
    <body style="margin: 0px;">
        <div v-cloak id="vbody">
            <div id="page_root">
                <div ref="popup_body" style="padding: 0 20px; height: 80vh;">
                    <!-- <div class="el-dialog__header">
                        <div class="dialog-title">
                          <i class="iconfont icon-customermanagement"></i>
                          <span> {{title}}</span>
                        </div>
                    </div> -->
                    <div style="position: absolute; left: 10px; right: 10px; top: 0px; bottom: 50px; overflow-y: auto;">
                        <div class="" style="height: 85vh;" align="center">
                            <iframe ref="formdesigner" style="width: 100%; height: 100%;" frameborder="0" :src="delta.url"></iframe>
                        </div>
                    </div>
                    <div class="el-dialog__footer" style="position: absolute; left: 10px; right: 10px; bottom: 0px;">
                        <el-button size="small" type="default" @click="closeDialog">关 闭</el-button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
            <div class="spinner">
              <div class="cube1"></div>
              <div class="cube2"></div>
            </div>
        </div>
    </body>
</html>