# 标准页面
标准页面是一种将一个或多个组件拖进画布，进行低代码甚至无代码的配置，即可快速完成业务功能的前端页面，其功能主要是针对业务数据的增、删、改、查，且前端界面的样式相对简单的页面。
标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用。
#### 场景描述
本节以使用智能排班模型BO中班次信息表（ISDP__shiftInfo__CST）开发一个标准页面（班次信息管理页面）为例，描述标准页面的开发过程。
班次信息管理页面，实现班次信息的新增、修改、删除和查询。
页面上默认显示应用中保存的所有班次信息，可以直接新增、修改或者删除班次信息，也可以查询部分班次。
- 单击"新增行"按钮，可以在界面上插入一个空行，输入内容后单击"保存"，即可新插入一条班次记录。
- 直接编辑表格中任意内容，单击"保存"，即可修改任意一条班次记录。
- 选中记录，单击"删除"，即可删除任意一条班次记录。
- 设置查询条件，单击"查询"，可以查询满足条件的班次记录。
图1班次信息管理页面   
![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424346.png "点击放大")
#### 操作步骤
1. 创建标准页面。 
   1. 如[图2]所示，在应用的开发页面，选择存放脚本的目录（前台页面），单击目录对应的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184321.png)，选择"标准页面"。
      图2创建标准页面   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384589.png) 
   
   2. 在弹出的"添加标准页面"页面，如[图3]所示，选择创建一个空白页面，输入"标签"为"班次信息管理"，"名称"为"shiftInfoManagement"，单击"添加"。
      创建完成后，自动进入编辑页面。
      图3添加标准页面   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945218.png "点击放大") 
   
   
   
   
2. 定义对象模型"shiftInfoManagement"。 
   1. 如[图4]所示，在页面下侧，单击"模型视图"，切换到"模型视图"，单击"新增模型"，进入"新增模型"页面。
      图4新增模型   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565024445.png "点击放大") 
   
   2. 如[图5]所示，输入模型名称（如：shiftInfoManagement），选择来源为"对象"，单击"下一步"。
      图5基本信息   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945230.png "点击放大") 
   
   3. 如[图6]所示，选择对象和对象字段，单击"下一步"。
      图6选择对象和字段   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424354.png "点击放大") 
   
   4. 如[图7]所示，方法保持默认，单击"确定"。
      图7方法   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184341.png "点击放大") 
   
   
   
   
3. 绑定模型，设置查询结果区域。 
   1. 如[图8]所示，切换到"设计视图"，将左侧组件区的"表格"拖拽到右侧"设计视图"中。
      图8选择组件   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384585.png "点击放大") 
   
   
   
   2. 如[图9]所示，单击"数据绑定"对应的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514264374.png)，在弹出的"选择模型"页面中选择新增的shiftInfoManagement模型，单击"确定"，为表格绑定对象模型。
      图9数据绑定   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384593.png "点击放大")
      绑定对象模型后，系统自动将模型的所有字段添加为查询结果列，如[图10]所示。
      图10绑定数据模型后的结果列   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424358.png "点击放大") 
   
   3. 对表格中列进行配置。
      - 拖动"已添加列"中列后面的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384577.png)，调整列的显示顺序。
        ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514104790.png)
        
      
      - 单击列后面的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424350.png)，修改列标题等字段属性，字段属性请参见[表1]。
        图11属性配置   
        ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184337.png)
         表1字段属性 
        | **调整后的顺序** | **字段名**                   | **列标题** | **单元格可编辑** | **显示编辑hover** | **组件类型** | **选项**                                                                                                                                                                                                                                             | **弹层独立** |
        |:---|:---|:---|:---|:---|:---|:---|:---|
        | 1          | ISDP__shiftName__CST      | 班次名称    | 是          | 是             | 输入框      | -                                                                                                                                                                                                                                                  | -        |
        | 2          | ISDP__shiftType__CST      | 班次类型    | 是          | 是             | 下拉框      | - 0：分散值班  - 1：连续值班                                                                           | 是        |
        | 3          | ISDP__shiftCategory__CST  | 班系      | 是          | 是             | 下拉框      | - 0：月排班  - 1：周排班  - 2：日排班   | 是        |
        | 4          | ISDP__shiftStartTime__CST | 上班时间    | 是          | 是             | 输入框      | -                                                                                                                                                                                                                                                  | -        |
        | 5          | ISDP__shiftEndTime__CST   | 下班时间    | 是          | 是             | 输入框      | -                                                                                                                                                                                                                                                  | -        |
        | 6          | ISDP2__repeatLaw__CST     | 重复规律    | 是          | 是             | 下拉框      | - 1：按周  - 2：按日                                                                                       | 是        |
        | 7          | ISDP2__workDay__CST       | 日程      | 是          | 是             | 输入框      | -                                                                                                                                                                                                                                                  | -        |
           
        
       
   
   4. 选中"表格"，单击右侧"属性"页签，如[图12]所示，在"扩展属性"中打开可编辑开关。
      图12配置扩展属性   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565264701.png) 
   
   
   
   
4. 设置查询条件区域。 
   如[图13]所示，选中"表格"，单击右侧"属性"页签中"表格区块"中"查询"后的"添加"按钮，在弹出的"添加查询条件"页面中选择查询条件，单击"确定"。
   图13添加查询条件   
   ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945226.png "点击放大")
   添加查询条件后可以看到，系统自动创建了2个基础容器：第1个基础容器中是1行3列的栅格容器，用于放置查询条件；第2个基础容器中放置查询按钮。
   ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384581.png "点击放大")
   
   
5. 设置工具栏区域。 
   1. 如[图14]所示，选中"表格"，单击右侧"属性"页签"表格区块"中"工具栏"后的"添加"按钮。
      图14添加按钮   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184329.png "点击放大") 
   
   2. 如[图15]所示，在按钮上右击，选择"删除"，删除上图工具栏中多余的按钮，只保留"新增行"、"保存"和"删除"。
      图15删除按钮   
      ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424362.png "点击放大") 
   
   
   
   
6. 单击页面上部的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514104810.png)，保存页面配置。
7. 单击页面上部的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184333.png)，预览页面，如[图16]所示。
   
   图16预览页面   
   ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945214.png "点击放大")
   
   
 
#### 调试页面
在预览的页面上验证新增、修改、删除、查询班次信息。
![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945222.png "点击放大")
若有问题，可在预览浏览器页面，按"F12"或者"Ctrl + Shift + I"开启调试工具。在"Console"页签查看日志相关信息，在"Network"页签查看网络请求信息。