从列表打开表单（门户页）

场景描述

从列表页面打开表单页面，实现新增、编辑和查看数据的功能

实现思路

父页面为列表页面，从父页面打开的页面为表单页面，列表页面中包括多条数据，表单页面中只有一条数据。从列表页面表单页面的过程如下：

1. 表单页面增加页面参数，用于接收从父页面传过来的参数
2. 在父页面打开表单页面时，给表单页面传参
3. 表单页面根据收到的参数，执行相应的动作 3.1. 参数为新增：页面中的数据集新增数据 3.2. 参数为编辑：页面中的数据集刷新数据 3.3. 参数为查看：页面中的数据集刷新数据，且设置为只读
4. 关闭表单页面，或切换到父页面后，刷新列表中的数据，用于看到新增或修改的数据

在表单页面中使用页面加载组件实现步骤1和3

• 自动定义两个页面参数id和action，用于设置数据主键值和动作（新增create、编辑edit、查看view）
• 打开页面时，根据传入的id和action，对数据集新增、刷新和设置只读

实现步骤

1 从市场下载页面加载组件

2 表单页面添加页面加载组件

在表单页面中添加页面加载组件，并设置数据集属性

页面加载组件自动添加两个页面参数id和action

3 新增

调用 justep.Shell.showPage 方法打开页面，新增时action传入create，id不用传。如果打开流程页面，需要传流程编码，代码如下：

onNewBtnClick(event){
    let url = this.getUIUrl("$UI/pcx/pageloader/liucheng_bd.w");
    justep.Shell.showPage({
        url: url,                   //表单页面url
        title: "流程表单",
        action: "create",
        process: "new_liuchengbd"   //流程编码
    })
}

在设计器中打开表单页面，获取页面url

打开流程设计界面，获取流程编码

页面加载组件收到action=create时，会执行新增数据。

传入process参数后，可以使用流程

4 编辑

调用 justep.Shell.showPage 方法打开页面，编辑时action传入edit，如果编辑按钮在表格外，表示编辑数据集的当前行数据，id使用数据集的主键列；如果在表格内，表示编辑表格的当前行数据，id使用表格当前行的主键列，参考查看按钮的代码。如果打开流程页面，需要传流程编码，代码如下：

onEditBtnClick(event){
    let url = this.getUIUrl("$UI/pcx/pageloader/liucheng_bd.w");
    justep.Shell.showPage({
        url: url,
        title: "流程表单",
        id: this.comp("mainData").getCurrentRowID(),//数据集当前行的主键列
        action: "edit",
        process: "new_liuchengbd"
    })
}

页面加载组件收到action=edit时，会设置数据集的主键=id的过滤条件，并执行刷新数据。

特别说明

• 对于流程来说，流程启动后，在不同的环节会由不同的人来处理，其他人不能修改流程数据。因此流程启动前，可以从列表打开表单进行编辑，流程启动后，从列表打开表单不能编辑，只能查看，这种情况需要开发者从代码上进行控制。
• 从列表页面打开流程表单页面后，对于未启动的流程，可以启动流程或启动并流转；对于已经启动的流程，不能执行流转操作。从我的待办打开表单可以进行流转，是因为在打开表单页面时，传入了很多任务相关的参数，即只有在打开表单页面时传入任务相关的参数，才能执行流转等操作。

5 查看

调用 justep.Shell.showPage 方法打开页面，查看时action传入view，查看按钮在表格内，id使用表格当前行的主键列。如果打开流程页面，需要传流程编码，代码如下：

onViewBtnClick(event){
    let url = this.getUIUrl("$UI/pcx/pageloader/liucheng_bd.w");
    justep.Shell.showPage({
        url: url,
        title: "流程表单",
        id: event.context.$item.fid,//表格当前行的主键列
        action: "view",
        process: "new_liuchengbd"
    })
}

页面加载组件收到action=view时，会设置数据集的主键=id的过滤条件，并执行刷新数据，且设置数据集只读为true。

6 切换到列表页面，刷新数据

关闭打开的表单页面，会显示出列表页面，或者直接点列表页面，此时需要刷新数据，以体现出新增或修改的数据。

页面显示时，会触发页面显示事件，在这里刷新数据，如下图所示

从功能树打开页面时，也会触发页面显示事件，如果数据集的自动模式设置为自动加载，再加上页面显示事件中的刷新，会执行两次刷新，这种情况下，应该将数据集的自动模式清空，只执行页面显示事件中的刷新，执行一次刷新。