从列表打开表单(对话框)
场景描述
从列表打开表单对话框,实现新增、编辑和查看数据的功能
实现思路
父页面为列表页面,对话框中的页面为表单页面,列表页面中包括多条数据,表单页面中只有一条数据。从列表页面打开对话框(内嵌表单页面)的过程如下:
- 表单页面增加页面参数,用于接收从父页面传过来的参数
- 在父页面打开对话框时,给对话框中的页面传参
对话框中的页面根据收到参数,执行相应的动作
3.1. 参数为新增:页面中的数据集新增数据
3.2. 参数为编辑:页面中的数据集刷新数据
3.3. 参数为查看:页面中的数据集刷新数据,且设置为只读
在对话框中点确定按钮,将对话框中编辑的数据集返回父页面
- 父页面接收到数据后,对列表中的数据进行相应的新增或修改
在列表页面中使用对话框组件,在表单页面中使用页面加载组件实现上面的过程
- 对话框组件实现步骤2和5
- 打开对话框,并给对话框中的页面传参
- 设置数据映射,收到对话框返回的数据进行相应的处理
- 页面加载组件实现步骤1和3
- 自动定义两个页面参数id和action,用于设置数据主键值和动作(新增create、编辑edit、查看view)
- 打开页面时,根据传入的id和action,对数据集新增、刷新和设置只读
- 在表单页面使用确定返回操作,将数据集返回给列表页面,实现步骤4
实现步骤
1 从市场下载页面加载组件
2 表单页面添加页面加载组件
在表单页面中添加页面加载组件,并设置数据集属性
页面加载组件自动添加两个页面参数id和action
3 表单页面返回数据
确定返回操作将一个数据集返回给对话框组件。js中调用代码如下:
this.comp("commonOperation").okclose("mainData");
okclose方法是直接返回一个数据集对象用作对话框设置映射获取数据,如果对话框不设置数据映射,返回也需要加其他的信息,需要如下实现:
I.对话框返回数据用this.navigateBack()
, 要返回的数据需要放到message参数中:
var mainData = this.comp("mainData");
var orderNo = mainData.getValue("orderNo");
var row = mainData.getCurrentRow();//行对象
var dataJson = mainData.toJson();//数据集上所有数据
this.navigateBack({"message":{"orderNo":orderNo,"row":row,"dataJson":dataJson,"detail":"新增数据",action:"create"}});
II.列表页面在对话框组件的接收消息事件中通过message接收返回的数据,需要注意返回的消息中自己加一个标识如此处的action,在接收数据的时候通过这个标识判断执行相关的逻辑
onDialog1Message = ({message}) => {
var data = this.comp("mainData");
var row = message.row;//json串,可以直接.的方式获取字段值
var dataJson = message.dataJson;//json数组,遍历数组获取值
if(message.action == "create"){
data.newData({defaultValues:[{"orderNo":message.orderNo}]});
}
}
4 列表页面添加对话框组件
在列表页面中添加对话框组件,设置页面文件为表单页面。点设置数据映射按钮,如下图所示,添加表单页面和列表页面数据集列的对应关系,选中根据鉴别列新增或修改,并设置主键列为鉴别列,用于接收数据时判断数据是否存在,如果不存在则新增,否则修改对应的数据。
5 新增
调用对话框的打开操作,新增时action传入create,id不用传。
页面加载组件收到action=create时,会执行新增数据。
6 编辑
调用对话框的打开操作,编辑时action传入edit,如果编辑按钮在表格外,表示编辑数据集的当前行数据,id选择数据集的主键列;如果在表格内,表示编辑表格的当前行数据,id选择表格当前行的主键列,参考查看按钮的设置。
页面加载组件收到action=edit时,会设置数据集的主键=id的过滤条件,并执行刷新数据。
7 查看
调用对话框的打开操作,查看时action传入view,查看按钮在表格内,id选择表格当前行的主键列。
页面加载组件收到action=view时,会设置数据集的主键=id的过滤条件,并执行刷新数据,且设置数据集只读为true。