Weibw's FR
ShowTemplateByDialog 弹窗
你可以使用它在页面中间弹窗打开模板。
注：此接口未使用帆软官方接口，所以支持FineReport目前所有版本的工程项目。
基础用法
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "showTemplateByDialog",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "75%",
height: "45%",
modalclickclose: true
});WEIBW.Feedback.showTemplateByDialog({
title: "showTemplateByDialog",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "75%",
height: "45%",
modalclickclose: true
});标题
ShowTemplateByDialog 组件的标题由title参数控制，如果不填写title参数会出现默认文本默认title。
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "自定义标题",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
});WEIBW.Feedback.showTemplateByDialog({
title: "自定义标题",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
});路由
ShowTemplateByDialog 组件的打开的模板路径由参数url控制，如果您填写的是当前工程下的模板文件路径，那应该类似于/webroot/decision/view/report?viewlet=***.cpt，当然，您也可以直接填绝对地址，如https://finereport.weibw162.com。
注意：当url参数无值时，会自动打开当前文档所在网页，即https://finereport.weibw162.com。
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "自定义页面地址",
url: "https://finereport.weibw162.com",
});WEIBW.Feedback.showTemplateByDialog({
title: "自定义页面地址",
url: "https://finereport.weibw162.com",
});参数
ShowTemplateByDialog 组件在打开模板时是支持携带参数的，参数由params控制，他是一个json对象，您可以在这里配置您打开模板时携带的路由参数。
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
});WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
});尺寸
ShowTemplateByDialog 组件的尺寸由参数width和height分别控制其宽度和高度。这两个参数同样支持两种写法，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px'。
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "100%",
});WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "100%",
});遮罩点击关闭
ShowTemplateByDialog 组件弹窗打开时会在原页面上层创建一个灰色的遮罩，我们可以设置点击该遮罩关闭当前dialog窗口。该配置由参数modalclickclose控制。
javascript
WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
modalclickclose: true,
});WEIBW.Feedback.showTemplateByDialog({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
modalclickclose: true,
});关闭Dialog
如果你需要在其他JavaScript代码中关闭当前dialog窗口，那么你只需要执行如下接口即可：
Javascript
WEIBW.Feedback.closeDialog();WEIBW.Feedback.closeDialog();参数解释
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| title | 标题 | string | 无 | 是 |
| url | 模板路由 | string | 无 | 是 |
| params | 模板携带参数 | json对象 | 无 | 否 |
| width | dialog窗口宽度 | string，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px' | '50%' | 否 |
| height | dialog窗口高度 | string，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px' | '60%' | 否 |
| modalclickclose | 遮罩点击关闭 | bool，可选项true、false | false | 否 |