从列表打开表单（门户页）
场景描述
从列表页面打开表单页面，实现新增、编辑和查看数据的功能
实现思路
父页面为列表页面，从父页面打开的页面为表单页面，列表页面中包括多条数据，表单页面中只有一条数据。从列表页面表单页面的过程如下：
- 表单页面增加页面参数，用于接收从父页面传过来的参数
- 在父页面打开表单页面时，给表单页面传参
表单页面根据收到的参数，执行相应的动作
3.1. 参数为新增：页面中的数据集新增数据
3.2. 参数为编辑：页面中的数据集刷新数据
3.3. 参数为查看：页面中的数据集刷新数据，且设置为只读
关闭表单页面，或切换到父页面后，刷新列表中的数据，用于看到新增或修改的数据
在表单页面中使用页面加载组件实现步骤1和3
- 自动定义两个页面参数id和action，用于设置数据主键值和动作（新增create、编辑edit、查看view）
- 打开页面时，根据传入的id和action，对数据集新增、刷新和设置只读
实现步骤
1 从市场下载页面加载组件
2 表单页面添加页面加载组件
在表单页面中添加页面加载组件，并设置数据集属性
页面加载组件自动添加两个页面参数id和action
3 新增
调用 this.navigateTo 方法打开页面，新增时action传入create，id不用传。代码如下：
onNewBtnClick(event){
this.navigateTo({
url: "$UI/pcx/pageloader/liucheng_lb_detail.w", //表单页面url
params:{
title: "流程表单",
action: "create"
}
})
}
在设计器中打开表单页面，获取页面url
还可以通过操作的方式打开。如下：
页面加载组件收到action=create时，会执行新增数据。
打开的是流程表单页面可以使用流程
4 编辑
打开页面用this.navigateTo方法打开，同样也可以用操作打开。
如果使用操作打开编辑按钮在表格外，表示编辑数据集的当前行数据，id使用数据集的主键列；如果在表格内，表示编辑表格的当前行数据，id使用表格当前行的主键列，参考查看按钮的设置。
如果使用写代码调用jsAPI打开，编辑按钮在表格外直接在js中获取数据集的当前行id给id传参；如果在表格内需要在按钮点击事件中开启扩展参数传参。
编辑时时action传入view
如下按钮在表格内通过this.navigateTo方法打开：
1.点击事件中的设置
2.代码中的实现，流程页面可以判断如果已经启动不允许编辑：
添加引用
import TaskUtil from "$UI/comp/wfmui/components/wfmui/js/taskUtil"
按钮点击代码
onEditBtnClick = ({rowid}) => (event) => {
TaskUtil.queryPIByData(rowid).then((ret)=>{
if(ret.length==0){//未启动
this.navigateTo({
"url":"$UI/pcx/pageloader/liucheng_lb_detail",
"params":{
"id":rowid,
"action":"edit"
}
});
}else{//已启动
this.hint("流程已启动，不能编辑");
}
})
}
页面加载组件收到action=edit时，会设置数据集的主键=id的过滤条件，并执行刷新数据。
特别说明
- 对于流程来说，流程启动后，在不同的环节会由不同的人来处理，其他人不能修改流程数据。因此流程启动前，可以从列表打开表单进行编辑，流程启动后，从列表打开表单不能编辑，只能查看，这种情况需要开发者从代码上进行控制。
- 从列表页面打开流程表单页面后，对于未启动的流程，可以启动流程或启动并流转；对于已经启动的流程，不能执行流转操作。从我的待办打开表单可以进行流转，是因为在打开表单页面时，传入了很多任务相关的参数，即只有在打开表单页面时传入任务相关的参数，才能执行流转等操作。
5 查看
查看时action传入view，查看按钮在表格内，id使用表格当前行的主键列。如下：
页面加载组件收到action=view时，会设置数据集的主键=id的过滤条件，并执行刷新数据，且设置数据集只读为true。
6 切换到列表页面，刷新数据
打开的表单页面中修改或者新增了数据保存后切换到列表页面要刷新数据才可以显示出新增或修改的数据。
在保存数据时可以通过postMessage向列表页面发消息，然后切换到列表页面时会触发列表页面的接收消息事件，在接收消息事件中调用数据集的刷新即可。
表单页面中postMessage的实现参考如下：
1.定义sendMessage函数调用postMessage
sendMessage = (type) => {
this.getOpener().postMessage({
type: type
});
}
2.在执行保存的按钮点击事件中调用保存，保存后调用sendMessage
onSaveBtnClick = (event) => {
this.comp("mainData").saveData().then(()=>{
this.sendMessage("saveData");
})
}
对于流程表单默认直接点流转会启动触发保存，可以在工作流组件的启动成功事件中调用sendMessage
onWfmuiStartSuccess = (event) => {
this.sendMessage("flowStart");
}
列表页面的接收消息事件中调用刷新数据，如下图所示
