サブフォームシリアル番号の生成

サブフォームのシリアル番号は現在、カスタム設定の表示効果をサポートしていません。サブフォームのシリアル番号をカスタマイズする必要がある場合は、このケースを参照してください。

前提条件

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

• サブテーブル行idの取得
• サブテーブルデータの更新

効果を実現する

実装手順

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

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

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

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

• 単一行テキスト: 通常のシリアル番号の名前
• 単一行テキスト: プレフィックス付きシリアル番号の名前を付けます
• 単一行テキスト: サフィックス付きシリアル番号の名前を付けます
• 単一行テキスト: 前サフィックス付きシリアル番号という名前です

ツール関数の追加

左側のリボンのアクションパネルに、サブフォームだけが起動した関数を追加します新規追加 (add_item)、削除 (del_item)シリアル番号の生成がトリガーされます。

/**
* 生成子表单序号
* @param tableFieldId {String} 子表单组件唯一标识
* @param orderFieldId {String} 序号组件唯一标识
* @param actionType {String} 触发方式
* @param beforeText {String} 序号前缀文案
* @param afterText {String} 序号后缀文案
*/
export function setOrderNum(tableFieldId = '', orderFieldId = '', actionType = '', beforeText = '', afterText = '') {
  if (!tableFieldId || !orderFieldId) { return; };
  const tableField = this.$(tableFieldId);
  const items = tableField.getItems();
  if (!actionType || actionType === 'del_item' || items.length === 2) {
    // 所有行编号
    items.forEach((item, index) => {
      const updateObject = {};
      updateObject[orderFieldId] = `${beforeText}${index + 1}${afterText}`;
      tableField.updateItemValue(item, updateObject);
    });
  }
  if (actionType === 'add_item' && items.length !== 2) {
    // 只为最新的行编号
    const updateObject = {};
    updateObject[orderFieldId] = `${beforeText}${items.length}${afterText}`;
    tableField.updateItemValue(items.at(-1), updateObject);
  }
}

サブフォームイベントの設定

サブフォームonchangeイベントは次の関数をバインドします。シリアル番号コンポーネントの一意のidを変更することに注意してください。

export function onTableChange({ value, extra }) {
  const { from, tableFieldId } = extra || {};
  // 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环
  if (from === 'setItemValue' || from === 'form_change') { return };
  this.setOrderNum(tableFieldId, 'textField_lblyqnvb', from); // 普通序号
  this.setOrderNum(tableFieldId, 'textField_lblyqnvc', from, '前缀_'); // 带前缀序号
  this.setOrderNum(tableFieldId, 'textField_lblyqnvd', from, '', '_后缀'); // 带后缀序号
  this.setOrderNum(tableFieldId, 'textField_lblyqnvg', from, '前缀_', '_后缀'); // 带前后缀序号
}

保存ページ

オンラインで試遊する