如何将PC端单据页面设置成表格样式

如何将PC端单据页面设置成表格样式原创

闫方亮

4人赞赏了该文章 1,855次浏览编辑于2022年08月04日 14:46:54

摘要由AI智能服务提供

本文档描述了将线下工作单据的表格样式转化为苍穹系统中的界面布局的过程。首先分析单据字段，利用苍穹控件（如flex面板、通用字段控件等）模拟表格样式。通过flex面板布局实现字段的行列组织，并设置样式以模拟表格边框。详细说明了在单据模板中添加flex面板、字段控件等步骤，并通过插件为单据体字段设置默认值。最终实现了类似原表格样式的单据界面，并提供了开发环境版本信息、注意事项及参考资料。

关键词：单据、表格样式

一、需求背景

在线下已经形成的大量工作单据经过长时间的使用，已经形成了习惯，以及表格的结构本身也对于业务含义有很好的解释和组织作用

二、思路与方案

首先分析拿到的表格样式的单据里面的字段是否可以使用苍穹里面的控件去实现，例如通用字段控件、单据体控件等，然后可以通过flex面板布局容器对控件进行布局，普通字段控件是可以设置边框样，通过布局将字段组合在一起可以达到类似表格的样式，通过分析可以将这样的表格样式分成苍穹里面的控件去实现

三、实现过程

3.1 通过单据模板选择单据不带组织模板，单据标识为(kdec_listshowbill),在单据模板页面上添加flex面板用于布局，首先使用flex面板将整个页面进行分割如下图3.1.1所示

图3.1.1

3.1.2然后在中间flex面板中添加flex面板，在内层flex面板中添加所需要的字段，内层flex面板采用水平布局将添加的字段设置一行，调整字段的样式，设置字段的外边距为 '0' 将字段靠在一起，如图3.1.2所示

图3.1.2

3.1.3外层flex面板将里面flex面板采用垂直方式布局，并设置flex面板的边框，通过调整布局样式如图3.1.3所示这样将字段显示成表格的样式

图3.1.3

3.2 将多行的数据可以看做是一个单据体，先添加flex面板，然后添加一个单据体控件，将第一列的标题名称去掉，后期通过插件去填写默认值，设置缺省行数为3行，调整样式中的宽度，设置flex面板的边框，效果如图3.2.1所示

图3.2.1

3.3 添加一个flex面板、标签、单据体控件，标签控件名称为(配置),将单据体第一列的标题名去掉，设置缺省值3行，后期通过插件去填写默认值，设置flex面板的边框,调整布局、标签控件的样式如下图3.4所示

图3.3

3.4 添加flex面板，使用通用字段控件调整样式、调整flex面板布局、设置字段边框样式如下图所示3.5所示

图3.4

3.5 添加flex面板，跟3.1步骤类似，添加通用字段控件，调整布局样式效果如下图3.5所示

图3.5

3.6 编写代码插件，为两个单据体的第一列分别赋默认值，插件类注册页面插件

public class PageTestPlugin extends AbstractBillPlugIn{

    @Override
    public void afterCreateNewData(EventObject e) {
        super.afterCreateNewData(e);
        //获取单据体数据集合赋默认值
        DynamicObjectCollection entitys=this.getModel().getEntryEntity("kdec_entryentity");
        entitys.get(0).set("kdec_textfield11","前期设计师");
        entitys.get(1).set("kdec_textfield11","造型品质管理部");
        entitys.get(2).set("kdec_textfield11","工程负责人");
        //第二个单据体数据集合进行赋默认值
        DynamicObjectCollection entity1s=this.getModel().getEntryEntity("kdec_entryentity1");
        entity1s.get(0).set("kdec_textfield12","高配");
        entity1s.get(1).set("kdec_textfield12","中配(全配)");
        entity1s.get(2).set("kdec_textfield12","低配");
    }
}