フォーム内の関連フォームの複数選択入力サブテーブル

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

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

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

このケースは、三者の開発者「peng」から来ています

1. 使用シーン

この例では、適切なフォームページで関連フォームの複数選択入力サブテーブルを実現する方法を紹介します。

2. 機能を実現する

2.1. 支払票ページの作成

2.2. フォームページの作成

2.3. 関連フォームコンポーネントの設定

注関連フォームの複数選択モードをオンにします。

2.4. 機能設定

2.4.1. データソースの設定

参考ドキュメント:フォームインスタンスidに基づいてフォームインスタンスの詳細を照会する

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

インタフェース構成図:

2.4.2. 関連フォームコンポーネントは、次のイベントをバインドします

export async function onAssociationFormChange({ value }) {
  if (value.length) {
    const batchFetchResult = []; // 请求结果
    const failedInstId = []; // 请求失败的实例ID
    const batchFetchLoading = this.utils.toast({
      title: `处理中，请不要关闭浏览器，预计需要 ${value.length / 5} 秒`,
      type: 'loading'
    });
    for (let i = 0; i < value.length; i++) {
      const delay = i === 0 ? 0 : 200;
      const formInstId = value[i].instanceId;
      await new Promise((resolve => {
        // 注意节流，每次请求间隔 200 ms
        setTimeout(async () => {
          await this.dataSourceMap.getDataById.load({
            // 数据源参数
            formInstId,
          }).then(res => {
            // 处理每次返回的结果
            if (!res) { return };
            batchFetchResult.push(res || {});
          }).catch(error => {
            // 处理错误，收集错误的实例ID
            failedInstId.push(formInstId);
          });
          resolve();
        }, delay);
      }));
    };
    batchFetchLoading();
    if (failedInstId.length > 0) {
      let content = (
        <div>
          {failedInstId.map((instId) => {
            return <p>{instId}</p>
          })}
        </div>
      );
      this.utils.dialog({
        method: 'alert',
        title: `处理完成，失败 ${failedInstId.length} 条`,
        content,
        onOk: () => { },
        onCancel: () => { },
      });
    };
    // 上述代码均不需要修改
    // 下述代码按照实际情况修改字段映射即可
    const tableData = batchFetchResult.map(item => {
      const { formData = {} } = item;
      return {
        textField_l9pa49io: formData.textField_l9p9znox || '', // 付款说明
        numberField_l9pa49ip: formData.numberField_l9p9znoy || 0 // 付款金额
      }
    });
    this.$('tableField_l9pa49in').setValue(tableData);
  } else {
    // 初始化子表单
    this.$('tableField_l9pa49in').setValue([]);
  };
}

2.4.3. サブフォームコンポーネントは、次のイベントをバインドします

実際の状況に応じて一意のidを変更することに注意してください。この機能が必要ない場合は、この手順を無視できます。

export function onTableFieldChange({ value, actionType }) {
  if (actionType === "setValue") {
    const sum = value.reduce((partialSum, item) => partialSum + item.numberField_l9pa49ip, 0);
    this.$('numberField_l9pa49iq').setValue(sum);
  };
}

3. 効果を実現する

4. オンラインで試遊する

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

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

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

5. 関連フォーム機能のアップグレード

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