集約テーブルシーンの適用

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• 会議室の予約:会議室を予約するシーンでは、複数の人が同じ会議室を同時に予約し、時間が重なって予約が競合する可能性があります。集約テーブルを使用することで、このような予約異常問題を効果的に管理し、解決し、資源が合理的に分配されるようにすることができる。
• イベントの申し込み:イベント登録シーンでは、高合併は超過登録の問題を引き起こす可能性がある。この問題を解決するために、集約テーブルで検証ルールを設定することができます。参加者一人一人が一度しか予約できない (つまり、予約回数は1以下でなければならない) ことで、過給現象を効果的に回避できます。
• 販売在庫:製造業、小売業、建築業界など現物在庫管理に関わるすべての在庫管理システムは出庫、入庫、調達、棚卸の全プロセス管理を実現する必要がある企業の在庫データを正確に管理し、在庫データに基づいて販売計画、購買計画、生産計画を合理的に手配する。集約表を使用して、業務フォームに出庫することで、製品のリアルタイム在庫を計算し、出庫業務フォームが提出、承認されたときにリアルタイムで検証し、出庫数量が在庫余剰数量を超えた場合検証では超過販売は許可されていません。

前提条件

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

• 集約テーブル
• 通常フォーム
• フローフォーム

効果を実現する

会議室予約

複数の人が同じ会議室を予約しようとし、時間が重複すると、新しい予約要求が自動的にブロックされます。

イベントエントリー

同じイベントを同時に選択して登録すると、システムは現在の残りの登録可能人数をリアルタイムで検証し、登録がいっぱいになると自動的にこの登録を遮断します。

売上在庫

同時に同種の製品を出庫する場合、システムは在庫表の現在の在庫数をリアルタイムで検証し、在庫不足が発生した場合、自動的に今回の出庫を遮断する。

実装手順

会議室予約

フォームの作成

「会議室情報」ページを作成します。詳細はこちらを参照してください通常フォーム。

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

• 単一行テキスト: 会議室名
• 複数行のテキスト: 会議室の住所と名前を付けます

「会議室予約」ページを作成します。詳細はこちらを参照してくださいフローフォーム。

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

• 関連フォーム: 選択会議室と命名し、【会議室情報】を関連付ける
• 日付: 開始時間という名前を付けます
• ドロップダウン単一選択: 開始時の名前
• 日付: 終了時間という名前を付けます
• ドロップダウン単一選択: 終了時の名前
• サブフォーム: 予約時間帯と命名

• 単一行テキスト: 会議室名
• 単一行テキスト: 年月日と命名
• 単一行テキスト: 名前は時分です
• 数値: 予約回数、デフォルト値は1です

• 日付: 予約開始時間と命名
• 日付: 予約終了時間と命名
• 単一行テキスト: 会議室名

会議室の予約時間帯の重複処理

時間バインドイベントを開始し、現在選択されている会議室の予約済み時間帯を取得します

// 选择会议室 onChange
export function onMeetingRoomChange({ value }) {
  this.$('dateField_lld25jg9').reset();
  this.$('dateField_lld25jgc').reset();
}

// 开始时间 onChange
export function onStartTimeChange({ value }) {
  this.$('selectField_lld25jga').reset();
  if (value) {
    this.utils.yida.searchFormDatas({
      formUuid: 'FORM-8A474E900003479FAFFED91C314B7A49WXAM',
      pageSize: 100,
      searchFieldJson: JSON.stringify({
        textField_m42hvwgu: this.$('textField_m42j2c2j').getValue(),
        textField_m42hvwgv: this.utils.formatter('date', value, 'YYYY-MM-DD'),
      }), // 可以根据组件值查询
    }).then((res) => {
      const { data = [] } = res;
      const noAllowTimeCurrent = data.map(({ formData = {} }) => {
        return formData.textField_m42hvwgw;
      });
      this.$('selectField_lld25jga').set('dataSource', this.setTimeCurrent().map((item) => {
        return {
          ...item,
          disabled: noAllowTimeCurrent.includes(item.value),
        };
      }));
    });
  } else {
    this.$('selectField_lld25jga').set('dataSource', []);
  }
}

// 开始时分 onChange
export function onStartTimeCurrentChange({ value, actionType, item }) {
  if (value) {
    this.$('dateField_m42j2c2f').setValue(new Date(`${this.utils.formatter('date', this.$('dateField_lld25jg9').getValue(), 'YYYY-MM-DD')} ${value}:00`).getTime());
  } else {
    this.$('dateField_m42j2c2f').reset();
  }
}

「終了時間」、「終了時」にイベントをバインドし、データを処理します。

// 结束时间 onChange
export function onEndTimeChange({ value }) {
  this.$('selectField_lld25jge').reset();
  if (value) {
    this.utils.yida.searchFormDatas({
      formUuid: 'FORM-8A474E900003479FAFFED91C314B7A49WXAM',
      pageSize: 100,
      searchFieldJson: JSON.stringify({
        textField_m42hvwgu: this.$('textField_m42j2c2j').getValue(),
        textField_m42hvwgv: this.utils.formatter('date', value, 'YYYY-MM-DD'),
      }), // 可以根据组件值查询
    }).then((res) => {
      const { data = [] } = res;
      const noAllowTimeCurrent = data.map(({ formData = {} }) => {
        return formData.textField_m42hvwgw;
      });
      this.$('selectField_lld25jge').set('dataSource', this.setTimeCurrent().map((item) => {
        return {
          ...item,
          disabled: noAllowTimeCurrent.includes(item.value),
        };
      }));
    });
  } else {
    this.$('selectField_lld25jge').set('dataSource', []);
  }
}

// 结束时分 onChange
export function onEndTimeCurrentChange({ value, actionType, item }) {
  if (value) {
    this.$('dateField_m42j2c2g').setValue(new Date(`${this.utils.formatter('date', this.$('dateField_lld25jgc').getValue(), 'YYYY-MM-DD')} ${value}:00`).getTime());
  } else {
    this.$('dateField_m42j2c2g').reset();
  }
}

システムフィールド「予約開始時間」、「予約終了時間」処理予約時間帯データは予約時間セグメントサブフォームに割り当てられます。

export function solveTimeCurrent() {
  const meetingRoomName = this.$('textField_m42j2c2j').getValue(); // 会议室名称
  const startTime = this.$('dateField_m42j2c2f').getValue(); // 预约开始时间
  const endTime = this.$('dateField_m42j2c2g').getValue(); // 预约结束时间
  const { intervalTime } = this.state; // 间隔时间
  if (meetingRoomName && startTime && endTime) {
    const tableFieldValue = [];
    for (let i = startTime; i <= endTime; i += (intervalTime * 60000)) {
      tableFieldValue.push({
        textField_m42gqpjl: meetingRoomName,
        textField_m42gqpjg: this.utils.formatter('date', i, 'YYYY-MM-DD'),
        textField_m42hdjiy: this.utils.formatter('date', i, 'hh:mm'),
        numberField_m42gqpji: 1,
      });
    }
    this.$('tableField_m42gqpjf').setValue(tableFieldValue);
  } else {
    this.$('tableField_m42gqpjf').reset();
  }
}

/**
* 获取时分段
* @param startHour {Number} 开始小时数
* @param endHour {Number} 结束小时数
* @param intervalTime {Number} 间隔分钟数，15、30、60
*/
export function setTimeCurrent(startHour = 8, endHour = 20, intervalTime = this.state.intervalTime) {
  const dayStart = new Date().setHours(startHour, 0, 0, 0);
  const dayEnd = new Date().setHours(endHour, 0, 0, 0);
  const timeCurrent = [];
  for (let i = dayStart; i <= dayEnd; i += (intervalTime * 60000)) {
    timeCurrent.push({
      text: this.utils.formatter('date', i, 'hh:mm'),
      value: this.utils.formatter('date', i, 'hh:mm'),
    });
  }
  return timeCurrent;
}

会議室予約申請データを提出する前に、予約終了時間を予約開始時間より早く検証してはならない

// 表单提交前
export function beforeSubmit({ formDataMap }) {
  return new Promise((resolve) => {
    const startTime = this.$('dateField_m42j2c2f').getValue(); // 预约开始时间
    const endTime = this.$('dateField_m42j2c2g').getValue(); // 预约结束时间
    if (startTime >= endTime) {
      this.utils.toast({
        title: '预约开始时间需小于预约结束时间，请重新选择',
        type: 'error',
      });
      resolve(false);
    }
    resolve(true);
  });
}

【会議室予約記録】集計表

データソース「会議室予約」を選択し、「関連関係」を会議室名、年月日、時分に設定します。

「列見出し」を設定します

「指標」の設定:

「検証の送信」の設定:

{"text":"​预约次数​<=1","marks":[{"from":{"line":0,"ch":0,"sticky":null},"to":{"line":0,"ch":6,"sticky":null},"value":"numberField_m42h3qm5","invalid":false}],"isCmData":true}

公開集計表の保存

イベントエントリー

フォームの作成

【イベント情報】フォームを作成します。詳細はこちら通常フォーム。

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

• 単一行テキスト: アクティブな名前を付けます
• 数値: 応募可能人数と命名
• 単一行テキスト: 開催場所と命名
• 日付:開催日と命名

【イベントエントリー】フォームを作成します。詳細はこちら通常フォーム。

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

• 関連フォーム: 選択イベントと名前を付け、【イベント情報】フォームを関連付けます
• 数値: 残りの応募可能人数と命名
• 数値: 応募者数と命名
• 数値: 応募可能人数と命名
• 単一行テキスト: アクティブな名前を付けます
• 数値: 名前を応募人数とし、デフォルト値は1です

【残り/応募者数】集計表

データソース「イベント情報」、「イベント登録」の2つのフォームを選択し、「関連関係」をイベント名フィールドに設定します。

「列見出し」を設定します。フィールドはアクティブ名です

「指標」の設定:

「残りの応募可能人数」の公式設定:

{"text":"​活动信息.可报名人数​-​活动报名.报名人数​","marks":[{"from":{"line":0,"ch":0,"sticky":null},"to":{"line":0,"ch":12,"sticky":null},"value":"FORM-5CA60EB4747F4B3093D37FC7E52CC8EFECFX/numberField_m46eaw05","invalid":false},{"from":{"line":0,"ch":13,"sticky":null},"to":{"line":0,"ch":24,"sticky":null},"value":"FORM-92C18462081648628EF6E01D5CEA6CD6FPLP/numberField_m46ejo1z","invalid":false}],"isCmData":true}

「検証の送信」の設定:

{"text":"​剩余可报名人数​>=0","marks":[{"from":{"line":0,"ch":0,"sticky":null},"to":{"line":0,"ch":9,"sticky":null},"value":"numberField_m46ejzhb","invalid":false}],"isCmData":true}

公開集計表の保存

売上在庫

フォームの作成

【製品情報】フォームを作成します。詳細はこちら通常フォーム。

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

• 単一行テキスト: 製品名を付けます
• 単一行テキスト: 仕様と命名

【入庫表】フォームを作成します。詳細はこちら通常フォーム。

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

• メンバー: オペレータという名前で、デフォルトでは現在のログイン者
• 日付: 入庫日という名前で、現在時刻がデフォルトです
• サブフォーム: 入庫リストという名前

• 関連フォーム: 入庫製品と命名し、「製品情報」フォームを関連付けます
• 数値: 入庫数量の名前を付けます
• 単一行テキスト: 入庫製品名と命名し、「入庫製品」で入力します
• 数値: 現在の在庫数量と名前を付け、データ連動【在庫情報】集計表

【出庫表】フォームを作成します。詳細はこちら通常フォーム。

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

• メンバー: オペレータという名前で、デフォルトでは現在のログイン者
• 日付: 出庫日という名前で、デフォルトの現在時刻
• サブフォーム: 出庫リストという名前

• 関連フォーム: 出庫製品と命名し、【在庫情報】集約テーブルを関連付ける
• 数値: 在庫数と命名し、「出庫製品」で入力します
• 数値: 出庫数量と命名
• 単一行テキスト: 出庫製品名と命名し、「出庫製品」で入力します

【在庫情報】集計表の作成

データソース「入庫表」、「出庫表」の2つのフォームを選択し、「関連関係」を出庫リストの製品名、入庫リストの製品名フィールドに設定します。

「列見出し」を設定します。フィールドは製品名です

「指標」の設定:

{"text":"​入库表.入库清单.入库数量​-​出库表.出库清单.出库数量​","marks":[{"from":{"line":0,"ch":0,"sticky":null},"to":{"line":0,"ch":15,"sticky":null},"value":"FORM-83AF6369978940489D2F200B142962E3F86O/numberField_m46f54st","invalid":false},{"from":{"line":0,"ch":16,"sticky":null},"to":{"line":0,"ch":31,"sticky":null},"value":"FORM-7FF4B505BED745A3BEA085064AE2DBA58F5U/numberField_m46f54st","invalid":false}],"isCmData":true}

「検証の送信」の設定:

{"text":"​库存数​>=0","marks":[{"from":{"line":0,"ch":0,"sticky":null},"to":{"line":0,"ch":5,"sticky":null},"value":"numberField_m46fa3rc","invalid":false}],"isCmData":true}

公開集計表の保存

オンラインで試遊する

• 注意:例が有効になったら、次の手順に従って、集約表を再公開して使用してください。