全局右键菜单点击弹窗打开指定报表

最近收到领导提出的一个需求，大致如下：

用户在决策平台使用报表时，如果发现某张报表有问题时可以随时右键进行反馈，信息部在接收到反馈时可以根据用户的反馈快速定位并解决问题。

针对此问题，在思考许久后觉得还是直接弹窗，让用户可以直接在弹窗中提交问题反馈是最好的。因此实现了以下功能。

用户在决策平台的任何一张报表中右键，都会出现"报表问题反馈"按钮，点击按钮后会出现一张弹窗填报表，用户填写完成后点击提交既可以完成问题的反馈。

效果如下：

实现步骤如下：

1. 开发报表反馈登记表

为了方便演示，本填报表是基于信息采集报表上修改的，数据存储在Finedemo中的雇员表中。
需要注意的是，为了方便记录用户反馈的问题是属于那张报表中，我们需要定义一个参数reportName，这个参数需要通过URL进行传递。

具体的报表文件可以在文章底部进行下载。

2. 书写JS

全局js rightclick.js代码如下：

// 将后续可能用到的一些菜单样式提前添加到head中，如果需要自定义，可以修改该样式代码
$("<style>.rightclickcontextmenu *{padding:0px;margin:0px}.rightclickcontextmenu ul {list-style: none;}.rightclickcontextmenu {width: 100px;border: 1px solid #999;box-shadow: 3px 3px 3px #ccc;background-color: #fff;position: absolute;top: 10px;left: 10px;display: block;}.rightclickcontextmenu li {height: 40px;line-height: 40px;}.rightclickcontextmenu li a {display: block;padding: 0 10px;text-decoration: none;color: #333;}.rightclickcontextmenu li a:hover {background-color: #ccc;font-weight: bold;color: #fff;}</style>").appendTo("head");

// 监控全局右键按钮
$(document).contextmenu(function(env) {
  
  var e = env || window.event;
  
  // 执行公式，获取当前报表的名称及完整的路径
  var reportname = FR.remoteEvaluate('=if(len(formletName)==0,reportName,formletName)');
  
  // 为防止出现多次右击出现多个按钮，每次右击后先清除之前的按钮
  $("#rightclickcontext").remove();

  // JQ将右键出现的菜单按钮手动添加到body中，并添加按钮事件
  $('<div class="rightclickcontextmenu" id="rightclickcontext"><ul><li><a href="javascript:;">报表问题反馈</a></li></ul></div>').appendTo("body").bind('click', function() {

    // 定义弹窗报表文件的路径，如果要跟换报表，可以修改该参数
    var url = "/webroot/decision/view/report?viewlet=报表问题反馈.cpt&op=write&reportname=" + reportname;

    // 将URL  endcode 保证传输中文路径时不会出错
    url = FR.cjkEncode(url);
    
    // 定义iframe弹窗
    var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
    $iframe.attr("src", url);
    var o = {
      title: "报表问题反馈",
      width: 600,
      height: 300
    };
    // 弹窗展示
    FR.showDialog(o.title, o.width, o.height, $iframe, o)
  });

  // 获取右键菜单按钮元素，并隐藏
  var context = $("#rightclickcontext");
  context.css("display", "block");
  
  获取右击的位置并调整菜单按钮位置
  var x = e.clientX;
  var y = e.clientY;
  var w = window.innerWidth;
  var h = window.innerHeight;
  context.css({
    "left": Math.min(w - 202, x) + "px",
    "top": Math.min(h - 230, y) + "px"
  });
  return false
});

// 全局监测单击事件，单击后删除右键的菜单按钮
$(document).bind("click", function(e) {
  $("#rightclickcontext").remove()
});

3. 全局配置JS

如果只针对个别报表才允许反馈的话，可以在指定报表中引入该js文件。下面演示一下全局引入。
1、首先将js文件存放到工程webroot文件夹下：

2、在设计器中点开服务器->服务器配置

3、在引入JavaScript中选择第一步添加的文件，并添加，点击确定即可

问题点
因为只是出版，写文章是突然思考到弹窗嵌套问题，目前尚未解决，后续解决后更新

文件下载
点击下载模板文件及JS文件