CN116149653A - 构建列表页面的方法、装置、存储介质及计算机设备 - Google Patents

Abstract

本申请实施例公开了一种构建列表页面的方法、装置、存储介质及计算机设备，涉及列表设计领域。本申请基于元数据进行框架架构和实现，通过抽象编程提升复用性，解耦业务字段和业务细节，适应于不同业务的列表页面；并通过场景定义和特性组装满足不同的业务能力；然后通过动态能力，提供快速响应需求，以及解决产品化和个性化的冲突问题。

Description

构建列表页面的方法、装置、存储介质及计算机设备

技术领域

本申请涉及列表设计领域，尤其涉及一种构建列表页面的方法、装置、存储介质及计算机设备。

背景技术

在信息化系统中，存在大量的增删改查的管理类列表页面，例如：报销单管理页面、借款单管理页面和入库单管理页面等。每种页面都需要编写页面内容和业务逻辑代码，无法复用，费时费力，大大提高研发成本。在实施过程中，也无法动态调整和动态构建交互界面和业务功能，需返厂定制研发后发布，无法快速响应客户的个性需求。

发明内容

本申请实施例提供了构建列表页面的方法、装置、存储介质及计算机设备，可以实现灵活调整列表页面的内容和功能。所述技术方案如下：

第一方面，本申请实施例提供了一种构建列表页面的方法，所述方法包括：

在候选的多个场景中选择一个目标场景；

为所述目标场景配置元数据模型；

为所述目标场景绑定菜单；

为所述目标场景设置特性；

以及利用从格式模板库中选择的列表模板，使用向导绘制配置所述目标场景的格式。

完成以上配置后，生成所述目标场景对应的列表页面。

第二方面，本申请实施例提供了一种构建列表页面的装置，所述装置包括：

选择单元，用于在候选的多个场景中选择一个目标场景；

配置单元，用于为所述目标场景配置元数据模型；为所述目标场景绑定菜单；为所述目标场景设置特性；以及利用从格式模板库中选择的列表模板，使用向导绘制配置所述目标场景的格式。

生成单元，用于完成以上配置后，生成所述目标场景对应的列表页面。

第三方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

第四方面，本申请实施例提供一种计算机设备，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

基于元数据进行框架架构和实现，通过抽象编程提升复用性，解耦业务字段和业务细节，适应于不同业务的列表页面；并通过场景定义和特性组装满足不同的业务能力；然后通过动态能力，提供快速响应需求，以及解决产品化和个性化的冲突问题。

附图说明

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

图1是本申请实施例提供的网络架构示意图；

图2是本申请实施例提供的构建列表页面的方法的流程示意图；

图3是本申请实施例提供的绘制列表页面的原理示意图；

图4是本申请实施例提供的场景列表的示意图；

图5是本申请实施例提供的新增场景界面的示意图；

图6是本申请实施例提供的模型编辑界面的示意图；

图7是本申请实施例提供的新增规则界面的示意图；

图8是本申请实施例提供的设置表达式界面的示意图；

图9是本申请实施例提供的菜单绑定界面的示意图；

图10是本申请实施例提供的设置特性界面的示意图；

图11是本申请实施例提供的选择模板界面的示意图；

图12是本申请实施例提供的格式向导界面的示意图；

图13是本申请实施例提供的生成的列表页面的示意图；

图14是本申请提供的一种构建列表页面的装置的结构示意图；

图15是本申请提供的一种计算机设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。

需要说明的是，本申请提供的构建列表页面的方法一般由计算机设备执行，相应的，构建列表页面的装置一般设置于计算机设备中。

图1示出了可以应用于本申请的构建列表页面的方法或构建列表页面的装置的示例性系统架构。

如图1所示，系统架构可以包括：计算机设备101和服务器102。计算机设备101和服务器102之间可以通过网络进行通信，网络用于上述各个单元之间提供通信链路的介质。网络可以包括各种类型的有线通信链路或无线通信链路，例如：有线通信链路包括光纤、双绞线或同轴电缆等，无线通信链路包括蓝牙通信链路、无线保真(WIreless-FIdelity，Wi-Fi)通信链路或微波通信链路等。

其中，服务器102中部署有页面设计工具，计算机设备101调用页面设计工具设计列表页面。

参见图3所示，为本申请实施例提供的设计列表页面的原理示意图：首选，选择一个场景，为选择的场景引用元数据模型、关联菜单、组装特性(规则、取数和勾稽)、使用格式向导绘制格式，在格式绘制过程中使用格式模板库中的格式模板。

在本申请中，元数据是描述模型的数据；主体部分分为模型和模型字段两部分，模型里面包含0到n个字段。字段的属性有名称、中文名称、数据类型、长度、精度、映射名称和引用模型等。数据类型分为字符、日期、布尔、枚举、引用实体、文件、整数和数值等。

不同的角色可以看到不同的格式界面，可通过增加不同的菜单，绑定不同的场景，不同场景关联不同格式，不同角色授权不同的菜单来实现。通过定义不同的场景，在场景绑定不同的格式和组装不同的特性来实现该能力。每个特性是一个可复用的业务能力组件，通过组装不同的特性(比如取数、规则和自动编码等)提供客户化业务。

格式的绘制提供向导配置功能，无需关注细节样式，只需考虑区域有哪里内容，降低门槛。

前端页面核心运行框架由Controller、View、Model、Utils、场景服务、特性服务组成。然后根据不同的终端，提供不同的终端适配和终端层能力。处理器的操作基于元数据进行判断，不进行硬编码字段处理。界面和模型的同步，使用Vue双向绑定能力进行同步，不直接操作DOM元素。

页面html生成到程序代码中，同时也包含一份格式定义的数据在程序代码中，到了实施期，通过配置入口，读取格式定义数据，进行调整，存储到数据库中，再通过统一访问页面地址，优先获取数据库数据重新生成格式返回。

在实施期，可在实施环境上新增场景和新增格式，不需要生成代码，存储到数据库中，访问时动态生成格式。

查询区域的条件支持配置初始化默认值，并且默认值也可以设置取数，如取当前用户、当前机构和当前时间等。

其中，本申请通过各种特点和能力，来支撑列表页面的高效研发和复用，从而为研发企业带来经济效率，而为客户输出高质量和贴切需求的系统或产品。主要有益效果如下：

无需重复开发列表页面和页面逻辑，复用性高，提高研发效率和降低研发成本

面向元数据编程，形成列表页面可复用框架；提供通用实体、枚举、布尔、日期、数值、金额、字符、表格和附件等控件，控件丰富完备。

页面和处理器解耦，使用模型绑定，支撑个性化页面或者使用不同的页面模板，而无需调整代码，支撑客户化页面需求。

页面同时也提供向导配置，操作简单方便，研发效率进一步提高。

支撑场景定义和特性组装，可以通过不同的场景隔离不同的特性，也可以通过组装不同的特性从而扩展业务能力。

动态建立一个页面，动态组装能力，实施期根据不同客户新增或调整系统中的页面和业务能力，快速响应和个性研发。

支持特性组装，如必填规则、只读规则和唯一型校验规则等规则特性处理，支持取数计算。

支持列表编辑或者单屏录入，可满足不同需求。也支持列表主子表，同时也支持左树右表。

列表格式能力丰富，都可配置。

需要说明的是，计算机设备101和服务器102可以是硬件，也可以是软件。当计算机设备101和服务器102为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当计算机设备101和服务器102为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不做具体限定。

本申请的计算机设备上可以安装有各种通信客户端应用，例如：视频录制应用、视频播放应用、语音交互应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

计算机设备可以是硬件，也可以是软件。当计算机设备为硬件时，可以是具有显示屏的各种计算机设备，包括但不限于智能手机、平板电脑、膝上型便携式计算机和台式计算机等等。当计算机设备为软件时，可以是安装上述所列举的计算机设备中。其可以实现呈多个软件或软件模块(例如：用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不作具体限定。

当计算机设备为硬件时，其上还可以安装有显示设备和摄像头，显示设备显示可以是各种能实现显示功能的设备，摄像头用于采集视频流；例如：显示设备可以是阴极射线管显示器(cathoderaytubedisplay，简称CR)、发光二极管显示器(light-emittingdiodedisplay，简称LED)、电子墨水屏、液晶显示屏(liquidcrystaldisplay，简称LCD)、等离子显示面板(plasmadisplaypanel，简称PDP)等。用户可以利用计算机设备上的显示设备，来查看显示的文字、图片、视频等信息。

应理解，图1中的计算机设备、网络和服务器的数目仅是示意性的。根据实现需要，可以是任意数量的计算机设备、网络和服务器。

下面将结合附图2，对本申请实施例提供的构建列表页面的方法进行详细介绍。其中，本申请实施例中的构建列表页面的装置可以是图1所示的计算机设备。

请参见图2，为本申请实施例提供了一种构建列表页面的方法的流程示意图。如图2所示，本申请实施例的所述方法可以包括以下步骤：

S201、在候选的多个场景中选择一个目标场景。

其中，在构建某个场景下的列表页面时，可以基于用户的选择指令在候选的多个场景中选择一个目标场景，候选的多个场景可以根据用户实际需求而定，例如：多个场景的场景名称为：列表测试、单屏、普通列表等。

举例来说，参见4所示的场景列表的示意图，计算机设备显示场景列表，场景列表中包括多个场景的场景属性信息和操作组件，场景列表中每一行对应一个场景，每一行存储有场景属性信息：场景名称、所属类别、类型ID、引入模型、版本号、发布状态、是否从工程引入、所属分层、来源，场景列表的上方设置的操作组件包括：新增场景、修改场景、删除场景、打开场景、复制场景、服务/应用、推送至服务库等组件。用户可以利用输入装置触发生成选择指令，在场景列表中选择一个目标场景，被选择的目标场景对应的行采用高亮方式显示，例如：用户利用鼠标单击场景列表的第1行时，第1行所有单元格的背景色由白色变为蓝色，表示第1行对应的场景被选择为目标场景。

其中，用户通过输入装置对场景列表上的操作组件进行触发，以执行相应的操作。

例如：参见5所示，当检测到新增场景上发生的触发操作时，显示图5所示的新增场景界面，用户在新增场景界面上配置如下字段的字段值：场景名称、场景ID、引入模型、所属类别、所属分层、类型、业务功能、界面类型。

S202、为目标场景配置元数据模型。

其中，元数据模型是用于描述列表页面中数据的数据或信息的信息，用户通过输入装置配置元数据模型的字段。

在一些实施例中，参见图6所示的模型编辑界面，模型编辑界面包括模型字段列表和操作控件，模型字段列表中包括多个行，每个行的单元格存放多个模型属性字段，模型属性字段包括：项目标题、项目名称、项目描述、数据类型、引用定义、显示格式、对应关系、关系类型、长度、精度等。模型字段列表的上方设置有操作控件，操作控件用于执行新增操作、新增下级操作、插入操作、复制操作、删除操作、保存操作等。操作控件的上方设置有多个功能标签，各个功能标签用于切换不同的标签页以及在标签页执行相应的功能。功能标签包括：项目(对应图6的模型编辑页面)、格式、输入器、动作、动作事件、勾稽、运算、规则和自动编码等。

当检测到“规则”标签上的触发操作时，显示图7所示的新增规则界面，用于在新增规则界面上新增列表页面的规则，规则包括用于界面控制和模型控制的规则。

当检测到“运算”标签上的触发操作时，显示图8所示的设置表达式界面，用于在设置表达式界面上设置列表页面的表达式，表达式由函数和运算符连接起来，函数包括单据函数、实体函数、数学函数、时间函数、系统函数和身份证函数等。

S203、为目标场景绑定菜单。

其中，菜单为列表页面上用于执行相关功能的控件，根据计算机设备的设备类型确定彩带类型，当设备类型为PC时，为列表页面绑定PC菜单；当设备类型为移动中断时，为列表页面绑定移动菜单。

在一些实施例中，计算机设备通过菜单绑定界面为目标场景绑定菜单，参见图9所述的菜单绑定界面，包括菜单列表和操作控件，菜单列表包括多个行，每个行对应一个菜单，每个行的单元格存放菜单属性字段：菜单名称、关联类型、关联内容、URL、菜单图标。菜单列表上方设置有操作控件，用于执行如下操作：新增同级、新增下级、删除、保存、上移、下移。

S204、为目标场景设置特性。

其中，本申请根据不同的场景设置不同的特性，以扩张列表页面的业务能力。

在一些实施例中，计算机设备通过设置特性界面来为目标场景设置特性，每个特性是一个可复用的业务能力组件，通过组装不同的特性(比如取数、规则和自动编码等)提供客户化业务。

参见图10所示，当检测到图4中设置特性控件上的触发操作时，显示图10所示的设置特性界面，用于对图4中选择的目标场景设置特性，图10的界面包括特性列表，特性列表的每个行对应一个特性，每行的单元格用于存放特性字段：特性、特性类别、场景、参数设置、所属分层、所有者，特性列表的上方设置有操作控件，用于对特性列表中的行执行新增操作或删除操作。

S205、利用从格式模板库中选择的格式模板，使用向导绘制为目标场景设置格式。

其中，格式模板库中预配置有多个候选的格式模板，格式表示目标场景下列表页面的显示样式，利用绘制的方式引导用户完成格式的设置。

在一些实施例中，参见图11所示的选择模板界面，选择模板界面的左侧设置有多个后续的格式模板：普通列表模板、带进度条列表模板等，用户通过输入装置选择一个格式模板，然后再界面的右侧显示被选择的格式模板。

在一些实施例中，参见图12所示的格式向导界面，用户通过该格式向导界面来设置条件区域、主体区域、明细区域、按钮区域和服务属性的格式，可以提高格式设置的便利性。

S206、完成以上配置后，生成目标场景对应的列表页面。

其中，列表页面包括一个或多个列表，列表可以为：列表主字表、左树右表、树表、操作列列表等，列表页面上包括操作控件，可以对列表执行增加、查询、删除、修改等操作。例如：生成如图13所示列表页面。

本申请的实施例基于元数据进行框架架构和实现，通过抽象编程提升复用性，解耦业务字段和业务细节，适应于不同业务的列表页面；并通过场景定义和特性组装满足不同的业务能力；然后通过动态能力，提供快速响应需求，以及解决产品化和个性化的冲突问题。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

请参见图14，其示出了本申请一个示例性实施例提供的构建列表页面的装置的结构示意图，以下简称装置14。该装置14可以通过软件、硬件或者两者的结合实现成为计算机设备的全部或一部分。装置14包括：选择单元1401、配置单元1402、生成单元1403。

选择单元1401，用于在候选的多个场景中选择一个目标场景；

配置单元1402，用于为所述目标场景配置元数据模型；为所述目标场景绑定菜单；为所述目标场景设置特性；以及利用从格式模板库中选择的列表模板，使用向导绘制配置所述目标场景的格式。

生成单元1403，用于完成以上配置后，生成所述目标场景对应的列表页面。

在一个或多个可能的实施例中，所述为所述目标场景配置元数据模型，包括：

显示模型编辑界面；

基于所述模型编辑界面编辑元数据模型的模型属性字段。

在一个或多个可能的实施例中，所述为所述目标场景绑定菜单，包括：

显示菜单绑定界面；

基于所述菜单绑定界面配置菜单列表；其中，所述菜单列表包括多个行，每个行存放菜单属性字段：菜单名称、关联类型、关联内容、URL和菜单图标。

在一个或多个可能的实施例中，所述为所述目标场景设置特性，包括：

显示特性设置界面；

基于所述特性设置界面，设置特性名称、特性类别、场景、参数、所属分层和持有者。

在一个或多个可能的实施例中，所述使用向导绘制配置所述目标场景的格式，包括：

选择设置方式为向导绘制；

基于向导流程设置条件区域、主体区域、明细区域、按钮区域和服务属性的格式。

在一个或多个可能的实施例中，所述在候选的多个场景中选择一个目标场景，包括：

显示场景列表；

基于选择指令在所述场景列表中选择目标场景。

在一个或多个可能的实施例中，还包括：

新增单元，用于基于新增指令，在所述场景列表中新增一个场景。

需要说明的是，上述实施例提供的装置14在执行构建列表页面的方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成上述的全部或者部分功能。另外，上述实施例提供的构建列表页面的装置与构建列表页面的方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图2所示实施例的方法步骤，具体执行过程可以参见图2所示实施例的具体说明，在此不进行赘述。

本申请还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的构建列表页面的方法。

请参见图15，为本申请实施例提供了一种计算机设备的结构示意图。如图15所示，所述计算机设备1500可以包括：至少一个处理器1501，至少一个网络接口1504，用户接口1503，存储器1505，至少一个通信总线1502。

其中，通信总线1502用于实现这些组件之间的连接通信。

其中，用户接口1503可以包括显示屏(Display)、摄像头(Camera)，可选用户接口1503还可以包括标准的有线接口、无线接口。

其中，网络接口1504可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。

其中，处理器1501可以包括一个或者多个处理核心。处理器1501利用各种接口和线路连接整个计算机设备1500内的各个部分，通过运行或执行存储在存储器1505内的指令、程序、代码集或指令集，以及调用存储在存储器1505内的数据，执行计算机设备1500的各种功能和处理数据。可选的，处理器1501可以采用数字信号处理(DigitalSignalProcessing，DSP)、现场可编程门阵列(Field-ProgrammableGateArray，FPGA)、可编程逻辑阵列(ProgrammableLogicArray，PLA)中的至少一种硬件形式来实现。处理器1501可集成中央处理器(CentralProcessingUnit，CPU)、图像处理器(GraphicsProcessingUnit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器1501中，单独通过一块芯片进行实现。

其中，存储器1505可以包括随机存储器(RandomAccessMemory，RAM)，也可以包括只读存储器(Read-OnlyMemory)。可选的，该存储器1505包括非瞬时性计算机可读介质(non-transitorycomputer-readablestoragemedium)。存储器1505可用于存储指令、程序、代码、代码集或指令集。存储器1505可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器1505可选的还可以是至少一个位于远离前述处理器1501的存储装置。如图15所示，作为一种计算机存储介质的存储器1505中可以包括操作系统、网络通信模块、用户接口模块以及应用程序。

在图15所示的计算机设备1500中，用户接口1503主要用于为用户提供输入的接口，获取用户输入的数据；而处理器1501可以用于调用存储器1505中存储的应用程序，并具体执行如图2所示的方法，具体过程可参照图2所示，此处不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。

以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (10)

1.一种构建列表页面的方法，其特征在于，包括：

在候选的多个场景中选择一个目标场景；

为所述目标场景配置元数据模型；

为所述目标场景绑定菜单；

为所述目标场景设置特性；

以及利用从格式模板库中选择的列表模板，使用向导绘制配置所述目标场景的格式。

完成以上配置后，生成所述目标场景对应的列表页面。

2.根据权利要求1所述的方法，其特征在于，所述为所述目标场景配置元数据模型，包括：

显示模型编辑界面；

基于所述模型编辑界面编辑元数据模型的模型属性字段。

3.根据权利要求1或2所述的方法，其特征在于，所述为所述目标场景绑定菜单，包括：

显示菜单绑定界面；

基于所述菜单绑定界面配置菜单列表；其中，所述菜单列表包括多个行，每个行存放菜单属性字段：菜单名称、关联类型、关联内容、URL和菜单图标。

4.根据权利要求3所述的方法，其特征在于，所述为所述目标场景设置特性，包括：

显示特性设置界面；

基于所述特性设置界面，设置特性名称、特性类别、场景、参数、所属分层和持有者。

5.根据权利要求1或2或4所述的方法，其特征在于，所述使用向导绘制配置所述目标场景的格式，包括：

选择设置方式为向导绘制；

基于向导流程设置条件区域、主体区域、明细区域、按钮区域和服务属性的格式。

6.根据权利要求5所述的方法，其特征在于，所述在候选的多个场景中选择一个目标场景，包括：

显示场景列表；

基于选择指令在所述场景列表中选择目标场景。

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

基于新增指令，在所述场景列表中新增一个场景。

8.一种构建列表页面的装置，其特征在于，包括：

选择单元，用于在候选的多个场景中选择一个目标场景；

配置单元，用于为所述目标场景配置元数据模型；为所述目标场景绑定菜单；为所述目标场景设置特性；以及利用从格式模板库中选择的列表模板，使用向导绘制配置所述目标场景的格式。

生成单元，用于完成以上配置后，生成所述目标场景对应的列表页面。

9.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1～7任意一项的方法步骤。

10.一种计算机设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1～7任意一项的方法步骤。

Images