案例-动态渲染参照

yonyouhmm

一、案例场景说明
在平时支持中，我们遇到这样一种客开场景，类似凭证中会计科目选择后，点击辅助核算，根据会计科目中维护的科目与辅助核算项的数据，弹框中显示不同的辅助核算项参照框。见下图显示效果：
应收账款：


点击辅助核算项:

应收账款中转：

辅助核算：


二、案例实现步骤
如果模态框中的参照固定在几个以内，我们可以在模态框中预制所有的可选参照，然后控制模态框中的参照的显隐即可。但是，此案例，科目的辅助核算项有上千个，我们预制参照这种方式就不现实。下面我们就使用动态渲染的方式实现。此案例我们假设模态框中最多显示三个参照。
1、创建和设计模态框，在卡片中插入三个单选参照


2、调整单选参照的编码，比如自动生成的三个item6ok、item16ha、item28fg，我们调整成itemrefer1、itemrefer2、itemrefer3，这样调整的目的就是方便循环渲染。然后参照id字段调整为显示，方便调试观察。

打开每个字段的设计器，都替换一下，如下图itemrefer1




3、底部页面的按钮加上打开模态框的脚本，这里我们传入三个参照的refCode，分别为员工、客户、物料

viewModel.get('button19ek').on('click',args=>{
  let referData = [
    {refCode:"ucf-staff-center.bd_staff_ref",refName:"员工"},
    {refCode:"productcenter.aa_merchantref",refName:"客户"},
    {refCode:"productcenter.pc_nomalproductref",refName:"物料"}
  ]
  
  let data = {
    billtype: 'Voucher', // 单据类型
    billno: 'dynamicReferModal', // 单据号
    params: {
      mode: 'add',
      referData: referData
    }
  };
  //打开一个单据，并在当前页面显示
  cb.loader.runCommandLine('bill', data, viewModel);
})


4、模态框中添加脚本，动态渲染传入的refCode
viewModel.on('afterLoadData', (args) => {
  let referData = viewModel.getParams().referData;
  for (var i = 0; i < referData.length; i++) {
    let j = i + 1;
    let id = `itemrefer${j}`;
    let code = `itemrefer${j}_id`;
   //如果要参照显示name就修改为name
    let cRefRetId = {[id]: 'id', [code] : 'code' };
    viewModel.get(code).setRefCode(referData.refCode, JSON.stringify(cRefRetId));
   //修改label显示
    document.querySelector("#dynamicReferModal\\|"+code+" > div > div > div.col-float.label-control > div > label").innerText = referData.refName;
  }
});

5、这时候我们打开模态框，参照就可以分别选择员工、客户、物料了




三、最后
案例中我们的refCode和refName，如果实际项目中获取，可以从iuap_metadata**.**mon_ref获取