Linkage after data filtering

1. Case Background

In project management, customer management and other systems, we only need to link the unfinished or ongoing data, and the common data linkage configuration cannot meet our needs, in this scenario, you can refer to this example to configure data linkage after filtering.

2. Achieve results

💡SelectProject flow chartOnlyProject bottom tableThe project type is the same and the project status is「In progress」的数据联动过来并作为Project flow chartThe drop-down option for the project name.

3. Implementation steps

3.1 create a project bottom table

Path: Enter the created application> upper left corner of the page + sign> create a common form

Create a project bottom table

Component configuration

Project bottom table component configuration

3.2 create a project flow chart

Path: go to the created application> upper left corner of the page + sign> create flow chart (select any form type)

Create a project flow table

3.2.1 component configuration

Project flow table component configuration

3.2.2 project type component configuration associated with other form data

Project Type component configuration

3.2.3 project leader component configuration data linkage

Project leader component configuration

3.3 create data sources and configurations

Project flow table data source configuration

Name: getData

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

Request method: GET

Data Source creation configuration

3.4 JS panel configuration

3.4.1 project type component creation OnChange action

Project Type component create OnChange action

3.4.2 JS panel write the following code into OnChange actions

JS code configuration

Sample code:

const a = {
    "项目底表项目类型唯一标识":this.$("项目流程表项目类型唯一标识").getValue(),
    "项目底表项目状态唯一标识":"进行中"
  }
  const params = {
    formUuid:"项目底表表单ID",
    searchFieldJson:JSON.stringify(a)
  }
  this.dataSourceMap.数据源名称.load(params).then((res) => {
    const arr = [];
    res.data.map((response) => {  
     
      arr.push({
        "value": response.formData.项目底表项目名称组件唯一标识,
        "label": response.formData.项目底表项目名称组件唯一标识
      });  
      
    })
    console.log("arr", arr) 
    this.$("项目流程表项目名称组件唯一标识").set("dataSource",arr)
  })

4. Effect demonstration

Perform the following operations to achieve the following results:

1. Display the completion and ongoing data of the bottom table of the project

2. Select "Type A" for linkage test at the bottom table of the project. Only "Project 1" and "Project 4" in progress will be linked.

3. Select type B because Type B has no data in progress, the project name option has no data.

Effect demonstration