-
Notifications
You must be signed in to change notification settings - Fork 229
/
split.html
231 lines (228 loc) · 9.64 KB
/
split.html
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link type="image/x-icon" href="//gw.alicdn.com/tfs/TB1gRomUlr0gK0jSZFnXXbRRXXa-200-200.png" rel="shortcut icon">
<title>拆分模式测试页</title>
<style>
html,body{margin:0;padding:0;overflow:hidden;height:100%;background:#fff}
.head{display: flex;height:40px;align-items: center;box-shadow: 0 1px #ccc;font-size: 14px;padding-left: 40px}
*{box-sizing: border-box;}
#toolbar{
height: 35px;
border-bottom: solid 1px #eee;
border-top: solid 1px #eee;
background-color: #fcfcfc;
padding: 0 60px;
min-width: 1100px;
display: flex;
align-items: center;
overflow: hidden;
}
#header{
height: 40px;
background-color:/*d-cb<*/var(--rd-bo)/*>d-cb*/;
color:#fff;
padding: 0 40px 0 20px;
margin:10px 0;
min-width: 1100px;
display: flex;
position: relative;
z-index: 202;
}
#left{
width:190px;
height: 100%;
border: #ccc solid 1px;
margin:0 10px;
flex-shrink: 0;
}
#right{
width:200px;
height: 100%;
border: #ccc solid 1px;
margin:0 10px;
flex-shrink: 0;
}
#right2{
width:260px;
height: 100%;
border: #ccc solid 1px;
margin:0 10px 0 0;
flex-shrink: 0;
}
#app{
flex:1;
height:100%;
border:solid 1px #ccc;
width: 0px;
}
#foot{
height: 130px;
background-color: #fcfcfc;
margin: 10px;
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="head">
拆分模式测试
<button style="margin-left: 100px;" id="destroy-rd">销毁设计器</button>
<button style="margin-left: 10px;" disabled id="setup-rd">安装设计器</button>
<button style="margin-left: 10px;" id="virtual">虚拟渲染</button>
<button style="margin-left: 10px;" id="print">打印</button>
<div style="margin-left: 10px;">界面全模块化，可任意拆解组装</div>
</div>
<div id="toolbar">
</div>
<div id="header">
</div>
<div style="display:flex;height: calc(100% - 285px);">
<div id="left">
left
</div>
<div id="app">
<div style="display: flex;align-items: center;justify-content: center; height: 100%;">
这里可以放一个加载动画...
</div>
</div>
<div id="right">
right
</div>
<div id="right2">
right2
</div>
</div>
<div id="foot">
</div>
<script src="dist/designer.js?v=202405180834"></script>
<script>
//--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
if(!CSS.supports('overflow:clip')||
!CSS.supports('inset:auto')){
console.error('unsupport browser: '+navigator.userAgent);
}
if(!location.protocol.startsWith('http')){
alert('请配置一个web服务器,通过http的方式访问~')
}
//---end---
let setup=()=>{
designer.setup({
version:'202405180834',
rootId:'app',
split:true,//一定要配置split为true，表示拆分模式
panels:{//把内置的浮动面板渲染到现有的节点里
//内置的所有面板清单
/*
animate 动画面板
data 数据源面板
debug 调试面板
draft 暂存面板
element 元素面板
outline 概览图面板
props 属性面板
record 历史记录面板
resource 图片资源面板
tree 结构树面板
https://xinglie.github.io/report-designer 可查看所有内置面板的功能
*/
resource:{//资源面板
scroll:true,//是否滚动
to:'left'//渲染到现有哪个节点里
},
data:{//数据面板
scroll:true,
to:'right'
},
props:{//属性面板
scroll:true,
to:'right2'
},
animate:{//动画面板
to:'foot'
}
},
header:{//设计器的头渲染到哪个节点里
to:'header',
},
toolbar:{//工具栏渲染到哪个节点里
to:'toolbar'
},
viewerUrl:'./viewer.html?from=split',
getImageUrl:'./apis/images.json',
getFieldUrl:'./apis/fields.json',
getTemplateUrl:'./apis/example.json',
getTemplateContentUrl:'./apis/example_${id}.json',
getResourceUrl:'./apis/resource.json',
saveContentUrl:'./apis/content.json'
});
};
let setupBtn=document.getElementById('setup-rd');
let destroyBtn=document.getElementById('destroy-rd');
let virtual = document.getElementById('virtual');
let pt=document.getElementById('print');
setupBtn.addEventListener('click',()=>{
setup();
setupBtn.disabled=true;
destroyBtn.disabled=false;
});
destroyBtn.addEventListener('click',()=>{
designer.destroy();
destroyBtn.disabled=true;
setupBtn.disabled=false;
});
let c = 0;
let { origin } = location;
virtual.addEventListener('click', () => {
let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
//隐藏iframe
let iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
document.body.append(iframe);
let win = iframe.contentWindow;
let listen = async ({ data }) => {
//只有通信数据是自己的才处理
if (data.pId == pId) {
if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
win.postMessage(await designer.get(), origin);
} else {//获取虚拟渲染的内容后，删除iframe并移动事件监听
iframe.remove();
window.removeEventListener('message', listen);
//data.renderData即是包含样式及分好页的数据
console.log(data.renderData);
}
}
};
window.addEventListener('message', listen);
iframe.src = './proxy.html?pId=' + pId;
});
pt.addEventListener('click', () => {
let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
//隐藏iframe
let iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
document.body.append(iframe);
let win = iframe.contentWindow;
let listen = async ({ data }) => {
//只有通信数据是自己的才处理
if (data.pId == pId) {
if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
win.postMessage(await designer.get(), origin);
} else {//获取虚拟渲染的内容后，删除iframe并移动事件监听
iframe.remove();
window.removeEventListener('message', listen);
//data.renderData即是包含样式及分好页的数据
//console.log(data.renderData);
}
}
};
window.addEventListener('message', listen);
iframe.src = './proxy.html?pId=' + pId+'&action=print';
});
setup();
</script>
</body>
</html>