一种基于控件式自定义表单的方法技术

本发明专利技术属于自动办公系统领域，涉及自定义表单的处理方法，尤其涉及一种基于控件式自定义表单的方法，具体为：建立自定义流程系统和控件库‑拖动控件进入空白表单‑对控件进行属性配置‑生成表单示例并配合流程流转‑进行流程走向判断‑表单数据修改。本发明专利技术丰富了流程配置的多样性，使得业务功能的维度大大拓展；表单中的数据可以在流程中进行更改，同时修改后的数据也可作用于本有的流程流转中，不会影响之前已经流转过的流程。这样的自定义表单能够满足不同情况下的业务需求，减轻了开发人员对不同业务表单的开发压力，拓展出多个业务层面，也能够大大提升业务人员的工作效率。

A Method of Customizing Form Based on Control

【技术实现步骤摘要】
一种基于控件式自定义表单的方法
本专利技术属于自动办公系统领域，涉及自定义表单的处理方法，尤其涉及一种基于控件式自定义表单的方法。
技术介绍
在现在讲求效率的社会中，公司内部的办公协作效率则显得更加重要。因此，我们可以从如何提升自动办公系统的效率处着手。在公司内部中，经常会有很多的单子需要提交，如请假、调休、外勤等等，每次需要提交并处理这些单子的时候，提交人都需要找对应的负责人进行确认并签名，这就会浪费很多的时间在沟通上，大大地提升了沟通的成本。而如果根据业务上的不同，需要开发人员进行不同的单子开发的话，又会提升了开发成本。因此，本专利技术就是从自定义表单的角度出发，将填写项抽象出一个个控件，可以根据业务需求进行控件的拖动，并进行配置，即可符合业务的需求，使用该单进行公司内部的协作与办公，减轻了开发人员的开发压力，也降低了提交人与处理人之间的沟通成本，大大地提升了公司内部的办公和协作效率。
技术实现思路
本专利技术针对上述的问题，提供了一种为了达到上述目的，本专利技术采用的技术方案为，一种基于控件式自定义表单的方法，其特征在于，具体包括以下步骤：一、建立自定义流程系统和控件库；自定义流程系统主要引用的是ztree插件，其官方网址为http://www.treejs.cn/控件库：表单模型的json结构：这是一个控件的最基础属性，控件json中包括两个字段：componentName和props；1.componentName表示的该控件属于的控件类型，常用的控件类型包括TextField(单行文本输入)、TextareaField(多行文本输入)、DDSelectField(单选框)、DDMultiSelectField(多选框)、DepartmentField(部门控件)、MemberField(人员控件)，其中props里面包括了两个最重要的属性：id和value；2.id是表示这个控件的独有id，是当前这个控件的唯一标识；3.value则是表示这个控件的值；4.label则是表示这个控件中的显示文字，是这个控件所代表要填入的数据的名称；5.required则是表示表示该控件在提交/可编辑的任务节点中是否必填，如果是required为真，则会要求提交人/处理人对该控件的值进行填写；6.placeholder则是未填写数据时候，数据框中给填写人的一些填写提示7.isEdit为”true”,这代表改组件在当前流程阶段是可以被编辑的,反之则不允许；8.notPrint在实际中并未用到；注：除去这些最核心的字段外，一些特殊的控件会有对应的自由的特殊字段；如选择类型的控件中，会含有option字段，表示可选择的选项；如人员/部门控件中，会含有rangeList、userRange、departmentRange等字段，表示可选择的范围；二、对控件库中的每个控件进行配置，得到基础属性控件以及包含基础属性控件配合纸的高级属性控件；三、在控件列表点击所需的控件后,会生成对应的控件示例。2.根据权利要求1所述的一种基于控件式自定义表单的方法，其特征在于，步骤三中则需要根据业务的特性，拖动所选控件到相应的表单位置，其拖动使用的插件是jqueryui,官网为https://jqueryui.com，1)先获取拖动前的控件位置与鼠标位置，对其进行记录；2)拖动后，获取鼠标的拖动后位置，使用拖动后的位置与鼠标拖动前的位置进行相减，得出对应的偏移位置；3)再使用算出的偏移位置，与控件拖动前的位置进行相加，得出控件实际拖动后的位置；4)将控件从原来的拖动前位置进行代码层面的移动，并展示在前端的时候，是显示控件会随着鼠标的拖动，也一直跟随着鼠标的位置进行变动。3.根据权利要求2所述的一种基于控件式自定义表单的方法，其特征在于，步骤二中队控件进行的配置具体包括以下配置：对控件的标题进行设置、对控件的提示文字进行设置、对控件的说明文字进行设置。4.根据权利要求3所述的一种基于控件式自定义表单的方法，其特征在于，所述控件为选择控件，可提供选项配置供编辑人进行配置，进而供用户在填写表单的时候进行选择。5.根据权利要求4所述的一种基于控件式自定义表单的方法，其特征在于，表单数据可以在流程节点中进行更改，即包括以下步骤：1)将工单的数据在页面上进行展示；2)用户点击编辑按钮可以进入工单数据编辑页面；3)在编辑页面，可以对允许编辑的工单控件进行数据的编辑；4)编辑完成后，用户点击保存即可进行编辑后的数据的保存；系统自动返回到工单页面，并显示已经修改后的数据。作为优选，对拖入控件进行配置，其特征在于，对控件进行配置还涉及与具体业务的相关：成员控件，与公司内部的人员会进行关联，也由表单编辑人进行范围的划定，并在划定的范围内进行与公司内部的人员进行关联；部门控件，与公司内部的组织架构会进行关联，也由表单编辑人进行范围的划定，并在划定的范围内进行与公司内部的组织架构进行关联。作为优选，生成的业务表单可与公司内部的自定义流程系统进行配合，进行流转。与现有技术相比，本专利技术的优点和积极效果在于，1、本专利技术丰富了流程配置的多样性，使得业务功能的维度大大拓展；表单中的数据可以在流程中进行更改，同时修改后的数据也可作用于本有的流程流转中，不会影响之前已经流转过的流程。这样的自定义表单能够满足不同情况下的业务需求，减轻了开发人员对不同业务表单的开发压力，拓展出多个业务层面，也能够大大提升业务人员的工作效率。附图说明为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1为控件式自定义表单的创建与使用流程图；图2为配置页面控件库加载的流程图；图3为表单进行下一流程节点判断的流程图图4为前端页面和服务端建立连接的流程图；图5为前后端的数据传递流程图；图6为前端页面对获取数据进行处理的流程图；图7为前端对获取数据进行渲染的流程图；图8为本专利技术的示例流程图。具体实施方式为了能够更清楚地理解本专利技术的上述目的、特征和优点，下面结合附图和实施例对本专利技术做进一步说明。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。在下面的描述中阐述了很多具体细节以便于充分理解本专利技术，但是，本专利技术还可以采用不同于在此描述的其他方式来实施，因此，本专利技术并不限于下面公开说明书的具体实施例的限制。在公司内部中，经常会有很多的单子需要提交,本专利技术从自定义表单的角度出发，将填写项抽象出一个个控件，可以根据业务需求进行控件的拖动，并进行配置，即可符合业务的需求，使用该单进行公司内部的协作与办公，减轻了开发人员的开发压力，也降低了提交人与处理人之间的沟通成本，大大地提升了公司内部的办公和协作效率。实施例1，如图1-图7所示，本专利技术提供了一种基于基于控件式自定义表单的方法，在一个实施例子中，如图1所示，一个基于控件式表单的生成与流转，包括以下步骤：步骤S10，拖动控件生成自定义表单。在本例实施中，控件库是从本专利技术中已存在的控件列表中获取并加载到页面当中，每个控件都包含有基础属性配置和高级属性配置。其中基础属性配置本文档来自技高网...

【技术保护点】
1.一种基于控件式自定义表单的方法，其特征在于，具体包括以下步骤：一、建立自定义流程系统和控件库；自定义流程系统主要引用的是ztree插件,控件库:表单模型的json结构：

【技术特征摘要】
1.一种基于控件式自定义表单的方法，其特征在于，具体包括以下步骤：一、建立自定义流程系统和控件库；自定义流程系统主要引用的是ztree插件,控件库:表单模型的json结构：这是一个控件的最基础属性，控件json中包括两个字段：componentName和props；二、对控件库中的每个控件进行配置，得到基础属性控件以及包含基础属性控件配合纸的高级属性控件；三、在控件列表点击所需的控件后,会生成对应的控件示例。2.根据权利要求1所述的一种基于控件式自定义表单的方法，其特征在于，步骤三中则需要根据业务的特性，拖动所选控件到相应的表单位置，其拖动使用的插件是jqueryui；1)先获取拖动前的控件位置与鼠标位置，对其进行记录；2)拖动后，获取鼠标的拖动后位置，使用拖动后的位置与鼠标拖动前的位置进行相减，得出对应的偏移位置；3)再使用算出的偏移位置，与控件拖动前的位置进行相加，得出控件实际拖动后的位置；4)将控件从...

【专利技术属性】
技术研发人员：麦俊杰，
申请(专利权)人：广州凡科互联网科技股份有限公司，
类型：发明
国别省市：广东,44