从列表打开表单(对话框)

场景描述

从列表打开表单对话框,实现新增、编辑和查看数据的功能

实现思路

父页面为列表页面,对话框中的页面为表单页面,列表页面中包括多条数据,表单页面中只有一条数据。从列表页面打开对话框(内嵌表单页面)的过程如下:

  1. 表单页面增加页面参数,用于接收从父页面传过来的参数
  2. 在父页面打开对话框时,给对话框中的页面传参
  3. 对话框中的页面根据收到参数,执行相应的动作

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

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

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

  4. 在对话框中点确定按钮,将对话框中编辑的数据集返回父页面

  5. 父页面接收到数据后,对列表中的数据进行相应的新增或修改

在列表页面中使用对话框组件,在表单页面中使用页面加载组件实现上面的过程

  • 对话框组件实现步骤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。

results matching ""

    No results matching ""

    results matching ""

      No results matching ""