学习成果一

多个tab页公用一个按钮 && 一个Button的功能提取成两个Button

需求

原：一个提交报告按钮，先调签章接口再进行提交报告;一个提交报告按钮将所以报告都进行提交
现：提交报告按钮和签章分开操作，提交报告只能提交报告，单独实现一个签名；一个提交报告按钮将当前报告都进行提交

功能实现

签名：调签章接口，若成功，显示图片；失败，不显示。
按钮：先进行提交报告，才可签名，签完名成功之后打印按钮可用。若签名失败，判断第二个开关(判断是否需要签名)是否打开，若打开则必须签名成功可用，签名失败打印按钮不可用。若没有打开则签名签没签成功都可打印。

代码实现

1.实现签章功能

点击签章按钮，掉第三方签章接口RWApp.certificateReport，返回一个json。根据result的返回值，判断第三方接口请求成功\失败。

  const result = await RWApp.certificateReport({
            doctorID: ID,
            operationID: xxxID,
            report: JSON.stringify(data)
        });

2.实现按钮可用不可用

//提交报告
handleSubmitReport = ()=> {
   const { reportTemplate:{ currentSelectTemplate, submitedTemplate }}=this.props;
   if(submitedTemplate){
      submitedTemplate.push(currentSelectTemplate)
   }
   this.props.dispatch({
      type:'reportTemplate/changState',
      payload:{
       submitedTemplate
      }
   })
}
//取消报告
handleCancelReport = () => {
   const { reportTemplate:{ currentSelectTemplate, submitedTemplate }}=this.props;
   let submitList=[];
   //过滤掉当前报告的名字
   submitList=submitedTemplate.filter(item => item != currentSelectTemplate);
   this.props.dispatch({
     type:'reportTemplate/changeState',
     payload:{
       submitedTemplate:submitList
     }
   });
}
//签名
submitSignature = () => {
  const { reportTemplate:{ currentSelectTemplate, signedList }}=this.props;
  if(signedList){
    //isSigned用于判断签名成功与否，成功为1 失败为0
    signedList.push({tempName:currentSelectTemplate,isSigned:0/1})
  }
  this.props.dispatch({
     type:'reportTemplate/changeState',
     payload:{
       signedList
     }
   });
}
....
const { reportTemplate:{currentSelectTemplate,submitedTemplate,signedList}}=this.props;
const footers=[];
//签名
let signDisable=true;
if( submitedTemplate && submitedTemplate.includes(currentSelectTemplate) ){
  signDisable=false;
}

//打印
let printDisable=false;
if(signedList && signedList.length>0){
 if(signatureVerify === 'true'){//传说中的第二个开关，判断签名失败后打印按钮可用不可用
    let obj = signedList.find(item=> item.tempName==currentSelectTemplate && item.isSigned == 1);
    if(!obj){
       printDisable=true;
    }
 }else{
    let obj = signedList.find(item=> item.tempName==currentSelectTemplate);
    if(!obj){
     printDisable=true;
    }
 }
}else {
  printDisable=true;
}


footers.push(<Button disable={signDisable} onClick={this.submitSignature}>签名</Button>);
footers.push(<Button disable={printDisable} >打印</Button>)
if(submitedTemplate.includes(currentSelectTemplate)){
  footers.push(<Button onClick={this.handleCancelReport}>取消报告</Button>);
}else{
  footers.push(<Button onClick={this.handleSubmitReport}>提交报告</Button>);
}

model层
*getReportByOperationID({ payload, callback }, { call, put, select }) {
 ...
 const { submitedTempList, signedList } = yield select(state => state.reportTemplate);
 const response = yield call(getReportByOperationID, payload);
 if(response && response.status === 200){
   if (response.resultMap.data) {
      const datas=response.resultMap.data;
      const firstTemplate = datas[0] && datas[0].reportTemplate || '';
      for (let i = 0; i < datas.length; i += 1) {
            if (datas[i] && datas[i].reportPath) {
              datas[i].isSubmited = true;
              submitedTempList.push(datas[i].reportTemplate);
            }
            if (datas[i] && (datas[i].isSignature || datas[i].isSignature == 0)) {
              signedList.push({ tempName: datas[i].reportTemplate, isSigned: datas[i].isSignature });
            }
          }
          yield put.resolve({
            type: 'changeState',
            payload: {
              viewReportData: datas,
              reportTempEdit,
              submitedTempList,
              signedList,
              currentSelectedTemplate: firstTemplate,
            }
          });
   }
 }
}

总结

1.model层掉接口返回数据，可以改变state里面的值。

仅供自己学习使用