自定义页面提交流程表单数据

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用场景

当我们需要将流程的提交功能集成在自定义页面中时可使用此例。

2. 实现功能

2.1. 创建流程页面

2.2. 创建自定义页面

2.3. 自定义页面展示并提交流程数据

2.3.1. 创建查询数据源

数据源文档：根据搜索条件获取实例详情列表

数据源请求地址：

`/${window.pageConfig.appType || window.g_config.appKey}/v1/process/getInstances.json`

数据源配置截图：

2.3.2. 创建新增数据源

数据源文档：流程发起

数据源请求地址：

`/${window.pageConfig.appType || window.g_config.appKey}/v1/process/startInstance.json`

数据源配置截图：

2.3.3. 创建变量

2.3.4. 将下述代码拷贝至页面 JS 中

代码内的 formUuid，processCode ，字段唯一标识，请根据实际情况进行修改。

// 查询流程表单数据
export function getProcessData() {
  const { processCurrentPage, processPageSize } = this.state;
  this.dataSourceMap.getProcessData.load({
    formUuid: 'FORM-4IA668918I1BHCW565RO14Z4B24O2DEYJN9ILH',
    pageSize: processPageSize,
    currentPage: processCurrentPage
  }).then(res => {
    const { totalCount, data = [], currentPage } = res;
    const processResult = data.map(item => {
      const { processInstanceId, data } = item;
      return {
        processInstanceId,
        subUser: data.employeeField_li9pf6js,
        subTime: data.dateField_li9pf6jt,
        currentTime: data.cascadeDateField_li9z62b9 ? { start: Number(data.cascadeDateField_li9z62b9[0]), end: Number(data.cascadeDateField_li9z62b9[1]) } : '',
        text: data.textField_li9pf6jz,
        textarea: data.textareaField_li9pf6jy,
        number: data.numberField_li9pmkzy,
        select: data.selectField_li9pf6k0,
        multiSelect: data.multiSelectField_li9pf6k1,
        image: data.imageField_li9pf6jw ? JSON.parse(data.imageField_li9pf6jw) : '',
        attachment: data.attachmentField_li9pf6jx ? JSON.parse(data.attachmentField_li9pf6jx) : ''
      }
    });
    this.setState({
      processData: {
        data: processResult,
        currentPage,
        totalCount
      }
    });
  }).catch(error => {
    this.utils.toast({
      title: error.message,
      type: 'error'
    });
  });
}

// 流程表单详情
export function onProcessDetail(rowData) {
  const { processInstanceId } = rowData;
  this.utils.router.push(`/${window.pageConfig.appType || window.g_config.appKey}/processDetail?procInsId=${processInstanceId}`, {}, true, true);
}

// 流程表单分页
export function onFetchProcessData(params) {
  // 如果是搜索的话翻页重置到 1
  if (params.from === 'search') {
    params.currentPage = 1;
  };

  this.setState({
    processPageSize: params.pageSize,
    processCurrentPage: params.currentPage
  });

  this.getProcessData();
}

// 流程表单新增
export function onAddProcessData() {
  this.$('dialog_li9w0b7t').show(() => {
    this.$('employeeField_li9pf6js').reset();
    this.$('dateField_li9pf6jt').reset();
    this.$('cascadeDateField_li9z62b9').reset();
    this.$('textField_li9pf6jz').reset();
    this.$('textareaField_li9pf6jy').reset();
    this.$('numberField_li9pmkzy').reset();
    this.$('selectField_li9pf6k0').reset();
    this.$('multiSelectField_li9pf6k1').reset();
    this.$('imageField_li9pf6jw').reset();
    this.$('attachmentField_li9pf6jx').reset();
  });
}

// 流程表单确定新增
export function onAddProcessDataOk() {
  const fieldList = [
    'cascadeDateField_li9z62b9',
    'textField_li9pf6jz',
    'textareaField_li9pf6jy'
  ];

  // 调用表单校验函数 
  this.fieldsValidate(fieldList).then(errorList => {
    setTimeout(() => {
      if (errorList.length > 0) {
        // 表单校验未通过，可做一些数据错误提示
        console.log(errorList);
        return;
      };

      // 表单校验通过，你的后续业务逻辑由此往下写
      const subUser = this.$('employeeField_li9pf6js').getValue();
      const subTime = this.$('dateField_li9pf6jt').getValue();
      const currentTime = this.$('cascadeDateField_li9z62b9').getValue();
      const text = this.$('textField_li9pf6jz').getValue();
      const textarea = this.$('textareaField_li9pf6jy').getValue();
      const number = this.$('numberField_li9pmkzy').getValue();
      const select = this.$('selectField_li9pf6k0').getValue();
      const multiSelect = this.$('multiSelectField_li9pf6k1').getValue();
      const image = this.$('imageField_li9pf6jw').getValue();
      const attachment = this.$('attachmentField_li9pf6jx').getValue();
      this.$('dialog_li9w0b7t').set('confirmState', 'LOADING');
      this.dataSourceMap.saveProcessData.load({
        formUuid: 'FORM-HT866U91QP8B68V8BNFG043NCLFG2NO3Y9BILJ7',
        processCode: 'TPROC--N4A66IB1JN8BNOK58AHKP4H1C3W42DW3Y9BILH',
        formDataJson: JSON.stringify({
          employeeField_li9pf6js: subUser || [loginUser.userId],
          dateField_li9pf6jt: subTime || Date.now(),
          cascadeDateField_li9z62b9: currentTime ? [currentTime.start, currentTime.end] : [],
          textField_li9pf6jz: text,
          textareaField_li9pf6jy: textarea,
          numberField_li9pmkzy: number,
          selectField_li9pf6k0: select,
          multiSelectField_li9pf6k1: multiSelect,
          imageField_li9pf6jw: (image || []).map(item => {
            return {
              downloadUrl: item.downloadURL,
              previewUrl: item.downloadURL,
              url: item.url,
              name: item.name
            }
          }),
          attachmentField_li9pf6jx: (attachment || []).map(item => {
            return {
              downloadUrl: item.downloadURL,
              previewUrl: item.downloadURL,
              url: item.url,
              name: item.name,
              ext: item.type
            }
          })
        })
      }).then(res => {
        this.$('dialog_li9w0b7t').set('confirmState', 'NORMAL');
        this.$('dialog_li9w0b7t').hide();
        this.utils.toast({
          title: '创建成功',
          type: 'success'
        });
        setTimeout(() => {
          this.getProcessData();
        }, 1000);
      }).catch(error => {
        this.$('dialog_li9w0b7t').set('confirmState', 'NORMAL');
        this.utils.toast({
          title: error.message,
          type: 'error'
        });
      });
    });
  }, 0);
}

// fieldList：Array，需要校验组件的唯一标识集合
export async function fieldsValidate(fieldList = []) {
  const result = [];
  for (let i = 0; i < fieldList.length; i++) {
    await this.$(fieldList[i]).validate((errors, values) => {
      if (!errors) { return };
      result.push({
        fieldId: fieldList[i], // 组件标识
        errors: this.utils.isMobile() ? errors.errors[fieldList[i]].errors : errors[fieldList[i]].errors // 校验错误信息
      });
    });
  };
  return result;
}

2.3.5. didMount 中调用

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
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 + ' | 宜搭';
  this.getProcessData(); // 获取流程数据
}

2.3.6. 配置表格展示数据

表格图片上传字段展示格式化：

// 图片上传字段格式化
export function renderImageCell(value, index, rowData) {
  return <div class='imgContainer' style={{
    display: 'flex',
    width: '170px',
    paddingBottom: '12px',
    overflowX: 'auto',
    userSelect: 'none'
  }}>{(value || []).map((item, index) => {
    return (
      <img
        src={item.previewUrl}
        onClick={() => { this.utils.previewImage({ current: item.url }) }}
        style={{
          display: 'block',
          width: '48px',
          height: '48px',
          borderRadius: '6px',
          cursor: 'pointer',
          marginRight: (index + 1) != value.length ? '12px' : '0px'
        }}
      />
    )
  })}</div>;
}

表格成员字段展示格式化：

// 成员字段格式化
export function renderCell(value, index, rowData) {
  return <span>{value}</span>;
}

2.3.7. 配置表格分页

2.3.8. 配置表格顶部操作

2.3.9. 配置表格详情操作列

2.3.10. 配置新增流程数据弹窗

若需要对弹窗内字段进行自定义校验，请参考：自定义页面表单触发校验

3. 实现效果

图片上传点击缩略图可查看大图，附件上传点击后直接下载。

4. 在线试玩

注意：案例启用后，请将下述 124 行代码中的 processCode 修改成案例启用后流程实际的 processCode。

否则会触发如下报错：

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

让企业自建专属应用更简单，持续创新，一搭就行。

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