1. 概述编辑
1.1 场景描述
制造、零售等行业一般都会有库存管理环节,在产品出入库管理时需要填写表单作为凭证,方便以后的对账和结算。
传统出入库填报都是采用纸质填报的形式,但是填写起来繁琐费时且容易出错,后续交接流转时保存更是个大难题。
1.2 实现思路
使用 FineReport 填报功能制作出入库表单实现线上填报,不仅可以提高业务员的填报效率,数据直接入库更让管理变得简单高效。
本文示例是一张出库单,如果是入库场景,只需要在此基础上简单修改,即可快速实现入库单。
2. 功能拆解编辑
2.1 自动生成流水号
填报时表单左上角有个自动生成的流水号,它是字母+数字的形式,字母是固定的,数字是由当前时间组成的,因而每次刷新表单时,这个流水号都会改变。
那么这个流水号是怎么实现的呢,只需要在单元格中插入公式:CONCATENATE("AC",FORMAT(NOW(),"yyyyMMddHHmmss"))
功能实现对应文档:填报插入数据时自动生成流水号
2.2 自动匹配库中数据
填报时选择一个产品后,可以自动从数据库中将该产品的其他信息显示出来,这样自动匹配库中数据的操作怎么实现呢?
只需要给产品名称下拉框控件添加一个编辑后事件,当用户下拉选择一个产品后,从数据库中拉取该产品对应的其他信息,并显示在前端。
事件对应的 JavaScript 代码如下:
var id=this.getValue();
//获取当前控件值
var cpmc=FR.remoteEvaluate("value('ds1','code','name','"+id+"')");
var dwsl=FR.remoteEvaluate("value('ds1','specs','name','"+id+"')");
var cbj=FR.remoteEvaluate("value('ds1','unit','name','"+id+"')");
var dj=FR.remoteEvaluate("value('ds1','price','name','"+id+"')");
//根据产品ID去ds1数据集中获取其他字段的值
var row=FR.cellStr2ColumnRow(this.options.location).row;
//获取当前行号
_g().setCellValue(0,3,row,cpmc);
_g().setCellValue(0,4,row,dwsl);
_g().setCellValue(0,5,row,cbj);
_g().setCellValue(0,6,row,dj);
//给当前行其他单元格赋值
功能实现对应文档:JS实现根据控件值自动匹配数据
2.3 只剩一行不准删除
删除数据时,如果只剩一行不允许继续删除,因为删掉最后一行就没办法再新增数据行了,这样的功能怎么实现呢?
只需要给模板添加一个加载结束事件,注意代码中引用到了删除按钮的控件名,所以在设计时,表格里的删除按钮要给个控件名称。
事件对应的 JavaScript 代码如下:
var arr = ['sc'];
//定义需要执行事件的删除行按钮名称数组,如有多组则写法为['sc1','sc2']
for (i = 0; i < arr.length; i++) {
var kj = $('[widgetname="' + arr[i].toUpperCase() + '"]:visible');
//获取页面上可见的删除行按钮元素
var sc = _g().getWidgetsByName(arr[i].toUpperCase());
//根据名字获取删除行按钮
for (j = 0; j < sc.length; j++) {
kj.length <= 1 ? sc[j].setEnable(false) : sc[j].setEnable(true);
//当控件只剩1个时,禁用控件,否则遍历启用所有控件
}
}
2.4 序号自动生成和调整
插入或删除数据时,序号可以自动调整,那么该如何实现呢?
给模板添加一个加载结束事件,用户前端插入或删除数据时,自动对序号进行重新设置。
事件对应 JavaScript 代码如下:
var $tds = $('.x-table td[col=1][fm="SEQ()"]:visible');
//获取第2列中可见的序号单元格(B列)
var n = 0;
$tds.each(function(i, e) {
n = n + 1;
$(e).text(n);
//将当前编号重新设置
})
功能实现对应文档:JS实现填报自动生成序号并排序
2.5 去掉选中单元格的黑框
填报时选中单元格会出现一个黑框,很影响美观,那么该怎么去掉呢?
给模板添加一个加载结束事件,去掉黑框即可。
事件对应 JavaScript 代码如下:
_g().curLGP.hideSelectFrame();
功能实现对应文档:填报常用技巧