1. 使用场景

因为提交流程之后是不允许修改的，所以我们推出了下面这个案例，教您如何在提交流程之后修改流程数据。

2. 视频展示

3. 操作步骤

3.1 创建表单

（1）创建流程表单

首先创建一个流程表单（如图所示，在流程表单里放置两个单行文本组件），点击保存，返回首页。

流程表单页面

（2）创建自定义页面

创建一个自定义表单，跳过模板选择，然后放置一个表格组件。在右边的属性那里修改数据列的标题以及数据字段。（数据字段为流程表单里单行文本组件对应的唯一标识）

自定义页面

3.2 创建数据源

远程数据源就是我们常说的接口。可以去获取数据，传值等操作。

新建远程 API，名称可以任意修改，请求地址为需要获取接口的地址（可以参考文档），请求方法需要按照相应接口去修改。 

接口文档地址：https://www.yuque.com/yida/support/aql605#AT37V

后缀为相对应的接口。例 https://www.aliwork.com/dingtalk/web/APP_X1X2X3X4/v1/process/startInstance.json

（1）创建 getInstances.json 接口（获取数据）

添加远程 API，修改请求地址、请求方法、添加参数。

参数填写可以参照文档。（其中，formUuid 为应用首页右上角应用设置 >> 应用数据中相对应的表单 ID）

在数据处理中对获取到的数据做一个处理，可以参考以下代码。

数据源         

参考文档

function didFetch(content) {
  console.log(content)
  let arr = []
  content.data.map((item => {
    let dataMap = item.data;
    dataMap.formUuid = item.formUuid;
    dataMap.formInstId = item.processInstanceId;
    arr.push(item.data)

  }))
  console.log(arr)
  return {
    "data": arr,
    "currentPage": content.currentPage,
    "totalCount": content.totalCount,

  }; // 重要，需返回 content

}

（2）创建 updateInstance.json 接口（修改数据）

  创建远程 API，修改请求地址、请求方法。

  请求参数在稍后的 JS 面板中填写，此处的请求参数可以暂时不填写。

数据源

参考文档

  （3）创建变量

   创建两个变量，点击表格组件，找到右边的数据源，点击变量绑定，绑定 getInstances。

添加变量

绑定变量

注意：数据主键也要修改成 formInstId

3.3 创建动作

 通过动作事件，来对数据进行编辑与保存等操作。

 点击表格组件，选择操作列，点击操作列中的操作项，可以对操作项进行编辑，删除，添加等操作。

操作列

点击编辑和保存的编辑按钮，新建动作。

新建动作

注：在编辑状态要显示展示态；在保存状态显示编辑态

分别创建动作

创建动作完成后，左边会弹出一个 JS 面板，可以参考下列代码，其中：

textField_kpqkt6yf 为流程表单中种类组件的唯一标识textField_kpqkt6ye 为流程表单中数量组件的唯一标识

export function onActionClick(rowData, action, table) {
  return table.editRow(rowData);
  console.log(rowData);
}

export function onActionClick1(rowData, action, table) {

  return table.saveRow(rowData).then((...args) => {
    console.log('rowData', rowData);
    console.log('args',args)
    console.log("args1", args[0]);
    let arr = []
    this.setState({
      dp2: args[0]
    });
    this.dataSourceMap.updata.load(
      {
        "processInstanceId": args[0].formInstId,
        "updateFormDataJson": JSON.stringify({
          "textField_kpqkt6yf": args[0].textField_kpqkt6yf,
          "textField_kpqkt6ye": args[0].textField_kpqkt6ye
        }
    )}).then((res) => {
      console.log("res",res)
    })
  });

}