In the form, the main table data obtained through the data source is displayed in the sub-table.

This case is from Jing, a three-party developer 」

JS 动作面板 - 前端代码开放 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。JS 面板注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1. Usage scenarios

This case can be used when we need to get the main table data to fill in the subform.

2. Implement functions

2.1. Configure student information table

2.2. Configuration Table sheet page

2.3. Add a remote data source to the data source

Reference documents:Search form instance details by criteria

Data source address:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

The interface configuration is as follows:

2.4. Configure the drop-down radio component

2.5. Configure drop-down radio component events

Note that the unique identifier of the component is modified according to the actual situation. Due to the limitation of interface performance, this example supports up to 100 instances in a single query.

export function onClassChange({ value, actionType, item }) {
  if (value) {
    const loading = this.utils.toast({
      title: '数据获取中...',
      type: 'loading'
    });
    this.dataSourceMap.getData.load({
      formUuid: 'FORM-4G8667A15KZAZ18LC189F769PN0R2IOTMNZHLG1',
      searchFieldJson: JSON.stringify({
        textField_lbfwjvxw: value
      }),
      pageSize: 100
    }).then(res => {
      loading();
      const { data = [] } = res;
      const tableData = data.map(item => {
        const { formData } = item;
        return {
          textField_lbfx2ifr: formData.textField_lbfwjvxx, // 姓名
          numberField_lbfx2ifs: formData.numberField_lbfwjvxy, // 年龄
          numberField_lc72rbdk: formData.numberField_lc72oufl // 总分
        };
      });
      // _.sumBy：lodash方法，宜搭已默认内置，具体可见：https://www.lodashjs.com/docs/lodash.sumBy#_sumbyarray-iteratee_identity
      const totalScore = _.sumBy(tableData, 'numberField_lc72rbdk'); // 班级总分
      // 班级平均分
      const aveScore = totalScore / tableData.length;
      this.$('numberField_lc72rbdp').setValue(totalScore); // 班级总分
      this.$('numberField_lc72rbdq').setValue(aveScore); // 班级平均分
      this.$('tableField_lbfx2ifq').setValue(tableData);
    }).catch(error => {
      loading();
      this.utils.toast({
        title: error.message,
        type: 'error'
      });
    });
  } else {
    this.$('tableField_lbfx2ifq').reset();
    this.$('numberField_lc72rbdp').reset();
    this.$('numberField_lc72rbdq').reset();
  };
}

3. Effect

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_Z0VY8MAI22IJWE1TD6N2&from=yuque_subject