二开案例-差旅报销单参考长途交通费弹框增加实现二开字段

一、二开需求

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

二、配置步骤

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",eEx