CN111090421A - 基于可视化拖拽实现自定义表单系统 - Google Patents
基于可视化拖拽实现自定义表单系统 Download PDFInfo
- Publication number
- CN111090421A CN111090421A CN202010218103.0A CN202010218103A CN111090421A CN 111090421 A CN111090421 A CN 111090421A CN 202010218103 A CN202010218103 A CN 202010218103A CN 111090421 A CN111090421 A CN 111090421A
- Authority
- CN
- China
- Prior art keywords
- field
- design tool
- information
- realizing
- operation platform
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及表单系统技术领域，尤其是一种基于可视化拖拽实现自定义表单系统，包括表单设计工具和表单运行平台，表单设计工具和表单运行平台之间进行数据互通连接，表单设计工具包括自定义字段、标注字段和布局字段，表单运行平台用于表单的解析，本发明能够提高表单的开放效率，给使用者带来极大的便利。
Description
技术领域
本发明涉及表单系统技术领域，具体领域为基于可视化拖拽实现自定义表单系统。
背景技术
传统的软件开发，基本都是对明确功能需求的“定制”开发，如果需要调整系统功能，比如表单上增加一个备注字段，都需要前端开发人员调整前端页面，后端开发人员在数据库里添加字段，调整数据的保存、更新、查询相关代码，工作相对比较重复，且比较耗时，不能及时响应客户的需求。也有少量平台，可以灵活设计表单，最终生成的是HTML页面，但更像是代码生成工具，在灵活性，功能完整性上都有所不足，因此需要更加方便灵活的表单工具。
发明内容
本发明的目的在于提供一种基于可视化拖拽实现自定义表单系统，以解决现有技术中表单系统完整性差，人员使用体验效果差的问题。
为实现上述目的，本发明提供如下技术方案：一种基于可视化拖拽实现自定义表单系统，包括表单设计工具和表单运行平台，表单设计工具和表单运行平台之间进行数据互通连接，
表单设计工具包括自定义字段、标注字段和布局字段，所述的自定义字段包括单选框、多选框、单行文本、多行文本、富文本、计数器、日期选择框、时间选择框、评分、下拉选择框、开关和图片；
所述的标注字段包括姓名、电话、性别、年龄、邮箱、公司和工作地址；
所述的布局字段包括栅格布局、页签布局；
表单运行平台用于表单的解析，创建表结构，保存、更新、查询填写的表单数据。
优选的，表单设计方法为：
①在表单设计工具中，填写表单基本信息；
②添加表单字段；
③设置字段属性；
④保存表单设计信息；
⑤发布保存的表单设计值表单运行平台；
⑥用户填写表单信息；
⑦查看平台上发布的表单信息。
优选的，表单设计工具基于VUE+Element-UI框架形成前端操作系统。
优选的，表单运行平台包括云服务器和设置在云服务器内的表单解析库。
优选的，根据步骤④，保存的表单设计信息为通过表单设计工具生成具有字段信息的JSON数据。
与现有技术相比，本发明的有益效果是：使用自定义表单系统大大的提高了表单的开发效率，不懂开发技能的人，通过简单的培训也能够使用该系统，客户也可以方便的使用表单设计工具对表单进行调整，使得能够快速适应用户的需求，给客户，给开发人员都带来了极大的便利。
附图说明
图1为本发明的表单系统流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明提供一种技术方案：一种基于可视化拖拽实现自定义表单系统，其特征在于：包括表单设计工具和表单运行平台，表单设计工具和表单运行平台之间进行数据互通连接，
表单设计工具包括自定义字段、标注字段和布局字段，所述的自定义字段包括单选框、多选框、单行文本、多行文本、富文本、计数器、日期选择框、时间选择框、评分、下拉选择框、开关和图片；
所述的标注字段包括姓名、电话、性别、年龄、邮箱、公司和工作地址；
所述的布局字段包括栅格布局、页签布局；
表单运行平台用于表单的解析，创建表结构，保存、更新、查询填写的表单数据。
如图1所示，基于可视化拖拽实现自定义表单系统的表单设计方法为：
①在表单设计工具中，填写表单基本信息；
②添加表单字段；
③设置字段属性；
④保存表单设计信息；
⑤发布保存的表单设计值表单运行平台；
⑥用户填写表单信息；
⑦查看平台上发布的表单信息。
表单设计工具基于VUE+Element-UI框架形成前端操作系统。
表单运行平台包括云服务器和设置在云服务器内的表单解析库。
根据步骤④，保存的表单设计信息为通过表单设计工具生成具有字段信息的JSON数据。
通过本技术方案，具体实施过程为：
设计表单
设计表单时，通过点击或者拖拽来添加字段，对各个字段的标题、宽度、字段长度、占位内容、默认值、只读、校验、是否显示在后台列表、是否支持搜索、是否显示在App列表等字段属性进行设置。生成的是字段信息的JSON数据，包含的字段和字段属性。表单JSON数据提交到后台，后台程序对JSON格式数据进行解析，获得到字段相关的信息保存到数据库，自动创建该表单对应的数据库表结构，表单发布后，生成访问表单的H5地址。
填写表单
用户填写表单时，后台从请求参数中获取到表单id，从数据库查询到表单信息返回给前端，前端基于VUE+Element-UI框架，根据返回的JSON数据动态创建对应控件展示表单录入界面，用户填写信息后点击提交，后台接收到用户填写的数据后，对数据进行校验，对合法的数据保存到数据库，不合法的数据返回错误信息。
查看表单填写结果
管理后台根据表单id，从数据库查询到表单信息（主要是列表显示字段，支持搜索的字段）以及表单数据返回给前端，前端动态创建出表单结果列表页面，支持按用户设定的字段进行实时搜索。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (5)
1.一种基于可视化拖拽实现自定义表单系统，其特征在于：包括表单设计工具和表单运行平台，表单设计工具和表单运行平台之间进行数据互通连接，
表单设计工具包括自定义字段、标注字段和布局字段，所述的自定义字段包括单选框、多选框、单行文本、多行文本、富文本、计数器、日期选择框、时间选择框、评分、下拉选择框、开关和图片；
所述的标注字段包括姓名、电话、性别、年龄、邮箱、公司和工作地址；
所述的布局字段包括栅格布局、页签布局；
表单运行平台用于表单的解析，创建表结构，保存、更新、查询填写的表单数据。
2.根据权利要求1所述的基于可视化拖拽实现自定义表单系统，其特征在于：表单设计方法为：
①在表单设计工具中，填写表单基本信息；
②添加表单字段；
③设置字段属性；
④保存表单设计信息；
⑤发布保存的表单设计值表单运行平台；
⑥用户填写表单信息；
⑦查看平台上发布的表单信息。
3.根据权利要求2所述的基于可视化拖拽实现自定义表单系统，其特征在于：表单设计工具基于VUE+Element-UI框架形成前端操作系统。
4.根据权利要求2所述的基于可视化拖拽实现自定义表单系统，其特征在于：表单运行平台包括云服务器和设置在云服务器内的表单解析库。
5.根据权利要求2所述的基于可视化拖拽实现自定义表单系统，其特征在于：根据步骤④，保存的表单设计信息为通过表单设计工具生成具有字段信息的JSON数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010218103.0A CN111090421A (zh) | 2020-03-25 | 2020-03-25 | 基于可视化拖拽实现自定义表单系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010218103.0A CN111090421A (zh) | 2020-03-25 | 2020-03-25 | 基于可视化拖拽实现自定义表单系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111090421A true CN111090421A (zh) | 2020-05-01 |
Family
ID=70400613
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010218103.0A Pending CN111090421A (zh) | 2020-03-25 | 2020-03-25 | 基于可视化拖拽实现自定义表单系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111090421A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111708529A (zh) * | 2020-06-23 | 2020-09-25 | 浪潮云信息技术股份公司 | 一种基于angular通过拖拽生成表单的实现方法 |
| CN112417334A (zh) * | 2020-11-20 | 2021-02-26 | 青岛以萨数据技术有限公司 | 实现自定义功能icon的工作台、数据处理方法及装置 |
| CN112560424A (zh) * | 2020-12-23 | 2021-03-26 | 江苏达实久信数字医疗科技有限公司 | 一种适用于医院手术电子病历的表单生成方法、装置及系统 |
| CN116009842A (zh) * | 2023-01-05 | 2023-04-25 | 三峡高科信息技术有限责任公司 | 一种基于可视化拖拽配置的业务表单定制方法 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130159276A1 (en) * | 2011-12-18 | 2013-06-20 | Microsoft Corporation | Map-based selection of query component |
| CN106202025A (zh) * | 2016-07-21 | 2016-12-07 | 深圳艾派网络科技股份有限公司 | 一种oa工作流程表单定制方法 |
| CN107423061A (zh) * | 2017-07-12 | 2017-12-01 | 江苏速度信息科技股份有限公司 | 一种基于ison数据的表单生成方法 |
| CN110413976A (zh) * | 2019-08-01 | 2019-11-05 | 南京信业能源科技有限公司 | 一种所见即所得的动态表单应用方式 |
-
2020
- 2020-03-25 CN CN202010218103.0A patent/CN111090421A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130159276A1 (en) * | 2011-12-18 | 2013-06-20 | Microsoft Corporation | Map-based selection of query component |
| CN106202025A (zh) * | 2016-07-21 | 2016-12-07 | 深圳艾派网络科技股份有限公司 | 一种oa工作流程表单定制方法 |
| CN107423061A (zh) * | 2017-07-12 | 2017-12-01 | 江苏速度信息科技股份有限公司 | 一种基于ison数据的表单生成方法 |
| CN110413976A (zh) * | 2019-08-01 | 2019-11-05 | 南京信业能源科技有限公司 | 一种所见即所得的动态表单应用方式 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111708529A (zh) * | 2020-06-23 | 2020-09-25 | 浪潮云信息技术股份公司 | 一种基于angular通过拖拽生成表单的实现方法 |
| CN111708529B (zh) * | 2020-06-23 | 2023-06-16 | 浪潮云信息技术股份公司 | 一种基于angular通过拖拽生成表单的实现方法 |
| CN112417334A (zh) * | 2020-11-20 | 2021-02-26 | 青岛以萨数据技术有限公司 | 实现自定义功能icon的工作台、数据处理方法及装置 |
| CN112560424A (zh) * | 2020-12-23 | 2021-03-26 | 江苏达实久信数字医疗科技有限公司 | 一种适用于医院手术电子病历的表单生成方法、装置及系统 |
| CN116009842A (zh) * | 2023-01-05 | 2023-04-25 | 三峡高科信息技术有限责任公司 | 一种基于可视化拖拽配置的业务表单定制方法 |
| CN116009842B (zh) * | 2023-01-05 | 2023-08-04 | 三峡高科信息技术有限责任公司 | 一种基于可视化拖拽配置的业务表单定制方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111090421A (zh) | 基于可视化拖拽实现自定义表单系统 | |
| CN111259303B (zh) | 一种web信息系统前端页面自动生成的系统及其方法 | |
| US20180309807A1 (en) | Apparatus and Method for Acquiring, Managing, Sharing, Monitoring, Analyzing and Publishing Web-Based Time Series Data | |
| US8938679B1 (en) | Comment system for interactive graphical designs | |
| US20110252339A1 (en) | Collaborative Cursors in a Hosted Word Processor | |
| CN110309350B (zh) | 背诵任务的处理方法、系统、装置、介质及电子设备 | |
| CN106708480A (zh) | 管理平台实现方法和装置 | |
| CN104281447A (zh) | 一种报表快速生成及发布的系统及其方法 | |
| CA2618211A1 (en) | Designating, setting and discovering parameters for spreadsheet documents | |
| EP1535392A2 (en) | System and method for real-time observation assessment | |
| AU2002320579A1 (en) | System and method for real-time observation assessment | |
| TWI661349B (zh) | 產生對話式使用者介面的方法及系統 | |
| CN109472007B (zh) | 医疗问卷的自动建题方法、装置、电子设备、存储介质 | |
| WO2007139313A1 (en) | Method and equipment for exposing an advertisement using application | |
| US8239754B1 (en) | System and method for annotating data through a document metaphor | |
| EP3617910A1 (en) | Method and apparatus for displaying textual information | |
| CN110377621A (zh) | 一种基于计算引擎的界面处理方法及装置 | |
| CN111597489B (zh) | 一种基于移动端可拖拽自定义表单组件的实现方法及装置 | |
| CN116468010A (zh) | 报表生成方法、装置、终端及存储介质 | |
| CN110119416A (zh) | 一种服务数据分析系统及方法 | |
| Wu | The application and management system of scientific research projects based on PHP and MySQL | |
| CN112416342A (zh) | 一种基于关联字段的ui界面快速构建方法 | |
| CN109739504B (zh) | 一种根据后台配置自动生成h5业务办理页面的方法 | |
| CN106844297B (zh) | 一种用于复杂题型在html上的样式渲染和事件绑定的方法 | |
| WO2012099196A1 (ja) | 情報検索サービス提供装置及び方法、情報検索サービス提供用データベースの構築装置、並びにコンピュータプログラム信号 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200501 |