如何开发自定义列表界面-使用分组基础资料实现左树右表展示原创
金蝶云社区-聚宝彭
聚宝彭
9人赞赏了该文章 5249次浏览 未经作者许可,禁止转载编辑于2022年08月05日 15:51:13
封面

关键词:列表


一、需求

业务需求需要展示一个左树右表单据列表界面,且该列表数据支持F7选择,被选择时只展示根节点下第一层级的某个节点(含其子子孙孙节点)数据(本例只允许被选择tree2节点下的所有数据)。


二、思路及方案

在苍穹平台中,单据模板的列表默认都不是左树右表形式的。因此,为了实现该需求,第一个方案可参考 自定义单据列表界面 ,用空白动态表单,并放置过滤控件、树形控件、单据列表控件,从而来绘制一个左树右表形式的单据列表界面,然后将该动态表单页面标识注册到目标单据的列表设计器界面的“列表表单模板”&“F7列表表单模板”属性上,接着再开发插件分别去绑定左侧树和右边列表的数据即可。最后,参考样例 某单据上的文本字段选择其它业务单据列表中的数据 来实现F7数据选择。

第二个方案:考虑到平台提供的分组基础资料模板的列表界面就是左树右表形式的,而其列表设计器的业务属性“列表表单模板”与“F7列表表单模板”分别注册的是 bos_templatetreelist、bos_templatetreelistf7。然后,我们只需将这两个页面的标识分别注册到目标业务单据(即:需要以左树右表列表形式展示的单据)的列表设计器的相同业务属性上,接着与第一种方案一样开发插件实现即可。

第一种方案与第二种区别在于列表设计器界面的业务属性“列表表单模板”&“F7列表表单模板”所绑定的页面是自行绘制的还是平台提供的。

这里,我再提供第三种实现方案。平台提供的基础资料模板中有一种是分组基础资料模板,其列表展现形式就是左树右表形式。从页面继承关系可知,分组基础资料是继承自基础资料,而从插件继承关系又可知,基础资料又是继承自单据(基础资料本身就是一个特殊的单据,详见下图),故我们可以直接用基础资料模板来进行设计业务单据(即:需要以左树右表列表形式展示的单据)。

左树右表列表-页面继承关系1.png

左树右表列表-页面继承关系2.png


三、实现过程

1. 新增一个树形基础资料实体(kdec_treelist_demo1_tree),用于记录左树右表列表界面左侧分组树的数据。

树形基础资料.png


2. 新建一个分组基础资料实体(kdec_treelist_demo1),用于展示左树右表列表界面。其“分组”字段的业务属性“基础资料类型”绑定第 1 步中创建的树形基础资料。

左树右表列表界面.png

左树右表列表界面-2.png


3. 因本样例是直接通过基础资料类型页面创建的,本身支持F7选择,故只需动态注册插件去实现F7列表界面只允许选择tree2节点下的所有数据。

注意

插件动态注册请参阅:动态注册页面插件

	@Override
	public void refreshNode(RefreshNodeEvent e) {
		// 过滤tree2节点及其子子孙孙节点
		getTreeModel().getTreeFilter().add(new QFilter("number", QCP.like, "tree2%"));
		super.refreshNode(e);
	}
	
	@Override
	public void buildTreeListFilter(BuildTreeListFilterEvent e) {
		TreeNode root = getTreeModel().getRoot();
		List<TreeNode> allTreeNodes = root.getChildren();
		if (allTreeNodes != null && !allTreeNodes.isEmpty()) {
			for (TreeNode treeNode : allTreeNodes) {
				logger.info(">>> 过滤节点 " + treeNode.getLongNumber() + " 的数据 <<<");
				// 以左树节点(及其子子孙孙节点)过滤右表中的业务数据
				e.addQFilter(new QFilter("group", QCP.in, this.getAllSubNodes(treeNode.getId())));
			}
		}
		super.buildTreeListFilter(e);
	}
	
	/**
	 * 查询当前节点的所有子节点的主键
	 * @param nodeId
	 * @return
	 */
	private List<Object> getAllSubNodes(Object nodeId) {
		List<Object> allSubNodes = new ArrayList<Object>();
		allSubNodes.add(nodeId);
		QFilter filter = new QFilter("parent", QCP.equals, nodeId);
		String selectProperties = "id, number, name, parent";
		DynamicObject [] subNodeArr = BusinessDataServiceHelper.load("kdec_treelist_demo1_tree", selectProperties, filter.toArray());
		for (DynamicObject subNode : subNodeArr) {
			List<Object> subNodeIDList = getAllSubNodes(subNode.getPkValue());
			allSubNodes.addAll(subNodeIDList);
			allSubNodes.add(subNode.getPkValue());
		}
		return allSubNodes;
	}


四、效果图

左树右表列表界面(以下四张图分别展示了左侧 4 个节点tree1、tree2、tree3、tree4下数据。)

注意

为方便观察数据,分组基础资料(kdec_treelist_demo1)中数据的“编码”字段,@之前的部分为树形基础资料(kdec_treelist_demo1_tree)数据的编码,@之后的为3位流水号。

左树右表列表-节点1.png

左树右表列表-节点2.png

左树右表列表-节点3.png

左树右表列表-节点4.png


在其它单据的基础资料字段上选择该分组基础资料的F7列表界面(F7列表只展示 tree2 节点下的所有数据)

f7选择.png


五、开发环境版本

不限


六、注意事项

1. 基于平台的分组基础资料模板开发的页面会预置很多字段,如不需要,可将其“可见性”中的初始可见去掉(建议不要开启“隐藏元素”属性,否则会在插件中get不到该字段)。

2. 附件压缩包内含两份文件:元数据压缩包(该包内已预置示例数据) & 样例源码。元数据压缩包通过开发平台导入开发环境,样例源码放入开发工具(idea/eclipse)中(注意修改类路径),然后即可复现样例效果。


七、参考资料

开发平台

学习成长中心

插件开发—左树右表单据列表插件

控件使用指南——树形字段

自定义单据列表界面

某单据上的文本字段选择其它业务单据列表中的数据

动态注册页面插件

左树(基础资料)右表(单据列表)

左树右表+过滤

左树右页签



赞 9