评估中量表、结果等弹窗

src/components/AssessResult/ScaleItem/index.jsx

@@ -1,6 +1,14 @@
 import React, { Component } from "react";
 import style from "../index.less";
 import deleteIcon from '@common/images/delete.png';
+import tableIcon from '@common/images/table.png';
+import printIcon from '@common/images/team.png';
+import allTableIcon from '@common/images/all-table.png';
+import level1 from "@common/images/级别1.png";
+import checkIcon from '@common/images/check.png';
+import {ComplexModal,MiniToast,Radio} from '@commonComp';
+import ScaleTable from '@containers/ScaleTable';
+import $ from "jquery";
 /**
  * 来源于页面选择
  *
@@ -9,20 +17,161 @@ class ScaleItem extends Component {
   constructor(props) {
     super(props);
     this.$area = React.createRef();
+    this.state = {
+      scaleId:'',
+      scaleName:'',
+      parentId:'',
+      showScale:false,
+      optionId:'',
+      possible:{},
+      radioVal:{},
+      formulaId:''
+    };
     this.getItems = this.getItems.bind(this);
     this.getDetailItems = this.getDetailItems.bind(this);
+    this.showScaleFn = this.showScaleFn.bind(this);
+    this.closeScaleFn = this.closeScaleFn.bind(this);
+    this.showOption = this.showOption.bind(this);
+    this.closeOption = this.closeOption.bind(this);
+    this.closeFormula = this.closeFormula.bind(this);
+    this.onPrint = this.onPrint.bind(this);
+  }
+  showOption(id){
+    this.setState({
+      optionId:id
+    })
+  }
+  closeOption(){
+    this.setState({
+      optionId:null
+    })
+  }
+  confirmOption(parent,pIndex){
+    const {radioVal,possible} = this.state;
+    this.setState({
+      possible:Object.assign({},possible,radioVal),
+      radioVal:Object.assign({},possible,radioVal),//不设置radioVal只有最近一次选中的值
+      optionId:null
+    })
+  }
+  handleRadio(item,parent,pIndex){
+    let {radioVal} = this.props;
+    this.setState({
+      radioVal:Object.assign({},radioVal,{[pIndex]:item.detailName})
+    })
+  }
+  handleForRadio(){
+
+  }
+  showFormula(id){
+    this.setState({
+      formulaId:id
+    })
+  }
+  confirmFormula(){
+
+  }
+  closeFormula(){
+    this.setState({
+      formulaId:null
+    })
   }
   getDetailItems(item,i){
     let arr = [],temp='';
     const {indexs} = this.props;
+    const {optionId,radioVal,possible,formulaId} = this.state;
     item.details.map((it,j)=>{
       if(indexs[i]&&indexs[i].includes(j)){
         if(it.type==1){     //量表
-          temp =<span className={style['scale']}>【{it.content.name}】</span>;
+          temp =<span className={style['scale']} onClick={()=>this.showScaleFn(it.content.name,it.content.id,item.id)}>【{it.content.name}】</span>;
         }else if(it.type==2){      //计算公式
-          temp = <span>计算公式</span>
+          temp = <div className={style['results']}>
+                    <span>计算公式：</span>
+                    <span className={style["blue"]} onClick={this.showFormula.bind(this,item.id)}>请选择</span>
+                    <img src={level1} />
+                    <MiniToast title={it.content.name}
+                               icon={allTableIcon}
+                               show={formulaId&&formulaId==item.id?true:false}
+                               close={this.closeFormula}
+                               confirm={this.confirmFormula.bind(this,item,i)}
+                               footer="true">
+                      <table>
+                        {it.content.details.map((item,idd)=>{
+                          if(item.controlType==0){//单选
+                            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,item,i)}>
+                                    </Radio>
+                                  </div>
+                                })}
+                              </td>
+                            </tr>
+                          }else if(item.controlType==1){//多选
+
+                          }else if(item.controlType==2){//输入框
+                            return <tr>
+                              <td>
+                                <span>{'请输入'+item.name+'：'}</span>
+                              </td>
+                              <td>
+                                <input type="text" placeholder="请输入"/>
+                              </td>
+
+                            </tr>
+                          }else if(item.controlType==3){//下拉
+                            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,item,i)}>
+                                    </Radio>
+                                  </div>
+                                })}
+                              </td>
+
+                            </tr>
+                          }
+                        })}
+                      </table>
+                      <div className={style["forMulBtn"]}>计算</div>
+                    </MiniToast>
+                </div>
         }else if(it.type==3){
-          temp = <span>可能结果</span>
+          temp = <div className={style['results']}>
+                    <span>可能结果：</span>
+                    <span onClick={this.showOption.bind(this,item.id)} className={style["blue"]}>{possible[i]?possible[i]:'请选择'}</span>
+                    <img src={level1} />
+                    <MiniToast title='结果选择'
+                         icon={checkIcon}
+                         show={optionId&&optionId==item.id?true:false}
+                         close={this.closeOption}
+                         confirm={this.confirmOption.bind(this,item,i)}
+                         footer="true">
+                        <div className={style["infoOption"]}>
+                          <span>是否贫血：</span>
+                          {it.content.details&&it.content.details.map((lis,ind)=>{
+                            return <div className={style["chooseItem"]}>
+                              <Radio label={lis.detailName}
+                                     isSelect={radioVal[i]==lis.detailName}
+                                     handleClick={this.handleRadio.bind(this,lis,item,i)}>
+                              </Radio>
+                            </div>
+                          })}
+                        </div>
+                    </MiniToast>
+                  </div>;
         }
         arr.push(<li>
           <span>{item.name}：</span>
@@ -41,13 +190,44 @@ class ScaleItem extends Component {
       return this.getDetailItems(it,i);
     });
   }
+  showScaleFn(name,id,pid){
+    const {getScaleData,scaleInfo} = this.props;
+    this.setState({
+      scaleId:id,
+      scaleName:name,
+      parentId:pid,
+      showScale:true
+    });
+    if(!scaleInfo[id]){
+      getScaleData&&getScaleData({id,name});
+    }
+  }
+  closeScaleFn(){
+    this.setState({
+      showScale:false
+    })
+  }
+  onPrint() {
+    let dom = this.state.showTable?$("#printcontent"):$("#AssistResult");
+    dom.jqprint({
+      debug: false,
+      importCSS: true,
+      printContainer: true,
+      operaSupport: false,
+    });
+  }
   componentDidMount(){
     if(this.props.text){
       this.$area.current.value = this.props.text;
     }
   }
   render() {
-    const {title,handleInp} = this.props;
+    const {title,handleInp,scaleInfo} = this.props;
+    const {scaleName,scaleId,parentId,showScale} = this.state;
+    const footer = <div className={style['footer']}>
+      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
+      <span className={style['okBtn']} onClick={()=>{}}>确定</span>
+    </div>;
     return <div className={style['assess-item']}>
       <h2>{title}</h2>
       <div className={style['item-content']}>
@@ -60,6 +240,14 @@ class ScaleItem extends Component {
           </li>
         </ul>
       </div>
+      {showScale?<ComplexModal onclose={this.closeScaleFn} footer={footer}
+                               title={scaleName}
+                               icon={tableIcon}
+                               top={20}
+                               bottom={20}
+                               width={820}>
+        <ScaleTable data={scaleInfo[scaleId]} title={scaleName} tableId={scaleId} parentId={parentId}></ScaleTable>
+      </ComplexModal>:''}
     </div>;
   }
 }

src/components/AssessResult/index.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import style from "./index.less";
 import { Radio } from '@commonComp';
-import Notify from '@commonComp/Notify';
 import ChooseItem from "./ChooseItem";
 import ScaleItem from "./ScaleItem";
 import Information from '../Information'
@@ -58,18 +57,32 @@ class AssessResult extends Component {
     isAssessConfirm&&handleSave(this.state);
   }
   handoutTypes(item,i){
-    const {getIndexData,indexData,timeTypes,wholeAssessData} =this.props;
+    const {getIndexData,indexData,timeTypes,wholeAssessData,scaleInfo,getScaleInfo} =this.props;
     const {chooseSelecteds,wholeAssessItems,wholeAssessText,chartTimeTypes} = this.state;
     const chartData = indexData;
     const name = item.regionName+"：";
     const list = item.data&&item.data.rows;
     switch (+item.regionType){
       case 0:     //数据来源与右侧手动添加
-        return <ScaleItem title={name} data={wholeAssessData} handleRemove={this.handleScaleDel} handleInp={this.handleScaleText} text={wholeAssessText} indexs={wholeAssessItems}></ScaleItem>;
+        return <ScaleItem title={name}
+                          data={wholeAssessData}
+                          handleRemove={this.handleScaleDel}
+                          handleInp={this.handleScaleText}
+                          text={wholeAssessText}
+                          indexs={wholeAssessItems}
+                          scaleInfo={scaleInfo}
+                          getScaleData={getScaleInfo}></ScaleItem>;
       case 1:     //数据来源于大数据
-        return <ChooseItem title={name} data={list} handleChange={this.handleChooseChange.bind(this,i)} selecteds={chooseSelecteds[i]} ></ChooseItem>;
+        return <ChooseItem title={name}
+                           data={list}
+                           handleChange={this.handleChooseChange.bind(this,i)}
+                           selecteds={chooseSelecteds[i]} ></ChooseItem>;
       case 10:   //数据来源于后台
-        return <ChartItem title={name} data={chartData||{}} timeTypes={JSON.stringify(chartTimeTypes)=='{}'?timeTypes&&timeTypes[i]:chartTimeTypes[i]} pindex={i} initFn={getIndexData} handleChange={this.handleChartChange.bind(this,i)}></ChartItem>;
+        return <ChartItem title={name}
+                          data={chartData||{}}
+                          timeTypes={JSON.stringify(chartTimeTypes)=='{}'?timeTypes&&timeTypes[i]:chartTimeTypes[i]}
+                          pindex={i} initFn={getIndexData}
+                          handleChange={this.handleChartChange.bind(this,i)}></ChartItem>;
       default:
         return '';
     }

src/components/AssessResult/index.less

@@ -37,10 +37,24 @@
     .row{
       display: inline-block;
     }
+    .results{
+      position: relative;
+    }
+    .chooseItem{
+      display: inline-block;
+      margin-right: 10px;
+    }
     .scale{
       color: @blue;
       cursor: pointer;
     }
+    .blue{
+      color:#3B9ED0;
+      cursor: pointer;
+    }
+    .blue + img{
+      vertical-align: middle;
+    }
     .recommend{
       max-width: 200px;
       float: right;
@@ -93,6 +107,41 @@
 .printShow {
   display: none;
 }
+.footer{
+  .print{
+    width: 111px;
+    height: 34px;
+    line-height: 34px;
+    outline: none;
+    border-radius: 4px;
+    /*color: #3B9ED0;*/
+    border: 0 none;
+    cursor: pointer;
+    background: #fff;
+    margin-right: 20px;
+    img{
+      width: 20px;
+      vertical-align: middle;
+      margin-right: 4px;
+    }
+  }
+  .okBtn{
+    width: 80px;
+    height: 34px;
+    line-height: 32px;
+    text-align: center;
+    outline: none;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid #3B9ED0;
+    box-sizing: border-box;
+    margin-left: 20px;
+    background: #3B9ED0;
+    color: #fff;
+    float: right;
+    margin-right: 20px;
+  }
+}
 @media print {
   .printShow {
     display: block;

src/components/ChronicInfo/index.jsx

@@ -3,20 +3,16 @@ import style from './index.less';
 import infoPic from "../../common/images/info-pic.png";
 import chronicPic from "../../common/images/chronic.png";
 import level1 from "../../common/images/级别1.png";
-import close from "../../common/images/close-icon.png";
 import printIcon from '@common/images/team.png';
 import manageIcon from '@common/images/manage.png';
-import allIcon from '@common/images/all-table.png';
 import tableIcon from '@common/images/table.png';
 import allTableIcon from '@common/images/all-table.png';
 import add from '@common/images/add-result.png';
 import added from '@common/images/first.png';
 import checkIcon from '@common/images/check.png';
-import {ComplexModal,ConfirmModal,MiniToast} from '@commonComp';
+import {ComplexModal,ConfirmModal,MiniToast, Radio,CheckBtn} from '@commonComp';
 import AssessResult from '@containers/AssessResult';
 import ScaleTable from '@containers/ScaleTable';
-// import ScaleTable from '../ScaleTable';
-import { Radio,CheckBtn } from '@commonComp';
 import $ from 'jquery';
 
 /***

src/containers/AssessResult.js

@@ -2,10 +2,11 @@ import React from 'react';
 import {connect} from 'react-redux';
 import AssessResult from '@components/AssessResult';
 import {ISREAD} from '@store/types/homePage.js';
-import {billing} from '@store/async-actions/pushMessage';
+import {billing,getScaleInfo} from '@store/async-actions/pushMessage';
 import {getAssessData,getIndexData} from '@store/async-actions/fetchModules';
 import {SET_ASSESS_DATA,SET_INDEX_DATA,SET_INDEX_SUB_TYPE,REMOVE_ASSESS_ITEMS,CLEAR_INDEX_DATA} from '@types/assessResult';
 import store from '@store';
+import {SET_SCALE_INFO} from "../store/types/pushMessage";
 
 /***
  * 管理评估逻辑：
@@ -31,12 +32,14 @@ function mapStateToProps(state) {
     wholeIndexs:assessResult.wholeIndexs,      //已加入评估记录的推送项
     chooseSelecteds:assessResult.chooseSelecteds,    //已选中的选项
     wholeAssessText:assessResult.wholeAssessText,     //整体评估补充说明
+    scaleInfo: state.pushMessage.scaleInfo,//量表内容
+    scaleUpdate:state.pushMessage.scaleUpdate,
   }
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    getAssess(){
+    getAssess(){        //获取评估内容数据
       dispatch(getAssessData()).then((res)=>{
         if(res.data.code=='0'){
           dispatch({
@@ -48,7 +51,7 @@ function mapDispatchToProps(dispatch) {
         console.log(error);
       });
     },
-    getIndexData(param){
+    getIndexData(param){        //获取评估图表数据
       const {range,rangeType,index,pindex,getNew} = param;
       dispatch(getIndexData(range)).then((res)=>{
         if(res.data.code=='0'){
@@ -66,11 +69,15 @@ function mapDispatchToProps(dispatch) {
         console.log(error);
       });
     },
-    clearChartData(){
+    clearChartData(){   //清除评估图表数据
       dispatch({
         type:CLEAR_INDEX_DATA
       })
-    }
+    },
+    getScaleInfo(it){         //获取量表内容
+      dispatch(getScaleInfo(it))
+
+    },
     /*removeAssessResult(pIndex,i){
       dispatch({
         type:REMOVE_ASSESS_ITEMS,

src/store/reducers/pushMessage.js

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