案例-列表页分类展示数据

yonyouhmm

一、说明


此案例我们实现列表页按照单据状态分类展示数据，案例中只考虑了开立、审批中、已审批三种情况，如果实际项目，驳回到制单的状态也要考虑。脚本逻辑只是自己简单测试了下，实际使用中如有bug自己调整吧
二、页面设计
1、初始构建的列表页中增加多页签和三个子页签

2、打开每个子页签的编辑器  修改如下两处 tabpane改为tabpage

3、三个子页签的编辑器修改后，再修改每个子页签右侧属性的多语容器名称

三、脚本开发
1、前端脚本
viewModel.on('afterMount', (args) => {
  getAndSetCount();
});

//查询前根据当前活动页签 增加不同过滤条件
viewModel.on('beforeSearch', (args) => {
  let activeKey = 'tabpane15ma';
  let verifystate = 0;
  //获取当前活动的页签
  viewModel.execute('getLineTabsInfo', function (info) {
    activeKey = info.activeKey;
  });
  if (activeKey == 'tabpane15ma') {
    verifystate = 0;
  } else if (activeKey == 'tabpane29gj') {
    verifystate = 1;
  } else if (activeKey == 'tabpane44sf') {
    verifystate = 2;
  }
  args.isExtend = true;
  args.params.condition.simpleVOs = [
    {
      field: 'verifystate',
      op: 'eq',
      value1: verifystate,
    },
  ];
});

viewModel.on('afterTabActiveKeyChange', (args) => {
  //每次页签发生变更就重新查询
  viewModel.getCache('FilterViewModel').get('search').fireEvent('click');
  getAndSetCount();
});

//获取每种状态的数据条数并更新页签
function getAndSetCount() {
  cb.rest.invokeFunction('AT18EE15E23EB8000A.apiFunc.getCount', {}, function (err, res) {
    const args = [
      { cGroupCode: 'tabpane15ma', caption: `开立态（${res.count0}）` },
      { cGroupCode: 'tabpane29gj', caption: `审批中（${res.count1}）` },
      { cGroupCode: 'tabpane44sf', caption: `已审批（${res.count2}）` },
    ];
    viewModel.execute('updateTabsCaption', args);
  });
}
2、后端脚本
let AbstractAPIHandler = require('AbstractAPIHandler');
class MyAPIHandler extends AbstractAPIHandler {
  execute(request) {
    let sql0 = 'select count(1) as count0 from AT18EE15E23EB8000A.AT18EE15E23EB8000A.tableTabs where verifystate == 0';
    let sql1 = 'select count(1) as count1 from AT18EE15E23EB8000A.AT18EE15E23EB8000A.tableTabs where verifystate == 1';
    let sql2 = 'select count(1) as count2 from AT18EE15E23EB8000A.AT18EE15E23EB8000A.tableTabs where verifystate == 2';
    var res0 = ObjectStore.queryByYonQL(sql0);
    console.log(JSON.stringify(res0))
    var res1 = ObjectStore.queryByYonQL(sql1);
    var res2 = ObjectStore.queryByYonQL(sql2);
    return { count0: res0[0].count0, count1: res1[0].count1, count2: res2[0].count2 };
  }
}
exports({ entryPoint: MyAPIHandler });
四、效果演示