Verify uniqueness of components in a form in real time

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

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

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

This case comes from the three-party developer Su Yi 」

1. Usage scenarios

Currently, only the main form field can be verified in real time, but the subform field is not supported. In this example, the single-line text component is used as an example.

YIDA currently, you can use the EXIST function to implement the unique verification of components. The disadvantage is that you need to submit it to know whether it is duplicate. In this example, you can use the YIDA of OpenAPI to implement real-time verification, after the input is completed, you can know whether it is duplicate, which is similar to the username verification when registering an account.

2. Implement functions

2.1 page configuration

2.2 configure page functions

(1) configure variables

(2) configure data sources

The interface configuration is as follows:

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

(3) configure custom verification for single-line text components

The component must be enabled. If it is not required, verification will not be triggered.

// 校验数据是否重复
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) configure fixed parameters and be compatible with data details page editing

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
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. Achieve results

4. Try it online

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

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

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