フォーム内のコンポーネントはリアルタイムで一意性を検証します

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

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

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

このケースは三者の開発者「蘇 _ 」から来ました。

1. 使用シーン

現在、メインフォームフィールドのリアルタイム検証のみサポートされており、サブフォームフィールドはサポートされていません。この例では、単一行テキストコンポーネントを例にします。

現在、exist関数でコンポーネントの唯一の検証を実現することができ、欠点は提出が必要な時に重複するかどうかを知ることで、この例では、適切なopenapiでリアルタイム検証を実現することができるつまり、入力が完了すると、アカウント登録時のユーザー名検証と同様に、重複しているかどうかがわかります。

2.機能を実現する

2.1ページ設定

2.2ページ機能の設定

(1) 設定変数

(2) データソースの設定

インタフェース構成図:

`/${window.pageConfig.appType || window.g_config.appKey}/query/formProcInstData/getInstanceDatasLight.json`

(3) 単一行テキストコンポーネントのカスタム検証を構成する

コンポーネントは必須入力をオンにする必要があります。必須入力でない場合は検証をトリガーしません。

// 校验数据是否重复
export function checkRepeat(value) {
  const { beforeModifyData } = this.state;
  if (!value || (!this.utils.isSubmissionPage() &&
    beforeModifyData && (value === beforeModifyData))) {
    // 满足条件时不触发校验
    return true;
  };
  return new Promise(resolve => {
    if (this.state.debounceTimer) {
      clearTimeout(this.state.debounceTimer);
    };
    const debounceTimer = setTimeout(async () => {
      const result = await this.dataSourceMap.checkRepeat.load({
        formUuid,
        searchField: JSON.stringify([{
          key: checkedField,
          value: value,
          type: "TEXT",
          operator: "eq",
          componentName: "TextField"
        }]),
        pageSize: 10,
        currentPage: 1,
        page: 1,
        limit: 10
      }).then(res => {
        const { totalCount } = res;
        return !totalCount;
      }).catch(error => {
        this.utils.toast({
          title: error.message,
          type: 'error',
        });
        return true;
      });
      resolve(result);
      this.setState({
        debounceTimer: null,
      });
    }, 500);
    this.setState({
      debounceTimer,
    });
  });
}

(4) 固定パラメータを設定し、データ詳細ページ編集と互換性がある

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  if (!this.utils.isSubmissionPage()) {
    // 获取未修改前的被校验组件数据
    const beforeModifyData = this.$(checkedField).getValue();
    this.setState({
      beforeModifyData,
    });
  };
}

const formUuid = 'FORM-XXXXXXXXXXXXXXXXX'; // 需要参与校验的表 formUuid
const checkedField = 'textField_lf91985j'; // 需要参与校验的表单组件唯一标识

3.効果を実現する

4.オンラインで試してみます

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

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

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