|
@@ -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,59 @@ 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,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 +78,138 @@ 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){
|
|
|
- const {tableId,getResult,parentId} = this.props;
|
|
|
+ handleFormula(data){//得分计算
|
|
|
+ const {tableId,getResult,parentId,scaleInfo} = this.props;
|
|
|
+ const {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 range = valueData&&valueData.calculate?valueData.calculate.range:'';
|
|
|
+ let resultText;
|
|
|
+ if(range){
|
|
|
+ for(let k=0; k<range.length; k++){
|
|
|
+ if(parseFloat(range[k].min) < totalScore && totalScore > parseFloat(range[k].max)){
|
|
|
+ resultText = range[k].text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const result = {
|
|
|
+ score:totalScore,
|
|
|
+ text:resultText
|
|
|
+ }
|
|
|
+
|
|
|
const params = {
|
|
|
type:1,
|
|
|
- content:data, //选择后的数据--字符串形式
|
|
|
+ content:JSON.stringify(valueData), //选择后的数据--字符串形式
|
|
|
id:parentId,
|
|
|
scaleId:tableId,
|
|
|
- }
|
|
|
- // console.log("调计算接口");
|
|
|
- // getResult&&getResult(params);
|
|
|
+ }
|
|
|
+ // 替换表格内容
|
|
|
+ let allDatas = JSON.parse(JSON.stringify(scaleInfo[tableId])) ;
|
|
|
+ allDatas[1].content = JSON.stringify(valueData);
|
|
|
+ // 计算接口
|
|
|
+ getResult&&getResult({params,allDatas,result});
|
|
|
}
|
|
|
componentWillReceiveProps(nextProps){
|
|
|
const {tableId} = this.props;
|
|
|
if(JSON.stringify(nextProps.scaleInfo) !== '{}'){
|
|
|
this.setState({
|
|
|
- originData:nextProps.scaleInfo[tableId]
|
|
|
+ // valueData:nextProps.scaleInfo[tableId].length?mocks.newData:JSON.parse(nextProps.scaleInfo[tableId].content),
|
|
|
+ valueData:JSON.parse(nextProps.scaleInfo[tableId][1].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({
|
|
|
+ // valueData:scaleInfo[tableId].length?mocks.newData:JSON.parse(scaleInfo[tableId].content)
|
|
|
+ valueData:JSON.parse(scaleInfo[tableId][1].content)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ getContent(){
|
|
|
+ let {selecteds,valueData,start} = this.state;
|
|
|
+ // 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']}>
|
|
|
+ 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={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>
|
|
@@ -88,12 +217,14 @@ class ScaleTable extends React.Component{
|
|
|
return <div className={style['block']}>
|
|
|
<p className={style['miniName']}>{item.name}</p>
|
|
|
{item.details&&item.details.map((vv,ii)=>{
|
|
|
- return <CheckBtn value={vv.detailName}
|
|
|
+ return <div className={style['item']}>
|
|
|
+ <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>:''}
|
|
|
+ </div>
|
|
|
})}
|
|
|
</div>
|
|
|
}
|
|
@@ -101,7 +232,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>:''}
|
|
@@ -111,79 +242,26 @@ class ScaleTable extends React.Component{
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
- const {title,scaleInfo,tableId} = this.props;
|
|
|
+ const {title,scaleInfo,tableId,formulaResult} = this.props;
|
|
|
const data = scaleInfo[tableId];
|
|
|
- let {selecteds} = this.state;
|
|
|
+ let {selecteds,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 datas = mocks.newData;
|
|
|
+ const datas = content && JSON.parse(content);
|
|
|
+ const scaleResult = formulaResult&&formulaResult[tableId]; //量表计算结果
|
|
|
return <div className={style['tableBox']} id="printcontent">
|
|
|
<div className={style['printShow']}>
|
|
|
<Information></Information>
|
|
|
</div>
|
|
|
- {/*<h1>{title}</h1>*/}
|
|
|
- <h1>{datas.scaleName}</h1>
|
|
|
+ <h1>{datas?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>{scaleResult&&scaleResult.score||totalScore||''}</span>
|
|
|
+ <span className={style['totalBtn']} onClick={this.handleFormula.bind(this)}>得分</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div dangerouslySetInnerHTML={{__html:footContent}} className={style['textlh']}></div>
|