一、二开需求

新增二开字段显示格式与原有字段长途交通费弹框需要相同。

二、配置步骤

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)      效果