Mixed use of data filling and data linkage in Subforms

1. Case Background

In many scenarios, we need to associate the form with the content of a single column in The subtable, and then use the content of this column as a condition to link the content of the next column, normal data filling and data linkage cannot be mixed. Currently, the following cases can be implemented.

2. Achieve results

💡Implement the mixed use of data filling and data linkage of associated forms in sub-tables

3. Implementation steps

3.1 create a data fill form

Path: Enter the created application> upper left corner of the page + sign> Create form page

Create a data fill form

Data filling form component configuration

The contents and conditions of the bottom table as data filling

Data filling component configuration

3.2 create a bottom table for data linkage

Bottom table conditions and content as data linkage

Create a bottom table for data linkage

Data Linkage bottom table component configuration

Data Linkage bottom table component configuration

3.3 create a mixed data filling table

Data filling mixed tables

3.3.1 configuration of data filling and linkage mixed table components

Configuration of data filling linkage mixed table components

3.3.2 configuration of associated form components

Configure Data filling to fill the bottom table with Subforms

Associated form component configuration

Associated form component configuration

3.3.3 Single line text 2 data linkage configuration

Configure data linkage so that you can manually select data linkage.

Single-line text 2 data linkage configuration

3.4 Data Source configuration and JS configuration

3.4.1 data source configuration

Name: dp2

Request address:/dingtalk/web/Application unique encoding/v1/form/searchFormDatas.json

Request method: GET

Data source configuration

3.4.1 JS panel configuration

Create an action that changes the value of OnChange

Create a JS action by associating a form

JS panel code configuration

Sample code:

Note: modify the corresponding form id and component unique identifier when copying the code.

  setTimeout(() => {
    let tabValues = this.$('子表单唯一标识').getValue()
    tabValues.map(item => {
      const params = {
        "formUuid": "数据联动底表表单id",
        "searchFieldJson": JSON.stringify({
        "数据联动底表单行文本1111唯一标识": item.单行文本1唯一标识
        })
      }
      this.dataSourceMap.dp2.load(params).then(res => {
        let data = res.data[0] ? res.data[0].formData.数据联动底表单行文本222唯一标识 : ""
        let data1 = res.data[0] ? res.data[0].formData.数据联动底表单行文本1111唯一标识 : ""
        let table = this.$('子表单唯一标识')
        table.getItems().map(list => {
          if (table.getComponent(list, '单行文本1唯一标识').getValue() == data1) {
            table.getComponent(list, "单行文本2唯一标识").setValue(data)
          }
        })
        item.单行文本2唯一标识 = data
      })
    })
  }, 300)

4. Effect demonstration

Effect demonstration

-------------------- Get the latest information YIDA, welcome to follow US--------------------