CN111930379B - Web端投诉表单设计器的实现方法、装置和系统 - Google Patents

Abstract

本申请提供了一种Web端投诉表单设计器的实现方法、装置和系统，包括：对设计投诉表单的组件进行封装并排列形成基础组件栏；对元素进行第二级封装；对投诉表单设计组件进行相应的数据绑定和渲染；对投诉表单设计组件进行排列、预解析为虚拟DOM元素并展示界面；接收Web端对配置栏的操作，将配置结果渲染至投诉表单设计区域；更新虚拟DOM元素并传输至服务器；根据请求调用投诉表单界面；接收投诉信息，发送表单编号至工作流服务器，接收当前节点编号；确定当前接收对象，接收当前接收对象的操作，发送表单编号至工作流服务器，接收当前节点编号，直到当前节点编号为空；判断投诉表单是否通过，若是则关闭投诉表单，若否则新建投诉表单。

Description

Web端投诉表单设计器的实现方法、装置和系统

技术领域

本申请主要涉及计算机领域，尤其涉及一种Web端投诉表单设计器的实现方法、装置、系统和计算机可读介质。

背景技术

在企业产品流通市场后，常常会因为单方面或多方面的各类因素而出现疑似产品质量问题。因此，为了保证产品质量和用户使用安全，企业须按法规要求加速地进行质量投诉信息的收集、处理、分析、回复。

但目前的线下投诉处理方式存在诸多困难，例如依靠纸质采集投诉信息、投诉信息采集困难、流程流转依靠邮件或人工方式进行、提交人以及审批人的信息不对称、需要耗费大量人力物力处理不同流程等。因此，线下投诉处理有着许多问题，例如无统一反馈渠道、处理效率低、线上问题数据不能统一分析、不能形成有效的项目改进措施的问题、不能为项目总结和改进提供准确及时的数据依据等等。

因此，如何让投诉处理人员进行在线表单设计并且自动化高效地进行投诉流程跳转和投诉信息管理是本领域技术人员亟需解决的问题。

发明内容

本申请要解决的技术问题是提供一种Web端投诉表单设计器的实现方法、装置、系统和计算机可读介质，能够实现自定义程度极高的投诉表单设计器，为使用者提供高度灵活的投诉表单设计自由度，并且自动化高效地进行流程跳转和投诉信息管理。

为解决上述技术问题，本申请提供了一种Web端投诉表单设计器的实现方法，包括：对设计投诉表单的组件进行封装并得到JSON数据，其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染，所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中所述投诉表单设计组件响应于Web端的点选和移动操作；在投诉表单设计区域监听经过所述第二级封装的所述投诉表单设计组件，当所述投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对所述投诉表单设计组件进行数据绑定和渲染；以响应式布局叠加流式布局对所述投诉表单设计组件进行排列；将所述排列的结果预解析为虚拟DOM元素，通过所述虚拟DOM元素展示当前设计的投诉表单界面；响应于点选投诉表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述投诉表单设计区域；更新所述配置结果对应的投诉表单组件的虚拟DOM元素；将设计形成的投诉表单对应的JSON数据传输至服务器；响应于用户发起的新建投诉表单请求，根据所述新建投诉表单请求的表单编号调用所述投诉表单界面并渲染；接收用户在所述投诉表单界面输入的投诉信息，发送所述表单编号至工作流服务器，接收所述工作流服务器发送的当前节点编号；根据所述当前节点编号确定所述投诉表单的当前接收对象，接收当前接收对象对所述投诉表单的操作，发送所述表单编号至所述工作流服务器，接收所述工作流服务器发送的所述当前节点编号，直到所述当前节点编号为空；判断所述投诉表单是否通过，若是则关闭所述投诉表单，若否则新建投诉表单。

在本申请的一实施例中，该方法还包括：根据所述当前节点编号确定所述当前接收对象能查看的投诉表单内容。

在本申请的一实施例中，该方法还包括：所述投诉表单为客户投诉单或投诉处理单。

在本申请的一实施例中，该方法还包括：当所述投诉表单为所述客户投诉单时，接收投诉专员输入的投诉分类信息；当所述投诉分类信息为药物警戒或客户咨询时，关闭所述投诉表单。

在本申请的一实施例中，所述接收当前接收对象对所述投诉表单的操作包括：接收所述当前接收对象在所述投诉表单界面输入的业务数据，并暂存于页面内存中；接收所述当前接收对象发起的投诉表单确认请求，并调用签名验证组件；当所述签名验证组件对所述当前接收对象校验成功后，将所述业务数据传输至服务器。

在本申请的一实施例中，所述组件的交互形态包括以下的任意一个或多个：多行文本、单行文本、数值、单选框、下拉框、复选框、日期、时间、文件上传、分割线、签名、说明文字、富文本和多记录。

在本申请的一实施例中，所述当前设计的表单界面以全局数据流形式进行存储。

为解决上述技术问题，本申请还提供了一种Web端投诉表单设计器的实现装置，包括：组件定义模块，被配置为：对设计投诉表单的组件进行封装并得到JSON数据，其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染，所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中所述投诉表单设计组件响应于Web端的点选和移动操作；表单设计模块，被配置为：在投诉表单设计区域监听经过所述第二级封装的所述投诉表单设计组件，当所述投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对所述投诉表单设计组件进行数据绑定和渲染；以响应式布局叠加流式布局对所述投诉表单设计组件进行排列；表单演示渲染模块，被配置为：将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的投诉表单界面；响应于点选投诉表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述投诉表单设计区域；在线表单传输模块，被配置为：将设计形成的投诉表单对应的JSON数据传输至服务器；新建投诉模块，被配置为：响应于用户发起的新建投诉表单请求，根据所述新建投诉表单请求的表单编号调用所述投诉表单界面并渲染；接收用户在所述投诉表单界面输入的投诉信息，发送所述表单编号至工作流服务器，接收所述工作流服务器发送的当前节点编号；投诉节点模块，被配置为：根据所述当前节点编号确定所述投诉表单的当前接收对象，接收当前接收对象对所述投诉表单的操作，发送所述表单编号至所述工作流服务器，接收所述工作流服务器发送的所述当前节点编号，直到所述当前节点编号为空；判断模块，被配置为：判断所述投诉表单是否通过，若是则关闭所述投诉表单，若否则新建投诉表单。

为解决上述技术问题，本申请还提供了一种Web端投诉表单设计器的实现系统，包括：存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如上所述的方法。

为解决上述技术问题，本申请还提供了一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如上所述的方法。

与现有技术相比，本申请的Web端投诉表单设计器的实现方法、装置、系统和计算机可读介质，可实现自定义程度极高的投诉表单设计器，为使用者提供高度灵活的投诉表单设计自由度。同时，在设计过程中，随着表单组件的不断增加和频繁调整，仍可保持投诉表单设计器的流畅运行，并实现当前投诉设计表单的快速检视。在投诉表单配置后，用户可以在web端简单快捷地新建投诉表单，并且实现了工作流流程的自动流转，无需人工介入流程跳转。用户还可以在web端对投诉数据进行录入，实现了自动化高效地进行投诉信息管理。

附图说明

包括附图是为提供对本申请进一步的理解，它们被收录并构成本申请的一部分，附图示出了本申请的实施例，并与本说明书一起起到解释本申请原理的作用。附图中：

图1是根据本申请一实施例示出的Web端投诉表单设计器的实现方法的流程示意图。

图2是根据本申请一实施例示出的Web端投诉表单设计器的实现装置的框图。

图3是根据本申请一实施例示出的Web端投诉表单设计器的实现装置的系统实施环境示意图。

图4是根据本申请一实施例示出的客户投诉单的投诉信息录入界面的示意图。

图5是根据本申请一实施例示出的投诉处理单的投诉表单处理界面的示意图。

具体实施方式

为了更清楚地说明本申请的实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单的介绍。显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。除非从语言环境中显而易见或另做说明，图中相同标号代表相同结构或操作。

如本申请和权利要求书中所示，除非上下文明确提示例外情形，“一”、“一个”、“一种”和/或“该”等词并非特指单数，也可包括复数。一般说来，术语“包括”与“包含”仅提示包括已明确标识的步骤和元素，而这些步骤和元素不构成一个排它性的罗列，方法或者设备也可能包含其他的步骤或元素。

除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本申请的范围。同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为授权说明书的一部分。在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本申请中使用了流程图用来说明根据本申请的实施例的系统所执行的操作。应当理解的是，前面或下面操作不一定按照顺序来精确地执行。相反，可以按照倒序或同时处理各种步骤。同时，或将其他操作添加到这些过程中，或从这些过程移除某一步或数步操作。

本申请提供了一种Web端投诉表单设计器的实现方法。该Web端投诉表单设计器的实现方法可应用于Web端投诉表单设计器的实现系统或Web端投诉表单设计器。图1是根据本申请一实施例示出的Web端投诉表单设计器的实现方法的流程示意图。如图1所示，该方法包括以下步骤：

步骤101，对设计投诉表单的组件进行封装并得到JSON数据，其中封装得到的JSON数据包括原始属性设置和初始数据渲染，原始属性对应组件的交互形态和图形样式；

步骤102，将组件对应的JSON数据排列形成基础组件栏；

步骤103，对基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中投诉表单设计组件响应于Web端的点选和移动操作；

步骤104，在投诉表单设计区域监听经过第二级封装的投诉表单设计组件，当投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对投诉表单设计组件进行数据绑定和渲染；

步骤105，以响应式布局叠加流式布局对投诉表单设计组件进行排列；

步骤106，将排列的结果预解析为虚拟DOM元素，通过虚拟DOM元素展示当前设计的投诉表单界面；

步骤107，响应于点选投诉表单设计区域的表单组件，显示表单组件的配置栏；

步骤108，接收Web端对配置栏的操作，将配置结果渲染至投诉表单设计区域；

步骤109，更新配置结果对应的投诉表单组件的虚拟DOM元素；

步骤110，将设计形成的投诉表单对应的JSON数据传输至服务器；

步骤111，响应于用户发起的新建投诉表单请求，根据新建投诉表单请求的表单编号调用投诉表单界面并渲染；

步骤112，接收用户在投诉表单界面输入的投诉信息，发送表单编号至工作流服务器，接收工作流服务器发送的当前节点编号；

步骤113，根据当前节点编号确定投诉表单的当前接收对象，接收当前接收对象对投诉表单的操作，发送表单编号至工作流服务器，接收工作流服务器发送的当前节点编号，直到当前节点编号为空；

步骤114，判断投诉表单是否通过，若是则关闭投诉表单，若否则新建投诉表单。

下面对上述步骤101-114进行详细说明：

在步骤101，对表单设计组件进行封装，得到JSON数据。JSON(JavaScript ObjectNotation，JavaScript对象表示法)是一种数据存储格式。JSON可以将JavaScript对象中表示的一组数据转换为字符串，然后在网络或者程序之间传递该字符串，并在需要时将其还原为各编程语言所支持的数据格式。对表单设计组件进行封装形成的JSON数据，包括组件的原始属性设置和初始数据渲染。其中，组件的原始属性设置对应所述组件的交互形态和图形样式。

在一非限制性实施例中，组件的交互形态包括以下的任意一个或多个：多行文本，单行文本，数值，单选框，下拉框，复选框，日期，时间，文件上传，分割线，签名，说明文字，富文本和多记录。富文本指可输入文字和图片等多种格式的字符和文件的输入框。多记录指由多个单行文本或多组多行文本组件组成的数据录入组件。例如，在数据的汇总和统计页面对应的组件，即可为多记录组件的交互形态。初始数据集可包括组件的初始名称，初始渲染颜色和初始字符格式等。

在步骤102，将组件对应的JSON数据排列形成基础组件栏。不同交互形态的组件对应的JSON数据构成基础组件栏中的组件元素。对应基础组件栏可位于表单设计器界面的左侧或上侧。

在步骤103，对基础组件栏中的元素进行第二级封装，形成响应于Web端的点选和移动操作的表单设计组件。第二级封装可通过React DnD(Drag and Drop for React)套件实现。React是用于构建用户界面的框架。在React DnD套件中对点选和移动操作的类型，操作的对象和操作的过程的信息进行设置。经过封装后，在基础组件栏中形成响应于Web端的点选和移动操作的表单设计组件。

在步骤104，在表单设计器的表单设计区域监听经过第二级封装的表单设计组件。当表单设计组件响应于Web端的点选和移动操作移动至表单设计区域时，对表单设计组件进行数据绑定和渲染。渲染后即在表单设计区域形成一表单组件的具体形态。

在步骤105，以响应式布局叠加流式布局对表单设计组件进行排列。经过多次点选和移动操作后，在表单设计区域形成的表单组件不断增加。此时以响应式布局叠加流式布局对所述表单设计组件进行排列。流式布局方式中，表单页面的元素的宽度根据屏幕分辨率进行适配调整，同时整体布局不变。为使表单布局适应较大的屏幕尺度的跨度，通过响应式布局叠加流式布局对所述表单设计组件进行排列，使得表单页面既可适应较大的屏幕尺度的跨度，用时亦可保证页面元素的显示效果。

在步骤106，将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面。DOM(Document Object Model，文档对象模型)是一种HTML(Hyper TextMarkup Language，超文本标记语言)页面元素的编辑和操作接口。HTML DOM确定了访问和操作HTML文档对应的页面中的元素的标准步骤。DOM结构包括多层节点。多层节点包括<html>…</html>、<head>…</head>、<body>…</body>、<ul>…</ul>、<li>和"list item"。其中，ul表示Unordered list(无序列表)。li表示list(列表)。在Web端用DOM的对应的结构操作表单设计区域的表单组件时，一次更新需要经过对DOM各层节点的遍历。这使得表单设计区域的表单组件不断增多时，页面设计的频繁操作和不断修改以及细节的完善将会导致遍历所需的时间大幅上升，从而导致表单设计器界面的运行变得缓慢，影响使用体验，降低了设计效率。

本申请的表单设计器的实现方法中，将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的表单界面。具体地，用JavaScript对象模拟DOM节点，表单设计区域的页面的更新可以先全部反映在JavaScript对象上。通过JavaScript对象模拟的虚拟DOM元素展示当前设计的表单界面。操作Web端对应的终端的内存中JavaScript对象的速度，与通过DOM的流程操作表单设计区域的表单组件相比，效率明显提升。并且，虚拟DOM可只对更新的节点进行操作，避免了一次更新需要经过对DOM各层节点的遍历，从而提高展示当前设计的表单界面的效率。

在步骤107，响应于点选表单设计区域的表单组件，显示表单组件的配置栏。配置栏可位于表单设计器界面的右侧或下侧。配置栏中的可配置项目可根据实际需求进行设置。配置的内容可包括校验配置和权限配置。亦可根据需求增加配置的类型。例如，更多的自定义配置，以根据使用者的需求修改表单组件的样式。校验配置指校验表单组件的交互形态和显示的样式是否对应。权限配置可配置不同表单组件的可被操作的权限。

在步骤108，接收Web端对配置栏的操作，将配置结果渲染至所表单设计区域。在步骤109，更新配置结果对应的表单组件的虚拟DOM元素。虚拟DOM元素的更新使得当前设计的表单界面可以即时更新，以利于设计效果的快速展示。对虚拟DOM元素的更新通过在各层节点中，对同一层元素的对象的对比和替换实现，从而提供元素更新的效率。为实现对当前设计的表单界面的快速检视，当前设计的表单界面以基于MobX的全局数据流形式进行存储。存储位置位于Web端对应的终端的内存中。MobX是一种数据的状态管理库。MobX可以和JavaScript库共同使用，管理数据流的状态。

在步骤110，将设计形成的表单对应的JSON数据传输至服务器端。需要说明的是，基础组件栏对应的JSON数据和设计过程中形成的JSON数据也可根据需要和设置传输至服务器端。例如，如果希望将基础组件栏在不同设计场景中多次复用，则可将基础组件栏对应的JSON数据传输至服务器端。

用户可以点击系统界面中的“新建投诉单”按钮来发起新建投诉表单请求。在步骤111中，响应于用户发起的新建投诉表单请求，系统根据新建投诉表单请求的表单编号调用投诉表单界面，并进行渲染。图4是根据本申请一实施例示出的投诉表单界面的示意图。在本申请的一实施例中，投诉表单为可以客户投诉单或投诉处理单。客户投诉单是在接到客户投诉后创建的，客服或者商务可以在系统内通过创建新的客户投诉单来登记来自客户的投诉信息。图4是根据本申请一实施例示出的客户投诉单的投诉信息录入界面的示意图。如图4所示，客服可以在客户投诉单的表单界面内录入投诉人姓名、职务、联系方式、患者信息、产品名称等投诉信息。客户投诉单中的投诉信息经过甄别后，递交给投诉专员。在本申请的一实施例中，当投诉表单为客户投诉单时，接收投诉专员输入的投诉分类信息。投诉专员审核并对投诉信息进行分类。若客户投诉单被分类为客户投诉时，则在该客服投诉单的基础上新创建一个投诉处理单，并建立起两个表单之间的关系。在本申请的一实施例中，投诉表单还可以被分类为药物警戒或客户咨询。当投诉分类信息为药物警戒或客户咨询时，系统可以关闭投诉表单。

在步骤112中，系统接收用户在投诉表单界面输入的投诉信息。在一个示例中，用户可以在投诉信息录入完成后，在如图4所示的表单界面中点击“新增”按钮来提交投诉表单。然后系统将投诉表单的表单编号发送至工作流服务器。工作流服务器在接收到表单编号后，根据表单编号确定当前节点编号并发送至系统。系统接收工作流服务器根据该表单编号发送的当前节点编号。

在步骤113中，系统根据接收到的当前节点编号确定投诉表单的当前接收对象。当前接收对象是指投诉表单的当前处理者。图5是根据本申请一实施例示出的投诉处理单的投诉表单处理界面示意图。如图5所示，当前接收对象在投诉表单处理界面能够查看到需要处理的投诉表单，当前接收对象可以通过点击“处理”按钮对相应的投诉表单进行操作。系统接收当前接收对象对投诉表单的操作，其中当前接收对象的操作包括但不限于录入数据、修改数据和提交投诉表单。在本申请的一实施例中，系统接收当前接收对象对投诉表单的操作包括：接收当前接收对象在投诉表单界面输入的业务数据，并暂存于页面内存中；接收当前接收对象发起的投诉表单确认请求，并调用签名验证组件；当签名验证组件对当前接收对象校验成功后，将业务数据传输至服务器。在一个示例中，签名验证组件可以通过密码的方式对当前接收对象进行校验。通过使用签名验证组件对当前接收对象的身份进行校验，并且在校验成功后才将录入的数据上传至服务器，能够确保数据的安全性和准确性。

在当前接收对象完成对投诉表单的操作后，系统发送投诉表单的表单编号至工作流服务器，然后接收工作流服务器发送的新的当前节点编号。系统根据新的当前节点编号重新确定当前接收对象，接收新的当前接收对象对投诉表单的操作，然后发送表单编号至工作流服务器以获取新的当前节点编号，系统重复以上步骤直到当前节点编号为空。当前节点编号为空意味着工作流上的节点已全部完成，即该投诉表单的全部接收对象已完成对该投诉表单的操作。

在本申请的一实施例中，系统还可以根据当前节点编号确定当前接收对象能查看的投诉表单内容。每位当前接收对象的职位/角色可能不同，因此能查看的投诉表单的内容也可能不同。系统可以根据工作流服务器所发送的当前节点编号确定当前接收对象可以查看的内容，从而提高表单信息的安全性。

在步骤114中，系统判断投诉表单是否通过，若是则关闭投诉表单，若否则新建投诉表单。在一个示例中，投诉表单是否通过可以由客服录入客户是否满意来判断，即客户满意则投诉表单通过，客户不满意则投诉表单不通过。当投诉表单通过时，意味着投诉已完成，可以关闭投诉表单。当投诉表单未通过时，可以新建一个投诉表单重新开始处理。新建的投诉表单可以与原来的投诉表单相关联。因此，当投诉表单为投诉处理单时，新的投诉处理单与未通过的投诉处理单相关联，一个客户投诉单可以与多个投诉处理单进行关联。

本申请的Web端投诉表单设计器的实现方法，可实现自定义程度极高的投诉表单设计器，为使用者提供高度灵活的投诉表单设计自由度。同时，在设计过程中，随着表单组件的不断增加和频繁调整，仍可保持投诉表单设计器的流畅运行，并实现当前投诉设计表单的快速检视。在投诉表单配置后，用户可以在web端简单快捷地新建投诉表单，并且实现了工作流流程的自动流转，无需人工介入流程跳转。用户还可以在web端对投诉数据进行录入，实现了自动化高效地进行投诉信息管理。

本申请还提供了一种Web端投诉表单设计器的实现装置。图2是根据本申请一实施例示出的Web端投诉表单设计器的实现装置的框图。如图2所示，该Web端投诉表单设计器的实现装置包括组件定义模块201、表单设计模块202、表单演示渲染模块203、在线表单传输模块204、新建投诉模块205、投诉节点模块206和判断模块207。

组件定义模块201，被配置为：对设计投诉表单的组件进行封装并得到JSON数据，其中封装得到的JSON数据包括原始属性设置和初始数据渲染，原始属性对应组件的交互形态和图形样式；将组件对应的JSON数据排列形成基础组件栏；对基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中投诉表单设计组件响应于Web端的点选和移动操作。

表单设计模块202，被配置为：在投诉表单设计区域监听经过第二级封装的投诉表单设计组件，当投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对投诉表单设计组件进行数据绑定和渲染；以响应式布局叠加流式布局对投诉表单设计组件进行排列。

表单演示渲染模块203，被配置为：将排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的投诉表单界面；响应于点选投诉表单设计区域的表单组件，显示表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至投诉表单设计区域。

在线表单传输模块204，被配置为：将设计形成的投诉表单对应的JSON数据传输至服务器。

新建投诉模块205，被配置为：响应于用户发起的新建投诉表单请求，根据新建投诉表单请求的表单编号调用投诉表单界面并渲染；接收用户在投诉表单界面输入的投诉信息，发送表单编号至工作流服务器，接收工作流服务器发送的当前节点编号。

投诉节点模块206，被配置为：根据当前节点编号确定投诉表单的当前接收对象，接收当前接收对象对投诉表单的操作，发送表单编号至工作流服务器，接收工作流服务器发送的当前节点编号，直到当前节点编号为空。

判断模块207，被配置为：判断投诉表单是否通过，若是则关闭投诉表单，若否则新建投诉表单。

上述模块201-207所执行的步骤可参考前述实施例中的步骤101-114，在此不再展开描述。

图3示出了根据本申请一实施例示出的Web端投诉表单设计器的实现装置的系统实施环境示意图。Web端投诉表单设计器的实现装置300可包括内部通信总线301、处理器(Processor)302、只读存储器(ROM)303、随机存取存储器(RAM)304、以及通信端口305。Web端投诉表单设计器的实现装置300通过通信端口连接网络，并与服务器端连接。内部通信总线301可以实现Web端投诉表单设计器的实现装置300组件间的数据通信。处理器302可以进行判断和发出提示。在一些实施例中，处理器302可以由一个或多个处理器组成。通信端口305可以实现从网络发送和接受信息及数据。在图3中，通信端口305可通过网络与服务器端的服务器A 306、服务器数据存储A 307、服务器B 308、服务器数据存储B 309连接，以实现表单对应的JSON数据的传输。Web端投诉表单设计器的实现装置300还可以包括不同形式的程序储存单元以及数据储存单元，例如只读存储器(ROM)303和随机存取存储器(RAM)304，能够存储计算机处理和/或通信使用的各种数据文件，以及处理器302所执行的可能的程序指令。处理器执行这些指令以实现方法的主要部分。处理器处理的结果通过通信端口传给用户设备，在用户界面上显示。

上述的Web端投诉表单设计器的实现装置可以实施为计算机程序，保存在存储器中，并可记载到处理器302中执行，以实施本申请的Web端投诉表单设计器的实现方法。

本申请还提供了一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如上所述的Web端投诉表单设计器的实现方法。

本申请的一些方面可以完全由硬件执行、可以完全由软件(包括固件、常驻软件、微码等)执行、也可以由硬件和软件组合执行。以上硬件或软件均可被称为“数据块”、“模块”、“引擎”、“单元”、“组件”或“系统”。处理器可以是一个或多个专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理器件(DAPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、处理器、控制器、微控制器、微处理器或者其组合。此外，本申请的各方面可能表现为位于一个或多个计算机可读介质中的计算机产品，该产品包括计算机可读程序编码。例如，计算机可读介质可包括，但不限于，磁性存储设备(例如，硬盘、软盘、磁带……)、光盘(例如，压缩盘CD、数字多功能盘DVD……)、智能卡以及闪存设备(例如，卡、棒、键驱动器……)。

计算机可读介质可能包含一个内含有计算机程序编码的传播数据信号，例如在基带上或作为载波的一部分。该传播信号可能有多种表现形式，包括电磁形式、光形式等等、或合适的组合形式。计算机可读介质可以是除计算机可读存储介质之外的任何计算机可读介质，该介质可以通过连接至一个指令执行系统、装置或设备以实现通讯、传播或传输供使用的程序。位于计算机可读介质上的程序编码可以通过任何合适的介质进行传播，包括无线电、电缆、光纤电缆、射频信号、或类似介质、或任何上述介质的组合。

同理，应当注意的是，为了简化本申请披露的表述，从而帮助对一个或多个申请实施例的理解，前文对本申请实施例的描述中，有时会将多种特征归并至一个实施例、附图或对其的描述中。但是，这种披露方法并不意味着本申请对象所需要的特征比权利要求中提及的特征多。实际上，实施例的特征要少于上述披露的单个实施例的全部特征。

虽然本申请已参照当前的具体实施例来描述，但是本技术领域中的普通技术人员应当认识到，以上的实施例仅是用来说明本申请，在没有脱离本申请精神的情况下还可作出各种等效的变化或替换，因此，只要在本申请的实质精神范围内对上述实施例的变化、变型都将落在本申请的权利要求书的范围内。

Claims (10)

1.一种Web端投诉表单设计器的实现方法，包括：

对设计投诉表单的组件进行封装并得到JSON数据，其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染，所述原始属性对应所述组件的交互形态和图形样式；

将所述组件对应的所述JSON数据排列形成基础组件栏；

对所述基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中所述投诉表单设计组件响应于Web端的点选和移动操作；

在投诉表单设计区域监听经过所述第二级封装的所述投诉表单设计组件，当所述投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对所述投诉表单设计组件进行数据绑定和渲染；

以响应式布局叠加流式布局对所述投诉表单设计组件进行排列；

将所述排列的结果预解析为虚拟DOM元素，通过所述虚拟DOM元素展示当前设计的投诉表单界面；

响应于点选投诉表单设计区域的表单组件，显示所述表单组件的配置栏；

接收Web端对配置栏的操作，将配置结果渲染至所述投诉表单设计区域；

更新所述配置结果对应的投诉表单组件的虚拟DOM元素；

将设计形成的投诉表单对应的JSON数据传输至服务器；

响应于用户发起的新建投诉表单请求，根据所述新建投诉表单请求的表单编号调用所述投诉表单界面并渲染；

接收用户在所述投诉表单界面输入的投诉信息，发送所述表单编号至工作流服务器，接收所述工作流服务器发送的当前节点编号；

根据所述当前节点编号确定所述投诉表单的当前接收对象，接收当前接收对象对所述投诉表单的操作，发送所述表单编号至所述工作流服务器，接收所述工作流服务器发送的所述当前节点编号，直到所述当前节点编号为空；

判断所述投诉表单是否通过，若是则关闭所述投诉表单，若否则新建投诉表单。

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

根据所述当前节点编号确定所述当前接收对象能查看的投诉表单内容。

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

所述投诉表单为客户投诉单或投诉处理单。

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

当所述投诉表单为所述客户投诉单时，接收投诉专员输入的投诉分类信息；

当所述投诉分类信息为药物警戒或客户咨询时，关闭所述投诉表单。

5.如权利要求1所述的方法，其特征在于，所述接收当前接收对象对所述投诉表单的操作包括：

接收所述当前接收对象在所述投诉表单界面输入的业务数据，并暂存于页面内存中；

接收所述当前接收对象发起的投诉表单确认请求，并调用签名验证组件；

当所述签名验证组件对所述当前接收对象校验成功后，将所述业务数据传输至服务器。

6.如权利要求1所述的方法，其特征在于，所述组件的交互形态包括以下的任意一个或多个：多行文本、单行文本、数值、单选框、下拉框、复选框、日期、时间、文件上传、分割线、签名、说明文字、富文本和多记录。

7.如权利要求1所述的方法，其特征在于，所述当前设计的表单界面以全局数据流形式进行存储。

8.一种Web端投诉表单设计器的实现装置，包括：

组件定义模块，被配置为：对设计投诉表单的组件进行封装并得到JSON数据，其中所述封装得到的JSON数据包括原始属性设置和初始数据渲染，所述原始属性对应所述组件的交互形态和图形样式；将所述组件对应的所述JSON数据排列形成基础组件栏；对所述基础组件栏中的元素进行第二级封装并形成投诉表单设计组件，其中所述投诉表单设计组件响应于Web端的点选和移动操作；

表单设计模块，被配置为：在投诉表单设计区域监听经过所述第二级封装的所述投诉表单设计组件，当所述投诉表单设计组件响应于Web端的点选和移动操作移动至投诉表单设计区域时，对所述投诉表单设计组件进行数据绑定和渲染；以响应式布局叠加流式布局对所述投诉表单设计组件进行排列；

表单演示渲染模块，被配置为：将所述排列的结果预解析为虚拟DOM元素；通过虚拟DOM元素展示当前设计的投诉表单界面；响应于点选投诉表单设计区域的表单组件，显示所述表单组件的配置栏；接收Web端对配置栏的操作，将配置结果渲染至所述投诉表单设计区域；

在线表单传输模块，被配置为：将设计形成的投诉表单对应的JSON数据传输至服务器；

新建投诉模块，被配置为：响应于用户发起的新建投诉表单请求，根据所述新建投诉表单请求的表单编号调用所述投诉表单界面并渲染；接收用户在所述投诉表单界面输入的投诉信息，发送所述表单编号至工作流服务器，接收所述工作流服务器发送的当前节点编号；

投诉节点模块，被配置为：根据所述当前节点编号确定所述投诉表单的当前接收对象，接收当前接收对象对所述投诉表单的操作，发送所述表单编号至所述工作流服务器，接收所述工作流服务器发送的所述当前节点编号，直到所述当前节点编号为空；

判断模块，被配置为：判断所述投诉表单是否通过，若是则关闭所述投诉表单，若否则新建投诉表单。

9.一种Web端投诉表单设计器的实现系统，包括：

存储器，用于存储可由处理器执行的指令；以及处理器，用于执行所述指令以实现如权利要求1-7任一项所述的方法。

10.一种存储有计算机程序代码的计算机可读介质，所述计算机程序代码在由处理器执行时实现如权利要求1-7任一项所述的方法。

Images