二开案例-差旅报销单参考长途交通费弹框增加实现二开字段原创
9人赞赏了该文章
253次浏览
编辑于2023年06月23日 17:36:39
一、二开需求
新增二开字段显示格式与原有字段长途交通费弹框需要相同。
二、配置步骤
1、差旅报销单分录增加二开字段
餐饮费:cyExpense;不含税餐饮费:cyExpenseWithoutTax;餐饮费税额:cyExpenseTax;餐饮费税率:cyExpenseTaxRate
2、扩展方案差旅报销单分录引入二开餐饮费字段
3、引入后二开餐饮费字段配置隐藏列
4、分录表格添加自定义列,自定义列重命名,如:cyExpenseInfo,用于绑定弹框;并且配置编辑器:cyExpenseEditor
5、由于标准的长途交通费、市内交通费等弹框是隐藏,需要设置显示出来参考配置,按F12打开控制台,打开travelAccountBill_open_edit.css文件,搜索bussesExpenseColumn找到截图位置,注释让其显示
6、点增加列,配置
a) 元素id配置为:cyExpenseColumn(用于后续餐饮费编辑器调用打开);
b) 样式配置:position: fixed;z-index: 2000;background-color: white;border: 2px solid #34BEFF;(此配置会隐藏当前列,可最后配置)
c) 高级配置隐藏:是。
7、进行配置餐饮费弹框,增加数字控件,在列中配置含税、不含税、税率、税额字段
记录四个控件元素id:
含税:eCyExpense;不含税:eCyExpenseWithoutTax;税率(%):eCyExpenseTaxRate;税额:eCyExpenseTax
8、编写餐饮费编辑器对应脚本
cyExpenseEditor:对应第4步骤的编辑器名称
waf.defineCustomeClass("celleditor.cyExpenseEditor", celleditor.defaultEditor, { show: function() { var entryDom = waf("#entries"); var rowid = entryDom.wafGrid("getSelectedRow"); var eCyExpense = entryDom.wafGrid("getCell", rowid, "cyExpense")||0.00; var eCyExpenseWithoutTax = entryDom.wafGrid("getCell", rowid, "cyExpenseWithoutTax")||0.00; var eCyExpenseTax = entryDom.wafGrid("getCell", rowid, "cyExpenseTax")||0.00; var eCyExpenseTaxRate = entryDom.wafGrid("getCell", rowid, "cyExpenseTaxRate")||0.00; waf("#eCyExpense").wafNumberField("setValue",eCyExpense,false); waf("#eCyExpenseWithoutTax").wafNumberField("setValue",eCyExpenseWithoutTax,false); //先用税率计算数额,防止出现税率为0税额有值,把税额反写成了0 该问题只有初始化第一次点击才有这个为,所以第一次点击,改为不触发change事件 waf("#eCyExpenseTaxRate").wafNumberField("setValue",eCyExpenseTaxRate,false); waf("#eCyExpenseTax").wafNumberField("setValue",eCyExpenseTax,false); var isWithTax = waf("#isWithTax").wafCheckbox("isChecked"); if (isWithTax) { waf("#eCyExpense").wafNumberField('enable', true); waf("#eCyExpenseWithoutTax").wafNumberField('disable', true); } else { waf("#eCyExpense").wafNumberField('disable', true); waf("#eCyExpenseWithoutTax").wafNumberField('enable', true); } var columnWidth = this.cell.width(); var cyExpenseColumn = waf("#cyExpenseColumn"); cyExpenseColumn.attr("infoDiv","true"); var table = this.table; cyExpenseColumn.width(columnWidth); cyExpenseColumn.show(); cyExpenseColumn.position($.extend({of: this.cell}, {my: "left top", at: "left top"})); $(cyExpenseColumn).css({ "background":"#FFFFFF", "box-shadow": "0 0 13px 0 rgba(0,0,0,0.20)", "border-radius": "2px", "border":"none", "width":"270px", "min-width":"270px" }) }, clear: function() { waf("#cyExpenseColumn").hide(); celleditor.defaultEditor.prototype.clear.call(this); }, getValue: function(){ var self = this, div = self.div, table = waf(self.table), rowId = table.wafGrid("getRowId", self.iRow), entryDom = waf("#entries"); var eCyExpense = waf("#eCyExpense").wafNumberField("getValue") || 0.00, eCyExpenseWithoutTax = waf("#eCyExpenseWithoutTax").wafNumberField("getValue") || 0.00, eCyExpenseTax = waf("#eCyExpenseTax").wafNumberField("getValue") || 0.00, eCyExpenseTaxRate = waf("#eCyExpenseTaxRate").wafNumberField("getValue") || 0.00; entryDom.wafGrid("setCell", rowId, "cyExpense", eCyExpense); entryDom.wafGrid("setCell", rowId, "cyExpenseWithoutTax", eCyExpenseWithoutTax); entryDom.wafGrid("setCell", rowId, "cyExpenseTax", eCyExpenseTax); entryDom.wafGrid("setCell", rowId, "cyExpenseTaxRate", eCyExpenseTaxRate); } });
9、配置弹框中输入含税或不含税等字段进行联动计算
a) 含税增加触发事件:cyExpense
if (TravelAccountBill_Edit_Open.isFirstLoad || !TravelAccountBill_Edit_Open.needChangeEvent) return; var isWithTax = waf("#isWithTax").wafCheckbox("isChecked"); if (isWithTax) { var eExpense = waf("#eCyExpense").wafNumberField("getValue")||0; var eExpenseTaxRate = waf("#eCyExpenseTaxRate").wafNumberField("getValue")||0; var eExpenseWithoutTax = _self.setPrecision(eExpense /_self.addBigDecimal(1, eExpenseTaxRate/100)) ||0; //税额 = 含税金额 - 不含税金额 var eExpenseTax = _self.setPrecision(_self.subtractBigDecimal(eExpense, eExpenseWithoutTax)); //setValue加false参数可以不触发对应值改变事件 waf("#eCyExpenseWithoutTax").wafNumberField("setValue",eExpenseWithoutTax,false); waf("#eCyExpenseTax").wafNumberField("setValue",eExpenseTax,false); }
b) 不含税增加触发事件:cyExpenseWithoutTax
if (TravelAccountBill_Edit_Open.isFirstLoad || !TravelAccountBill_Edit_Open.needChangeEvent) return; var isWithTax = waf("#isWithTax").wafCheckbox("isChecked"); if (!isWithTax) { var eExpenseWithoutTax = waf("#eCyExpenseWithoutTax").wafNumberField("getValue")||0; var eExpenseTaxRate = waf("#eCyExpenseTaxRate").wafNumberField("getValue")||0; var eExpenseTax = _self.setPrecision(eExpenseWithoutTax * eExpenseTaxRate / 100)||0; var eExpense = _self.setPrecision(_self.addBigDecimal(eExpenseWithoutTax, eExpenseTax))||0; waf("#eCyExpense").wafNumberField("setValue",eExpense,false); waf("#eCyExpenseTax").wafNumberField("setValue",eExpenseTax,false); }
c) 税率增加触发事件:cyExpenseTaxRate
if (TravelAccountBill_Edit_Open.isFirstLoad || !TravelAccountBill_Edit_Open.needChangeEvent) return; var isWithTax = waf("#isWithTax").wafCheckbox("isChecked"); var eExpenseTaxRate = waf("#eCyExpenseTaxRate").wafNumberField("getValue"); if(eExpenseTaxRate < 0) { eExpenseTaxRate = 0.00; waf("#eCyExpenseTaxRate").wafNumberField("setValue",eExpenseTaxRate); } if (isWithTax) { var eExpense = waf("#eCyExpense").wafNumberField("getValue")||0; var eExpenseWithoutTax = _self.setPrecision(eExpense /_self.addBigDecimal(1, eExpenseTaxRate/100))||0; var eExpenseTax = _self.setPrecision(_self.subtractBigDecimal(eExpense, eExpenseWithoutTax)); waf("#eCyExpenseTax").wafNumberField("setValue",eExpenseTax,false); waf("#eCyExpenseWithoutTax").wafNumberField("setValue",eExpenseWithoutTax,false); }else{ var eExpenseWithoutTax = waf("#eCyExpenseWithoutTax").wafNumberField("getValue")||0; var eExpenseTax = _self.setPrecision(eExpenseWithoutTax * eExpenseTaxRate / 100)||0; var eExpense = _self.setPrecision(_self.addBigDecimal(eExpenseWithoutTax, eExpenseTax)); waf("#eCyExpenseTax").wafNumberField("setValue",eExpenseTax,false); waf("#eCyExpense").wafNumberField("setValue",eExpense,false); }
d) 税额增加触发事件:cyExpenseTax
if (TravelAccountBill_Edit_Open.isFirstLoad || !TravelAccountBill_Edit_Open.needChangeEvent) return; var isWithTax = waf("#isWithTax").wafCheckbox("isChecked"); var eExpenseTax = waf("#eCyExpenseTax").wafNumberField("getValue")||0; if (isWithTax) { var eExpense = waf("#eCyExpense").wafNumberField("getValue")||0; var eExpenseWithoutTax = _self.setPrecision(_self.subtractBigDecimal(eExpense, eExpenseTax))||0; waf("#eCyExpenseWithoutTax").wafNumberField("setValue",eExpenseWithoutTax,false); }else{ var eExpenseWithoutTax = waf("#eCyExpenseWithoutTax").wafNumberField("getValue")||0; var eExpense = _self.setPrecision(_self.addBigDecimal(eExpenseWithoutTax, eExpenseTax))||0; waf("#eCyExpense").wafNumberField("setValue",eExpense,false); }
10、实现效果
11、给餐饮费增加格式化样式
a) 增加格式化样式事件
方法名称:cyExpenseFormatter
方法参数:cellvalue, options, rowObject, act, iRow
b) 脚本
return bizCollBillBase.travelAmountFormatter("cyExpense","cyExpenseTax","cyExpenseTaxRate",options,rowObject);
c) 含税、不含税、税额字段配置显示合计
d) 效果
赞 9
9人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读