submit组件（otherSubmit/axiosSubmit）

一、背景与简介

1、首先我们申请表提交，分为【保存】提交与【其他】提交；

1.1【保存】提交，要求表单必须要有变更，DataToJSON默认为dirty（只转换变更的数据，包括本身无变更但级联有变更的数据），推荐使用dataSet自身的submit；

1.2【其他】提交，要求表单没有变更，有变更需要先进行保存操作（否则提交后会刷新数据，会导致编辑后的数据丢失），例如提交、审批同意、审批拒绝、作废等，一般有两种方案：

1. 使用数据源的自身的submit；—— 操作更加简单，但是需要更改dataSet._optionRul，修改数据源transport配置中的URL和data提交数据（data数据受到数据源的限制），且提交时DataToJSON默认为dirty，默认是保存行为，提交还需要配置 DataSet 数据转化规则，不适用于data数据与当前数据源关系不大的申请提交；
2. 使用axios.post来提交；—— 最大的特点就是 申请数据不受数据源的限制

2、本次针对上面的两种方案，进行优化并抽离出单独的组件；

2.1使用数据源的自身的submit —— otherSubmit

2.2使用axios.post来提交 —— axiosSubmit

二、基本用法

A. 使用数据源的自身的submit —— otherSubmit

1. 有三个参数，一是数据源，二是提交接口的后缀（数据源配置中需要设置支持该写法），最后是组织提交数据的类型（默认勾选）；
2. 该方法，提交成功return true，失败或者抛出异常 return false；

import { otherSubmit } from '@common/utils/comMethod';Modal.confirm({title: '提示',children: message,onOk: async () => {const submitSuccess = await otherSubmit(tableDS, `hidden?hiddenViewFlag=${isHidden ? '是' : '否'}`);if (submitSuccess) { //* 请求成功后tableDS.unSelectAll(); //* 取消全选当前页tableDS.clearCachedSelected(); //* 清除缓存的选中记录}},});

B. 使用axios.post来提交 —— axiosSubmit

import { axiosSubmit } from "@common/utils/comMethod/axiosSubmit";const handleApprove = (type) => { //? 审批通过、审批拒绝，触发const { selected = [] } = chainLineDS;if(!selected.length) {commonNotification('warning', intl.get('cice.common.massage.no.line').d('请勾选关联交易行信息！'));return;}const foreignChainLineIdList = selected.map(selectedRecord => selectedRecord.get('foreignChainLineId'));const apiList = api(); //* 获取接口列表axiosSubmit({headDS: chainBasicInfoDS,dataSetArr: [ chainLineDS ],// submitData: {foreignChainLineIds: foreignChainLineIdList.join(',')},url: apiList.updateApproveStatus + `?approveStatus=${type}&foreignChainLineIds=${foreignChainLineIdList.join(',')}`,refreshParam: { foreignChainId },});
}

三、组件代码详情

A. 使用数据源的自身的submit —— otherSubmit

文件地址：hzero-front/packages/ciec-front-common/src/utils/comMethod/index.tsx

1. 每次提交修改_optionRul为接口名称后缀；
2. 采用selectedSave，默认组织勾选数据，头信息需要设置默认勾选；
3. 请求失败或者抛出异常时，会将_optionRul置为undefined，否则可能会影响之前的提交操作；
4. 提交成功return true，失败或者抛出异常 return false；

import { saveMassage } from "@common/utils/ciecUtils";
import { DataSet } from 'choerodon-ui/pro';/*** 自定义dataToJSON的提交* @param dataSet 数据源* @param type dataToJSON的类型，默认勾选提交* @returns 返回submit()的返回值*/
const customSubmit = async (dataSet: DataSet, type: any = 'selected') => {const oldJSON = dataSet.dataToJSON;//@ts-ignoredataSet.dataToJSON = type;const backResult = await dataSet.submit();dataSet.dataToJSON = oldJSON;return backResult;
};/*** 其他提交，包括设置接口名称，组织提示语，自动刷新，非保存提交* @param dataSet 数据源* @param optionRul 接口名称* @param type dataToJSON的类型，默认勾选提交* @returns 接口是否调用成功*/
const otherSubmit = async (dataSet: DataSet, optionRul: string, type: any = 'selected') => { //* 其他提交//@ts-ignoredataSet._optionRul = optionRul;try {const backValue = await customSubmit(dataSet, type);if (saveMassage(backValue)) { //* 提交成功后，刷新页面dataSet.query(dataSet.currentPage);//@ts-ignoredataSet._optionRul = undefined;return true;}} catch (error) {//@ts-ignoredataSet._optionRul = undefined;}return false;
}export {customSubmit,otherSubmit,
};

B. 使用axios.post来提交 —— axiosSubmit

文件地址：hzero-front/packages/ciec-front-common/src/utils/comMethod/axiosSubmit.tsx

1. 必传参数数据源、接口URL、申请数据参数；
2. 提交前进行校验 —— 可以校验是否为保存校验，保存时需要有变更；其他操作时不能有变更未保存（要求无变更），可以传入其他数据源集合，一起进行校验；
3. 校验通过后调用接口 —— 重要接口均post，需要组织提交数据submitData，queryString需要在头部拼接上，submitData，需要用toJSONData()来删除ignore的数据，
4. 接口调用成功后 自动刷新 —— 可传入自动刷新的参数，将自动刷新头信息，以其关联的子信息
5. 采用PipelineWork，保证同步执行操作；
6. 提交成功return true，失败或者抛出异常 return false；

import intl from 'utils/intl';
import axios from 'axios';
import { PipelineWork } from "@common/utils/utils";
import { commonNotification, commonQuery } from "@common/utils/ciecUtils";
import { commonValidateUnSave } from "./commonValidateUnSave";
import { DataSet, } from 'choerodon-ui/pro';
import { DataSetStatus } from 'choerodon-ui/dataset/data-set/enum';/*** 使用axios.post() 来模拟 tableDs.submit()，* 1、提交前进行校验 —— 可以校验是否为保存校验，保存时需要有变更；其他操作时不能有变更未保存（要求无变更）* 2、校验通过后调用接口 —— 重要接口均post，需要组织提交数据submitData，queryString需要在头部拼接上，submitData，需要用toJSONData()来删除ignore的数据，注意：toJSONData()受 DataSet 的 dataToJSON 属性影响* 3、接口调用成功后 自动刷新 —— 可传入自动刷新的参数，将自动刷新头信息，以其关联的子信息* @param params 功能各个步骤中需要的各类参数*/
interface axiosSubmitProp {//? 头信息 数据源headDS: DataSet;//? 需要 额外校验是否存在新增修改数据的数据源 集合dataSetArr?: DataSet[];//? axios的请求数据submitData?: any;//? axios的请求URLurl: string;//? 请求后自动刷新的参数refreshParam?: object;//? 是否保存校验，保存时需要有变更；其他操作时不能有变更未保存（要求无变更）isSave?: boolean;
}
export const axiosSubmit = async (params: axiosSubmitProp) => {const { headDS, dataSetArr = [], submitData, url, refreshParam, isSave } = params;// 校验是否有新增或修改const validateUnSave = () => {return commonValidateUnSave(headDS, dataSetArr, isSave);};// 调用接口const doSubmitPass = async () => {headDS.status = DataSetStatus.submitting;// 使用try-catch是因为如果这个接口调用抛异常，状态一直处于submitting，就无法继续操作了try {const res: any = await axios.post(url, submitData);headDS.status = DataSetStatus.ready;if (res && res.failed) {commonNotification('error', res.message || intl.get('cice.common.massage.notification.error').d('操作失败'));return false;}commonNotification('success', intl.get('cice.common.massage.submit.success').d('操作成功'));return true;} catch (error) {// 接口抛错时，提示并重置数据源状态//@ts-ignorecommonNotification('error', error.message || intl.get('cice.common.massage.notification.error').d('操作失败'));headDS.status = DataSetStatus.ready;return false;}};// 重新查询const refresh = async () => {await commonQuery(headDS, refreshParam);return true;};PipelineWork.init().put({ func: validateUnSave }).put({ func: doSubmitPass }).put({ func: refresh }).do();
}

四、使用注意事项

A. 使用数据源的自身的submit —— otherSubmit

1. 可以在请求成功之后，做一些其他操作；
2. 当提交表单信息时，需要默认勾选头信息；因post请求dataSet.setQueryParameter不生效，需要将queryString拼接到接口后缀；

B. 使用axios.post来提交 —— axiosSubmit

1. 提交数据需要组织好后传入组件；—— 需要用toJSONData()来删除ignore的数据；
2. 最好能够把URL 放在同一的地方进行管理，当前是放在数据源配置文件中，返回一个api对象；
3. 提交后会自动刷新页面，需要传入头信息的请求参数；