newICSS/src/components/MultSpread/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import RadioDrop from "@containers/RadioDrop";
import NumberDrop from "@containers/NumberDrop";
import RadioInpDrop from "@containers/RadioInpDrop";
import InlineTag from '@containers/InlineTag';
import Multiple from '@containers/Multiple';
import addIcon from '@images/addItem.png';
import style from "./index.less";
import tools from '@utils/tools';
import NumberUnitDrop from '@containers/NumberUnitDrop';

/****
 * 多标签组合
 * author:zn@2018-11.26
 * 接收参数：
 * data:展开标签数据
 * showAdd：是否显示加号（复制）
 * copyId：该标签id
 * fullData:该标签完整数据
 * showArr:是否显示下拉的总对象
 * ikey：当前组件唯一标识，由模块index+标签index+标签内index三个组成的字符串
 * boxMark：当前所在的模块
 * isImports：是否高亮（仅查体使用）
 * selecteds：选中项数据（仅多选子组件用）
 * saveText：该模块的预览数据
 * textPrefix:前缀
 * textSuffix：后缀
 *
 * ***/

class MultSpread extends Component{
  constructor(props){
    super(props);
    this.state = {
      numDoms:[]
    };
  }
  getClass(){
    const {saveText,ikey,showAdd} = this.props;
    const labelInx = tools.getLabelIndex(ikey);
    const text = saveText&&saveText[+labelInx];
    //const orgBorder = isImports&&!text?style['orange-border']:'';
    const isSelected = text?style['selected']:style['container'];
    const hasAdd = showAdd?style['add']:'';
    return classNames(isSelected,hasAdd);
  }
  saveDoms(it){
    const doms = this.state.numDoms;
    doms.push(it);
    this.setState({
      numDoms:doms
    });
  }
  moveEnd(obj) {
    if(window.getSelection){//ie11 10 9 ff safari
      obj.focus(); //解决ff不获取焦点无法定位问题
      var range = window.getSelection();//创建range
      range.selectAllChildren(obj);//range 选择obj下所有子内容
      range.collapseToEnd();//光标移至最后
    }
    else if (document.selection) {//ie10 9 8 7 6 5
      var range = document.selection.createRange();//创建选择对象
      range.moveToElementText(obj);//range定位到obj
      range.collapse(false);//光标移至最后
      range.select();
    }
  }
  setNextFocus(i){
    const doms = this.state.numDoms;
    doms[i+1]&&this.moveEnd(doms[i+1].current)
  }
  getLabels(){
    const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
    let show = false;
    let inx = '',count=0;
    const list = data.map((it,i)=>{
      inx=ikey+'-'+i;
      show = showArr&&showArr[inx];
      switch (true){
        case +it.tagType===8:
          return it.name;
        case +it.controlType===1:
          const list = it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList:it.questionMapping;
          return <RadioDrop data={list}
                            boxMark={boxMark}
                            placeholder={it.name}
                            show={show}
                            value = {it.value}
                            ikey={inx}
                            id={it.id}
                            patId = {copyId}
                            hideTag={true}></RadioDrop>;
        case +it.controlType===2:
          const dataList = it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList:it.questionMapping;
          return <Multiple data={dataList}
                           ikey={inx}
                           placeholder={it.name}
                           value={it.value}
                           copyType={it.copyType}
                           selecteds={selecteds ?selecteds[i]:[]}
                           show={showArr&&showArr[inx]}
                           order={it.textGenerate}
                           type={boxMark}
                           id={it.id}
                           hideTag={true}></Multiple>;
        case +it.controlType===5://带单位数字键盘
        return <NumberUnitDrop prefix={it.labelPrefix}
                               suffix={it.labelSuffix}
                               placeholder={it.name}
                               boxMark={ikey.substr(0,1)}
                               id={it.id}
                               show={show}
                               ikey={inx}
                               value={it.value}
                               hideTag={true}></NumberUnitDrop>;
        case +it.controlType===3:
        case +it.controlType===6:
          return <InlineTag prefix={it.labelPrefix}
                            suffix={it.labelSuffix}
                            placeholder={it.name}
                            value={it.value}
                            id={it.id}
                            ikey={inx} hideTag={true}></InlineTag>;
        case +it.controlType===7:
          const min = it.minValue;//!=null&&it.minValue!=undefined?it.minValue-1:undefined;
          const max = it.maxValue;//!=null&&it.maxValue!=undefined?+it.maxValue+1:undefined;
          return <NumberDrop prefix={it.labelPrefix}
                             suffix={it.labelSuffix}
                             placeholder={it.name}
                             //inputRef = {this['$inp'+(count++)]}
                             saveDoms={this.saveDoms.bind(this)}
                             reFocus={this.setNextFocus.bind(this)}
                             num = {count++}
                             min={min}
                             max={max}
                             show={show}
                             allClick={false}
                             ikey={inx}
                             id={it.id}
                             patId = {copyId}
                             value={it.value}
                             hideTag={true}></NumberDrop>;
        case +it.controlType===11:
          return <RadioInpDrop data={it.questionDetailList}
                             vals={it.vals}
                             placeholder={it.name}
                             show={showArr&&showArr[inx]}
                             value = {it.value}
                             boxMark={boxMark}
                             id={it.id}
                             ikey={inx}
                             hideTag={true}></RadioInpDrop>;
        default:
          return it.name;
      }
    });
    return list;
  }
  componentDidMount(){
    //挂载完成保存有加号的项目数据
    const {saveAddItem,fullData,copyId,showAdd} = this.props;
    if(showAdd){
      const data = tools.deepClone(fullData);
    setTimeout(function(){        //修改个别历史病例引用报错bug
      saveAddItem&&saveAddItem(copyId,data);
    })
    }
  }
  getContClass(){
    const {isImports,ikey,saveText} = this.props;
    const labelInx = tools.getLabelIndex(ikey);
    const text = saveText&&saveText[+labelInx];
    const orgBorder = isImports&&!text?style['orange-border']:'';
    return classNames(orgBorder);
  }
  render(){
    const {showAdd,addLabelItem,ikey,copyId,textPrefix,textSuffix} = this.props;
    return (<div className={this.getContClass()}
                 style={{display:'inline-block'}}>
      {textPrefix?<span>{textPrefix}</span>:''}
      <div className={this.getClass()}>
      {this.getLabels()}
      {textSuffix?<span>{textSuffix}</span>:''}
      {showAdd?<img src={addIcon} alt="添加血压项"
                    className={style['add-icon']}
                    onClick={()=>addLabelItem({ikey,copyId})}/>:''}
    </div>
    </div>)
  }
}

export default MultSpread;