多场景数据适配展示方法、装置、电子设备及存储介质与流程

本发明涉及计算机技术领域，具体涉及一种多场景数据适配展示方法、装置、电子设备及存储介质。

背景技术：

对于房产交易签后流程来说，由于不同的城市有着不同的签后流程，因此，目前针对不同城市、不同待办，需要手写对应的页面，完成其样式展示，联动交互，数据校验和数据保存工作。

目前这种处理方式存在如下缺点：

每一个城市每一个流程都有一套页面，这就意味着有大量重复性的工作，维护成本非常高，开发和维护成本不断增长，每增加一个城市都要开发很多套不同流程的交互，同时随着城市不断增长，代码量持续上升。

技术实现要素：

针对现有技术中的缺陷，本发明提供一种多场景数据适配展示方法、装置、电子设备及存储介质。

具体地，本发明提供以下技术方案：

第一方面，本发明提供了一种多场景数据适配展示方法，包括：

步骤一，获取待配置的场景交互数据；

步骤二，根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

进一步地，所述步骤一包括：

获取待配置的场景交互数据，所述待配置的场景交互数据包括配置字段信息、配置字段的父子关系信息和配置字段的展示条件信息；其中，配置字段信息包括配置字段的名称信息、输入类型信息和展示样式信息。

进一步地，所述步骤二包括：

将待配置的场景交互数据在recat的组件state中的form对象下进行数据初始化；

将待配置的场景交互数据在window全局变量下进行数据初始化；

在recat的生命周期的render中，调用getfieldrender方法，解析待配置的场景交互数据，并根据解析结果展示相应的场景交互数据。

进一步地，所述在recat的生命周期的render中，调用getfieldrender方法，解析待配置的场景交互数据；并根据解析结果展示相应的场景交互数据，包括：

在recat的生命周期的render中，调用getfieldrender方法，解析处理parentname配置，将父子字段的平级关系，处理成父子字段上下级关系，将配置数组中的子字段删除，并配置到父子段child字段下，并根据child字段来实例化子字段展示样式；

循环配置数组，动态生成交互；

根据配置字段的展示条件，利用eval方法动态解析展示条件，并在判断满足展示条件时，根据配置字段的名称信息，配置生成字段展示名称，根据配置字段的输入类型信息，代码实例化不同的表单类型，以及根据配置字段的展示样式信息，展示相应的字段。

进一步地，在根据配置字段的展示样式信息，展示相应的字段时，若配置字段为枚举类型，则根据字典名在全局变量下获取枚举选项，并填充展示到页面中，以及根据value获取配置字段的默认值。

进一步地，所述方法还包括：

监听state状态改变事件，获取用户每次操作输入的信息，将每次操作输入信息放入到window全局变量以及组件state中的form对象下。

进一步地，所述待配置的场景交互数据包括：是否有保存按钮字段以及是否有提交按钮字段；

相应地，所述方法还包括：

当检测到用户点击保存按钮后，自动获取各配置字段的数据；

当检测到用户点击提交按钮后，自动获取各配置字段的数据，同时利用eval方法动态解析校验类型，识别出需要进行校验的字段，自动做校验及提示，并在校验通过后，将获取的数据发送至后端服务器。

第二方面，本发明还提供了一种多场景数据适配展示装置，包括：

获取模块，用于获取待配置的场景交互数据；

配置模块，用于根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

第三方面，本发明还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所述多场景数据适配展示方法的步骤。

第四方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面所述多场景数据适配展示方法的步骤。

由上述技术方案可知，本发明提供的多场景数据适配展示方法，首先获取待配置的场景交互数据，然后根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。可见，本发明提供的多场景数据适配展示方法，针对不同城市以及不同流程，只需要配置对应的场景交互数据，即可完美兼容，不再需要处理代码逻辑，从而大大降低了开发和维护成本。

附图说明

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

图1是本发明一实施例提供的多场景数据适配展示方法的流程图；

图2是本发明另一实施例提供的多场景数据适配展示装置的结构示意图；

图3是本发明又一实施例提供的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供的多场景数据适配展示方法，针对不同城市以及不同流程，只需要配置对应的场景交互数据，即可完美兼容，不再需要处理代码逻辑，从而大大降低了开发和维护成本。下面将通过实施例对本发明提供的多场景数据适配展示方法进行详细介绍。

具体地，本发明一实施例提供了一种多场景数据适配展示方法，参见图1，该方法包括如下步骤：

步骤101：获取待配置的场景交互数据。

在本步骤中，根据不同城市不同流程中所需要的全部交互方式及类型，梳理可以完美兼容所有类型的配置信息，基本包括以下字段：desc:表单字段描述名称；dictname:字典名，当表单类型是下拉等枚举类型时，配置对应的枚举址集合名称；displaycondition:展示条件，控制联动展示交互，支持根据条件配置；inputtype:字段类型，用于动态识别表单类型；name:数据保存字段名；parentname:父子段名称，用于控制并列字段布局展示；percent:样式占比，用于控制布局展示；readonly:用于控制字段是否可编辑操作；require:用于控制字段是否是必填字段，同时控制字段样式是否加*，支持根据条件配置；submit:用于动态识别字段是否需要提交到后端；unit:字段展示是否需要单位；validator：字段的校验类型，支持根据条件配置；value:字段默认值。

步骤102：根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

在本步骤中，基于react技术实现，整个方案实现在完整react组件中。在配置信息梳理完成后，在不同城市不同待办流程中，基于recat相关组件和函数，即可用数组的方式动态配置对应的交互页面。

由上述技术方案可知，本实施例提供的多场景数据适配展示方法，首先获取待配置的场景交互数据，然后根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。可见，本实施例提供的多场景数据适配展示方法，针对不同城市以及不同流程，只需要配置对应的场景交互数据，即可完美兼容，不再需要处理代码逻辑，从而大大降低了开发和维护成本。

基于上述实施例的内容，在一种可选实施方式中，所述步骤101可通过如下方式实现：

获取待配置的场景交互数据，所述待配置的场景交互数据包括配置字段信息、配置字段的父子关系信息和配置字段的展示条件信息；其中，配置字段信息包括配置字段的名称信息、输入类型信息和展示样式信息。

基于上述实施例的内容，在一种可选实施方式中，所述步骤102可通过如下方式实现：

a、将待配置的场景交互数据在recat的组件state中的form对象下进行数据初始化；

b、将待配置的场景交互数据在window全局变量下进行数据初始化；

c、在recat的生命周期的render中，调用getfieldrender方法，解析待配置的场景交互数据，并根据解析结果展示相应的场景交互数据。

在本实施方式中，为了处理各个配置字段的条件解析，组件生成时，需要初始化各个字段的数据，也即在组件的生命周期函数中的componentwillmount中，将所有字段的默认值，初始化到全局变量也即window下，同时在组件的state中的form对象下，同样初始化一份数据。在本实施方式中，在处理联动关系时，非常巧妙地通过将数据放到react的组件中state下，监听到值发生改变时来实现视图展示的更新，及将数据放到window全局变量下，通过eval方法巧妙解析条件，进而实现联动关系。需要说明的是，在进行步骤a之前，需要实现各个表单类型的独立组件，如银行联动，下拉选择，表单录入等类型。

基于上述实施例的内容，在一种可选实施方式中，所述步骤c可通过如下方式实现：

在recat的生命周期的render中，调用getfieldrender方法，解析处理parentname配置，将父子字段的平级关系，处理成父子字段上下级关系，将配置数组中的子字段删除，并配置到父子段child字段下，并根据child字段来实例化子字段展示样式；

循环配置数组，动态生成交互；

根据配置字段的展示条件，利用eval方法动态解析展示条件，并在判断满足展示条件时，根据配置字段的名称信息，配置生成字段展示名称，根据配置字段的输入类型信息，代码实例化不同的表单类型，以及根据配置字段的展示样式信息，展示相应的字段。

在本实施方式中，在处理父子字段的ui样式实现时，在recat的生命周期的render中，调用getfieldrender方法，解析处理parentname配置，将父子字段的平级关系，处理成父子字段上下级关系，将配置数组中的子字段删除，并配置到父子段child字段下，并根据child字段来实例化子字段展示样式。这种处理方式，对于整个配置化的实现是非常巧妙的实现思路，可以有效简化配置的复杂度。

在本实施方式中，支持根据条件配置，也即根据整个流程中配置的其他字段的数据，动态识别当前字段的部分交互，如买方配置了已婚，配偶姓名展示，并且必填，从而可以实现相关条件字段的自动展示和校验。

在本实施方式中，在组件生命周期的render中，调用getfieldrender方法，主要解析配置文件，首先解析处理parentname配置，将父子字段的平级关系，处理成父子字段上下级关系，也即将配置数组中的子字段删除，并配置到父子段child字段下。然后循环配置数组，动态生成交互，包括页面结构。接着根据displayconditin，利用eval方法动态解析条件，根据返回值为true，判别为展示字段，否则不进行下面操作：根据desc，配置生成字段展示名称，根据inputtype，代码实例化不同的表单类型，并且根据percent，应用不同的布局样式，根据dictname在全局变量下获取枚举选项，并填充展示到页面中，并根据value获取默认值。

在本实施方式中，根据name关联字段数据，监听表单数据改变事件，每次操作录入信息，将新值放入到window全局变量以及组件state.form对象下，由于每次变更都会调用组件的setstate，也即会重新渲染组件，调用render方法，上述所说条件即可动态实时解析，生成不同的交互展示。此外，还可以根据unit动态配置字段单位展示，根据readonly来控制字段是否时可编辑状态，根据child字段来实例化子字段展示样式。

基于上述实施例的内容，在一种可选实施方式中，在根据配置字段的展示样式信息，展示相应的字段时，若配置字段为枚举类型，则根据字典名在全局变量下获取枚举选项，并填充展示到页面中，以及根据value获取配置字段的默认值。

基于上述实施例的内容，在一种可选实施方式中，所述方法还包括：

监听state状态改变事件，获取用户每次操作输入的信息，将每次操作输入信息放入到window全局变量以及组件state中的form对象下。

基于上述实施例的内容，在一种可选实施方式中，所述待配置的场景交互数据包括：是否有保存按钮字段issave以及是否有提交按钮字段issubmit；

相应地，所述方法还包括：

当检测到用户点击保存按钮后，自动获取各配置字段的数据；

当检测到用户点击提交按钮后，自动获取各配置字段的数据，同时利用eval方法动态解析校验类型，识别出需要进行校验的字段，自动做校验及提示，并在校验通过后，将获取的数据发送至后端服务器。

在本实施方式中，根据配置，自动识别是否有保存及提交按钮，组件定义获取数据方法，也即直接获取组件state.form对象，循环配置数组，根据submit及displaycondition动态过滤数据，获取最终保存的数据。对于点击保存按钮的交互：自动获取上述数据，传至后端。对于点击提交按钮的交互：自动获取上述数据，同时利用eval方法动态解析validator，识别出需要进行的校验类型，自动做校验及提示，如校验不过，提示用户对应的错误校验信息，反之，将最终数据传至后端服务器。可见，在本实施方式中，数据提交逻辑为经过优化处理后的逻辑，本实施例并不是将配置展示的全部表单元素数据全量提交，而是根据配置的是否提交字段及是否展示做过过滤，降低了无用数据存储的流量浪费及请求时长。

根据上述方案可知，本实施例提供的多场景数据适配展示方法，能够根据配置字段，自动识别表单类型，如银行联动字段，下拉选择字段，表单输入字段等；能够根据配置字段，自动识别保存字段，用于后端数据存储；能够根据配置字段，自动布局，如一列布局，两列布局，如父子字段展示；能够根据配置字段，自动生成交互联动，如选择是否已婚，联动是否展示配偶模块；能够根据配置字段，自动校验表单；能够根据配置字段，自动过滤机处理保存数据；能够根据配置字段，自动配置保存及提交按钮，并生成对应交互；能够支持所需要的所有展示内容，包括且不限于提示信息和模块标题。

基于相同的发明构思，本发明另一实施例提供了一种多场景数据适配展示装置，参见图2，该装置包括：获取模块21和配置模块22；

获取模块21，用于获取待配置的场景交互数据；

配置模块22，用于根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

本发明实施例提供的多场景数据适配展示装置可以用于执行上述实施例所述的多场景数据适配展示方法，其工作原理和有益效果类似，此处不再详述。

基于相同的发明构思，本发明又一实施例提供了一种电子设备，参见图3，所述电子设备具体包括如下内容：处理器301、存储器302、通信接口303和总线304；

其中，所述处理器301、存储器302、通信接口303通过所述总线304完成相互间的通信；所述通信接口303用于实现各建模软件及智能制造装备模块库等相关设备之间的信息传输；

所述处理器301用于调用所述存储器302中的计算机程序，所述处理器执行所述计算机程序时实现上述实施例一中的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

步骤101：获取待配置的场景交互数据。

步骤102：根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

基于相同的发明构思，本发明又一实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例一的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

步骤101：获取待配置的场景交互数据。

步骤102：根据待配置的场景交互数据，基于recat相关组件和函数，配置对应的交互页面。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上实施例仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。