Fill in the subform with multiple select subforms associated with the form

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

本文档介绍了如何在宜搭中使用动作面板编写JS代码以实现业务逻辑或逻辑判断，包括代码输入、动作绑定、获取回调函数参数的方法。同时提供了API使用手册、调试JS代码的技巧以及引用第三方JS资源的安全建议。

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

1. Usage scenarios

This example describes how to fill the subform data of other pages into the subform of the current page on the YIDA form page.

2. Implement functions

2.1. Create form page

2.2. Configure a data source

Reference documents:Query Form instance details based on form instance ID

The interface configuration is as follows:

2.3. Copy the following code to Page JS

Note that you modify the values of the following option parameters.

export async function onChange({ value }) {
  const option = {
    target: 'tableField_lbafn35n', // 目标子表单组件唯一标识
    current: 'tableField_lbaft5oa', // 当前子表单组件唯一标识
    relation: [
      // 字段映射关系 targetField：目标子表单字段唯一标识， currentField：当前子表单字段唯一标识
      {
        targetField: 'textField_lbafn35q',
        currentField: 'textField_lbaft5ob' // 菜品名
      }, {
        targetField: 'numberField_lbafn35r',
        currentField: 'numberField_lbaft5oc' // 价格
      }
    ]
  };
  const { target, current, relation } = option;
  if (value.length) {
    const closeLoading = this.utils.toast({
      title: '数据获取中...',
      type: 'loading'
    });
    const tableData = [];
    const failedInstId = [];
    for (let i = 0; i < value.length; i++) {
      const delay = i === 0 ? 0 : 200;
      await new Promise((resolve => {
        // 注意节流，每次请求间隔 200 ms
        setTimeout(async () => {
          try {
            await this.dataSourceMap.getDataById.load({
              formInstId: value[i].instanceId
            }).then(res => {
              tableData.push(...res.formData[target]);
            }).catch(error => {
              closeLoading();
              this.utils.toast({
                title: error.message,
                type: 'error'
              });
            });
          } catch (e) {
            // 把失败的实例 id 收集起来
            failedInstId.push(value[i].instanceId);
          }
          resolve();
        }, delay);
      }));
    };
    const result = [];
    for (let j = 0; j < tableData.length; j++) {
      let itemObj = {}
      for (let k = 0; k < relation.length; k++) {
        itemObj[relation[k].currentField] = tableData[j][relation[k].targetField]
      };
      result.push(itemObj);
    };
    closeLoading();
    this.$(current).setValue(result);
  } else {
    this.$(current).reset();
  };
}

2.4. Component event binding

3. Effect

4. Try it online

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

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

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

5. Upgrade the associated form function

https://docs.aliwork.com/docs/yida_updates/augw2gdkfco8glqq#mZa14