标准页面

场景描述

本节以使用智能排班模型BO中班次信息表（ISDP__shiftInfo__CST）开发一个标准页面（班次信息管理页面）为例，描述标准页面的开发过程。

班次信息管理页面，实现班次信息的新增、修改、删除和查询。

页面上默认显示应用中保存的所有班次信息，可以直接新增、修改或者删除班次信息，也可以查询部分班次。

操作步骤

1. 创建标准页面。
   1. 如图2所示，在应用的开发页面，选择存放脚本的目录（前台页面），单击目录对应的，选择“标准页面”。
      图2 创建标准页面
      
   2. 在弹出的“添加标准页面”页面，如图3所示，选择创建一个空白页面，输入“标签”为“班次信息管理”，“名称”为“shiftInfoManagement”，单击“添加”。
      创建完成后，自动进入编辑页面。

      图3 添加标准页面
      

2. 定义对象模型“shiftInfoManagement”。
   1. 如图4所示，在页面下侧，单击“模型视图”，切换到“模型视图”，单击“新增模型”，进入“新增模型”页面。
      图4 新增模型
      
   2. 如图5所示，输入模型名称（如：shiftInfoManagement），选择来源为“对象”，单击“下一步”。
      图5 基本信息
      
   3. 如图6所示，选择对象和对象字段，单击“下一步”。
      图6 选择对象和字段
      
   4. 如图7所示，方法保持默认，单击“确定”。
      图7 方法
      

3. 绑定模型，设置查询结果区域。
   1. 如图8所示，切换到“设计视图”，将左侧组件区的“表格”拖拽到右侧“设计视图”中。
      图8 选择组件
      
   2. 如图9所示，单击“数据绑定”对应的，在弹出的“选择模型”页面中选择新增的shiftInfoManagement模型，单击“确定”，为表格绑定对象模型。
      图9 数据绑定
      

      绑定对象模型后，系统自动将模型的所有字段添加为查询结果列，如图10所示。

      图10 绑定数据模型后的结果列
      
   3. 对表格中列进行配置。
      • 拖动“已添加列”中列后面的，调整列的显示顺序。

        

      • 单击列后面的，修改列标题等字段属性，字段属性请参见表1。
        图11 属性配置
        

        表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 配置扩展属性
      

4. 设置查询条件区域。
   如图13所示，选中“表格”，单击右侧“属性”页签中“表格区块”中“查询”后的“添加”按钮，在弹出的“添加查询条件”页面中选择查询条件，单击“确定”。

   图13 添加查询条件
   

   添加查询条件后可以看到，系统自动创建了2个基础容器：第1个基础容器中是1行3列的栅格容器，用于放置查询条件；第2个基础容器中放置查询按钮。

   

5. 设置工具栏区域。
   1. 如图14所示，选中“表格”，单击右侧“属性”页签“表格区块”中“工具栏”后的“添加”按钮。
      图14 添加按钮
      
   2. 如图15所示，在按钮上右击，选择“删除”，删除上图工具栏中多余的按钮，只保留“新增行”、“保存”和“删除”。
      图15 删除按钮
      

6. 单击页面上部的，保存页面配置。
7. 单击页面上部的，预览页面，如图16所示。
   图16 预览页面
   

调试页面

在预览的页面上验证新增、修改、删除、查询班次信息。

若有问题，可在预览浏览器页面，按“F12”或者“Ctrl + Shift + I”开启调试工具。在“Console”页签查看日志相关信息，在“Network”页签查看网络请求信息。