1.5.1合并了订单和充值单。
最大的变化时创建/编辑充值单,不再关联订单,而是关联合同,也不再从订单取相关信息,改为用户自行选择。这边最让我纠结的是下单产品和下单账户的联动。
在这块研究了三四天,尤其是编辑时,带出代理商或者直客时,取到当前下单账户,并且渲染出来,而创建时是选择客户后进行联动取数据,其实没有差别,
但是编辑时获取下单账户总是慢于渲染下单账户,因此下单账户一直为空。
于是想把渲染下单账户这个函数放在获取下单账户方法里面进行,但是这样一旦选择代理商/直客就会渲染下单账户。
可是实际上,除了编辑时进入页面这一情况,只有在选择下单产品时才需要渲染下单账户。
试了好几次,最终选择给【getProductList】获取下单账户这一函数多传两个参数pCode(下单产品code),pId(该充值单产品账户id,用于默认选中该条数据),标识这是编辑,当有这个参数时,在getProductList方法中调用【showAccounts】渲染下单账户方法,对页面进行渲染。否则只是给productList这一全局变量进行赋值。
//取客户账户列表 getProductList: function(code,pCode,pId) { MJJS.http.post(API.productList, {customerCode: code}, function(o) { productList = o; if(pCode && pId) { prepaidEdit.showAccounts(pCode,pId); } }, function(err) { MJJS.page.dialog.alert(err.msg); }); },
而【showAccounts】这一函数也多加了个参数id,代表当前充值单的产品账户id,用于传递给函数dom,动态生成html时,选中该条数据。
showAccounts: function(code,id) { if(code) { var pList = [];//存放当前code的所有产品账户 $.each(productList, function(i,v) { if(code === v.productCode) { pList.push(v); } }); var _html = ‘‘;//存放生成的html //如果当前code的产品账户为0 if(pList.length>0) { _html = prepaidEdit.dom(code,pList,1,id); }else{ _html = ‘‘; } $(‘.accounts‘).html(_html); }else{ $(‘.accounts‘).html(‘‘); } },
//动态生成下单账户 dom: function(code,pList,type,id) { //code 当前下单产品code //pList 当前下单产品的产品账户 //type 1-切换下单产品时渲染 2-添加下单账户后更新账户 //id productCustId type为1 编辑选中当前下单产品 var pLen = pList.length; var _pLen = _productList.length; var str = ‘‘; var _name,custName,custId; for(var k=0;k<_pLen;++k){ if(code == _productList[k].val){ _name = _productList[k].name; custName =_productList[k].custName; custId =_productList[k].custId; } } for(var i = 0;i<pLen;i++) { str += ‘<div class="row"><div class="col-md-3"><label class="radio-inline">‘; if(type === 2){ str += ‘<input type="radio" name="finalProduct" value="‘+pList[i].orderProductCode+‘" checked>‘+_name+‘</label>‘; }else if(type == 1 && id && id == pList[i].productCustId){ str += ‘<input type="radio" name="finalProduct" value="‘+pList[i].orderProductCode+‘" checked>‘+_name+‘</label>‘; }else{ str += ‘<input type="radio" name="finalProduct" value="‘+pList[i].orderProductCode+‘">‘+_name+‘</label>‘; } if(code == ‘1001‘ || code == ‘1002‘ || code == ‘1003‘) { str += ‘</div><div class="col-md-4 pt7">‘+custName+‘<span>‘+pList[i].productCustName+‘</span>‘+ ‘</div><div class="col-md-5 pt7">‘+custId+‘<span>‘+pList[i].productCustId+‘</span></div></div>‘; }else{ str += ‘</div><div class="col-md-9 pt7">‘+custName+‘<span>‘+pList[i].productCustId+‘</span></div></div>‘; } } return str; },
历时一周,充值单创建&编辑终于做好了。撒花!
第二个部分就是充值单列表,主要功能是自定义显示列,和上个版本的延期核销垫款客户标红类似,对列表进行操作。不同的是,标红针对某一行,而自定义显示列的操作维度是列。第一次接触自定义显示,本来没有思路,jf给我说了一下大概,我又想了一下,就是首先给表中的每一列加class,td-value,选中自定义的复选框时,保存选中的value,将列表中列的类名与选中的value的列hide,就可以了。充值单列表只用了半天。
基本所有时间都花在创建和编辑的页面联动上。
心累。希望充值单彻底翻篇吧,充值单一次次优化,直到此次合并,已经面目全非了QAQ
关于编辑器,我一直用的sublime text,jf用的webstorm,wd用的visio studio code,他俩都吐槽过我的编辑器Orz
现在是联调阶段,明天测试开始提测,所以这两天边修bug边看一下编辑器,webstorm比较大,对比一下,vc code更易上手。
准备换vs code啦!加油!!