[发明专利]自定义票据模板方法及系统

说明书

技术领域

本发明涉及票据个性化定制领域，特别涉及一种自定义票据模板方法。

背景技术

在定义一个新的控件需要在js文件、页面文件、票据展示页面增加相对应的内容，新增比较繁琐，每个模板生成的HTML代码通过序列化的方式以字符的方式保存到数据，占用数据库内存，在模板数据比较多的时候需要的数据库内存比较大。

在以前给客户添加各种单据模板(不同客户单据的排版，比如发票模板)时，都需要开发人员在项目中新增此模板的页面，并实现根据模板生成相应的单据数据，以及导出单据。这样导致了在新增模板和修改模板时开发的周期比较长，给客户和开发人员都带来不便。

发明内容

针对现有技术存在的问题，本发明提供一种自定义票据模板方法及系统。

为实现上述目的，首先，本发明的具体技术方案如下：一种自定义票据模板方法，包括如下步骤：

准备控件集，该控件集包含第1复数个控件，涵盖目标票据拥有的数据；

编辑票据名称、类型、尺寸；

准备画布，该画布能够使用在线可视化的设计方式进行页面布局设计；

拖拽第2复数个控件到所述画布，编辑应用于目标票据的该第2复数个控件的属性样式；

预览、保存上述票据模板。

优选地，所述第1复数个控件涵盖买家信息、卖家信息、订单产品的信息。

其次，本发明也提供一种实现上述方法的系统，具体技术方案如下：一种自定义票据模板系统，包括：

控件集，涵盖目标票据所拥有的数据；

画布，能够使用在线可视化的设计方式进行页面布局设计；

票据基本信息窗口，用于编辑票据的名称、类型、尺寸信息。

控件属性编辑器，编辑应用于目标票据的控件集；

票据操作按钮集，用于对票据进行输出。

优选地，所述控件集涵盖买家信息、卖家信息、订单产品的信息。

进一步地，所述控件集还包括自定义构造元素，该自定义构造元素包括本地图片控件。

优选地，所述票据操作按钮集包括：打印预览、保存模板、保存并关闭。

本发明使用html+css+JS实现控件的生成、拖拽、修改。应用于自定义票据(如:发票)的排版、导出、打印。其中，html：组成页面布局,主要用DIV布局；css：页面样式效果实现，控制页面上元素的大小、颜色、位置等效果；JS：页面功能的实现，实现了拖拽控件到画布，点击修改控件属性、内容。保存画布，点击打印等功能。拖拽用到js主要方法onmousemove()、onmouseup()、onmouseout()。

本发明在添加修改票据模板时通过拖拽控件，编辑控件属性的方式实现，跟以前需要定义好模板然后开发人员新增页面的实现方式比，极大的缩短了开发周期和操作难度。对于用户说只需要自己自定义模板来实现自己想要展示的效果，不需要每次都从新设计在给技术公司改版修改。缩短了需要改版的经费和时间，满足了实时修改使用的效果。

附图说明

图1为本发明自定义票据模板方法的流程图；

图2为本发明自定义票据模板系统的构成框图；

图3为本发明中票据操作按钮集的构成框图；

图4为本发明中控件集的实现流程框图；

图5为本发明中自定义票据模板后的票据页面展示流程框图。

具体实施方式

以下结合附图和具体实施例，对本发明进一步说明。

参照图1所示，本发明提供一种自定义票据模板方法，包括如下步骤：

S101：准备控件集

该控件集包含第1复数个控件，涵盖目标票据拥有的数据；根据不同目标票据的类型、数据量不同，可以将其划归为常用控件、与自定义控件，把共性的归为常用控件，如包括买家信息、卖家信息、订单产品的信息。把不常见的控件或特殊要求的控件归为自定义控件。

S102：编辑票据名称、类型、尺寸

例如，通过在单独的窗口，选择票据类型，并录入票据名称、尺寸。

S103：准备画布

该画布能够使用在线可视化的设计方式进行页面布局设计；通常该画布自动展示，基于html定义。

S104：自定义目标票据

拖拽第2复数个控件到所述画布，编辑应用于目标票据的该第2复数个控件的属性样式。

S105：预览、保存上述票据模板。

参考图2与图3，本发明还提供一种实现上述自定义票据模板系统1，包括：

控件集10，涵盖目标票据所拥有的数据；