SEO案例网站建设价格,网站设计 优帮云,徐州手机网站建设制作,做网站设计电脑买什么高端本好submit组件#xff08;otherSubmit/axiosSubmit#xff09;
一、背景与简介
1、首先我们申请表提交#xff0c;分为【保存】提交与【其他】提交#xff1b;
1.1【保存】提交#xff0c;要求表单必须要有变更#xff0c;DataToJSON默认为dirty#xff08;只转换变更的…submit组件otherSubmit/axiosSubmit
一、背景与简介
1、首先我们申请表提交分为【保存】提交与【其他】提交
1.1【保存】提交要求表单必须要有变更DataToJSON默认为dirty只转换变更的数据包括本身无变更但级联有变更的数据推荐使用dataSet自身的submit
1.2【其他】提交要求表单没有变更有变更需要先进行保存操作否则提交后会刷新数据会导致编辑后的数据丢失例如提交、审批同意、审批拒绝、作废等一般有两种方案 使用数据源的自身的submit—— 操作更加简单但是需要更改dataSet._optionRul修改数据源transport配置中的URL和data提交数据data数据受到数据源的限制且提交时DataToJSON默认为dirty默认是保存行为提交还需要配置 DataSet 数据转化规则不适用于data数据与当前数据源关系不大的申请提交使用axios.post来提交—— 最大的特点就是 申请数据不受数据源的限制 2、本次针对上面的两种方案进行优化并抽离出单独的组件
2.1使用数据源的自身的submit —— otherSubmit
2.2使用axios.post来提交 —— axiosSubmit
二、基本用法
A. 使用数据源的自身的submit —— otherSubmit
有三个参数一是数据源二是提交接口的后缀数据源配置中需要设置支持该写法最后是组织提交数据的类型默认勾选该方法提交成功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 每次提交修改_optionRul为接口名称后缀采用selectedSave默认组织勾选数据头信息需要设置默认勾选请求失败或者抛出异常时会将_optionRul置为undefined否则可能会影响之前的提交操作提交成功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 必传参数数据源、接口URL、申请数据参数提交前进行校验 —— 可以校验是否为保存校验保存时需要有变更其他操作时不能有变更未保存要求无变更可以传入其他数据源集合一起进行校验校验通过后调用接口 —— 重要接口均post需要组织提交数据submitDataqueryString需要在头部拼接上submitData需要用toJSONData()来删除ignore的数据接口调用成功后 自动刷新 —— 可传入自动刷新的参数将自动刷新头信息以其关联的子信息采用PipelineWork保证同步执行操作提交成功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需要组织提交数据submitDataqueryString需要在头部拼接上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
可以在请求成功之后做一些其他操作当提交表单信息时需要默认勾选头信息因post请求dataSet.setQueryParameter不生效需要将queryString拼接到接口后缀
B. 使用axios.post来提交 —— axiosSubmit
提交数据需要组织好后传入组件—— 需要用toJSONData()来删除ignore的数据最好能够把URL 放在同一的地方进行管理当前是放在数据源配置文件中返回一个api对象提交后会自动刷新页面需要传入头信息的请求参数
