|
@@ -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";
|
|
|
/**
|
|
|
* 来源于页面选择
|
|
|
*
|
|
@@ -8,23 +16,162 @@ import deleteIcon from '@common/images/delete.png';
|
|
|
class ScaleItem extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state={
|
|
|
- supplement:''
|
|
|
+ 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>
|
|
@@ -43,8 +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']}>
|
|
@@ -53,10 +236,18 @@ class ScaleItem extends Component {
|
|
|
this.getItems()
|
|
|
}
|
|
|
<li>
|
|
|
- <textarea className={style['edit-row']} name="supplement" rows="6" placeholder='评估描述' onInput={(e)=>handleInp(e.target.value)}></textarea>
|
|
|
+ <textarea className={style['edit-row']} ref={this.$area} name="supplement" rows="6" placeholder='评估描述' onBlur={(e)=>handleInp(e.target.value)}></textarea>
|
|
|
</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>;
|
|
|
}
|
|
|
}
|