页面设计

页面设计器是低代码平台的核心可视化工具，通过拖拽组件、配置属性、绑定数据源来构建页面。

---

页面设计是平台自研的低代码的核心功能之一，提供了功能强大的页面设计器，通过拖拽方式生成业务画面，绑定好接口及参数后即可完成业务功能。JH4J-CODE平台页面设计与常规低代码页面设计不同，它串联了平台的接口管理模块，进一步提升低代码灵活性。目前支持50种业务组件，支持样式自定义编辑、数据编辑、动态渲染、事件监听、实时预览、快速模板、高级属性、大纲树等。页面设计器不限定页面类型，不仅支持表单类的业务画面，也支持门户页等自定义任意样式组合风格的页面。

页面组件

页面组件可以理解为一个Vue组件或者一个Vue文件，它包含：template对应画布区域内容、script对应代码编辑器的组件选项。

通过开发人员预定义的页面组件简化应用程序开发过程，无需拖拽组件编写组件间逻辑，大大减少人力成本。

开发人员开发阶段

开发页面

页面组件创建

页面组件在页面管理－组件列表中创建，如下图所示：

一个标准的组件应该做到：功能职责单一、可复用性高、可维护性高。以表单组件为例，提供新增表单、编辑表单、查询表单功能。对外提供init函数（编辑时父组件调用）、add函数（新增时父组件调用）。当表单组件完成更新操作后，抛送事件给父组件this.$emit('ok'），然后父组件监听子组件的ok事件，完成相应事件处理，如关闭弹窗、刷新列表数据等。

页面组件属性

属性传递是父组件传递给子组件属性的一种方式。

首先需要在子组件上定义组件属性，打开页面管理，点击操作栏更多，点击组件打开组件列表弹框，点击弹框中编辑按钮。

在组件属性区域点击新增，创建一个组件属性，如下图：

在父组件页面设计中，选中子组件，右侧就多出了一个mainId属性配置，将父组件的数据传递给子组件：

页面组件事件

组件事件抛送是子组件向父组件通信的一种方式。

在组件编辑框中组件事件区域中，点击新增事件，如下图所示（注意：事件名要以on开头，平台已经内置了ok和cancel事件，分别表示成功和取消事件）：

然后在设计器中就可以监听子组件的事件了，如下图所示：

子组件抛送事件给父组件，子组件通过this.$emit('事件名'[参数]）方法抛送事件给父组件，如下图注意：事件名要去除on，如：this.$emit('updated')）：

获取组件实例

首先给页面组件设置唯一标识属性。

通过this.$refs.唯一标识获取组件实例。

平台组件

平台组件是组件库中平台提供的组件，包括基本组件和高级组件。将平台组件拖拽到画布区域后，运行后称之为运行时组件实例。PC端平台组件名以Component结尾，如：ButtonComponent；移动端组件以Mobile开头，如MobileButton。组件提供了属性配置、事件监听等可配置功能；通过$refs可以获取组件运行实例，可以调用组件的方法、属性，具体组件有哪些方法和属性，可以点击组件文档查看。

通过提供预定义的组件和可视化操作界面开发应用，降低开发难度，提高开发效率

开发人员开发阶段

提供直观的拖放界面，让开发人员可以像拼图一样将组件组合起来，构建应用界面。

组件库

组件库是平台组件和页面组件的集合，其中，基本组件和高级组件为平台组件，页面组件为自定义组件。

组件说明

在页面设计页面中，分为左、中、右三个区域，左侧区域通过点击组件库图标，可显示所有组件，包括基础组件、高级组件和页面组件。选择需要的组件拖拉到中间区域，实现页面的构建，选中拖过来的组件，右侧区域会出现针对该组件相关的配置，包含属性、样式、事件、高级等配置。

属性：针对不同的组件提供其相应属性的配置，如Iframe组件可配置其链接地址。

样式：支持基础样式修改以及自定义样式修改

事件：配置该组件的相关事件调用，如Iframe可配置点击事件、选择事件等。每个组件可配置的事件不同，系统已经内置好可配置的事件类型。

高级：提供高级配置功能，如是否渲染、是否显示、操作权限、逻辑数据等，通过与高代码集成的方式实现特殊场景下的功能。

基础组件

基础组件包含布局、基础、表格、导航、信息输入、选择器、图表、反馈八种类型。如下图所示：

布局

提供容器布局类型的组件，主要信息和功能如下：

组件名称

功能说明

Iframe

用于在当前网页中嵌入另一个独立的网页。在右侧配置区域的属性中可配置链接地址等信息。

栅格容器

控制整个布局的列，形成一个网格布局。所有的网格项都会放置在这个容器内。在右侧配置区域的属性中可配置列数量及比例等信息。

网格容器

网格容器用于将网页的布局分割成行和列，从而可以方便地安排和控制内部元素的位置和大小。在右侧配置区域的属性中可配置行列数量及比例等信息。

自由布局

没有严格的列和行结构约束，元素可以自由摆放和调整位置的布局方式。

表单容器

用来包含和组织表单元素（如文本框、按钮、复选框等）的元素或区域。在右侧配置区域的属性中可配置基础表单和行内表单两种类型的属性信息。

表单项次

用来包含和组织表单中各个表单控件项（如文本框、单选框、复选框、按钮等）的区域。在右侧配置区域的属性中可配置表单项的标题、尺寸、校验等信息。

折叠面板

用于展示可折叠和展开的内容。通常在一个容器中包含多个面板，每个面板都有一个标题和与之关联的内容，用户点击标题可以展开或折叠面板内容。在右侧配置区域的属性中可配置外观、触发方式、标题、图标等信息。

区域

定义一块展示内容的区域。在右侧配置区域的属性中可配置标题、锚点等信息。

卡片

定义卡片形式的展示区域。在右侧配置区域的属性中可配置宽度、阴影等信息。

选项卡

用于在同一个窗口或界面中切换不同内容。在右侧配置区域的属性中可配置数据绑定、位置、标签项等信息。

行容器

\

列容器

\

行列容器

\

基础

提供基础类型的组件，主要信息和功能如下：

组件名称

功能说明

文本

文本组件。在右侧配置区域的属性中可配置文本格式、内容、字号、字重等信息

按钮

按钮组件。在右侧配置区域的属性中可配置按钮名称、按钮类型、按钮形状、尺寸、图标等信息。通过绑定变量可实现链接按钮、文字按钮、按钮禁用等配置。

按钮组

按钮组组件，内部包含多个按钮。在右侧配置区域的属性中可配置按钮类型、形状、按钮项信息。

链接

链接组件。在右侧配置区域的属性中可配置链接显示名称、链接类型、图标、字体、字重、下划线、链接地址、打开方式等信息。

分割线

分割线组件。在右侧配置区域的属性中可配置分割线是否显示内容、内容明细、内容位置、线条样式、线条方向、线条长度等信息。

标签

标签组件。在右侧配置区域的属性中可配置标签样式、尺寸、标签项信息。

徽标

徽标组件。在右侧配置区域的属性中可配置徽标样式、徽标类型、显示值、最大值信息。

头像

头像组件。在右侧配置区域的属性中可配置头像形状、尺寸、展示类型、地址、适应类型信息。

图标

图标组件。在右侧配置区域的属性中可配置图标的显示信息及样式信息。

图片

图片组件。在右侧配置区域的属性中可配置图片的类型、源地址、尺寸等信息。

轮播图

轮播图组件。在右侧配置区域的属性中可配置轮播图的展示类型、轮播配置信息。

视频

视频组件。在右侧配置区域的属性中可配置视频的基本信息及视频控制信息。

音频

音频组件。在右侧配置区域的属性中可配置音频的基本信息。

表格

提供表格类型的组件，主要信息和功能如下：

组件名称

功能说明

表格

普通表格组件。在右侧配置区域的属性中可通过快速配置绑定数据源中配置好的接口，也可以在数据配置项中手动配置静态数据。数据配置完成后在表格列配置中配置显示的表格列。

查询表格

查询表格组件，由表格组件和按钮组件联合构成。

数据表格

数据表格组件。在右侧配置区域的属性中有基本属性和数据配置两个配置项，基本属性配置数据表格的一些基本信息，如表格类型、样式、操作等。数据配置可配置数据表格的数据来源，分接口数据和静态数据，获取数据后可对列字段、列冻结、列样式等进行设置。

导航

提供导航类型的组件，主要信息和功能如下：

组件名称

功能说明

锚点导航

同一页面内快速跳转到特定的内容或位置。锚点导航通过设置页面内的锚点链接，使得点击导航链接时，页面能够平滑地滚动到目标位置。在右侧配置区域的属性中可设置锚点位置、锚点类型等信息。

面包屑

帮助用户了解自己当前所在的页面位置，并能够轻松地返回到上级页面。在右侧配置区域的属性中可设置分隔类型、文本内容、前置图标、标签项等信息。

下拉菜单

点击或悬停在一个按钮或菜单项上，以显示下拉选项。在右侧配置区域的属性中可设置展示类型、文本内容、触发方式、选项等信息。

分页器

帮助用户快速浏览多个页面而不必加载所有内容。分页器通常包含页码、上一页、下一页和首页/尾页等按钮，便于用户在不同页面间跳转。在右侧配置区域的属性中可设置总数、页码、每页数量等信息。

步骤条

在多步骤的流程中用于引导用户了解当前流程的进度。在右侧配置区域的属性中可设置步骤条样式、状态、步骤条明细等信息。

信息输入

提供信息输入类型的组件，主要信息和功能如下：

组件名称

功能说明

单行输入框

单行输入框组件。在右侧配置区域的属性中有基本属性和表单校验两个配置。基本属性可配置输入框的样式及显示信息。表单校验配置提供必填校验、长度校验、正则校验、自定义校验的配置。

多行输入框

多行输入框组件。配置功能同单行输入框

数字输入框

数字输入框组件。输入内容为数字，提供数字相关校验配置。配置功能同单行输入框。

单选框组

允许用户在多个选项中选择一个。单选框是一种互斥的控件，即一旦用户选择了某个选项，其他选项将自动取消选择。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置样式及显示信息，数据配置可配置数据类型、数据来源及选项。表单校验同单行输入框。

复选框组

允许用户从多个选项中选择一个或多个选项。与单选框不同，复选框是非互斥的，因此用户可以选择任意数量的选项，甚至是全部或没有选项。配置功能同单选框组件

复选框

允许用户从一组选项中选择一个或多个项。每个复选框都有一个标记，用户点击它时可以选择或取消选择。配置功能同复选框组件

分段控制器

用于在多个选项或部分之间进行切换。在右侧配置区域的属性中可配置展示类型、数据绑定、样式等信息。

开关

开关组件。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置样式及显示信息，数据配置可配置数据类型、开启关闭值。表单校验同单行输入框。

滑块

滑块组件。在右侧配置区域的属性中有基本属性和表单校验两个配置。基本属性可配置输入框的样式及显示信息。表单校验同单行输入框。

评分

评分组件。在右侧配置区域的属性中有基本属性和表单校验两个配置。基本属性可配置输入框的样式及显示信息。表单校验同单行输入框。

文件上传

文件上传组件。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置样式及文件上传限制及操作信息，数据配置可配置业务、接口等信息。表单校验同单行输入框。

选择器

提供选择器类型的组件，主要信息和功能如下：

组件名称

功能说明

用户挑选框

从一系列系统用户选项中进行选择。在右侧配置区域的属性中有基本属性、表单校验两个配置。基本属性可配置显示及样式信息，表单校验配置提供必填校验、长度校验、正则校验、自定义校验的配置。

部门挑选框

从一系列系统部门选项中进行选择。配置情况同用户挑选框

树形挑选框

允许用户在层级结构中选择一个或多个选项。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置基础显示及样式信息。数据配置可配置挑选框的查询接口、数据与值属性等信息。表单校验配置同用户挑选框

挑选框

基础挑选框组件，允许用户从一个或多个选项中进行选择。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置基础显示及样式信息。数据配置可配置挑选框的查询接口或来源模型，显示列等信息。表单校验配置同用户挑选框

下拉选择框

允许用户从一个预设的列表中选择一个选项。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置基础显示、样式、交互等信息。数据配置可配置选择框的数据类型、数据来源、数据项等信息。表单校验配置同用户挑选框

级联选择

一组下拉框之间有层级关系，选中一个下拉框的选项后，会影响其他下拉框的选项。在右侧配置区域的属性中有基本属性、数据配置、表单校验三个配置。基本属性可配置基础显示、样式、交互等信息。数据配置可配置组件的数据源等信息。表单校验配置同用户挑选框

树形视图

一种以层次结构展示数据的方式。在右侧配置区域的属性中有基本属性、数据配置两个配置。基本属性可配置基础显示、样式、交互等信息。数据配置提供静态数据、接口数据、懒加载配置功能。

穿梭框

用于在两个列表之间进行项目的移动。在右侧配置区域的属性中可设置数据源、样式、交互等信息。

日期选择

提供对日期的选择。在右侧配置区域的属性中有基本属性和表单校验两个配置。基本属性可配置显示、样式、交互等信息。数据校验同用户挑选框。

时间选择

提供对时间的选择。配置信息同日期选择。

日期时间

提供对日期时间的选择。配置信息同日期选择。

日期范围

提供对日期范围的选择。配置信息同日期选择。

时间范围

提供对时间范围的选择。配置信息同日期选择。

图表

提供图表类型的组件，主要信息和功能如下：

组件名称

功能说明

饼图

用于显示数据中各部分相对于整体的比例。在右侧配置区域的属性中有基本属性、更多配置、数据项三个配置。基本属性可配置组件的基本显示与交互信息。更多配置提供更详细的样式配置，如配色、布局等。数据项提供模型数据绑定的配置。

柱状图

用于比较不同类别的数据。配置信息同饼图。

折线图

展示数据随时间变化的趋势或数值的变化。配置信息同饼图。

散点图

通过在平面坐标系中绘制数据点，帮助我们识别数据之间是否存在某种模式、趋势或相关性。配置信息同饼图。

字符云

通过视觉化的方式展示文本数据的图表。在右侧配置区域的属性中有基本属性、更多配置、数据项三个配置。基本属性可配置组件的基本显示与交互信息。更多配置组件边距、文本、提示框等配置。数据项提供模型数据绑定的配置。

横向柱形图

用于显示不同类别的数据，通过水平条形的长度来表示值的大小。配置信息同饼图。

反馈

提供反馈类型的组件，主要信息和功能如下：

组件名称

功能说明

弹窗

用于在当前页面上展示一层额外的内容，通常用于显示重要信息、提示、确认、表单等。在右侧配置区域的属性中可配置弹窗标题、样式、交互等信息

抽屉

是一种滑动面板，通常从页面的边缘滑出，展示更多的内容或功能。配置信息同弹窗组件。

气泡提示

用于在用户悬停、点击或其他交互时，提供简短的、上下文相关的提示或信息。在右侧配置区域的属性中可配置主题、样式、弹出方式、触发方式、显示控制等属性。

进度条

用于显示任务的完成情况或当前进度。在右侧配置区域的属性中可配置形状、内容位置、当前进度、动画效果等属性。

高级组件

组件包含年度排班、月度排班、流程详情、流程处置。如下图所示：

页面组件

同3.6.1章节

获取平台组件实例

在高级配置面板中设置组件唯一标识，如表格组件，注意组件唯一标识在当前设计器中要保证唯一：

然后通过this.$refs.table获取组件实例。

查看组件文档

选中组件后，点击组件文档图标，进入组件文档：

查看可访问的组件方法和属性：

调用组件方法、属性

调用组件方法：this.$refs.table.getSelectedRows();

读取组件属性：this.$refs.table.currentRow;

大纲树

页面是由一个个嵌套的组件组成的，大纲树描述了组件的嵌套层次。

大纲树的主要目的是为平台中的各种功能、组件和资源提供一个清晰的层级结构，帮助用户理解和使用平台

开发人员开发阶段

清晰的功能组织结构和快速导航可以显著提升用户的使用体验，降低用户的认知负担。

嵌套层次

调整组件顺序、结构

同级移动，如将申请人向后移动（快捷键：Alt +右箭头：右移。Alt +左箭头：左移）。

任意层级移动。

组件变量

组件变量是组件定义的可以提供给组件内拖拽的平台组件使用的变量，等同于Vue中data或setup定义的变量，可以通过this.访问到。组件变量分为：接口变量、自定义变量、组件数据、组件属性、上下文变量。

通过组件变量，可以实现用户界面元素的动态更新，响应用户操作或外部数据变化。

开发人员开发阶段

组件变量减少了数据管理和传递的复杂性，使开发人员可以更快地构建和迭代应用程序。

数据源

页面中和后台通信的接口统一在数据源面板中维护，数据源包含一个或多个动作分组，一个动作分组包含一个或多个接口。

数据源为应用程序提供了一个中心化的存储位置，用于持久化用户数据、配置信息、业务数据等。

开发人员开发阶段

提供数据持久化的能力，如数据库、文件系统、云存储等。

基本功能

该组件中包含两个动作：view和remove，分别表示查看和删除动作，当该组件被挂载到页面后，会自动生成对应的菜单动作。

接口

当接口被添加到动作分组后，会在当前页面组件实例中（都可以通过this.访问到）生成接口的参数、出参变量，如：

接口调用函数

调用方法：

接口清空入参、出参函数

平台组件的属性配置均可直接绑定接口生成的变量上。

创建动作分组

点击新增动作，输入动作名称和描述：

新增接口

删除接口

点击删除接口后的删除按钮完成删除动作，删除后，接口生成的接口变量、接口函数都会被删除。

更新接口

点击同步按钮图标，可以更新接口的入参和出参结构。

画布

画布区域为当前设计页面的预览区域，可在画布区域中选择组件、复制组件、删除组件。

提供一个可视化的设计环境，允许开发人员或设计师通过拖放组件来布局和设计应用界面。

开发人员开发阶段

提供网格、对齐和分布工具，帮助用户精确地布局组件。

属性配置面板

属性配置面板用于配置组件的基本属性、样式、事件处理、高级属性等。

基本属性面板

基本属性面板为组件特有属性，该面板中的每个属性可能是文本配置、选项配置、下拉选项配置、数字配置、是否配置、颜色配置等，如果属性后面存在</〉按钮，则可以使用表达式对该属性进行动态配置。

样式配置面板

样式面板是给组件配置class类属性和style样式的。在类样式面板中，可以选择系统内置的类样式使用，如：ml-2表示左边距长度为2，内置类库可以满足大部分样式需求，类库文档请查看：https://www.tailwindcss.cn/。style属性用于编辑当前组件的内联样式。下面的布局、文本、背景、位置、边框为常用样式可视化配置。

事件处理面板

事件处理面板用来配置组件的事件处理函数，如：按钮的点击事件。

高级面板

是否显示

当绑定的表达式为false时，该组件会渲染，但不会显示。

是否渲染

当绑定的表达式为false时，该组件不会渲染，不会显示。

唯一标识

通过组件唯一标识能够获取组件运行实例，从而调用组件提供的函数、属性、选项函数等。

迭代器

当组件展示的个数不确定，通常由后台的数据决定渲染个数，这时可以用迭代器完成渲染。迭代器需要绑定一个数组，一般绑定一个后台返回的数组数据。

组件权限

在一个页面中，经常需要给按钮进行授权，一部分角色可以操作这个按钮。因此新增了按钮操作权限。

页面内操作权限即为数据源的动作权限分组，在高级面板中，配置操作权限后，如：给按钮设置了查看权限，则只有拥有查看权限的角色可以看到该按钮。

逻辑数据

给组件设置逻辑数据，以快速配置组件属性，具体应用需要看组件使用场景。

组件模板

当一个组件的配置项比较多、但是有可能会重复配置，如挑选框组件，为了减少重复配置，可以将已经配置好的组件保存成组件模板，那么在下次使用该组件时，不需要重复配置，只需点击使用该模板即可快速完成组件配置。

顶部导航栏

撤销、恢复

对操作进行撤销、恢复。

矫正

对当前选中组件的框选边框进行矫正。

快捷键

打开快捷键文档弹框。

打印组件

用于打印组件的schema描述。