手把手教你实现“树形单据”列表
苍穹只有基础资料可以左树右表,难道我单据不配拥有?
不要慌,本文就手把手教你如何实现左树分类、右表单据数据的页面,助你光速拿捏~
1 业务场景
物品代购单中含有一个渠道分类,类似京东(电商)、沃尔玛(线下)、美国代购(跨境)等渠道。在实际业务场景中,需要根据不同的渠道分类、不同的渠道,管理对应的代购单,如下图所示:
物品代购单
该单据布局中,左树用于记录层分类,右侧展示单据列表,并且可以按照左树点击过滤单据数据。
2 实现方案
了解完业务场景,接下来带你分步实现一张完整的代购单。
步骤一:新建分组基础资料 - 采购渠道
新建采购渠道(kdec_channel) ,如京东、淘宝、天猫、沃尔玛、华润万家、美国代购等,用于维护代购的渠道。
步骤二:新建基础资料 - 采购渠道分类
新建采购渠道分类(kdec_channel_type) ,如电商、线下、跨境等,用于维护采购渠道的分组,使其具有层级关系。
步骤三:新建单据 - 代购单
新增代购单,如在京东购买了一件衣服,用于记录代购数据。
步骤四:维护渠道以及渠道分类
根据业务需求,配置渠道分类和采购渠道,并确保渠道使用状态为“可用”。
渠道分类
渠道列表
步骤五:为代购单绑定渠道
在代购单中添加基础资料,绑定渠道,用于记录分组,如下图所示:
代购单添加基础资料
步骤六:实现代购单列表
代购单列表要展示树形列表,所以要将列表模板改为bos_treelist(树形列表模板)。
注意:不能直接预览,因为此时单据列表并未实现树形结构,需要在插件中手动构建左树。
代购单列表
因为要使用树形列表模板,所以插件需要继承StandardTreeListPlugin(extends StandardTreeListPlugin),在插件的afterCreateNewData事件中构造数据。具体实现代码如下:
@Override public void afterCreateNewData(EventObject e) { super.afterCreateNewData(e); TreeView tv1 = this.getView().getControl("treeview"); this.constructorData(tv1); } /** * 构造数据 */ private void constructorData(TreeView tv1) { // final String rootId = "0"; // 根节点id // TreeNode rootNode = new TreeNode(null, rootId, "根节点", true); // rootNode.setIsOpened(true); // 设置默认展开 TreeNode rootNode = this.getTreeModel().getRoot(); String rootId = rootNode.getId(); // 查出分组数据 DynamicObjectCollection types = QueryServiceHelper.query("kdec_channel_type", "Id,name", null); // 查出渠道数据 DynamicObjectCollection channels = QueryServiceHelper.query("kdec_channel", "Id,name,group.Id", null); //按照分类分组 Map<string, list>datatypeMap = channels.stream() .collect(Collectors.groupingBy(it -> it.getString("group.Id"))); for (DynamicObject type : types) {//构建树节点 // 构造一级子节点 String typeId = type.getString("Id"); TreeNode tn1 = new TreeNode(rootId, typeId, type.getString("name"), true); tn1.setIsOpened(true); tn1.setColor("red"); // 设置节点文字颜色 ListchannelsByType = datatypeMap.get(type.getString("Id")); for (DynamicObject channel : channelsByType) { // 构造二级子节点 String channelId = channel.getString("Id"); TreeNode tn2 = new TreeNode(typeId, channelId, channel.getString("name"), false); tn1.addChild(tn2); } rootNode.addChild(tn1); } // tv1.addNode(rootNode); this.getTreeModel().setRoot(rootNode);//将树节点加到树模型 // this.getTreeModel().getRoot().addChild(rootNode); }
此时预览即可看到效果,如下图所示:
代购单列表效果图
步骤七:实现点击树节点对右侧数据过滤刷新的功能
实现该功能的具体步骤如下:
(1)实现TreeNodeClickListener(TreeNodeClickListener)并做监听(固定的树标识为treeview,模板自带)
@Override public void registerListener(EventObject e) { super.registerListener(e); TreeView tv1 = this.getView().getControl("treeview"); tv1.addTreeNodeClickListener(this); }
注意:点击事件默认都为对列表的刷新,这里会触发setfilter方法,所有的过滤都在这个方法实现,不要在其他位置添加过滤,统一由刷新去触发过滤设置。
(2)在setFilter方法中获取聚焦树节点对应的nodeId。因为构建时将单据数据的主键设置为nodeId,所以可以直接将其添加为过滤条件。
而节点可能是渠道分类或渠道,所以要兼容处理不同节点的Id,最终代码如下:
@Override public void treeNodeClick(TreeNodeEvent e) { super.treeNodeClick(e); BillList billList = this.getControl("billlistap"); billList.refresh(); } @Override public void setFilter(SetFilterEvent e) { super.setFilter(e); String nodeId = this.getTreeModel().getCurrentNodeId().toString(); if (this.getTreeModel().getRoot().getId().equals(nodeId)) { return; } e.getQFilters().add(new QFilter("kdec_channel.id", QCP.equals, nodeId) .or(new QFilter("kdec_channel.group.id", QCP.equals, nodeId))); }
(3)将插件注册到列表页,保存,预览即可看到代购单效果图。
代购单效果预览
3 注意事项
1. 要将模板改为bos_treelist,否者插件会报错,页面也无法渲染出树;
2. 不要在列表插件的其他方法调用setQfilter方法设置过滤,插件的所有的位置都可以调用refresh,refresh会触发插件的setFilter方法,统一在setFilter方法中设置过滤。
4 常见问题
Q:如何构建左树?
A:可参考以下官方文档,根据数据构建:
树形控件:
https://vip.kingdee.com/knowledge/specialDetail/218022218066869248?productLineId=29&category=218035603349614848&id=224144029502698752
Q:为什么左树已经渲染出来但是点击无效?
A:检查是否注册监听,如未注册监听,插件无法捕获交互事件。
5 划重点
以物品代购单渠道管理业务场景为例,实现左树基础资料分类(如渠道)、右表单据数据的页面的具体步骤如下:
1. 新建分组基础资料 - 采购渠道(kdec_channel);
2. 新建基础资料 - 采购渠道分类(kdec_channel_type);
3. 新建单据 - 代购单(kdec_demotree);
4. 维护渠道以及渠道分类;
5. 在代购单中添加基础资料,绑定渠道,用于记录分组;
6. 实现代购单列表;
7. 实现点击树节点对右侧数据过滤刷新的功能,细分步骤如下:
实现TreeNodeClickListener(TreeNodeClickListener)并做监听(固定的树标识为treeview,模板自带); 在setFilter方法中获取聚焦树节点对应的nodeId; 将插件注册到列表页,保存后预览即可看到代购单效果图。
#往期推荐#
更多精彩内容,“码”上了解!↓
手把手教你实现“树形单据”列表
本文2024-09-23 00:22:40发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-139079.html