詳細ページフィールドカスタムレンダリング

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• プロセスの承認時には、一部のフィールドを重点的に表示する必要があります。たとえば、精算金額、休暇日数などです
• フォームに記入された携帯電話番号、メールアドレスがダイヤルをクリックするか、クリックしてメールを送信するか
• フォームに入力したwebサイト、クイックアクセスをクリックする方法
• フォームに入力されたテキストの内容、クイックコピーをクリックする方法

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• 通常フォーム
• This.utils.issubmissionpage ()
• This.utils.preview ()
• Didmountについて

効果を実現する

実装手順

普遍的なフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• 単一行テキスト: 赤い名前のテキスト
• 単一行テキスト: アクセスアドレスの名前を付けます
• 単一行テキスト: 送信メールという名前
• 単一行テキスト: 携帯電話に電話するという名前です
• 単一行テキスト: ワンクリックでテキストをコピーするという名前
• サブフォーム: サブフォームの名前を付けます

• 単一行テキスト: アクセスアドレスの名前を付けます
• 画像アップロード: 名前を画像アップロード
• 単一行テキスト: 画像プレビューという名前

フィールドのカスタムレンダリングの設定

次のコードをページjsパネルにコピーし、コンポーネントの一意のidを変更することに注意してください。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  if (!this.utils.isSubmissionPage()) {
    // 初始化复制
    this.utils.loadScript("https://g.alicdn.com/code/lib/clipboard.js/2.0.11/clipboard.min.js")
      .then(() => {
        const clipboard = new ClipboardJS('.copyBtn');
        clipboard.on('success', () => {
          this.utils.toast({
            title: '复制成功',
            type: 'success',
          });
        });
        clipboard.on('error', () => {
          this.utils.toast({
            title: '复制失败',
            type: 'error',
          });
        });
      });

    // 红色的文字
    this.$('textField_lbam5p6w').set('renderView', (value) => {
      return <span
        style={{ color: 'red' }}
      >
        {value}
      </span>
    });

    // 访问网址
    this.$('textField_lbbjotg2').set('renderView', (value) => {
      return <a
        href={value}
        target="_blank"
        rel="noreferrer"
      >
        {value}
      </a>
    });

    // 发送邮件
    this.$('textField_lroioatg').set('renderView', (value) => {
      return <a
        href={`mailto:${value}`}
        target="_blank"
        rel="noreferrer"
      >
        {value}
      </a>
    });

    // 拨打手机
    this.$('textField_lrodvffc').set('renderView', (value) => {
      return <a
        href={`tel:${value}`}
        target="_blank"
        rel="noreferrer"
      >
        {value}
      </a>
    });

    // 一键复制文本
    this.$('textField_m2v8kuqh').set('renderView', (value) => {
      return <span
        className="copyBtn"
        data-clipboard-text={value}
      >
        {value}
        {
          value ?
            <i
              className="next-icon next-icon-copy next-medium vc-icon"
              style={{
                float: "right",
                cursor: "pointer"
              }}
            >
            </i> :
            <span>
            </span>
        }
      </span>
    });

    const tableField = this.$('tableField_lfhnlfkf'); // 获取子表单定义
    const items = tableField.getItems(); // 获取子表单行标识
    const tableValue = tableField.getValue(); // 获取子表单数据
    items.forEach((item, index) => {
      // 访问网址 - 子表单
      tableField.setComponentProps(item, 'textField_lfhnlfkg', {
        renderView: (value) => {
          return <a
            href={value}
            target="_blank"
            rel="noreferrer"
          >
            {value}
          </a>
        },
      });

      // 图片预览 - 子表单
      tableField.setComponentProps(item, 'textField_lfhnlfkj', {
        renderView: () => {
          return (
            <div
              style={{
                display: 'flex',
                overflowX: 'auto',
                userSelect: 'none',
                paddingBottom: '8px',
              }}
            >{
                (tableValue[index].imageField_lfhnlfkh || []).map((_item, _index) => {
                  const { previewUrl, name, downloadUrl } = _item;
                  const urls = tableValue[index].imageField_lfhnlfkh.map((img) => { return img.downloadUrl; });
                  return (
                    <img
                      src={previewUrl}
                      title={name}
                      style={{
                        display: 'block',
                        width: '48px',
                        height: '48px',
                        borderRadius: '6px',
                        cursor: 'pointer',
                        marginRight: (+_index + 1) !== urls.length ? '8px' : '0px',
                      }}
                      onClick={() => {
                        this.utils.previewImage({
                          urls,
                          current: downloadUrl,
                        });
                      }}
                    />
                  );
                })
              }
            </div>
          );
        },
      });
    });
  }
}

保存ページ

オンラインで試遊する