# 低代码页面建模

# 概述

页面建模模块是一个可视化、拖拽式的用户界面构建器。它让您能够以“搭积木”的方式，快速将前面定义的“元数据”和“查询”组装成功能完备的业务页面，如列表、表单、详情页等。

# 页面建模列表

创建的所有页面建模都显示在此列表中。

# 新增页面建模

登录平台后，选择【应用管理】→选择一个应用→进入应用后，选择【页面动态建模】→【页面建模】之后，首先在release版本类型下新建develop版本,首次新建develop版本无需选择父版本，版本号创建规则是x.x.x,例如：1.0.0.实体版本号必须是实体管理发布后的release版本号，不发布下拉框没有数据无法创建页面建模版本号。版本创建完成后点击【新增模块】,增加一个模块。最后点击新增即可新增一个【页面建模】。

新建版本号：

新建页面建模：

# 修改页面建模

在页面建模管理页面，点击列表中需要修改的页面建模右侧的"修改"按钮，弹出修改窗口，即可对页面建模进行修改。点击保存会保存修改后的数据并关闭弹窗。点击保存并设计，会在保存修改的数据后，自动跳转到该页面建模的设计页面，进行设计。

# 删除页面建模

单个删除：点击需要删除的数据右侧的删除按钮，弹出确认窗口，点击确认按钮后，即可删除。
批量删除：勾选需要删除的数据，点击表格上方的删除按钮，弹出确认窗口，点击确认按钮后，即可删除。

# 设计页面

# 设计器

左侧为控件列表，中间为画布，右侧为配置。中间画布有四个页签，分别为：

设计视图：拖拽左侧控件到右侧设计视图的画布里，进行布局设计。
模型视图：页面中所需要的数据模型，可来源于元数据（实体），也可自定义。通过模型视图可快速定位到模型绑定的控件。
页面代码：页面设计生成的json代码。
事件代码：控件绑定的事件代码。

# 模型

模型定义的是这个页面里所需要的数据。数据来源于实体（元数据）或者为自定义。在设计器左侧点击模型页签，可以查看模型列表，也可以点击中间的模型视图，查看模型详细信息。

模型视图里点击绑定的控件可快速定位到控件里。

# 新增模型

在设计器里点击模型-->新增模型，如下图所示：

实体只能选择当前应用下的实体。可选择多个实体。自定义的模型最多只能建三层。

# 修改模型

实体模型不能修改，自定义模型可以进行修改。

# 删除模型

控件可以绑定模型，属性也可以绑定模型，被绑定的模型不可以被删除。点击设置-->删除，进行模型删除。

# 设置提交类型

表单页面点击保存会将设置了主从子关系的模型数据提交到后端，其他模型数据只在前端页面计算使用，不会提交到后端。这里的主从子关系需要和实体的关联配置保持一致。

# 属性配置

# 页面属性配置

点击画布空白处，可进行页面属性配置。

页面属性配置有两部分：基础配置和默认弹框配置。每个页面都会有一个默认弹框，可以手动调用打开弹框。

属性	配置描述
背景图片	设置页面背景图
图片契合度	设置图片契合度
开启footer	表单页开启footer，自动添加保存和取消按钮

属性	配置描述
弹框uid	弹框的uid
标题	弹框的标题
宽度	弹框的宽度
高度	弹框的高度

# 基础配置

控件标识：控件的唯一标识
权限标识：用于页面元素权限控制的标识key。
初始状态：控件初始时是否禁用、隐藏。

# 值绑定

点击选择，弹出模型选择框。

选择一个模型，为控件绑定此模型。

# 属性

控件是基于HOSUI开发的，控件的各个属性详细介绍请参照HOSUI文档 (opens new window) 属性配置支持搜索：按属性名称或描述进行搜索。

值类型有三种：常量、模型和函数

常量：设置为定值，后续不可进行修改。例如：一个input框，有清空图标，可快速清空。只需配置placeholder值类型为：常量，值为true即可。
模型：绑定模型，可通过其他函数方法修改模型值，从而改变控件的属性值。例如：一个select框和一个input框，当select选择某一项时，input为禁用，选择其他项时，input可输入。操作如下：

1.新建一个自定义模型：input_isDisabled； 2.可将input的disabled属性值类型配置为：模型，选择自定义模型input_isDisabled； 3.配置select的值改变事件：当值为某一项时，input_isDisabled = true。

函数：绑定函数进行处理。

# 校验规则

表单类的控件有校验规则配置。

校验是否必填、配置必填错误信息，校验类型为：正则表达式校验和自定义校验。系统提供了基本的校验规则，可快速配置校验的正则表达式。

# 选项配置

对于单选框组件、复选框组件、下拉选择器组件等带有选项的组件，可以进行选项配置。一共有五种类型：“静态数据”、“数据模型”、“查询管理”、“本地接口”、“字典项”。

静态数据：直接输入选项标签label以及选项值value，适合“性别”、“状态”等固定场景。
数据模型：关联其他数据表的字段，如部门表、人员表等。
查询管理：选择数据来源后,结合模型取值获取选项。
本地接口：配置接口地址、请求方式及取值层级。接口地址默认已添加baseUrl，因此配置时，无需重复添加。取值层级根据返回值的格式、层级决定，如：data.options。
字典项：在弹窗中选择已有的字典项。字典项数据的新增及修改，需要去系统设置--数据字典中进行管理。

# 事件配置

控件是基于HOSUI开发的，控件的各个事件详细介绍请参照HOSUI文档 (opens new window)支持属性的搜索：按事件名称或描述进行搜索。

函数类型分为：函数名和函数内容。

函数名：定义要执行的函数名，在事件代码里配置函数的具体内容。
函数内容：直接定义函数内容。

# 事件参数说明

函数接收三个参数：pageModel、Context、data

pageModel：整个页面上的模型数据。
context：当前控件的实例上下文。
data：事件的参数，详情见各控件事件说明。

# 样式配置

点击选中控件，在右侧选择样式，可进行样式配置。

# 布局

属性	配置描述
宽高（最大、最小）	设置当前组件的尺寸
当内容超出布局宽高	设置滚动条或者隐藏
对齐	设置当前元素的对齐方式
背景	设置当前元素的背景色
外边距	当前元素的外边距配置
内边距	当前元素的内边距配置
定位模式	设置元素的定位模式（静态、绝对、相对、固定）
定位值	设置了元素的定位模式，然后设置的上下左右距离