弹窗

1. 功能简介

快速引用数据时需要的容器组件，配合事件属性代码实现功能。

2. 应用场景示例

弹窗一般用于，表单对整体记录多个字段的选择（如：选择客户信息，需要选中客户编号，客户名称，联系人），或者子表单选择多条记录
下面以子表单选择多条记录为例

3. 效果展示

4. 常用自定义设置

  • 弹窗宽度：设置弹窗宽度。
  • 弹窗表单只读：禁用弹窗表单编辑功能。
  • 事件属性：详见下方操作流程。

表单添加弹出窗口组件

弹出窗口，在表单渲染阶段默认不显示，需要调用showDialog方法才能显示。 弹窗

在弹出窗口中设置弹出内容

  • 1.添加数据表格 弹窗
  • 2.表格列设置 弹窗
  • 3.指定数据源 弹窗

在子表单输入框添加弹窗事件

  • 点击输入框，组件设置，高级设置，打开添加后置按钮，添加onAppendButtonClick事件
let form = this.getFormRef();
form.showDialog('xz')
let Dsv = this.getGlobalDsv()
//记录所在行rowId，用于数据回填
Dsv['xsddRowId'] = this.subFormRowId

弹窗 弹窗 弹窗

添加弹出窗口的onOkButtonClick事件

主表单弹窗事件代码如下（请仔细检查所有字段是否准确替换）：

//获取数据表格
let dataTable = this.getWidgetRef("datatable35195")
//获取数据表格选中行
let data = dataTable.getSelectedRow();
let form = this.getFormRef();
form.getParentFormRef().getWidgetRef('gysmc').setValue(data[0].num)
form.getParentFormRef().getWidgetRef('khh').setValue(data[0].khmc)
form.getParentFormRef().getWidgetRef('yhzh').setValue(data[0].khbm)
//console.log(form)

明细子表单弹窗事件代码如下（请仔细检查字段是否准确替换）：

let form = this.getFormRef();
//获取数据表格
let dataTable = this.getWidgetRef("datatable65537")
//获取数据表格选中行
let data = dataTable.getSelectedRow();

let Dsv = form.getGlobalDsv()
//取出当前行rowID
let rowId = Dsv['xsddRowId']
//对数据进行赋值
form.getParentFormRef().getWidgetRef('wlbm' + '@row' + rowId).setValue(data[0].wlbm)
form.getParentFormRef().getWidgetRef('wlmc' + '@row' + rowId).setValue(data[0].wlmc)
form.getParentFormRef().getWidgetRef('ggxh' + '@row' + rowId).setValue(data[0].ggxh)
form.getParentFormRef().getWidgetRef('dw' + '@row' + rowId).setValue(data[0].dw)
//如果选择多条数据，先添加新的空白行，然后再赋值
let xsddmx = form.getParentFormRef().getWidgetRef("#Relate_xsddmx");
for(let i=1 ;i<data.length;i++){
  xsddmx.addSubFormRow()
  let rowIdData = xsddmx.getRowIdData()
  let newRowId = rowIdData[xsddmx.getSubFormRowCount()-1]
  this.$nextTick(() => {
    form.getParentFormRef().getWidgetRef('wlbm' + '@row' + newRowId).setValue(data[i].wlbm)
    form.getParentFormRef().getWidgetRef('wlmc' + '@row' + newRowId).setValue(data[i].wlmc)
    form.getParentFormRef().getWidgetRef('ggxh' + '@row' + newRowId).setValue(data[i].ggxh)
    form.getParentFormRef().getWidgetRef('dw' + '@row' + newRowId).setValue(data[i].dw)
  })
}

弹窗 弹窗

常用api：getFormRef() 获取当前组件

            getParentFormRef()           获取父级的组件

            getFormData()                    获取表单数据

            getTableData()                    获取表格数据

            getWidgetRef(‘组件名’)       获取指定的组件

            resetField()                         组件清空

组合使用：

（1）this.getParentFormRef().widgetRefList[·组件名·].getTableData() //弹框中获取外部table的数据

（2）this.getParentFormRef().widgetRefList[·组件名·].setTableData() //弹框中设置外部table的数据

（3）this.getFormRef().getFormData(false) //获取当前弹框的表单数据 注意：(needValidation = true)，获取表单数据时是否开启表单校验，默认开启。开启表单校验，返回的是一个Promise对象，否则返回数据对象。 （4）this.getFormRef().getWidgetRef('组件名') //点击获取指定组件

（5）this.getFormRef().getWidgetRef(''组件名').resetField() //重置按钮 清空指定组件的值

数据表格
基础组件