如何开发自定义列表界面-将不同的单据展示在同一个列表界面-左树右页签显示原创

丨Nick丨

11人赞赏了该文章 4,535次浏览编辑于2022年08月05日 15:51:39

摘要由AI智能服务提供

本文档描述了一个基于树形控件和页签控件的UI界面实现方案。需求是在左侧展示树形结构，右侧根据左侧选中的树节点展示对应的单据或基础资料列表。实现过程中，通过自定义动态表单和代码控制表单展示，实现了增删改查功能。文档详细说明了树形控件的构建、节点点击事件处理、页签控件的切换逻辑，并提供了代码示例。最后，文档还强调了布局和控件事件监听的重要性，并鼓励开发者利用苍穹平台的能力进行自定义开发。

关键词：树形控件、页签控件

一、需求

有些产品需要展示一种左侧是树，右侧对应展示树节点下对应的一下单据或者基础资料列表，一种树形的展示形式

二、思路与方案

简单的属性基础资料肯定不能满足，我们需要自己绘制一张动态表单，利用代码showform的形式展示数据列表，这样就可以在每一个展示的页面中操作增删改查

三、实现过程

先新建一个单据（标识：kdec_demobillfortab），为了展示在总页面的页签中(可以根据自己业务需求)
新建一个基础资料（标识：kdec_basefortab），为了展示在总页面的页签中(可以根据自己业务需求)
新建一个动态表单（标识：kdec_tabpagedemo）
在页面添加分割容器，调整布局
左侧右侧各加一个flex调整布局为水平充满
左侧flex中加一个树型控件，用来当做左树，数据由插件构建
右侧添加页签控件，加四个页签（根据自己需求增减）
每个页签也中加一个flex，同样水平充满的布局
代码实现构建左树，以及右侧每个页签点击时showform不同的form页面

/**
	 * 树节点点击事件
	 */
	@Override
	public void treeNodeClick(TreeNodeEvent evt) {
		TreeNodeClickListener.super.treeNodeClick(evt);
		String nodeId = evt.getNodeId().toString();
		ListShowParameter showParameter = new ListShowParameter();
		showParameter.getOpenStyle().setShowType(ShowType.InContainer);
		if (StringUtils.equals("0-1-1", nodeId)) {// 单据1暂存态数据
			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
			showParameter.setBillFormId("kdec_demobillfortab");
			ListFilterParameter listFilterParameter = new ListFilterParameter();
			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "A"));// 暂存
			showParameter.setListFilterParameter(listFilterParameter);
		} else if (StringUtils.equals("0-1-2", nodeId)) {// 单据1提交态数据
			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
			showParameter.setBillFormId("kdec_demobillfortab");
			ListFilterParameter listFilterParameter = new ListFilterParameter();
			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "B"));// 提交
			showParameter.setListFilterParameter(listFilterParameter);
		} else if (StringUtils.equals("0-1-3", nodeId)) {// 单据1审核态数据
			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
			showParameter.setBillFormId("kdec_demobillfortab");
			ListFilterParameter listFilterParameter = new ListFilterParameter();
			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "C"));// 审核
			showParameter.setListFilterParameter(listFilterParameter);
		} else if (StringUtils.equals("0-2-1", nodeId)) {// 基礎資料
			showParameter.getOpenStyle().setTargetKey("kdec_flex_baselist");
			showParameter.setBillFormId("kdec_basefortab");
			ListFilterParameter listFilterParameter = new ListFilterParameter();
			listFilterParameter.setFilter(new QFilter("status", QCP.equals, "A"));// 暫存
			showParameter.setListFilterParameter(listFilterParameter);
			Tab tab = this.getView().getControl("kdec_tabap");
			tab.activeTab("kdec_tabpageap2");
		}
		this.getView().showForm(showParameter);
	}

	/**
	 * 构建树形节点
	 */
	private void treeviewLoad() {
		final String rootId = "0"; // 根节点id
		TreeView treeView = this.getControl("kdec_treeviewap");
		treeView.setCustomeStyles("fs:55");

		Map<String, Object> ctrl = new HashMap<String, Object>();
		ctrl.put(ClientProperties.FontSize, "18");
		this.getView().updateControlMetadata("kdec_treeviewap", ctrl);

		TreeNode rootNode = new TreeNode(null, rootId, "全部单据树根节点", true);
		rootNode.setIsOpened(true);
		treeView.setRootVisible(false);
		TreeNode tn1 = new TreeNode(rootId, "0-1", "案例单据1", true);
		tn1.setIsOpened(true);
		TreeNode tn2 = new TreeNode(rootId, "0-2", "案例单据2", true);
		TreeNode tn3 = new TreeNode(rootId, "0-3", "其他", true);
		// 单据1
		TreeNode tn11 = new TreeNode("0-1", "0-1-1", "案例单据1(暂存)", false);
		TreeNode tn12 = new TreeNode("0-1", "0-1-2", "案例单据1(提交)", false);
		TreeNode tn13 = new TreeNode("0-1", "0-1-3", "案例单据1(审核)", false);
		tn1.addChild(tn11);
		tn1.addChild(tn12);
		tn1.addChild(tn13);
		// 单据2
		TreeNode tn21 = new TreeNode("0-2", "0-2-1", "基礎資料(暂存)", false);
		tn2.addChild(tn21);
		// 其他
		TreeNode tn31 = new TreeNode("0-3", "0-3-1", "其他(1)", false);
		TreeNode tn32 = new TreeNode("0-3", "0-3-2", "其他(2)", false);
		tn3.addChild(tn31);
		tn3.addChild(tn32);
		// 添加到根菜单
		rootNode.addChild(tn1);
		rootNode.addChild(tn2);
		rootNode.addChild(tn3);
		treeView.addNode(rootNode);

	}

	@Override
	public void tabSelected(TabSelectEvent arg0) {
		String tabKey = arg0.getTabKey();
		if (StringUtils.equals(tabKey, "kdec_tabpageap")) {// 切换页签-单据列表
			ListShowParameter showParameter = new ListShowParameter();
			showParameter.setBillFormId("kdec_demobillfortab");
			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
			this.getView().showForm(showParameter);
		} else if (StringUtils.equals(tabKey, "kdec_tabpageap1")) {// 切换页签-单据
			BillShowParameter showParameter = new BillShowParameter();
			showParameter.setFormId("kdec_demobillfortab");
			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
			showParameter.getOpenStyle().setTargetKey("kdec_flex_bill");
			this.getView().showForm(showParameter);
		} else if (StringUtils.equals(tabKey, "kdec_tabpageap2")) {// 切换页签-基础资料列表
			ListShowParameter showParameter = new ListShowParameter();
			showParameter.setBillFormId("kdec_basefortab");
			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
			showParameter.getOpenStyle().setTargetKey("kdec_flex_baselist");
			this.getView().showForm(showParameter);
		} else if (StringUtils.equals(tabKey, "kdec_tabpageap3")) {// 切换页签-基础资料
			BaseShowParameter showParameter = new BaseShowParameter();
			showParameter.setFormId("kdec_basefortab");
			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
			showParameter.getOpenStyle().setTargetKey("kdec_flex_base");
			this.getView().showForm(showParameter);
		}
	}