newICSS/src/components/ScaleTable/index.jsx

import React from 'react';
import style from './index.less';
import mocks from '../../mock/chronicTable.js'
import { Radio,CheckBtn ,Notify} from '@commonComp';
 import Information from '../Information';
 import {deepClone} from '@utils/tools.js';
 import {getFormulaResult} from '@store/async-actions/fetchModules.js';
/**
*量表 具体信息页面
*title:量表标题/scaleName
*data:量表内容:scaleName量表标题，calculate量表计算结果，group分组，
*
*
**/
class ScaleTable extends React.Component{
  constructor(props){
    super(props);
    this.state={
      selecteds:{},  //当前页面的选中标识，保存后使用select标识
      valueData:{},
      start:false,   //点击计算
      scaleResult1:null
    }
    this.handleFormula = this.handleFormula.bind(this);
  }
  
  handleRadio(groupName,name,item){
    const {selecteds,valueData} = this.state;
    const value = item.detailName;
    this.setState({
      selecteds:Object.assign({},selecteds,{[name]:value})
    })
    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(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){
      selecteds[name].splice(index,1);
    }else{
      selecteds[name].push(value);
    }
    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;
          }
        }
      }
    }
    this.setState({
      valueData:datas
    })
  }

  handleFormula(data){//得分计算
    const {tableId,getResult,parentId,scaleInfo,parentIndex} = this.props; 
    const {valueData} = 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
    }
    // 将计算结果存在state，防止页面跳动问题
    const params = {
      type:1,
      data:valueData,
      pId:parentId,
      id:tableId,
      pIndex:parentIndex
    }
    const that = this;
    getFormulaResult(params).then((res)=>{
      if(+res.data.code==0){
        that.setState({
          scaleResult1:res.data.data
        })
      }
    })
  }
  componentWillReceiveProps(nextProps){ 
    const {tableId} = this.props;
    if(JSON.stringify(nextProps.scaleInfo) !== '{}'){
      this.setState({
        // valueData:nextProps.scaleInfo[tableId].length?mocks.newData:JSON.parse(nextProps.scaleInfo[tableId].content),
        valueData:nextProps.scaleInfo[tableId]?JSON.parse(nextProps.scaleInfo[tableId][1].content):{},
      })
    }
  }
  componentDidMount(){
    const {tableId,scaleInfo} = this.props;
    if(scaleInfo&&scaleInfo[tableId]){
      this.setState({
        // valueData:scaleInfo[tableId].length?mocks.newData:JSON.parse(scaleInfo[tableId].content)
        valueData:JSON.parse(scaleInfo[tableId][1].content)
      })
    }  
  }
  componentWillUnmount(){
    // 储存计算结果和选择后的data
    const {tableId,getResult,parentId,parentIndex,scaleInfo} = this.props; 
    const {valueData,scaleResult1} = this.state; 
    // 替换表格内容
    let allDatas = scaleInfo[tableId]?JSON.parse(JSON.stringify(scaleInfo[tableId])):'' ;
    if(allDatas){
      allDatas[1].content = JSON.stringify(valueData);
    }
     
     if(scaleResult1){
      const params = {
        type:1,
        data:scaleResult1,
        id:tableId,
        pIndex:parentIndex
      }
      getResult&&getResult({params,allDatas});
     }  
  }
  getContent(){ 
    let {selecteds,valueData,start,scaleResult1} = this.state;
    const {tableId,formulaResult} = this.props;
    const scaleResult = scaleResult1 || formulaResult&&formulaResult[tableId]; //量表计算结果
    // const datas = valueData&&valueData.group?valueData:mocks.newData;
    const datas = valueData&&valueData.group?valueData:'';
    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']} 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={vv.select==1||selecteds[item.name]==vv.detailName}
                                           handleClick={this.handleRadio.bind(this,v.groupName,item.name,vv)}>
                                        </Radio>
                                        {vv.state==1?<span className={style['recomand']}>（智能推荐）</span>:''}
                                    </div>
                              })}
                              
                            </div>
                          }else{
                            return <div className={style['block']}>
                                <p className={style['miniName']}>{item.name}</p>
                                  {item.details&&item.details.map((vv,ii)=>{
                                    return <div className={style['item']}>
                                    <CheckBtn value={vv.detailName}
                                                    label={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 className={style['recomand']}>（智能推荐）</span>:''}
                                    </div>
                                  })}
                            </div>
                          }
                        
                      })}
                    </div>
                  })}
                  {v.groupCalculate.isShow==1?<p className={style['subTotal']}>
                    <span>计分：</span>
                    {/*<span>{v.groupCalculate.result.value}</span>*/}
                    <span>{scaleResult&&scaleResult.group.map((m,ii)=>{
                      if(m.groupName==v.groupName){
                        return m.groupCalculate.result.value;
                      }
                    })}</span>
                  </p>:''}  
                </div>
              })
    return content;
  }

  render(){
    const {title,scaleInfo,tableId,formulaResult} = this.props;
    const data = scaleInfo[tableId];
    let {selecteds,scaleResult1} = 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 scaleResult = scaleResult1 || formulaResult&&formulaResult[tableId]; //量表计算结果
    return <div className={style['tableBox']} id="printcontent">
            <div className={style['printShow']}>
              <Information></Information>
            </div> 
            <h1>{datas?datas.scaleName:''}</h1>
            <div dangerouslySetInnerHTML={{__html:preContent}} className={style['textlh']}></div>
            <div className={style['textContent']}>
              {this.getContent()}
              {datas&&datas.noCalc==0?<div className={style['total']}>
                    <span>总分：</span>
                    <span>{scaleResult&&scaleResult.calcalculate&&scaleResult.calcalculate.result&&scaleResult.calcalculate.result.value +' '+ scaleResult.calcalculate.result.text||''}</span>
                    <span className={style['totalBtn']} onClick={this.handleFormula}>得分</span>
                  </div>:''}
            </div>
            <div dangerouslySetInnerHTML={{__html:footContent}} className={style['textlh']}></div>
          </div>
  }
}
export default ScaleTable;