宜搭关联表单填充关联表单及二级数据筛选

思路

1. 关联表单填充关联表单主要是通过在关联表单的onchange函数里通过接口查询所选的数据填充到当前表单
2. 二级数据筛选，多一个下拉单选作为中间组件，在关联表单的onchange函数里搜索符合条件的数据，然后赋值数据给下拉单选，在下拉单选的onchange函数里对另外一个关联表单赋值。

演示场景

一个项目会签多个合同，这里演示：

1. 选择某个合同，把合同里关联的项目填充到当前表单的关联表单组件
2. 选择项目后筛选出项目所签的合同

表单结构

1. 项目(FORM-Y1666L71AA0WEJ5409PDPA9JYK032TZEYF4XKL)
   1. 项目名称：单行文本(textField_kx4fylgi)
2. 合同(FORM-5L666481WK1WCR6D2USPCB6B3RZ12NHBZF4XKK)
   1. 合同名称：单行文本(textField_kx4fzh5f)
   2. 所属项目：关联表单(associationFormField_kx4fzh5g)
   3. 所属项目名称：单行文本(textField_kx4lrrkd)

      教程

      关联表单填充关联表单

      组件：

• 合同：关联表单
• 所属项目：关联表单(associationFormField_kx4g30y8)

数据源里新建远程API

• 名称：ht 可自定义
• 自动加载：关闭
• 请求地址：/alibaba/web/你的APPID/v1/form/getFormDataById.json 流程表单不是这个地址,参考https://www.yuque.com/yida/support/aql605
• 其他保持默认

在合同组件 新建onchange函数，参考如下代码

export function onChange({ value }) {
  // console.log(value)
  // 选择了值
  if (value.length == 1) {
    // 生成请求参数
    const params = {
      formInstId: value[0].instanceId
    }
    // 请求所选数据
    this.dataSourceMap['ht'].load(params).then(res => {
      // console.log(res)
      // console.log(JSON.parse(JSON.parse(res.formData.associationFormField_kx4fzh5g_id)))
      // 给关联表单赋值
      this.$("associationFormField_kx4g30y8").setValue(JSON.parse(JSON.parse(res.formData.associationFormField_kx4fzh5g_id)))
    })
  }
  // 清除了选择,重置组件值
  else { this.$("associationFormField_kx4g30y8").reset() }
}

数据筛选

组件：

• 项目名称：关联表单
• 合同名称：下拉单选
• 关联合同名称：关联表单

数据源里新建远程API

1. 根据项目名搜索合同名
   1. 名称：ht 可自定义
   2. 自动加载：关闭
   3. 请求地址：/alibaba/web/你的APPID/v1/form/searchFormDatas.json 流程表单不是这个地址,参考https://www.yuque.com/yida/support/aql605
   4. 其他保持默认

在项目名称 新建onchange函数，参考如下代码

export function onChange({ value }) {
  // console.log('onChange', value);
  // 选择了项目名称
  if (value.length == 1) {
    const params = {
      formUuid: 'FORM-5L666481WK1WCR6D2USPCB6B3RZ12NHBZF4XKK',
      searchFieldJson: JSON.stringify({ textField_kx4lrrkd: value[0].title })
    }
    this.dataSourceMap['ht'].load(params).then(res => {
      // console.log(res)
      const newArr = []
      res.data.forEach(item => {
        // console.log(item)
        newArr.push({
          text: item.formData.textField_kx4fzh5f,
          value: item.formData.textField_kx4fzh5f
        })
      })
      // console.log(newArr)
      this.$("selectField_kx4hfh62").set('dataSource', newArr)
      this.$("selectField_kx4hfh62").reset()
      this.$("selectField_kx4hfh62").setBehavior('NORMAL')
    })
  }
  // 清除了项目名称
  else {
    this.$("selectField_kx4hfh62").reset()
    this.$("selectField_kx4hfh62").setBehavior('READONLY')
  }
}

在合同名称 新建onchange2函数，参考如下代码

export function onChange2({ value, actionType, item }) {
  console.log('onChange', value);
  if (actionType == 'itemClick' || actionType == 'change') {
    // 选择某个选项
    for (const item of this.state.htFromXm.data) {
      if (item.formData.textField_kx4fzh5f == value) {
        const data = [{
          "appType": "APP_GG4USNCHR387FQKSY3RW",
          "formUuid": item.formUuid,
          "formType": "receipt",
          "instanceId": item.formInstId,
          "title": item.title,
          "subTitle": ""
        }]
        this.$('associationFormField_kx4hfh63').setValue(data)
        break
      }
    }
  } else if (actionType == 'clear' || actionType == 'setValue') {
    this.$('associationFormField_kx4hfh63').reset()
  }
}

效果