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