/
index.html
102 lines (102 loc) · 7.58 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="image/x-icon" href="//gw.alicdn.com/tfs/TB1gRomUlr0gK0jSZFnXXbRRXXa-200-200.png" rel="shortcut icon"/>
<title>Loading</title>
<style>html,body{height:100%;overflow:clip;margin:0;padding:0}html{min-width:1200px;margin:0 auto}@keyframes r{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo{width:60px;position:fixed;left:calc(50% - 35px);top:calc(50% - 35px);animation:r 2s linear infinite}</style>
</head>
<body>
<div id="app"><svg class="logo" viewBox="0 0 1024 1024"><path d="M850.1 627.5V388.7c32.8-5.9 59.2-36.7 59.2-71.5 0-40.6-32.8-71.4-71.5-71.4-20.6 0-40.6 10.3-52.9 24.5L581 156.2c2-5.9 3.9-12.2 3.9-20.6 0-40.6-32.8-71.4-71.4-71.4-38.7 0-71.4 32.8-71.4 71.4 0 5.9 2 12.2 2 18.6L240.4 270.7c-16.1-16.1-34.7-26.4-54.8-26.4-40.6 0-71.4 32.8-71.4 71.4 0 34.7 24.5 63.1 57.3 71.4V628c-32.8 8.3-57.3 36.7-57.3 71.4 0 40.6 32.8 71.4 71.4 71.4 20.6 0 40.6-10.3 52.9-24.5l206 114c-3.9 8.3-5.9 18.6-5.9 28.4 0 40.6 32.8 71.4 71.4 71.4 38.7 0 71.4-32.8 71.4-71.4 0-10.3-2-20.6-5.9-30.3l206-112.1c14.2 14.2 32.8 24.5 54.8 24.5 40.6 0 71.4-32.8 71.4-71.4 1.6-37.7-22.8-66-57.6-71.9zM554.5 831.1c-8.3-5.9-16.1-10.3-24.5-12.2V637.3h-34.7v181.6c-10.3 2-20.6 8.3-28.4 14.2L257 716.6c2-5.9 2-12.2 2-18.6 0-32.8-22.5-61.2-52.9-69.5V386.7c12.2-3.9 22.5-8.3 30.3-18.6l152.7 94 18.6-28.4-153.2-94c2-8.3 3.9-14.2 3.9-22.5 0-5.9-2-12.2-2-18.6l204.1-116c12.2 14.2 32.8 22.5 52.9 22.5 20.6 0 38.7-8.3 50.9-22.5l204.1 116.5c-2 5.9-2 12.2-2 18.6 0 8.3 2 14.2 3.9 22.5l-152.7 94 18.6 28.4 150.7-92c8.3 8.3 18.6 14.2 30.3 18.6v242.2c-30.3 8.3-50.9 36.7-50.9 69.5 0 5.9 0 12.2 2 16.1L554.5 831.1zm0 0" fill="#63babd"/><path d="M443.9 577.6c36.7 36.7 95.9 36.7 132.6 0 36.7-36.7 36.7-95.9 0-132.6-36.7-36.7-95.9-36.7-132.6 0-36.7 36.2-36.7 95.9 0 132.6zm0 0" fill="#63babd"/></svg></div>
<script src="dist/designer.js?v=202405180834"></script>
<script type="module">
//--－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 {searchParams}=new URL(location.href);
let id=searchParams.get('id');
//根据是否有id来决定getContentUrl接口如何配置，演示程序因为是静态数据，所以稍显麻烦，搭配后端真实接口代码上会简化很多
let getContentUrl=id?`./apis/example_${id}.json`:'';
designer.setup({
version:'202405180834',
//---start--- 以下配置需要授权
//更多授权版配置：https://github.com/xinglie/report-designer/issues/27#issuecomment-1163090174
//授权版支持定制：https://github.com/xinglie/report-designer/issues/72
siteName:'打印设计器',//站点名称
//站点logo，仅支持高度不超过40px的图片
//siteLogo: '//iconfont.alicdn.com/t/4fac2eab-2be7-447b-a278-39a8a5cba361.png',
themeBrand:'#17ace3',//皮肤主题色
themeContrast:'#fff',//皮肤对比色
copyright:'©版权信息，支持<b>html</b>',
//---end---
getThemeUrl:'./apis/theme.json',//读取皮肤接口
saveThemeUrl:'./apis/theme.json',//保存皮肤接口
viewerUrl:'./viewer.html',//预览器页面地址，如果设计器页面(index.html)与预览器页面(viewer.html)在同一个目录下，则不需要对viewerUrl进行配置
getImageUrl:'./apis/images.json',//图片库接口
getImageCategoryUrl:'./apis/images-category.json',//图片库分类接口，如果不需要分类不需要配置该项
getFieldUrl:'./apis/fields.json',//数据源接口
getResourceUrl:'./apis/resource.json',//资源面板中的图片列表接口，如果不配置该接口，则面板会替换成元素面板
getFontFaceUrl:'./apis/fontface.json',//自定义字体，如果不配置该接口，则在字体列表中将不会出现自定义的字体
getTemplateUrl:'./apis/example.json',//获取示例数据
getTemplateContentUrl:'./apis/example_${id}.json',//获取具体示例内容数据
uploadImageUrl:'./apis/save-image.json',//图片上传接口
saveContentUrl:'./apis/content.json?id='+id,//保存设计区内容接口
getContentUrl,//进入设计器后，设计器默认展示的内容接口，如果不配置该接口，则会从示例数据中随机显示一个。授权版只显示空白初始化状态，不会随机显示内容
// async io(url,options){//拦截所有请求，如没特殊需求，不要配置该方法，需授权
// console.log(url,options);
// let response = await fetch(url,options);
// if (response.ok) {
// return response.json();
// }
// throw Error(response.statusText);
// },
request(request,url){//请求发起前对参数等相关数据进行二次修改，便于适配现有接口。如没特殊需求，不要配置该方法
console.log('request',request,url);
let body = request.body;
if (body) {
let bodyType = toString.call(body);
//根据不同的类型追加提交的其它数据
if (bodyType == '[object FormData]') {
body.append('extend', 'your data');
} else {
body = {
...body,
extend: 'your data'
}
}
}
return {
options:{//fetch请求的参数，比如method headers等 https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
...request.options,
//method:'post',//比如强制所有请求均为post
headers:{//请求头处理
...request.options.headers,
'X-Name':'report designer',
'X-Author':'XINGLIE'
}
},
body, //对于post请求则是放在form或payload中的数据
query:{//放在url中的数据
...request.query,
author:'行列'
}
};
},
response(response,url){//对请求返回结果进行二次控制修改，便于适配现有接口。如没特殊需求，不要配置该方法
console.log('response',response,url);
return {
success:response.success,//本次请求是否成功
data:response.data,//本次请求的相关业务数据
message:response.message//如果接口异常，则接口中返回的异常信息
};
}
});
</script>
</body>
</html>