CN114089958A

CN114089958A - 表单可视化配置方法及装置

Info

Publication number: CN114089958A
Application number: CN202010756686.2A
Authority: CN
Inventors: 李昆颖; 李效恋; 乔德新; 时迎; 甄泽冰; 蒋礼虎; 丁宇; 王晓博
Original assignee: Petrochina Co Ltd
Current assignee: Petrochina Co Ltd
Priority date: 2020-07-31
Filing date: 2020-07-31
Publication date: 2022-02-25

Abstract

本发明公开了一种表单可视化配置方法及装置，其中，该方法包括：在组件显示区域显示多个表单组件；接收组件拖拽指令，根据组件拖拽指令将组件显示区域内的一个或多个表单组件拖拽到组件编辑区；接收组件编辑指令，根据组件编辑指令对组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑；根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。本发明提供了一种操作简单、复用性高、集成度高的表单设计方案，摆脱了传统表单设计需要重复编写和修改代码的问题，无需编写代码即可配置出符合实际业务需求的表单。

Description

表单可视化配置方法及装置

技术领域

本发明涉及计算机软件领域，尤其涉及一种表单可视化配置方法及装置。

背景技术

本部分旨在为权利要求书中陈述的本发明实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

随着互联网技术的普及和现代企业的发展，很多企业的办公系统中通常会涉及到多种不同的申请业务，每种业务都会产生多种表单。在系统开发中，大量表单的设计开发工作占用了很多时间。可见，可配置化的表单，对快速、高效开发办公系统具有十分重要的意义。

传统的表单设计方法需要编写大量的HTML代码，表单复用性差，维护成本高，稳定性差。而现有的表单配置系统，通过定义一组接口来实现控件与表单设计器各组成部分之间的集成，接口包括控件的整体描述接口、控件在设计视图和属性视图内的描述接口和控件在存储层的描述接口，这种表单配置系统，实际可用性较差，且数据库交互较为繁琐，集成度低，无法做到轻量级应用和跨平台使用。

针对上述问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例中提供了一种表单可视化配置方法，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该方法包括：在组件显示区域显示多个表单组件；接收组件拖拽指令，根据组件拖拽指令将组件显示区域内的一个或多个表单组件拖拽到组件编辑区；接收组件编辑指令，根据组件编辑指令对组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑；根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

本发明实施例中还提供了一种表单可视化配置装置，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该装置包括：组件显示模块，用于在组件显示区域显示多个表单组件；组件拖拽模块，用于接收组件拖拽指令，根据组件拖拽指令将组件显示区域内的一个或多个表单组件拖拽到组件编辑区；组件编辑模块，用于接收组件编辑指令，根据组件编辑指令对组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑；表单生成模块，用于根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

本发明实施例中还提供了一种计算机设备，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述表单可视化配置方法。

本发明实施例中还提供了一种计算机可读存储介质，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该计算机可读存储介质存储有执行上述表单可视化配置方法的计算机程序。

本发明实施例中，提供了一种操作简单、复用性高、集成度高的表单设计方案，与现有技术中通过编写大量代码实现表单设计的技术方案相比，通过将表单涉及的各个表单组件进行封装，向用户提供可视化的表单配置界面，使得用户能够通过可视化的拖拽、编辑等操作，实现各种业务表单的快速设计，摆脱了传统表单设计需要重复编写和修改代码的问题，无需编写代码即可配置出符合实际业务需求的表单。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本发明实施例中提供的一种表单可视化配置方法流程图；

图2为本发明实施例中提供的一种表单可视化配置方法的具体实现流程图；

图3为本发明实施例中提供的一种表单可视化配置界面示意图；

图4为本发明实施例中提供的一种业务数据模型的代码示意图；

图5为本发明实施例中提供的一种实现表单定义和表单设计的代码结构示意图；

图6为本发明实施例中提供的一种表单定义代码示意图；

图7为本发明实施例中提供的一种表单设计代码示意图；

图8为本发明实施例中提供的一种表单自动化渲染的实现过程示意图；

图9为本发明实施例中提供的一种表单自动化渲染的结果示意图；

图10为本发明实施例中提供的一种表单可视化配置装置示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。

为了实现表单的可视化配置，本发明实施例中提供了一种表单可视化配置方法，该方法将表单配置划分组件层、布局层和表单层三个层次来实现。其中，组件层的作用是完成组件的样式和属性的封装；布局层的作用是使得组件可在布局中任意拖拽、改变大小和交换位置等；表单层的作用是完成表单整体定义和表单视图配置，以及表单定义的存储和渲染。

图1为本发明实施例中提供的一种表单可视化配置方法流程图，如图1所示，该方法可以包括如下步骤：

S101，在组件显示区域显示多个表单组件。

需要说明的是，本发明实施例中的表单组件是指构成表单的最小元素，可以包括：基础组件和拓展组件。其中，基础组件可以是单行文本框、多行文本框、下拉选择框、日期选择框和附件上传等构成表单所需的基础元素的组件；拓展组件可以是针对具体业务开发的具体组件。由于组件可以扩展超文本标记语言HTML元素，并封装可重用的代码，本发明实施例通过将表单元素组件化，将一段UI设计样式和其对应的功能作为独立的整体去应用，无论这个整体在哪里应用，都具有一样的功能和样式，通过组件的复用，从而大大提高了表单的复用性。

在具体实施时，可以向用户提供表单的可视化配置界面，该可视化配置界面上至少具有用于显示各个表单组件的组件显示区域，以及对各个表单组件进行可视化编辑的组件编辑区域。可选地，在组件显示区域显示的各个表单组件可以是预先封装配置好的组件，例如，系统默认提供的基础组件，或者用户根据实际业务需求自定义配置的扩展组件。

S102，接收组件拖拽指令，根据组件拖拽指令将组件显示区域内的一个或多个表单组件拖拽到组件编辑区。

本发明实施例中用于拖拽各个组件的拖拽指令是指选中某个组件后，将该组件从组件显示区域移动到组件编辑区域的指令，使用不同的终端设备，拖拽指令的实现方式也可能不同。例如，当通过计算机实现的时候，该拖拽指令可以是鼠标点击组件并拖拽组件到组件编辑区域某个位置的指令；当通过触摸手机实现的时候，该拖拽指令可以是触摸某个组件并拖拽组件到组件编辑区域某个位置的指令。

S103，接收组件编辑指令，根据组件编辑指令对组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑。

本发明实施例中的组件编辑指令是指在组件编辑区域对各个组件执行操作的指令，可以是移动各个组件在界面中显示位置的指令，也可以是对组件的属性信息进行编辑的指令。

需要说明的是，本发明实施例中的各个组件通常由一组属性来定义。每个组件的属性包括组件绑定的业务字段、绑定数据源接口地址、组件读写状态以及校验规则配置等。通过对组件进行配置相关属性可让组件从静态元素变成动态元素。传统表单设计方式中控件的数据源绑定需要编写大量的代码来实现，且不同的业务需要写不同的代码，无法做到代码的复用性。本发明实施例，通过给组件配置属性的方式，解决了编写大量代码的问题且复用性极高，从而提高了团队工作效率,节约了开发成本。

S104，根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

本发明实施例中视图是指表单的呈现形式，一个表单可以包含一个或多个视图。表单视图解决了组件在某些流程环节下的显示或隐藏的问题。在工作流中，表单进入审批状态时，其中的内容往往是不能修改的，此时就需要将表单中的各组件设置为只读状态，甚至将某些组件隐藏。表单视图管理可以对视图进行新增、修改和删除操作。

需要说明的是，本发明实施例中，用户可以在组件编辑区域自定义设置各个表单组件的布局，组件可在布局中任意拖拽、改变大小、交换位置等，其原理是布局中监听了每个组件的坐标位置及组件的宽度和高度。本发明与传统表单设计不同之处在于在布局中拖拽组件非常直观快捷，配置人员不需要编写任何代码即可完成表单布局。

在一个实施例中，本发明实施例中提供的表单可视化配置方法还可以包括如下步骤：接收表单预览指令，其中，表单预览指令用于预览所述业务表单的一个或多个表单视图；根据表单预览指令，呈现业务表单一个或多个表单视图的预览状态。

在一个实施例中，本发明实施例中提供的表单可视化配置方法还可以包括如下步骤：接收表单发布指令，其中，表单发布指令用于保存业务表单的各个表单视图；根据表单发布指令，将业务表单对应的各个表单视图存储为JS对象简谱JSON格式的表单信息，并与业务表单的表单视图信息、表单视图设计信息和业务数据模型进行关联。

本发明实施例中，将可视化配置生成的表单，以JSON的格式存储，能够达到轻量化存储、实现跨平台操作的目的。

在一个实施例中，本发明实施例中提供的表单可视化配置方法还可以包括如下步骤：生成以JSON格式编写的业务数据模型，其中，数据模型中包含：业务表单包含的各个业务字段及各个业务字段对应的数据类型。

在一个实施例中，本发明实施例中提供的表单可视化配置方法还可以包括如下步骤：接收对业务表单的表单填写请求；根据表单填写请求，加载业务表单的表单信息、表单视图信息和业务数据模型；根据业务表单的表单信息、表单视图信息和业务数据模型，呈现业务表单的业务渲染结果。

在一个实施例中，本发明实施例中提供的表单可视化配置方法还可以包括如下步骤：接收对业务表单的表单查看请求或表单修改请求；根据表单查看请求或表单修改请求，加载业务表单的表单信息、表单视图设计信息和业务数据模型；根据业务表单的表单信息、表单视图设计信息和业务数据模型，呈现业务表单的设计渲染结果。

在表单开发中，如果业务发生变化，通常只需打开原来的表单模板，在此基础上进行修改并保存更新即可。而传统表单设计方案，如果涉及到增加或修改业务字段，或需要添加校验时都需要进行二次开发。

可选地，本发明实施例中，通过前端框架Vue.js解析存储表单生成的JSON代码，以渲染成用户可填写的表单页面或表单配置人员可查看或修改的表单页面。

在具体应用时，基于本发明实施例开发的表单配置系统，还可以提供表单管理功能，以管理各个表单的基本信息，例如，新增、删除或修改表单信息。

图2为本发明实施例中提供的一种表单可视化配置方法的具体实现流程图，如图2所示，通过拖拽工作台将组件拖拽到组件编译器中生成组件元素，通过给每个组件元素配置属性和调整布局，然后实例化成表单字段，由表单字段组成表单视图，最后由表单视图组合成表单。具体实现流程包括如下几个部分：

①分析待设计业务表单所需要的组件，例如，图3中组件显示区域显示的组件为基本能满足日常表单所需要的组件，称为基本组件。如果业务场景中基本组件不能满足需求，还可根据实际需求开发拓展组件。

在一个示例中，本发明实施例中，采用前端框架Vue.js对组件进行封装，组件封装的步骤如下：

A.编写组件模板，完成组件样式的设计和组件的基本逻辑。

B.定义组件的数据输入，即组件绑定的数据结构。

C.根据组件的逻辑，准备好组件的数据输出，即需要暴露的方法和数据。

②配置组件属性，每个组件都会由一组属性来定义，包括字段名称、绑定的业务字段、数据项来源、字段读写状态、提示信息、字段的校验规则等相关属性。在配置动态获取数据的组件时，只需要提供获取数据源的接口地址即可。例如设置下拉选择框组件的选项的数据源时，仅需将该组件的数据源属性设置为返回数据的接口地址即可。组件属性以Object的数据类型存储在表单的设计中，当表单再次渲染时将组件属性注入到组件上。

本发明实施例中，每个组件的属性配置项能满足基本业务的需要，如需其他属性可自行拓展。扩展属性时首先要在组件模板中将自定义属性定义在组件标签中，然后在设计组件的脚本文件中实现该自定义属性的数据绑定。

③设计业务数据模型，包括业务字段结构和数据类型。将待设计表单中各个业务字段的名称和数据类型，以JSON格式的形式编写完成。此段JSON代码将作为表单绑定的数据模型。图4展示了一个请假申请业务表单的业务字段结构和数据类型，主要内容如下：

type：业务数据类型，设定为Object类型。

properties：包含业务字段和每个业务字段的数据类型。例如图3中展示的字段包括用户名(userName)，数据类型为字符串类型(string)和手机号码(mobile)，数据类型为字符串类型(string)等。

required：包括需要校验的字段。

④将组件拖拽到组件编译器区域内，组件编译器会将编译器区域左右五十等分。绘制人员可在编译器中拖拽组件调整其宽度和高度并且可以交换每个组件的位置，最终达到想要的布局效果，如图3所示中间区域的组件编译器。组件编译器会根据拖拽的组件类别自定义渲染成相对应的组件元素。

例如，标题对应<h1></h1>标签，单行文本对应<input></input>标签。

⑤配置表单属性，为当前表单新增唯一标识和表单描述。表单唯一标识即表单ID采用时间戳，避免了表单标识重复。表单标识和描述会在表单发布时保存在表单定义中。

⑥配置表单视图，表单是以视图的方式呈现的，每个表单至少对应一个视图。表单视图包括视图标识和视图名称两个属性。在配置表单时，可配置多个视图。各个视图之间可任意切换，切换视图时系统会自动保存上一视图。可选地，基于本发明实施例开发的表单配置系统，还可提供视图复制功能，从而有效提高表单的配置效率。

由于在实际业务中不同角色的人员在不同的流程环节下看到的表单结构不尽相同，表单视图可以通过控制每个组件的属性而实现表单在不同流程环节展现不同的形式。例如，申请人在申请环节，表单视图中展现的各组件为可填写状态，而当流程流转到审批环节，审批人看到的表单数据是不可修改的，此时则会切换到另一表单视图，此视图中的需将各组件设置为只读状态。

⑦配置表单定义，定义管理分为预览表单和发布表单。预览表单即预览当前的表单视图，预览效果即为表单实际渲染效果。在预览时若发现布局不满足需求可及时修改视图。本发明实施例中，发布表单将绘制好的表单进行存储，如图5所示，本发明实施例中，可分别存储表单定义(Definition)和表单设计(Design)，存储格式为JSON。表单定义用来渲染表单，其主要内容结构包括表单信息(info)、业务数据模型(schema)和表单视图信息(views)。表单设计用来在表单设计器中渲染表单，其主要内容结构包括表单信息(info)、业务数据模型(schema)和表单视图设计信息(views)。

表单定义内容如图6所示，展示了一个请假申请表单的定义，主要内容如下：

info：包括表单ID，即表单的唯一标识、表单名称和版本信息。

schema：表单绑定的数据模型。

views：表单视图信息。每个视图包括视图ID(key)、视图描述(description)、视图的html模板(template)和视图中引用的组件包(packages)。

表单设计内容中如图7所示，展示了一个请假申请表单的设计，主要内容如下：

info：包括表单ID和表单名称。

schema：表单绑定的数据模型，与表单定义中的schema相同。

views：表单视图设计信息，包括视图ID(key)、视图描述(description)、组件设计属性(components)和组件设计的启动脚本(reference)。组件设计属性即components中包含的内容，包括表单设计中用到的每一个组件名称(name)、组件的属性(attributes)和组件所在视图中的位置坐标(coordinates)；组件设计的启动脚本即references中包含的内容，将该表单中用到的每种组件对应的设计脚本所在路径都包含在内。

⑧表单渲染，如图8所示，分为以下两种情况：

第一种场景：业务渲染，指的是在实际应用场景中，系统根据用户需求渲染出相应的表单，以便用户填写信息。当用户发送了要填写申请表的请求后，系统会先将存储的申请表单定义JSON从数据库中取出，并将表单定义中的内容交给前端框架Vue.js进行解析，解析分为三部分，包括加载业务数据模型(schema)和组件模块(packages)，以及解析视图信息中的Html模板(template)。渲染完成后效果如图9所示。

第二种场景：设计渲染，指的是在表单设计器中渲染表单，方便绘制人员查看或修改。此时系统会先将存储的表单设计JSON从数据库中取出，然后加载业务模型(schema)和加载设计组件(references)，并根据其中包含的设计组件的相应信息将表单各组件及其属性展示在表单设计器中。

本发明实施例中提供的可视化配置与自动化渲染表单的实施方法，解决了企业信息化和办公自动化中业务多样化的表单需求，打破了传统表单的开发模式，提高了开发效率，节约了企业成本。用户可自定义表单内容，并且设计表单时可直接预览设计效果，方便了设计者及时进行修改，提高了用户体验。

基于同一发明构思，本发明实施例中还提供了一种表单可视化配置装置，如下面的实施例所述。由于该装置解决问题的原理与表单可视化配置方法相似，因此该装置的实施可以参见表单可视化配置方法的实施，重复之处不再赘述。

图10为本发明实施例中提供的一种表单可视化配置装置示意图，如图10所示，该装置包括：组件显示模块11、组件拖拽模块12、组件编辑模块13和表单生成模块14。

其中，组件显示模块11，用于在组件显示区域显示多个表单组件；组件拖拽模块12，用于接收组件拖拽指令，根据组件拖拽指令将组件显示区域内的一个或多个表单组件拖拽到组件编辑区；组件编辑模块13，用于接收组件编辑指令，根据组件编辑指令对组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑；表单生成模块14，用于根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

在一个实施例中，本发明实施例中提供的表单可视化配置装置还可以包括：表单预览模块15，用于接收表单预览指令，以及根据表单预览指令，呈现业务表单一个或多个表单视图的预览状态，其中，表单预览指令用于预览所述业务表单的一个或多个表单视图。

在一个实施例中，本发明实施例中提供的表单可视化配置装置还可以包括：表单发布模块16，用于接收表单发布指令，以及根据表单发布指令，将业务表单对应的各个表单视图存储为JSON格式的表单信息，并与业务表单的表单视图信息、表单视图设计信息和业务数据模型进行关联，其中，表单发布指令用于保存业务表单的各个表单视图。

在一个实施例中，本发明实施例中提供的表单可视化配置装置还可以包括：业务数据模型生成模块17，用于生成以JSON格式编写的业务数据模型，其中，数据模型中包含：业务表单包含的各个业务字段及各个业务字段对应的数据类型。

基于上述实施例，在一种场景下，本发明实施例中提供的表单可视化配置装置还可以包括：表单填写模块18，用于接收对业务表单的表单填写请求；根据表单填写请求，加载业务表单的表单信息、表单视图信息和业务数据模型；根据业务表单的表单信息、表单视图信息和业务数据模型，呈现业务表单的业务渲染结果。

基于上述实施例，在另一种场景下，本发明实施例中提供的表单可视化配置装置还可以包括：表单设计模块19，用于接收对业务表单的表单查看请求或表单修改请求；根据表单查看请求或表单修改请求，加载业务表单的表单信息、表单视图设计信息和业务数据模型；根据业务表单的表单信息、表单视图设计信息和业务数据模型，呈现业务表单的设计渲染结果。

基于同一发明构思，本发明实施例中还提供了一种计算机设备，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述表单可视化配置方法。

基于同一发明构思，本发明实施例中还提供了一种计算机可读存储介质，用以解决现有的表单设计方案，需要编写大量代码，存在操作繁琐、复用性差、集成度低的技术问题，该计算机可读存储介质存储有执行上述表单可视化配置方法的计算机程序。

综上所述，本发明实施例中提供了一种操作简单、复用性高、集成度高的表单设计方案，与现有技术中通过编写大量代码实现表单设计的技术方案相比，通过将表单涉及的各个表单组件进行封装，向用户提供可视化的表单配置界面，使得用户能够通过可视化的拖拽、编辑等操作，实现各种业务表单的快速设计，摆脱了传统表单设计需要重复编写和修改代码的问题，无需编写代码即可配置出符合实际业务需求的表单。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种表单可视化配置方法，其特征在于，包括：

在组件显示区域显示多个表单组件；

接收组件拖拽指令，根据组件拖拽指令将所述组件显示区域内的一个或多个表单组件拖拽到组件编辑区；

接收组件编辑指令，根据组件编辑指令对所述组件编辑区域内各个表单组件的显示位置和/或显示属性进行编辑；

根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

2.如权利要求1所述的方法，其特征在于，所述方法还包括：

接收表单预览指令，其中，所述表单预览指令用于预览所述业务表单的一个或多个表单视图；

根据所述表单预览指令，呈现所述业务表单一个或多个表单视图的预览状态。

3.如权利要求1所述的方法，其特征在于，所述方法还包括：

接收表单发布指令，其中，所述表单发布指令用于保存所述业务表单的各个表单视图；

根据所述表单发布指令，将所述业务表单对应的各个表单视图存储为JS对象简谱JSON格式的表单信息，并与所述业务表单的表单视图信息、表单视图设计信息和业务数据模型进行关联。

4.如权利要求3所述的方法，其特征在于，所述方法还包括：

生成以JSON格式编写的业务数据模型，其中，所述数据模型中包含：所述业务表单包含的各个业务字段及各个业务字段对应的数据类型。

5.如权利要求3所述的方法，其特征在于，所述方法还包括：

接收对所述业务表单的表单填写请求；

根据所述表单填写请求，加载所述业务表单的表单信息、表单视图信息和业务数据模型；

根据所述业务表单的表单信息、表单视图信息和业务数据模型，呈现所述业务表单的业务渲染结果。

6.如权利要求3所述的方法，其特征在于，所述方法还包括：

接收对所述业务表单的表单查看请求或表单修改请求；

根据所述表单查看请求或所述表单修改请求，加载所述业务表单的表单信息、表单视图设计信息和业务数据模型；

根据所述业务表单的表单信息、表单视图设计信息和业务数据模型，呈现所述业务表单的设计渲染结果。

7.一种表单可视化配置装置，其特征在于，包括：

组件显示模块，用于在组件显示区域显示多个表单组件；

组件拖拽模块，用于接收组件拖拽指令，其中，所述组件拖拽指令用于将所述组件显示区域内的一个或多个表单组件拖拽到组件编辑区域；

组件编辑模块，用于接收组件编辑指令，其中，所述组件编辑指令用于编辑所述组件编辑区域内各个表单组件的显示位置和/或显示属性；

表单生成模块，用于根据编辑后的各个表单组件，生成业务表单的一个或多个表单视图，其中，各个表单组件在不同表单视图中呈现不同的数据读写状态。

8.如权利要求7所述的装置，其特征在于，所述装置还包括：

表单预览模块，用于接收表单预览指令，以及根据所述表单预览指令，呈现所述业务表单的各个表单视图，其中，所述表单预览指令用于呈现所述业务表单的各个表单视图。

9.如权利要求7所述的装置，其特征在于，所述装置还包括：

表单发布模块，用于接收表单发布指令，以及根据所述表单发布指令，将所述业务表单对应的各个表单视图存储为JSON格式的表单信息，并与所述业务表单的表单视图信息、表单视图设计信息和业务数据模型进行关联，其中，所述表单发布指令用于保存所述业务表单的各个表单视图。

10.如权利要求9所述的装置，其特征在于，所述装置还包括：

业务数据模型生成模块，用于生成以JSON格式编写的业务数据模型，其中，所述数据模型中包含：所述业务表单包含的各个业务字段及各个业务字段对应的数据类型。

11.如权利要求9所述的装置，其特征在于，所述装置还包括：

表单填写模块，用于接收对所述业务表单的表单填写请求；根据所述表单填写请求，加载所述业务表单的表单信息、表单视图信息和业务数据模型；根据所述业务表单的表单信息、表单视图信息和业务数据模型，呈现所述业务表单的业务渲染结果。

12.如权利要求9所述的装置，其特征在于，所述装置还包括：

表单设计模块，用于接收对所述业务表单的表单查看请求或表单修改请求；根据所述表单查看请求或所述表单修改请求，加载所述业务表单的表单信息、表单视图设计信息和业务数据模型；根据所述业务表单的表单信息、表单视图设计信息和业务数据模型，呈现所述业务表单的设计渲染结果。

13.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6任一所述表单可视化配置方法。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求1至6任一所述表单可视化配置方法的计算机程序。