カスタムページのドロップダウン選択リアルタイム検索フォームデータ (手ぶれ補正アプリケーションインスタンス)

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用シーン

この例では、カスタムページで手ぶれ補正を利用してリアルタイム検索フォームデータをドロップダウン選択する方法を紹介します。

ドキュメントソース:手ぶれ補正debounce

2. 原理

イベントがトリガーされてからn秒後、コールバック関数を実行します。N秒以内にイベントが再トリガーされた場合は、再タイミングが行われます。その結果、頻繁にトリガーされるイベントが1回に統合され、最後に実行されます。

例:

エレベーターは5秒後にドアを閉めて運転を始め、誰かが入ってきたら、5秒待って、5秒以内にまた誰かが入ってきて、5秒待って、5秒を超えるまでエレベーターが運転を始めた。

3. 機能を実現する

3.1. 設定ドロップダウン選択データボトムテーブル

ページをカスタマイズするためのドロップダウン選択関連オプション。

3.2. ページ設定のカスタマイズ

3.2.1. ページ設定

3.2.2. フォームデータを取得するためのデータソースの設定

リクエストアドレス:

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

3.2.3. 設定変数

名称：selectDataSource
描述：下拉选择选项
数据：[]

名称：debounceTimer
描述：
数据：null

3.3. ページ機能設定

3.3.1. 取得ドロップダウン選択オプション関数の設定

フォームformuuidとフィールドの一意のidを必要に応じて変更することに注意してください。

/**
* 获取下拉选择选项
* @param searchKey: {String} 实时查询参数
* @param uniqValue: {Boolean} 选项是否去重
*/
export function getSelectDataSource(searchKey = '', uniqValue = true) {
  this.dataSourceMap.getData.load({
    formUuid: 'FORM-6F889E5B2C79445880289736CFEFAA80QV8I',
    pageSize: 100,
    searchFieldJson: JSON.stringify({
      textField_lahnv890: searchKey,
    }),
  }).then((res) => {
    const { data = [] } = res;
    const selectDataSource = data.map((item) => {
      const { formData = {} } = item;
      return {
        text: formData.textField_lahnv890,
        value: formData.textField_lahnv890,
      };
    });
    this.setState({
      selectDataSource: uniqValue ? _.uniqBy(selectDataSource, 'value') : selectDataSource,
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
  });
}

3.3.2. ドロップダウン選択onsearch検索アクションの設定

次の関数をバインドします

/**
* selectField onSearch
* @param value: {String} 数据
*/
export function onSearch(keyword) {
  if (this.state.debounceTimer) {
    clearTimeout(this.state.debounceTimer);
  };
  // 注意防抖，防抖案例：https://www.aliwork.com/o/coc?tplUuid=TPL_EV117QZ9KD6EK0334JNU&from=yuque_subject
  const debounceTimer = setTimeout(() => {
    this.getSelectDataSource(keyword);
    this.setState({
      debounceTimer: null,
    });
  }, 300);
  this.setState({
    debounceTimer,
  });
}