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

场景描述

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

实现思路

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

1. 表单页面增加页面参数，用于接收从父页面传过来的参数
2. 在父页面打开表单页面时，给表单页面传参

3. 表单页面根据收到的参数，执行相应的动作

   3.1. 参数为新增：页面中的数据集新增数据

   3.2. 参数为编辑：页面中的数据集刷新数据

   3.3. 参数为查看：页面中的数据集刷新数据，且设置为只读

4. 关闭表单页面，或切换到父页面后，刷新列表中的数据，用于看到新增或修改的数据

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

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

实现步骤

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

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

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

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

3 新增

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

let onNewBtnClick = (event) => {
    $page.navigateTo({
        "url":"$UI/pcx/pageloader/liucheng_bd",
        "params":{
            "title":"流程表单",
            "action":"create",
            "process": "new_liuchengbd"
        }
    });
}

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

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

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

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

4 编辑

调用 $page.navigateTo 方法打开页面，编辑时action传入edit，如果编辑按钮在表格外，表示编辑数据集的当前行数据，id使用数据集的主键列；如果在表格内，表示编辑表格的当前行数据，id使用表格当前行的主键列，在编辑按钮的点击事件中传参，如下：

如果打开流程页面，需要传流程编码，代码如下：

import TaskUtil from "$UI/comp/wfmui/components/wfmui/js/taskUtil"
let onEditBtnClick = ({rowid}) => (event) => {
    TaskUtil.queryPIByData(rowid).then((ret)=>{
        if(ret.length==0){//未启动
            $page.navigateTo({
                "url":"$UI/pcx/pageloader/liucheng_bd",
                "params":{
                    "id":rowid,
                    "action":"edit"
                }
            });
        }else{//已启动
            $page.hint("流程已启动，不能编辑");
        }
    })
}

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

特别说明

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

5 查看

使用打开页面操作打开，查看时action传入view，查看按钮在表格内，id使用表格当前行的主键列。如果打开流程页面，需要传流程编码，可以用justep.Shell.showPage打开，可以参考编辑按钮的实现。

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

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

打开的表单页面中修改或者新增了数据保存后切换到列表页面要刷新数据才可以显示出新增或修改的数据。

在保存数据时可以通过postMessage向列表页面发消息，然后切换到列表页面时会触发列表页面的接收消息事件，在接收消息事件中调用数据集的刷新即可。

表单页面中postMessage的实现参考如下：

1.定义sendMessage函数调用postMessage

    let sendMessage = (type) => {
        $page.getOpener().postMessage({
            type: type
        });
    }

2.在执行保存的按钮点击事件中调用保存，保存后调用sendMessage

    let onSaveBtnClick = (event) => {
        mainData.saveData().then(() => {
            sendMessage("saveData");
        });
    }

对于流程表单默认直接点流转会启动触发保存，可以在工作流组件的启动成功事件中调用sendMessage

    let onWfmuiStartSuccess = (event) => {
        sendMessage("flowStart");
    }

列表页面的接收消息事件中调用刷新数据，如下图所示