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-ignore
  dataSet.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-ignore
  dataSet._optionRul = optionRul;
  try {
    const backValue = await customSubmit(dataSet, type);
    if (saveMassage(backValue)) { //* 提交成功后，刷新页面
      dataSet.query(dataSet.currentPage);
      //@ts-ignore
      dataSet._optionRul = undefined;
      return true;
    }
  } catch (error) {
    //@ts-ignore
    dataSet._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的请求URL
  url: 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-ignore
      commonNotification('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. 提交后会自动刷新页面，需要传入头信息的请求参数；