表单中详情页面字段自定义渲染

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

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

1. 使用场景

本例介绍一下在宜搭表单页面中如何使用字段自定义渲染。

2. 实现功能

2.1. 创建表单页面

2.2. 配置字段自定义渲染

将下述代码拷贝至页面 JS 中，注意修改组件唯一标识。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  if (!this.utils.isSubmissionPage()) {
    // 红色的文字
    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>;
    });

    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>
          );
        },
      });
    });
  }
}