サブフォームの値を取得して現在のメインフォームに割り当てます

単純なフィールドは、式でサブフォームのフィールドを集約した後、現在のメインテーブルのフィールド (数値など) に割り当てることができますが、複雑なフィールドは式で集約することはできません (メンバーなど) 複雑なフィールドの集約要件がある場合は、この例を参照してください。

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• サブフォーム

効果を実現する

実装手順

通常のフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• サブフォーム: サブフォームの名前を付けます

• 数値: 数値の名前を付けます
• メンバー: メンバー1という名前を付けます (ラジオモード)
• メンバー: メンバー2という名前を付けます (複数選択モード)

• 複数選択モードをオンにする

• 数値: 数値合計という名前です
• 数値: 数値合計という名前を付けます (式)
• メンバー: メンバー1という名前を付けます
• メンバー: メンバー2という名前を付けます

サブフォームバインディングonchangeイベント

次の図に示すように:

// 子表单 onChange
export function onTableChange({ value, extra }) {
  const { formGroupId, from, tableFieldId, fieldId, changes = {} } = extra || {};
  // 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环
  if (from === 'setItemValue') { return; }
  const tableField = this.$(tableFieldId); // 获取子表单定义

  // 子表单数值
  if (fieldId && fieldId === 'numberField_lbncqnrz' || from === 'del_item') {
    const sum = value.reduce((prev, cur) => {
      return prev + (cur.numberField_lbncqnrz || 0);
    }, 0);
    this.$('numberField_lbncqns0').setValue(sum);
  }

  // 子表单成员1（单选模式）
  if (fieldId && fieldId === 'employeeField_lbbn2hsb' || from === 'del_item') {
    const userResult1 = value.filter((item) => {
      return !_.isEmpty(item.employeeField_lbbn2hsb || {});
    }).map((_item) => {
      return Array.isArray(_item.employeeField_lbbn2hsb) ? _item.employeeField_lbbn2hsb[0] : _item.employeeField_lbbn2hsb;
    });
    this.$('employeeField_lbbn2hsd').setValue(_.uniqBy(userResult1, 'value'));
  }

  // 子表单成员2（多选模式）
  if (fieldId && fieldId === 'employeeField_li018dw5' || from === 'del_item') {
    const employeeData = value.filter((item) => {
      return !_.isEmpty(item.employeeField_li018dw5 || []);
    });
    const userResult2 = [];
    for (let i = 0; i < employeeData.length; i++) {
      for (let j = 0; j < employeeData[i].employeeField_li018dw5.length; j++) {
        userResult2.push(employeeData[i].employeeField_li018dw5[j]);
      }
    }
    this.$('employeeField_li018dwa').setValue(_.uniqBy(userResult2, 'value'));
  }
}

ここで、数値の合計は次のように式を使用することもできます

{"text":"SUM(​子表单.数值​)","marks":[{"from":{"line":0,"ch":4,"sticky":null},"to":{"line":0,"ch":12,"sticky":null},"value":"numberField_lbncqnrz","invalid":false}],"isCmData":true}

オンラインで試遊する