可能结果处理及计算公式结果样式调整

src/components/ChronicInfo/index.jsx

@@ -41,8 +41,8 @@ class ChronicInfo extends React.Component{
       tableName:'' , //点击的量表名称
       tableId:null ,//点击的量表id
       parentId:null ,
-      radioVal:'',
-      possible:'',  //可能结果选择内容
+      radioVal:{},  //可能结果选择内容
+      possible:{},  //可能结果
     };
     this.showInfo = this.showInfo.bind(this);
     this.closeInfo = this.closeInfo.bind(this);
@@ -155,17 +155,26 @@ class ChronicInfo extends React.Component{
     });
 
   }
-  handleRadio(parent,index,name){
+  handleForRadio(item,parent,pIndex){//计算公式
+
+  }
+  confirmFormula(){//计算公式确定
+
+  }
+  handleRadio(item,parent,pIndex){//可能结果
+    let {radioVal} = this.props;
     this.setState({
-      radioVal:name
+      radioVal:Object.assign({},radioVal,{[pIndex]:item.detailName})
     })
   }
-  confirmOption(){//可能结果确定
-    const {radioVal} = this.state;
+  confirmOption(parent,pIndex){//可能结果确定
+    const {radioVal,possible} = this.state;
     this.setState({
-      possible:radioVal,
+      possible:Object.assign({},possible,radioVal),
+      radioVal:Object.assign({},possible,radioVal),//不设置radioVal只有最近一次选中的值
       optionId:null
     })
+    
   }
   getDetail(){
     const {data,indexs} = this.props;
@@ -213,41 +222,65 @@ class ChronicInfo extends React.Component{
                                 icon={allTableIcon}
                                 show={formulaId&&formulaId==v.id?true:false}
                                 close={this.closeFormula}
+                                confirm={this.confirmFormula.bind(this,v,i)}
                                 footer="true">
-                                {it.content.details.map((item,i)=>{
+                                <table>
+                                {it.content.details.map((item,idd)=>{
                                     if(item.controlType==0){//单选
-                                      return <div>
-                                        <span>{item.name}</span>
-                                        {item.details.map((ii,ind)=>{
-                                          return <label>
-                                            <input type="radio" name={item.name} />{ii.detailName}
-                                          </label>
-                                        })}
-                                      </div>
+                                      return <tr>
+                                        <td>
+                                          <span>{'请选择'+item.name+'：'}</span>
+                                        </td>
+                                        <td>
+                                          {item.details.map((ii,ind)=>{
+                                            return <div className={style["chooseItem"]}>
+                                                    <Radio label={ii.detailName}
+                                                             isSelect={radioVal[i]==ii.detailName}
+                                                             handleClick={this.handleForRadio.bind(this,ii,v,i)}>
+                                                      </Radio>
+                                                  </div>
+                                          })}
+                                        </td>  
+                                      </tr>
                                     }else if(item.controlType==1){//多选
 
                                     }else if(item.controlType==2){//输入框
-                                      return <div>
-                                        <span>{item.name}</span>
-                                        <input type="text" placeholder="请输入"/>
-                                      </div>
+                                      return <tr>
+                                        <td>
+                                          <span>{'请输入'+item.name+'：'}</span>
+                                        </td>
+                                        <td>
+                                          <input type="text" placeholder="请输入"/>
+                                        </td>
+                                        
+                                      </tr>
                                     }else if(item.controlType==3){//下拉
-                                      return <div>
-                                        <span>{item.name}</span>
-                                        {item.details.map((ii,ind)=>{
-                                          return <label>
-                                            <input type="radio" name={item.name} />{ii.detailName}
-                                          </label>
-                                        })}
-                                      </div>
+                                      return <tr>
+                                        <td>
+                                          <span>{'请选择'+item.name+'：'}</span>
+                                        </td>
+                                        <td>
+                                          {item.details.map((ii,ind)=>{
+                                            return <div className={style["chooseItem"]}>
+                                                    <Radio label={ii.detailName}
+                                                             isSelect={radioVal[i]==ii.detailName}
+                                                             handleClick={this.handleForRadio.bind(this,ii,v,i)}>
+                                                      </Radio>
+                                                  </div>
+                                          })}
+                                        </td>
+                                        
+                                      </tr>
                                     }
                                 })}
+                                </table>
+                                <div className={style["forMulBtn"]}>计算</div>
                             </MiniToast>
                           </div>
                         }else if(it.type==3){
                           return <div className={style["marTop"]}>
                             <span>可能结果：</span>
-                            <span onClick={this.showOption.bind(this,v.id)} className={style["blue"]}>{possible?possible:'请选择'}</span>
+                            <span onClick={this.showOption.bind(this,v.id)} className={style["blue"]}>{possible[i]?possible[i]:'请选择'}</span>
                             <img src={level1} />
                             {indexs[i]&&indexs[i].includes(j)?<span className={style["addResult"]}>
                                   <img src={added} />
@@ -261,15 +294,15 @@ class ChronicInfo extends React.Component{
                                 icon={checkIcon}
                                 show={optionId&&optionId==v.id?true:false}
                                 close={this.closeOption}
-                                confirm={this.confirmOption.bind(this)}
+                                confirm={this.confirmOption.bind(this,v,i)}
                                 footer="true">
                                 <div className={style["infoOption"]}>
                                   <span>是否贫血：</span>
-                                  {it.content.details&&it.content.details.map((lis,i)=>{
+                                  {it.content.details&&it.content.details.map((lis,ind)=>{
                                     return <div className={style["chooseItem"]}>
                                       <Radio label={lis.detailName}
-                                               isSelect={radioVal==lis.detailName}
-                                               handleClick={this.handleRadio.bind(this,v,i,lis.detailName)}>
+                                               isSelect={radioVal[i]==lis.detailName}
+                                               handleClick={this.handleRadio.bind(this,lis,v,i)}>
                                         </Radio>
                                     </div>
                                   })}

src/components/ChronicInfo/index.less

@@ -128,6 +128,7 @@
       }
       .blue{
         color:#3B9ED0;
+        cursor: pointer;
       }
       .mainList{
         .listBtn{
@@ -248,4 +249,14 @@
   .chooseItem{
     display: inline-block;
     margin-right: 10px;
+  }
+  .forMulBtn{
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    color: #fff;
+    background: #DBDBDB;
+    border-radius: 4px;
+    cursor: auto;
+    margin-top: 15px;
   }

src/containers/ChronicInfo.js

@@ -4,7 +4,7 @@ import {SHOW_TABLE_LIST,HIDE_TABLE_LIST} from '@store/types/pushMessage';
 import {getTableList,getScaleInfo,getTips} from '../store/async-actions/pushMessage';
 import {ADD_ASSESS_ITEMS,SET_SAVE_ASSESS_DATA} from "@types/assessResult";
 
-function mapStateToProps(state){
+function mapStateToProps(state){//console.log(999,state)
   return{
     chronicMagItem: state.diagnosticList.chronicMagItem,
     questionId: state.diagnosticList.clickDiag,