量表模拟数据进行选中逻辑处理

src/components/ChronicInfo/index.jsx

@@ -112,7 +112,7 @@ class ChronicInfo extends React.Component{
     })
   }
   showTable(it,parentId){
-    const {formulaResult} = this.props;
+    const {formulaResult,scaleInfo} = this.props;
     // 密西根糖尿病周围神经病评分（MDNS） 为例
     /*const item = {
       id:40744,
@@ -122,9 +122,14 @@ class ChronicInfo extends React.Component{
       id:it.id,
       name:it.name
     }
-    // 判断：store里已经有改该量表就无需重新调接口
-    // formulaResult
-    this.props.getScaleInfo(item);
+    // 判断：store里已经有该量表就无需重新调接口
+    if(scaleInfo&&scaleInfo[it.id]){
+
+    }else{
+      // formulaResult
+      this.props.getScaleInfo(item);
+    }
+    
     this.setState({
       showTable:true,
       tableName:it.name,
@@ -340,6 +345,10 @@ class ChronicInfo extends React.Component{
       <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
       <span className={style['okBtn']} onClick={()=>this.handleSaveAssess()}>确定</span>
     </div>;
+    const scaleFooter = <div className={style['footer']}>
+      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
+      <span className={style['okBtn']} onClick={()=>this.closeTable()}>确定</span>
+    </div>;
     const {chronicMagItem,showList,tableList,scaleInfo,data,saveAssessInfos,chronicDesease} = this.props;
     const {showInfo,showOption,showTable,showAssess,isAssessConfirm,tableName,tableId,parentId} = this.state;
     return <div className={style["tips"]} style={{marginBottom:'15px'}}>
@@ -373,7 +382,7 @@ class ChronicInfo extends React.Component{
                         })}
                       </ul>
               </ConfirmModal>
-              {showTable?<ComplexModal onclose={this.closeTable} footer={footer}
+              {showTable?<ComplexModal onclose={this.closeTable} footer={scaleFooter}
                       title={tableName}
                       icon={tableIcon}
                       top={20}

src/components/ScaleTable/index.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import style from './index.less';
 import mocks from '../../mock/chronicTable.js'
-import { Radio,CheckBtn } from '@commonComp';
- import Information from '../Information'
+import { Radio,CheckBtn ,Notify} from '@commonComp';
+ import Information from '../Information';
+ import {deepClone} from '@utils/tools.js';
 /**
 *量表 具体信息页面
 *title:量表标题/scaleName
@@ -14,21 +15,60 @@ class ScaleTable extends React.Component{
   constructor(props){
     super(props);
     this.state={
-      // originData:props.data && data[1].content|| [],
       originData:{},
-      selecteds:{}
+      selecteds:{},  //当前页面的选中标识，保存后使用select标识
+      valueData:{},
+      start:false,   //点击计算
+      score:{},  //选中的分数
+      totalScore:0  //前端计算结果
     }
   }
-  handleRadio(name,value){
-    const {selecteds,originData} = this.state;
-    const content = originData && originData[1].content;//表格内容
-    const datas = content && JSON.parse(content);//console.log(1111,originData,datas);
+  // handleRadio(groupName,name,value){
+  handleRadio(groupName,name,item){
+    const {selecteds,originData,valueData,score} = this.state;
+    const value = item.detailName;
     this.setState({
-      selecteds:Object.assign({},selecteds,{[name]:value})
+      selecteds:Object.assign({},selecteds,{[name]:value}),
+      score:Object.assign({},score,{[name]:item.score})
+    })
+    const datas = JSON.parse(JSON.stringify(valueData));
+    const group = datas.group;
+    let rows;
+    let details;
+    for(let i=0; i<group.length; i++){
+      if(group[i].groupName==groupName){
+        rows = group[i].rows;
+        break;
+      }
+    }
+    if(rows){
+      for(let j=0; j<rows.length; j++){
+        let row = rows[j].row;
+        for(let k=0;k < row.length; k++){
+          if(row[k].name==name){
+            details = row[k].details;
+            row[k].isSelect = true;
+            break;
+          }
+        }
+      }
+    }
+    if(details){
+      for(let n=0; n<details.length; n++){
+        details[n].select = 0;
+        if(details[n].detailName==value){
+          details[n].select = 1;
+        }
+      }
+    }
+    this.setState({
+      valueData:datas
     })
   }
-  handleCheckbox(name,value){
-    let {selecteds} = this.state;
+  // handleCheckbox(name,value){
+  handleCheckbox(groupName,name,item){
+    let {selecteds,valueData} = this.state;
+    const value = item.detailName;
     selecteds[name]?selecteds[name]:selecteds[name]=[];
     const index = selecteds[name].findIndex((i)=>i==value);
     if(index!=-1){
@@ -39,48 +79,121 @@ class ScaleTable extends React.Component{
     this.setState({
       selecteds:selecteds
     });
+
+    const datas = JSON.parse(JSON.stringify(valueData));
+    const group = datas.group;
+    let rows;
+    let details;
+    for(let i=0; i<group.length; i++){
+      if(group[i].groupName==groupName){
+        rows = group[i].rows;
+        break;
+      }
+    }
+    if(rows){
+      for(let j=0; j<rows.length; j++){
+        let row = rows[j].row;
+        for(let k=0;k < row.length; k++){
+          if(row[k].name==name){
+            details = row[k].details;
+            row[k].isSelect = true;
+            break;
+          }
+        }
+      }
+    }
+    if(details){
+      for(let n=0; n<details.length; n++){
+        if(details[n].detailName==value){
+          if(!details[n].select || details[n].select==0){
+            details[n].select = 1;
+          }else{
+            details[n].select = 0;
+          }
+        }
+      }
+    }
   }
 
-  handleFormula(data){
+  handleFormula(data){//得分计算
     const {tableId,getResult,parentId} = this.props; 
+    const {originData,valueData,score} = this.state; 
+    this.setState({
+      start:true
+    })
+    // 遍历是否有必填项未填的情况 filter:required==1 && !isSelect
+    const group = valueData.group;
+    let unfinish;
+    for(let i=0; i<group.length; i++){
+      let rows = group[i].rows;
+      for(let j=0; j<rows.length; j++){
+        if(rows[j].required==1&& (rows[j].row.filter((it,i)=>{return !it.isSelect})).length>0){
+          unfinish = true;
+          break;
+        }
+      }
+    }
+    if(unfinish){
+      Notify.info("请填写完整后再计算得分");
+      return
+    }
+    // 前端计算分数
+    let totalScore = 0;
+    for(let i in score){
+      totalScore += parseFloat(score[i])
+    }
+    this.setState({
+      totalScore:totalScore
+    })
     const params = {
       type:1,
-      content:data, //选择后的数据--字符串形式
+      content:JSON.stringify(valueData), //选择后的数据--字符串形式
       id:parentId,
       scaleId:tableId,
-    }
-    // console.log("调计算接口");
-    // getResult&&getResult(params);
+    }    
+    // 后台计算接口
+    getResult&&getResult(params);
   }
   componentWillReceiveProps(nextProps){ 
     const {tableId} = this.props;
     if(JSON.stringify(nextProps.scaleInfo) !== '{}'){
       this.setState({
-        originData:nextProps.scaleInfo[tableId]
+        originData:mocks.newData,
+        valueData:nextProps.scaleInfo[tableId].length?mocks.newData:JSON.parse(nextProps.scaleInfo[tableId].content),
       })
     }
   }
-
-  getContent(){
-    const datas = mocks.newData;
-    let {selecteds} = this.state;
-    let content =  datas&&datas.group.map((v,i)=>{
+  componentDidMount(){
+    const {tableId,scaleInfo} = this.props;
+    if(scaleInfo&&scaleInfo[tableId]){
+      this.setState({
+        // originData:mocks.newData,
+        valueData:scaleInfo[tableId].length?mocks.newData:JSON.parse(scaleInfo[tableId].content)
+      })
+    }
+    
+  }
+  getContent(){ 
+    let {selecteds,originData,valueData,start} = this.state;
+    // const datas = mocks.newData;
+    const datas = valueData&&valueData.group?valueData:mocks.newData;
+    let content =  datas&&datas.group&&datas.group.map((v,i)=>{
                 return <div className={style['group']}>
                   <p className={style['groupName']}>{v.groupName}</p>
                   {v.rows&&v.rows.map((it,ind)=>{
                     return <div>
                       {it.row.map((item,index)=>{
                         if(item.controltype==0){
-                          return <div className={style['block']}>
+                          return <div className={style['block']} style={{border:it.required==1&&!item.isSelect&&start?'1px solid #f00':'none'}}>
                               <p className={style['miniName']}>{item.name}</p>
                               {item.details&&item.details.map((vv,ii)=>{
                                 return <div className={style['item']}>
-                                      <Radio label={vv.detailName}
-                                         isSelect={selecteds[item.name]==vv.detailName}
-                                         handleClick={this.handleRadio.bind(this,item.name,vv.detailName)}>
-                                      </Radio>
-                                      {vv.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
-                                  </div>
+                                        <Radio label={vv.detailName}
+                                           isSelect={vv.select==1||selecteds[item.name]==vv.detailName}
+                                           handleClick={this.handleRadio.bind(this,v.groupName,item.name,vv)}>
+                                        </Radio>
+                                        {vv.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
+                                    </div>
                               })}
                               
                             </div>
@@ -90,8 +203,8 @@ class ScaleTable extends React.Component{
                                   {item.details&&item.details.map((vv,ii)=>{
                                     return <CheckBtn value={vv.detailName}
                                                     label={vv.detailName}
-                                                    isSelect={selecteds[v.name]&&selecteds[item.name].includes(vv.detailName)}
-                                                    handleClick={this.handleCheckbox.bind(this,item.name,vv.detailName)}>
+                                                    isSelect={vv.select==1||selecteds[item.name]&&selecteds[item.name].includes(vv.detailName)}
+                                                    handleClick={this.handleCheckbox.bind(this,v.groupName,item.name,vv)}>
                                           </CheckBtn>
                                     {vv.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
                                   })}
@@ -101,7 +214,7 @@ class ScaleTable extends React.Component{
                       })}
                     </div>
                   })}
-                  {v.groupCalculate.isShow=='1(1-显示计算结果,0-不显示计算结果)'?<p className={style['subTotal']}>
+                  {v.groupCalculate.isShow==1?<p className={style['subTotal']}>
                     <span>计分</span>
                     <span>{v.groupCalculate.result.value}</span>
                   </p>:''}  
@@ -113,11 +226,13 @@ class ScaleTable extends React.Component{
   render(){
     const {title,scaleInfo,tableId} = this.props;
     const data = scaleInfo[tableId];
-    let {selecteds} = this.state;
-    const content = data && data[1].content;//表格内容
-    const preContent = data && data[0].content;//表前文字
-    const footContent = data && data[2].content; //表后文字
+    let {selecteds,originData,totalScore} = this.state;
+    // const content = data && data[1].content;//表格内容
+    // const preContent = data && data[0].content;//表前文字
+    // const footContent = data && data[2].content; //表后文字
     // const datas = content && JSON.parse(content);
+    const preContent = '';
+    const footContent ='';
     const datas = mocks.newData;
     return <div className={style['tableBox']} id="printcontent">
             <div className={style['printShow']}>
@@ -126,64 +241,12 @@ class ScaleTable extends React.Component{
             {/*<h1>{title}</h1>*/}
             <h1>{datas.scaleName}</h1>
             <div dangerouslySetInnerHTML={{__html:preContent}} className={style['textlh']}></div>
-            {/*<table className={style['table']}>
-              <thead>
-                <tr>
-                  {datas&&datas.title.map((v,i)=>{
-                    return <td>{v.name}</td>
-                  })}  
-                </tr>
-              </thead>
-              <tbody>
-                {datas&&datas.rows.map((v,i)=>{
-                    return <tr>
-                    <td>{v.name}</td>
-                    <td>
-                      {v.controltype==0?v.details.map((it,index)=>{
-                          return <td className={style['block']}>
-                            <Radio label={it.detailName}
-                                   id={it.id}
-                                   isSelect={selecteds[v.name]==it.detailName}
-                                   handleClick={this.handleRadio.bind(this,v.name,it.detailName)}>
-                            </Radio>
-                            {it.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
-                          </td>
-                        }):v.details.map((it,index)=>{
-                          return <td className={style['block']}>
-                              <CheckBtn id={it.detailName}
-                                        value={it.detailName}
-                                        label={it.detailName}
-                                        isSelect={selecteds[v.name]&&selecteds[v.name].includes(it.detailName)}
-                                        handleClick={this.handleCheckbox.bind(this,v.name,it.detailName)}>
-                              </CheckBtn>
-                            </td>
-                        })
-                    }
-                    </td>
-                    <td>
-                      {v.details.map((it,index)=>{
-                        return <td className={style['block']}>{it.score}</td>
-                      })}
-                    </td>
-                    <td></td>
-                    </tr>
-                  })} 
-              </tbody>
-              <tfoot>
-                <tr>
-                  <td colspan="4" className={style['sum']}>
-                  总计：<i>95</i>
-                  <span className={style['formulaBtn']} onClick={this.handleFormula.bind(this,datas)}>计算</span>
-                  </td>
-                </tr>
-              </tfoot>
-            </table>*/}
             <div className={style['textContent']}>
               {this.getContent()}
               <div className={style['total']}>
                 <span>总分：</span>
-                <span>{datas.calculate.result.value||'54' +'分'}</span>
-                <span className={style['totalBtn']}>得分</span>
+                <span>{datas.calculate.result.value||totalScore||'54分'}</span>
+                <span className={style['totalBtn']} onClick={this.handleFormula.bind(this)}>得分</span>
               </div>
             </div>
             <div dangerouslySetInnerHTML={{__html:footContent}} className={style['textlh']}></div>

src/components/ScaleTable/index.less

@@ -1,11 +1,12 @@
 .tableBox{
   // height: 690px;
   overflow-y: auto;
-  padding: 15px;
+  // padding: 15px;
+  padding: 30px;
   h1{
     font-size: 16px;
     font-weight: bold;
-    margin: 20px 0;
+    margin: 10px 0 30px;
     text-align: center;
   }
 }
@@ -52,9 +53,9 @@
       font-weight: normal;
     }
   }
-  .block{
-    display: block;
-  }
+  // .block{
+  //   display: block;
+  // }
 }
 strong{
   font-weight: bold;
@@ -74,9 +75,16 @@ strong{
       display: inline-block;
       margin-right: 24px;
     }
-    .miniName{
-      margin-top: 25px;
+    .block{
+      margin-top: 20px;
+      padding-top: 5px;
+    }
+    .redBorder{
+      border: 1px solid #f00;
     }
+    // .miniName{
+    //   margin-top: 25px;
+    // }
   }
   .groupName{
     font-size: 14px;
@@ -89,6 +97,7 @@ strong{
     line-height: 49px;
     border-top: 1px solid #EBEBEB;
     text-align: right;
+    margin-top: 10px;
   }
   .total{
     height: 72px;

src/containers/ScaleTable.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import ScaleTable from '@components/ScaleTable';
-import {getFormulaResult} from '@store/async-actions/fetchModules.js'
+import {getFormulaResult} from '@store/async-actions/fetchModules.js';
+import {SET_SCALE_INFO} from '@store/types/pushMessage';
 
 function mapStateToProps (state){
   return {
@@ -12,7 +13,12 @@ function mapStateToProps (state){
 function mapDispatchToProps (dispatch){
   return {
     getResult(obj){//计算结果
-      dispatch(getFormulaResult(obj));
+      // dispatch(getFormulaResult(obj));
+      dispatch({
+        type:SET_SCALE_INFO,
+        data:obj,
+        id:obj.scaleId
+      })
     }
   }
 }

src/mock/chronicTable.js

@@ -117,7 +117,7 @@ module.exports = {
                         "column":"score"
                     }
                 ],
-                "isShow":"1(1-标题展示,0-标题不展示)"
+                "isShow":"1"
             },
             "groupCalculate":{
                 "result":{
@@ -125,12 +125,12 @@ module.exports = {
                     "unit":"",
                     "text":""
                 },
-                "isShow":"1(1-显示计算结果,0-不显示计算结果)"
+                "isShow":"1"
             },
             "rows":[
                 {
-                    "mutex":"0(0-非互斥,1-互斥)",
-                    "required":"1(1-必填项,0-选填项)",
+                    "mutex":"0",
+                    "required":"1",
                     "row":[
                         {
                             "coefficent":1,
@@ -189,7 +189,7 @@ module.exports = {
                     "unit":"",
                     "text":""
                 },
-                "isShow":"1(1-显示计算结果,0-不显示计算结果)"
+                "isShow":"1"
             },
             "rows":[
                 {
@@ -248,7 +248,7 @@ module.exports = {
                     "unit":"",
                     "text":""
                 },
-                "isShow":"1(1-显示计算结果,0-不显示计算结果)"
+                "isShow":"1"
             },
             "rows":[
                 {
@@ -395,7 +395,7 @@ module.exports = {
                     "unit":"",
                     "text":""
                 },
-                "isShow":"1(1-显示计算结果,0-不显示计算结果)"
+                "isShow":"1"
             },
             "rows":[
                 {

src/store/actions/mainSuit.js

@@ -683,7 +683,7 @@ export const clearMainSuit = (state,action)=>{//回读和清除
   if(action.symptomFeature !== undefined){//清除分词数据
     res.symptomFeature.featureData = action.symptomFeature;
   }
-  console.log(res,action);
+  // console.log(res,action);
   return res;
 }
 

src/store/async-actions/pushMessage.js

@@ -172,7 +172,7 @@ export const getScaleInfo = (it)=>{
                 dispatch({
                     type: SET_SCALE_INFO,
                     data: result.data.scale,
-                    table:it
+                    id:it.id
                 })
             }
         }).catch((e) => {

src/store/reducers/pushMessage.js

@@ -69,11 +69,11 @@ export default function(state = initState, action) {
     case SET_CHRONIC_PUSHS:
       res.chronicPushItems = action.data;
       return res;
-    case SET_SCALE_INFO://量表内容
+    case SET_SCALE_INFO://量表内容-量表id
       // res.scaleInfo = action.data;
-      res.scaleInfo = Object.assign({},res.scaleInfo,{[action.table.id]:action.data});;
+      res.scaleInfo = Object.assign({},res.scaleInfo,{[action.id]:action.data});
       return res;
-    case SAVE_TABLE_RESULT://量表计算结果
+    case SAVE_TABLE_RESULT://量表计算结果-外层疾病id
       res.formulaResult = Object.assign({},res.formulaResult,{[action.id]:action.data});
       return res;
     default: