帆软FineReport下拉框联动实现

在用帆软做报表展示时，有需求是要进行联动效果，记录下来，方便查看。
帆软版本：10.0

背景

编辑栏两个控件，产品ID是输入框，用户可输入产品ID，产品名称为下拉框，可选择产品名称。当用户输入产品ID后，则不可再选择产品名称；当选择产品名称后，不可再编辑产品ID。编辑栏如下图所示。

第一步、添加控件的事件

1）选中 产品ID编辑框，在右侧的事件栏，添加编辑结束事件，在JavaScript脚本编辑区域，添加以下代码

// 设置控件是否可用，true为可用，false为不可用
this.options.form.getWidgetByName("spu_name").setEnable(false);

添加步骤如下所示。

点击运行，浏览器渲染出来的页面，在产品ID输入123，再选择产品名称选择框，此时选择框不可编辑，效果如下。

2）选中 产品名称选择框，在右侧的事件栏，添加编辑结束事件，在JavaScript脚本编辑区域，添加以下代码

// 设置控件是否可用，true为可用，false为不可用
this.options.form.getWidgetByName("spu_id").setEnable(false);

添加步骤如下所示。

点击运行，浏览器渲染出来的页面，在产品名称选择“苹果14”，再编辑产品ID输入框，此时输入框不可编辑，效果如下。

以上即两个控件的简单联动，在JavaScript框中添加调试 debugger ，可在页面进行调试。

// 获取选择框的值
var spu_name = this.options.form.getWidgetByName("spu_name").getValue();
// 弹框显示
alert(spu_name)
// 调试
debugger

调试页面如下图所示。

在官方文档中对帆软FineReport的二次开发JavaScript有介绍，感兴趣的可以详细了解。

// 获取控件的值
this.options.form.getWidgetByName("spu_name").getValue();
// 获取控件的显示值
this.options.form.getWidgetByName("spu_name").getText();
// 设置可见或不可见，true为可见
this.options.form.getWidgetByName("spu_id").setVisible(false);

知识延伸

可以对开始时间和介绍时间进行校验，即获取两个控件值，比较并进行弹窗提示。

// 获取开始时间的值
var startDate= this.options.form.getWidgetByName("startDate").getValue();
// 获取介绍时间的值
var endDate= this.options.form.getWidgetByName("endDate").getValue();
// 开始日期判空，并提示
if (startDate == "" || startDate == null) { 
	FR.Msg.alert("错误","开始时间不能为空");
	return false;
};
// 结束日期判空，并提示
if (endDate == "" || endDate == null) { 
	FR.Msg.alert("错误","结束时间不能为空");
	return false;
};
//判断开始日期是否大于结束日期
if (start > end) { 
	FR.Msg.alert("错误","开始时间不能大于结束时间"); 
	return false;
}
// 日期转换，用于比较
// 将开始日期转化为Date型
var startdate = new Date(start.substring(0,4), start.substring(4,6), start.substring(6,8)); 
// //将结束日期转化成Date型
var enddate = new Date(end.substring(0,4), end.substring(4,6), end.substring(6,8)); 
// 将两个日期相减得出的毫秒数转化为天数
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); 
// 设置时间间隔为30天，大于30的天给予弹窗意识
if (subdate > 30) { 
	FR.Msg.alert("错误","结束日期必须在开始日期30天之内"); 
	return false;
}

参考文档

【1】https://help.fanruan.com/finereport10.0/doc-view-1195.html

异常处理

【1】报错信息：CustomJSError : Cannot read properties of undefined (reading ‘setEnable’)
处理方案：
检查变量是否正确，原因一般为获取不到该对象。