表单中组件实时校验唯一性

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

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

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