フォーム送信期間を制限する方法

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

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

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

1. 使用シーン

フォームページで、ユーザーにデータを送信させるには一定の時間帯が必要で、残りの時間帯は入力できない場合は、このドキュメントに基づいて設定できます。

2. 操作手順

2.1ステップ1: ページデザイン

フォームページを作成し、ページ内に入力が必要なコンポーネントと2行のテキストを補助フィールドとして追加します。図2.1-1のように、「フォームの入力開始時間」と「フォームの入力期限」です。

図2.1-1フォームページデザイン

補助フィールドを非表示にし、図2.1-2のようにフォームが記入できる期間としてデフォルト値 (「時: 分:秒」形式) を設定します。

図2.1-2補助フィールド構成

2.2ステップ2: コンポーネントに変数データソースを定義してバインドする

変数データソースbehaviorを定義し、コンポーネントの状態を制御し、デフォルトのデータをに設定します「Normal」図2.2-1。

ページ内のコンポーネントの属性状態に変数データソースをバインドします。図2.2-2のように。

図2.2-1変数データソースの定義

図2.2-2結合変数データソース

2.3ステップ3: jsパネル書き込みコード

ページの初期化時に現在時刻が記入可能期間内かどうかを判断し、記入可能期間内に何も操作しなければ、記入可能期間内でなければコンポーネントをすべて無効に変更し、送信ボタンを非表示にします。図2.3-1。

図2.3-1次のコードをコピーし、一意のidを変更します

次のコードはjsパネルに直接コピーできます注意: 補助フィールドとして一意に識別される一意の識別を置き換える必要があります。

export function didMount() {
  var date = new Date;
  let now = date.getTime();//当前时间
  let y = date.getFullYear();//获取当前年份
  let m = date.getMonth() + 1;//获取当前月份
  let d = date.getDate();//获取当前日
  let startnum = this.$("「表单开始填写时间」的唯一标识").getValue().split(":");//获取开始时间
  let endnum = this.$("「表单填写截止时间」的唯一标识").getValue().split(":");//获取截止时间
  let star = new Date(Date.UTC(y, m - 1, d, startnum[0] - 8, startnum[1], startnum[2]));//开始时间(year, month - 1, day, hour-8, minute, second))
  let end = new Date(Date.UTC(y, m - 1, d, endnum[0] - 8, endnum[1], endnum[2]));//结束时间
  if (Number(star) <= Number(now) && Number(now) <= Number(end)) {
    //如果在可填写的时间段不做任何操作
  } else {
    //如果不在可填写的时间段，将组件全部改为禁用并隐藏提交按钮。
    this.setState({
      behavior: "DISABLED"
    })
    this.utils.toast({//弹出提示不在可填写的时间段内
      title: `不在可填写的时间段内,表单提交时间为每天${this.$("「表单开始填写时间」的唯一标识").getValue()}~${this.$("「表单填写截止时间」的唯一标识").getValue()}`,
      type: 'error',
      size: 'large',
    })
    document.getElementsByClassName("deep-form-submit")[0] ? document.getElementsByClassName("deep-form-submit")[0].style.display = "none" : ""//隐藏提交按钮
  }
}

3.エフェクトデモ

図3-1効果デモ

-------------------- 最新情報を入手して、私たちに注目してください -------------------- ----