CN115525270A - 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质 - Google Patents

基于拖拽渲染表单页面的方法、系统、终端设备及存储介质 Download PDF

Info

Publication number
CN115525270A
CN115525270A CN202211155955.5A CN202211155955A CN115525270A CN 115525270 A CN115525270 A CN 115525270A CN 202211155955 A CN202211155955 A CN 202211155955A CN 115525270 A CN115525270 A CN 115525270A
Authority
CN
China
Prior art keywords
elements
rule
configuration
layout
dragging
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211155955.5A
Other languages
English (en)
Inventor
霍颖倩
施英华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
CCB Finetech Co Ltd
Original Assignee
CCB Finetech Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by CCB Finetech Co Ltd filed Critical CCB Finetech Co Ltd
Priority to CN202211155955.5A priority Critical patent/CN115525270A/zh
Publication of CN115525270A publication Critical patent/CN115525270A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提供了一种基于拖拽渲染表单页面的方法、系统、终端设备及存储介质，涉及计算机系统领域。本发明提供可拖拽的可视化页面进行表单绘制，达到所绘即所得的目的。提供表单元素自定义配置，达到表单元素显隐，必填，校验，是否可编辑的灵活控制。提供可拖拽栅格布局，实现灵活配置表单布局本发明表单元素可单独创建，实现表单元素复用，无需每个表单重复配置。表单可以进行灵活布局。可以通过拖拽栅格布局，将表单元素拖到栅格上，实现布局的灵活调整。同时栅格可以进行合并，类似于表格的合并单元格，实现表单元素不同长度的展示。达到所绘即所得的目的。

Description

基于拖拽渲染表单页面的方法、系统、终端设备及存储介质
技术领域
本发明涉及计算机系统领域，具体而言，涉及一种基于拖拽渲染表单页面的方法、系统、终端设备及存储介质。
背景技术
目前公司办公系统中表单元素以及表单元素布局为前端开发人员通过代码在页面上固定写死的。对于表单元素以及布局的修改及其不方便。若将其产品化，写死的表单项以及单一布局并不能满足其他公司的需求。从而导致没有卖点，修改表单需要定制开发的问题。
同时表单开发量大，每个表单均需要写一套表单页面，将表单的每个表单项进行代码编写，目前一个系统平均50个流程，就需要写50套表单页面。如果表单元素发生变化，就需要在对应的前端代码中添加代码支持表单元素的变动。比如，在3个流程表单上需要添加某些表单元素，同时需要进行表单元素的必填或者长度校验，则需要找到这3个表单前端代码，分别进行添加。
表单检验方式繁杂，校验种类多，不统一。比如，现在一个表单元素的值的长度校验，有使用在输入框上标红提示长度的，有使用弹窗提示错误信息的等。
表单布局单一且固定，如果将原来的表单一列布局改为三列布局，则需要重新编写代码控制表单元素的展示位置。
发明内容
本发明实施例提供一种基于拖拽渲染表单页面的方法、系统、终端设备及存储介质。
一种基于拖拽渲染表单页面的方法，具体步骤包括：
S1、确定一个表单的全部表单元素，通过拖拽基础元素来逐个创建表单元素；
S2、通过可视化页面将步骤一的表单元素拖拽到表单画布，并对其进行布局调整；
S3、选中表单元素对指定的表单元素进行自定义配置，配置该表单元素的校验规则，配置该表单元素的动态显隐规则，配置该表单元素的长度限制；
S4、将绘制好的表单配置以JSON字符串格式保存到数据库中；
S5、公共表单组件通过接口获取到步骤S4的配置，根据配置进行表单元素及其布局的渲染。
进一步的：添加表单元素的实现方法，其步骤包括：
创建三列布局的页面，左侧列展示基础元素，中间列展示从左侧拖过来的基础元素；右侧列展示基础元素的自定义配置；
从左侧列中拖动基础元素到中间列，监听鼠标按下事件，判断按下位置是否为左侧有效区域，如果是有效区域，获取到按下鼠标位置的基础元素，监听鼠标的抬起事件，获取到抬起鼠标的位置，如果抬起位置在中间列区域，则在中间列渲染一个基础元素；
选中中间列的基础元素，在右侧配置基础元素的展示名称，以及接口对应的字段名称，点击保存按钮时将基础元素的类型以及配置以JSON字段串的格式保存到数据库，从而形成一个表单元素。
进一步的：拖拽表单元素绘制表单的实现方法，其步骤包括：
创建三列布局的页面，左侧列展示表单元素以及栅格布局组件；中间列展示即将生成的表单；右侧列展示中间列选中的表单元素的配置项；
从左侧列中拖动表单元素或者栅格布局组件到中间列，监听鼠标按下事件，获取到按下鼠标位置的表单元素或者栅格布局组件，监听鼠标抬起事件，获取鼠标抬起的位置，如果为中间列的范围，则此次拖拽生效，鼠标抬起的位置如果为栅格布局中的某一个单元格，则将拖动的表单元素添加到栅格布局的相应单元格位置，鼠标抬起的位置如果为栅格布局外的位置，则获取该位置前后的表单元素，将此次拖拽的表单元素添加到前后表单元素中间；
选中中间列中的表单元素，在右侧列配置表单元素的配置；
点击保存按钮，将表单中的全部表单元素及表单元素配置以JSON字符串的形式保存到数据库中，从而形成一个表单。
进一步的：表单元素及其布局渲染的实现方法，其步骤包括：
公共表单组件通过接口获取到表单配置；
遍历配置中获取的表单配置，判断表单配置的类型是否为栅格布局，如果是栅格布局，则表示表单元素为多列布局；
如果是栅格布局，逐行遍历表单元素，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则按照配置的所占单元格数进行空位预留；
如果不是栅格布局，则直接顺序在表单最下方添加一行空位，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则进行下述判断；
判断需要渲染的表单元素类型，如果为输入框类型，则添加一段输入框类型的代码；如果为日期选择框，则添加一段日期选择框类型的代码；如果为附件类型的代码，则添加一段附件类型的代码；
判断需要渲染的表单元素是否可编辑，如果计算出的是否可编辑规则为不可编辑，则添加禁用或者只读属性；
判断需要渲染的表单元素是否添加了校验规则，如果添加了校验规则，则为表单元素添加校验，实现表单元素的值发生变化时进行值的校验；
判断需要渲染的表单元素是否为必填表单元素，如果计算出的必填规则为必填，则添加必填属性，且添加必填校验规则。
进一步的：表单元素添加校验的实现方法，其步骤包括：
表单公共组件获取到表单元素配置；
判断当前表单元素计算出的必填规则是否为必填；如果是必填，则在表单元素校验规则代码中添加一条必填校验的规则；
判断表单元素配置中是否配置了当前表单元素的最长可输入长度以及最小可输入长度，如果已经配置，则在表单元素的校验规则代码中添加一条表单元素值的长度校验规则；
判断表单元素中是否配置了正则校验规则，如果配置了正则校验规则，则在表单元素的校验规则中添加一条正则校验规则。
进一步的：当表单公共组件需要触发校验时，逐个表单元素进行其校验规则的校验，不通过，则在相应的表单元素位置给出错误提示，并将页面滚动到校验未通过的第一个元素的位置。
进一步的：系统包括配置模块、监听模块、校验模块、显示模块以及数据库存储单元模块；
配置模块，用于配置表单元素的校验规则，配置表单元素的动态显隐规则，配置该表单元素的长度限制；
监听模块，用于监听鼠标操作；
校验模块，用于判定表单规格、数据信息；
显示模块，用于提供表单的信息展示页面；
数据库存储单元模块，用于存储表单信息，校验规则。
进一步的：终端设备可以包括：处理器、存储介质和总线，存储介质存储有处理器可执行的机器可读指令，当终端设备运行时，处理器与存储介质之间通过总线通信，处理器执行机器可读指令，以执行时执行如前述实施例中所述的基于拖拽渲染表单页面方法的步骤。
进一步的：一种存储介质，该存储有计算机程序，所述计算机程序被处理器运行时执行上述的方法的步骤。
本发明的有益效果：本发明表单元素可单独创建，实现表单元素复用，无需每个表单重复配置。表单可以进行灵活布局。可以通过拖拽栅格布局，将表单元素拖到栅格上，实现布局的灵活调整。同时栅格可以进行合并，类似于表格的合并单元格，实现表单元素不同长度的展示。达到所绘即所得的目的。表单元素可以进行自定义配置显隐，必填，是否可编辑，校验等。前端人员无需进行表单元素渲染代码的编写，实现表单页面完全可配置化。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本发明方法的流程示意图；
图2示出了本发明方法中添加表单元素的实现方法流程图。
图3示出了本发明方法中拖拽表单元素绘制表单的实现方法流程图。
图4示出了本发明方法中表单元素添加校验的实现方法流程图。
图5示出了本发明装置的组成示意图。
图6示出了本发明终端设备的组成示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，本发明中附图仅起到说明和描述的目的，并不用于限定本发明的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本发明中使用的流程图示出了根据本发明的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本发明内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。
另外，本发明所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，本发明实施例中将会用到术语“包括”，用于指出其后所声明的特征的存在，但并不排除增加其它的特征。还应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。在本发明的描述中，还需要说明的是，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
图1示出了本发明方法的步骤流程图。
具体的本发明方法步骤包括：
S1、确定一个表单的全部表单元素，通过拖拽基础元素来逐个创建表单元素；
S2、通过可视化页面将步骤一的表单元素拖拽到表单画布，并对其进行布局调整；
S3、选中表单元素对指定的表单元素进行自定义配置，可以配置该表单元素的校验规则，配置该表单元素的动态显隐规则，配置该表单元素的长度限制等；
S4、将绘制好的表单配置以JSON字符串格式保存到数据库中；
S5、公共表单组件通过接口获取到步骤S4的配置，根据配置进行表单元素及其布局的渲染。
如图2所示，关于添加表单元素的实现方法，其步骤包括：
创建三列布局的页面，左侧列展示基础元素，例如：输入框，单选钮，多选框，字典，意见域等；中间列展示从左侧拖过来的基础元素，即后面要生成的表单元素；右侧列展示基础元素的自定义配置，例如该基础元素的名称，以及接口对应的字段名称。
从左侧列中拖动基础元素到中间列。监听鼠标按下事件，判断按下位置是否为左侧有效区域，如果是有效区域，获取到按下鼠标位置的基础元素。监听鼠标的抬起事件，获取到抬起鼠标的位置，如果抬起位置在中间列区域，则在中间列渲染一个基础元素。以请假表单中的【申请人表单元素】举例：请假表单中的申请人为输入框类型，则需要从左侧拖一个输入框类型的基础元素到中间列。
选中中间列的基础元素，在右侧配置基础元素的展示名称，以及接口对应的字段名称。点击保存按钮时将基础元素的类型以及配置以JSON字段串的格式保存到数据库，从而形成一个表单元素。以请假表单中的【申请人表单元素】举例：需要选中中间列的输入框，在右侧列中配置好名称为【申请人】，接口对应字段为【applyer】。
如图3所示，拖拽表单元素绘制表单的实现方法，其步骤包括：
创建三列布局的页面，左侧列展示表单元素以及栅格布局组件，例如申请人，申请时间，请假截止时间，请假原因等；中间列展示即将生成的表单；右侧列展示中间列选中的表单元素的配置项。
从左侧列中拖动表单元素或者栅格布局组件到中间列。监听鼠标按下事件，获取到按下鼠标位置的表单元素或者栅格布局组件。监听鼠标抬起事件，获取鼠标抬起的位置，如果为中间列的范围，则此次拖拽生效。鼠标抬起的位置如果为栅格布局中的某一个单元格，则将拖动的表单元素添加到栅格布局的相应单元格位置。鼠标抬起的位置如果为栅格布局外的位置，则获取该位置前后的表单元素，将此次拖拽的表单元素添加到前后表单元素中间。
选中中间列中的表单元素，在右侧列配置表单元素的配置，例如：是否展示表单名称，必填规则，校验规则，显示规则等。
点击保存按钮，将表单中的全部表单元素及表单元素配置以JSON字符串的形式保存到数据库中，从而形成一个表单。
如图4所示，表单元素及其布局渲染的实现方法，其步骤包括：
公共表单组件通过接口获取到表单配置。
遍历配置中获取的表单配置，判断表单配置的类型是否为栅格布局，如果是栅格布局，则表示表单元素为多列布局。
如果是栅格布局，逐行遍历表单元素，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则按照配置的所占单元格数进行空位预留。
如果不是栅格布局，则直接顺序在表单最下方添加一行空位，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则进行下述判断。
判断需要渲染的表单元素类型，如果为输入框类型，则添加一段输入框类型的代码；如果为日期选择框，则添加一段日期选择框类型的代码；如果为附件类型的代码，则添加一段附件类型的代码。
判断需要渲染的表单元素是否可编辑，如果计算出的是否可编辑规则为不可编辑，则添加禁用或者只读属性。
判断需要渲染的表单元素是否添加了校验规则，如果添加了校验规则，则为表单元素添加校验，实现表单元素的值发生变化时进行值的校验。
判断需要渲染的表单元素是否为必填表单元素，如果计算出的必填规则为必填，则添加必填属性，且添加必填校验规则。
如图4所示，还包括表单元素添加校验的实现方法，其步骤包括：
表单公共组件获取到表单元素配置。
判断当前表单元素计算出的必填规则是否为必填。如果是必填，则在表单元素校验规则代码中添加一条必填校验的规则。
判断表单元素配置中是否配置了当前表单元素的最长可输入长度以及最小可输入长度，如果配置了，则在表单元素的校验规则代码中添加一条表单元素值的长度校验规则。
判断表单元素中是否配置了正则校验规则，如果配置了正则校验规则，则在表单元素的校验规则中添加一条正则校验规则。
当表单公共组件需要触发校验时，逐个表单元素进行其校验规则的校验，不通过，则在相应的表单元素位置给出错误提示，并将页面滚动到校验未通过的第一个元素的位置。
如图5所示本方案所对应的系统，包括配置模块、监听模块、校验模块、显示模块以及数据库存储单元模块；
配置模块，用于配置表单元素的校验规则，配置表单元素的动态显隐规则，配置该表单元素的长度限制；
监听模块，用于监听鼠标操作；
校验模块，用于判定表单规格、数据信息；
显示模块，用于提供表单的信息展示页面；
数据库存储单元模块，用于存储表单信息，校验规则。
如图6所示，该终端设备6可以包括：处理器601、存储介质602和总线603，存储介质602存储有处理器601可执行的机器可读指令，当终端设备运行时，处理器601与存储介质602之间通过总线603通信，处理器601执行机器可读指令，以执行时执行如前述实施例中所述的基于拖拽渲染表单页面方法的步骤。具体实现方式和技术效果类似，在此不再赘述。
为了便于说明，在上述终端设备中仅描述了一个处理器。然而，应当注意，一些实施例中，本发明中的终端设备还可以包括多个处理器，因此本发明中描述的一个处理器执行的步骤也可以由多个处理器联合执行或单独执行。
以上仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于拖拽渲染表单页面的方法，其特征在于，包括以下步骤：
S1、确定一个表单的全部表单元素，通过拖拽基础元素来逐个创建表单元素；添加表单元素的实现方法，其步骤包括：
创建三列布局的页面；
从左侧列中拖动基础元素到中间列；
选中中间列的基础元素，在右侧配置基础元素的展示名称，以及接口对应的字段名称，点击保存按钮时将基础元素的类型以及配置以JSON字段串的格式保存到数据库，从而形成一个表单元素；
拖拽表单元素绘制表单的实现方法，其步骤包括：
创建三列布局的页面，左侧列展示表单元素以及栅格布局组件；中间列展示即将生成的表单；右侧列展示中间列选中的表单元素的配置项；
从左侧列中拖动表单元素或者栅格布局组件到中间列；
选中中间列中的表单元素，在右侧列配置表单元素的配置；
点击保存按钮，将表单中的全部表单元素及表单元素配置以JSON字符串的形式保存到数据库中，从而形成一个表单；
S2、通过可视化页面将步骤一的表单元素拖拽到表单画布，并对其进行布局调整；
S3、选中表单元素对指定的表单元素进行自定义配置，配置该表单元素的校验规则，配置该表单元素的动态显隐规则，配置该表单元素的长度限制；
S4、将绘制好的表单配置以JSON字符串格式保存到数据库中；
S5、公共表单组件通过接口获取到步骤S4的配置，根据配置进行表单元素及其布局的渲染。
2.根据权利要求1所述的方法，其特征在于，所述的三列布局的页面中，左侧列展示基础元素，中间列展示从左侧拖过来的基础元素；右侧列展示基础元素的自定义配置。
3.根据权利要求1所述的方法，其特征在于，从左侧列中拖动基础元素到中间列的步骤中，监听鼠标按下事件，判断按下位置是否为左侧有效区域，如果是有效区域，获取到按下鼠标位置的基础元素，监听鼠标的抬起事件，获取到抬起鼠标的位置，如果抬起位置在中间列区域，则在中间列渲染一个基础元素。
4.根据权利要求1所述的方法，其特征在于，从左侧列中拖动表单元素或者栅格布局组件到中间列的步骤中，包括监听鼠标按下事件，获取到按下鼠标位置的表单元素或者栅格布局组件，监听鼠标抬起事件，获取鼠标抬起的位置，如果为中间列的范围，则此次拖拽生效，鼠标抬起的位置如果为栅格布局中的某一个单元格，则将拖动的表单元素添加到栅格布局的相应单元格位置，鼠标抬起的位置如果为栅格布局外的位置，则获取该位置前后的表单元素，将此次拖拽的表单元素添加到前后表单元素中间。
5.根据权利要求1所述的方法，其特征在于，还包括表单元素及其布局渲染的实现方法，其步骤包括：
公共表单组件通过接口获取到表单配置；
遍历配置中获取的表单配置，判断表单配置的类型是否为栅格布局，如果是栅格布局，则表示表单元素为多列布局；
如果是栅格布局，逐行遍历表单元素，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则按照配置的所占单元格数进行空位预留；
如果不是栅格布局，则直接顺序在表单最下方添加一行空位，判断表单元素是否显示，如果计算出的动态显隐规则为渲染该表单元素，则进行下述判断；
判断需要渲染的表单元素类型，如果为输入框类型，则添加一段输入框类型的代码；如果为日期选择框，则添加一段日期选择框类型的代码；如果为附件类型的代码，则添加一段附件类型的代码；
判断需要渲染的表单元素是否可编辑，如果计算出的是否可编辑规则为不可编辑，则添加禁用或者只读属性；
判断需要渲染的表单元素是否添加了校验规则，如果添加了校验规则，则为表单元素添加校验，实现表单元素的值发生变化时进行值的校验；
判断需要渲染的表单元素是否为必填表单元素，如果计算出的必填规则为必填，则添加必填属性，且添加必填校验规则。
6.根据权利要求1所述的方法，其特征在于，还包括表单元素添加校验的实现方法，其步骤包括：
表单公共组件获取到表单元素配置；
判断当前表单元素计算出的必填规则是否为必填；如果是必填，则在表单元素校验规则代码中添加一条必填校验的规则；
判断表单元素配置中是否配置了当前表单元素的最长可输入长度以及最小可输入长度，如果已经配置，则在表单元素的校验规则代码中添加一条表单元素值的长度校验规则；
判断表单元素中是否配置了正则校验规则，如果配置了正则校验规则，则在表单元素的校验规则中添加一条正则校验规则。
7.根据权利要求6所述的方法，其特征在于，当表单公共组件需要触发校验时，逐个表单元素进行其校验规则的校验，不通过，则在相应的表单元素位置给出错误提示，并将页面滚动到校验未通过的第一个元素的位置。
8.一种基于拖拽渲染表单页面的系统，其特征在于，包括配置模块、监听模块、校验模块、显示模块以及数据库存储单元模块；
配置模块，用于配置表单元素的校验规则，配置表单元素的动态显隐规则，配置该表单元素的长度限制；
监听模块，用于监听鼠标操作；
校验模块，用于判定表单规格、数据信息；
显示模块，用于提供表单的信息展示页面；
数据库存储单元模块，用于存储表单信息，校验规则。
9.一种终端设备，其特征在于，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当所述终端设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行时执行如权利要求1至7任一项所述的方法的步骤。
10.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至7任一项所述的方法的步骤。
CN202211155955.5A 2022-09-22 2022-09-22 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质 Pending CN115525270A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211155955.5A CN115525270A (zh) 2022-09-22 2022-09-22 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211155955.5A CN115525270A (zh) 2022-09-22 2022-09-22 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质

Publications (1)

Publication Number Publication Date
CN115525270A true CN115525270A (zh) 2022-12-27

Family

ID=84700183

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211155955.5A Pending CN115525270A (zh) 2022-09-22 2022-09-22 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质

Country Status (1)

Country Link
CN (1) CN115525270A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117331560A (zh) * 2023-11-24 2024-01-02 杭银消费金融股份有限公司 一种前端表单页面生成方法及系统

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117331560A (zh) * 2023-11-24 2024-01-02 杭银消费金融股份有限公司 一种前端表单页面生成方法及系统
CN117331560B (zh) * 2023-11-24 2024-02-23 杭银消费金融股份有限公司 一种前端表单页面生成方法及系统

Similar Documents

Publication Publication Date Title
CN109614424B (zh) 页面布局生成方法、装置、计算设备和介质
CA2773152C (en) A method for users to create and edit web page layouts
CA2618211C (en) Designating, setting and discovering parameters for spreadsheet documents
CA2795183C (en) Temporary formatting and charting of selected data
CN108628741A (zh) 网页页面测试方法、装置、电子设备和介质
US7730397B2 (en) System and method for rapid presentation of structured digital content items
US20070101255A1 (en) Chart element variations
US10936804B2 (en) Spreadsheet cell calculation view providing multiple-representation editing
US10089120B2 (en) Widgets in digital dashboards
CN112632936A (zh) 一种电子表格的生成方法、系统及相关装置
CN112068911A (zh) 电子表单的生成方法、装置、系统、设备以及介质
CN115525270A (zh) 基于拖拽渲染表单页面的方法、系统、终端设备及存储介质
CN107908604A (zh) 报表图形生成方法、装置、计算机设备和存储介质
CN114647409A (zh) 大屏可视化应用创建平台、方法、计算设备和存储介质
CN113139371A (zh) 一种可视化图表构建方法、装置、系统及存储介质
CN112650492A (zh) 一种Web页面的渲染方法、系统及相关装置
CN108279962B (zh) 一种创建可视化数据显示界面的方法及装置
US20220004370A1 (en) System for providing software development environment, method for providing software development environment, and non-transitory computer readable medium
CN112700555A (zh) 高可配组态化3d数据可视化实现方法、电子设备、存储介质
CN114594945A (zh) 高级弹窗选择框的生成方法、装置、系统、设备以及介质
CN116383545B (zh) 一种网页报表模板的生成方法、装置、设备和介质
WO2021176982A1 (ja) 表示方法、制御プログラム及び装置
CN116501318B (zh) 表单创建方法、装置、电子设备及计算机可读存储介质
CN116050036B (zh) 一种电网图构建方法、装置及设备
CN112347219A (zh) 矢量地图素材库生成方法、矢量地图生成系统和电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination