手把手教你实现“树形单据”列表

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:1

手把手教你实现“树形单据”列表


苍穹只有基础资料可以左树右表,难道我单据不配拥有?


不要慌,本文就手把手教你如何实现左树分类、右表单据数据的页面,助你光速拿捏~




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
  • 将插件注册到列表页,保存后预览即可看到代购单效果图。




#往期推荐#



 秘籍:您的“苍穹私有云升级”指南已上线

#  苍穹调度:搞定你的定时业务功能

#  这些开发小技巧,你还不知道么

#  超有料的“扩展&继承”使用宝典,你还不来学?

 如何五分钟定义一个Servlet请求?

#  好家伙,两种方式轻松实现苍穹跳转页面

 安全开发不能不知道的8大防范措施



更多精彩内容,“码”上了解!↓




手把手教你实现“树形单据”列表

苍穹只有基础资料可以左树右表,难道我单据不配拥有?不要慌,本文就手把手教你如何实现左树分类、右表单据数据的页面,助你光速拿捏~1 业...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息