EOS Low-Code Platform 8 EOS Low-Code Platform 8
产品简介
学习指南
更新说明
安装与集成
初见EOS
低代码开发手册
专业代码开发手册
专题场景实战
公共服务框架
应用运行治理
常见问题
  • 使用弹出窗口进行参数传递
  • 1.场景介绍
  • 2.效果展示
  • 3.实现思路
  • 4.操作步骤
  • 4.1 方案一 通过全局变量实现弹出窗口的参数传递
  • 4.2 方案二 通过外部参数实现弹出窗口的参数传递

# 使用弹出窗口进行参数传递

# 1.场景介绍

以供应商-物料-规格为例,在供应商表单中,打开物料弹窗和物料弹窗中的规格弹窗时,希望可以在弹窗中显示供应商表单中输入的供应商统一社会信用代码。

# 2.效果展示

# 3.实现思路

在这里讲解两种方式去实现这个场景需求:

方案一:通过全局变量实现弹出窗口的参数传递

将一个 参数\变量\字段 设置为全局变量,子组件可通过 this.GlobalVariable.[变量名] 访问

方案二:通过外部参数实现弹出窗口的参数传递

在弹出窗口引用的页面中,显式定义参数来接收数据,多层级嵌套的弹窗,需要依次传递。

# 4.操作步骤

# 4.1 方案一 通过全局变量实现弹出窗口的参数传递

  • 供应商表单

    在供应商表单中,通过表单设置-高级设置-添加全局变量,选择 “供应商统一社会信用代码” (this.formData.code),变量名为 supplier_code

  • 物料表单

  1. 在物料表单中拖入一个单行文本组件,可自定义设置字段标识为supplier_code,标题为供应商统一社会信用代码

  2. 在物料表单中,把全局变量GlobalVariable.supplier_code设置为供应商统一社会信用代码组件的默认值

  • 规格表单

    参考物料表单操作

  1. 在规格表单中拖入一个单行文本组件,可自定义设置字段标识为supplier_code,标题为供应商统一社会信用代码

  2. 在规格表单中,把全局变量GlobalVariable.supplier_code设置为供应商统一社会信用代码组件的默认值

# 4.2 方案二 通过外部参数实现弹出窗口的参数传递

  • 物料表单
  1. 在物料表单中拖入一个单行文本组件,可自定义设置字段标识为supplier_code,标题为供应商统一社会信用代码

  2. 在物料表单中,通过表单设置-高级设置-添加外部参数 formdata_supplier_code,且无需输入默认值

  3. 在物料表单中,将刚添加的外部参数 formdata_supplier_code 设置为物料表单的供应商统一社会信用代码组件的默认值。

  4. 切换到物料默认视图,点击视图设置-动作设置-工具栏-编辑 新增按钮 的配置,在 执行代码 窗口中,获取父表单(供应商表单)的统一社会信用代码赋值给物料表单中定义的外部参数 formdata_supplier_code

    参考代码如下:

    this.Api.openCreate({
      // 物料表单id
      "id": 'lc.DEMO.formeg22.MaterialOutParam',
      // 资源类型
      "resourceType": 'form',
      "dialog": {
        ...this.GlobalPreference.dialogAction,
        // 是否检查变化
        "isCheckChange": 'false',
        "isNoDraggable": 'undefined',
        "title": '新增 物料',
      },
      "props": {
        "globalConfig": {
          "onClose": (data) => {
            //fetch_0
          },
        },
        "status": 'create',
        //添加参数:将父表单(供应商表单)的统一社会信用代码(code) 赋值给 刚在物料表单中定义的 formdata_supplier_code
        "formdata_supplier_code": this.parentFormData.code,
      }
    })
    
  • 规格表单

    操作和物料表单一致,只是规格表单的父表单是物料表单。

  1. 在规格表单中拖入一个单行文本组件,可自定义设置字段标识为supplier_code,标题为供应商统一社会信用代码

  2. 在规格表单中,通过表单设置-高级设置-添加外部参数 formdata_supplier_code,且无需输入默认值

  3. 在规格表单中,将刚添加的外部参数 formdata_supplier_code 设置为规格表单的供应商统一社会信用代码组件的默认值。

  4. 切换到规格默认视图,点击视图设置-动作设置-工具栏-编辑 新增按钮 的配置,在 执行代码 窗口中,获取父表单(物料表单)的供应商统一社会信用代码赋值(this.parentFormData.supplier_code)给规格表单中定义的外部参数 formdata_supplier_code

参考代码如下:

this.Api.openCreate({
 // 规格表单id
 "id": 'lc.DEMO.formeg22.SpecOutParam',
 // 资源类型
 "resourceType": 'form',
 "dialog": {
   ...this.GlobalPreference.dialogAction,
   // 是否检查变化
   "isCheckChange": 'false',
   "isNoDraggable": 'undefined',
   "title": '新增 规格',
 },
 "props": {
   "globalConfig": {
     "onClose": (data) => {
       //fetch_0
     },
   },
   "status": 'create',
   //添加参数:将父表单(物料表单)的供应商统一社会信用代码(supplier_code) 赋值给 刚在规格表单中定义的 formdata_supplier_code
   "formdata_supplier_code": this.parentFormData.supplier_code
 }
})

← 弹窗向父级页面添加所选数据 弹出列表选择数据并回填子表格 →