newICSS/src/components/AddInspect/index.jsx

import React from 'react';
import { SearchOption, InspectCommon, Calendar, Notify, ConfirmModal, Add, DelToast } from '@commonComp';
import SlideExcel from './SlideExcel';
import SlidePic from './SlidePic';
import { deepClone, getPageCoordinate, getStatusImg,getDomUpDown ,getCurrentDate,setPosition,getCalendarDate} from '@utils/tools';
import styles from './index.less';
import ScrollArea from 'react-scrollbar';
import store from '@store';
import $ from 'jquery';
class Inspect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      showFill: false,
      date: false,
      currentIdx: '',
      dateTime: "",
      currentData: {},
      numPlus: 0,     //判断是否所有的填写单都是空
      num: 0,            //暂存数据，获取一次，不能每次都是新的数据
      type: null,
      time: null,
      pageTop: '',
      // tmpIds: [],      //内层外层
      impId: null
    }
    this.$ul = React.createRef();
    this.handleChangeDate = this.handleChangeDate.bind(this)
    this.handleShowDate = this.handleShowDate.bind(this)
    this.getItemList = this.getItemList.bind(this)
    this.getSearchList = this.getSearchList.bind(this)
    this.getCommonList = this.getCommonList.bind(this)
    this.changeActivePart = this.changeActivePart.bind(this)
    this.showDetails = this.showDetails.bind(this)
    this.handleDelConfirm = this.handleDelConfirm.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handleSearchShow = this.handleSearchShow.bind(this)
    this.changeShowFill = this.changeShowFill.bind(this)
    this.handleFillShow = this.handleFillShow.bind(this)
    this.handleDelClick = this.handleDelClick.bind(this)
  }
  handleDelConfirm() {//弹窗确定
    const { delPartItem, handleCloseExcel, handlePush } = this.props;
    const { type, id, impId } = this.state;
    if (type == 1) {
      delPartItem(id)
    } else if (type == 2) {
      handleCloseExcel(impId)
    }
    Notify.success("删除成功");
    handlePush && handlePush({mode:8});       //右侧推送
  }
  handleDelClick(type, time) {
    if (type == 2) {
      this.setState({
        impId: idx,
        type: type,
        id: null
      })
    } else {
      this.setState({
        type: type,
        time: time,
        impId: null
      })
    }
  }
  handleCancel() {
    this.setState({
      type: null,
      id: null,
      impId: null
    })
  }
  componentDidMount() {
    $(document).click((event) => {
      let searchWrap = document.getElementById("searchWrap");   // 搜索按钮
      let searchOption = document.getElementById("searchOption");   // 搜索列表
      let inspectFill = document.getElementById("inspectFill");         // 公共填写单

      let _del = $('#delBox')[0];       // 删除弹窗  
      let _impClose = $('#impClose')[0];         // 导入删除按钮
      let _addClose = $('#addClose')[0];         // 添加删除按钮
      let _closeTil = $('#delTit')[0];   // 弹窗标题
      if (searchOption&&!this.isBar) {//onMousedown的目标为滚动条时，添加弹窗不关闭
        if (searchOption != event.target && searchWrap != event.target && searchWrap != event.target.parentNode && !$.contains(searchOption, event.target)) { // Mark 1
          if(this.state.show){
            this.props.setHighter(48)
          }
          this.setState({ show: false });
        }
      }
      if (inspectFill&&!this.isBar) {//onMousedown的目标为滚动条时，子项弹窗不关闭
        if ($(event.target).attr('id') != "getSureTime"&&event.target.getAttribute('data-flg') != 'current' && inspectFill != event.target && !$.contains(inspectFill, event.target)) { // Mark 1
          if(this.state.showFill){
            this.props.setHighter(48)
          }
          this.setState({ showFill: false, date: false });
        }
      }

      if (_del&&!this.isBar) {//onMousedown的目标为滚动条时，删除弹窗不关闭
        if (!event.target.isEqualNode(_impClose) && !event.target.isEqualNode(_addClose) && !event.target.isEqualNode(_del) && event.target.parentNode != _del && !event.target.isEqualNode(_closeTil)) {
          this.setState({
            id: null,
            impId: null
          })
        }
      }
    });
    const that = this;
    document.addEventListener('mousedown',function(e){//onMousedown的目标为滚动条时，标签填写单不关闭
      if(e.target.className=='scrollbar'){
        that.isBar = true;
      }else{
        that.isBar = false;
      }
    });
    // this.setState({ dateTime: getCurrentDate(1) })
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.fillActive.name != this.props.fillActive.name) {
      this.setState({ num: 0 })
    }
  }
  changeShowFill() {
    this.setState({ showFill: false })
    this.props.setHighter(48)
  }
  handleChangeDate(info) {
    let date = getCalendarDate(info);
    this.setState({ dateTime: date, date: false })
  }
  handleSearchShow(e) {
    let tmpShow = this.state.show;
    const { handlePush } = this.props;
    this.setState({ show: !tmpShow, pageTop: getPageCoordinate(e).boxTop })
    if(tmpShow){
      this.props.setHighter(48)
    }else{
      this.props.detailClick(2)
      handlePush && handlePush({mode:8});       //右侧推送
      setPosition(e,"#searchOption",this.props.setHighter)
    }
  }
  handleFillShow(e, idx) {
    let tmpShow = this.state.showFill;
    let baseList = store.getState().inspect.fillActive;
    this.setState({
      showFill: !tmpShow,
      currentIdx: idx,
      currentData: baseList,
      dateTime: baseList.time ? baseList.time : getCurrentDate(1)
    })
    // e.stopPropagation();
  }
  handleShowDate() {
    this.setState({
      date: !this.state.date
    })
  }
  changeActivePart(idx, val, clear) {
    let nums = this.state.num;
    let fillActive;
    if (nums == 0) {
      fillActive = this.props.fillActive;
    } else {
      fillActive = this.state.currentData;
    }
    ++nums;
    this.setState({ num: nums });
    let tempArr = deepClone(fillActive);

    if (clear) {    //点击清空按钮，至清初输入的数字
      for (let i = 0; i < tempArr.details.length; i++) {
        tempArr.details[i].value = ''
        tempArr.show = false;
      }
      tempArr.time = getCurrentDate(1);
      this.setState({ currentData: tempArr })
      return;
    } else {
      let tempNumPlus = 0;
      for (let i = 0; i < tempArr.details.length; i++) {
        if (i == idx) {
          tempArr.details[i].value = val
        }
        if (tempArr.details[i].value != undefined && tempArr.details[i].value != '') {
          tempArr.show = true;
        } else {
          ++tempNumPlus;
          if (tempNumPlus == tempArr.details.length) {
            tempArr.show = false;
          }
        }
      }
      tempArr.time = this.state.dateTime;
      this.setState({ currentData: tempArr })
    }
  }
  getItemList() {        //填写单展示
    let number = this.state.num;
    let fillActive;
    if (number == 0) {
      fillActive = this.props.fillActive;
    } else {
      fillActive = this.state.currentData;
    }
    return <ul className={styles.searchLis} ref={this.$ul}>
      {
        fillActive && fillActive.details && fillActive.details.map((item, idx) => {
          if (item.controlType == 1) {
            return (
              <li className={`${styles.itemPart} ${fillActive.details.length > 1 ? '' : styles.itemPartOne}`}>
                <span className={styles.itemPartL}>{item.name}</span>
                <span className={styles.itemPartT}>
                  <select className={styles.itemPartR} onChange={(e) => {
                    if (e.target.value == '请选择') {
                      this.changeActivePart(idx, '')
                      return;
                    }
                    this.changeActivePart(idx, e.target.value);
                  }}
                  >
                    <option value="请选择">请选择</option>
                    {
                      (item.questionDetailList).map((val) => {
                        return <option value={val.name}
                          selected={val.name == item.value ? true : false}
                        >{val.name}</option>
                      })
                    }
                  </select>
                </span>
              </li>
            )
          } else if (item.controlType == 6) {
            return (
              <li className={`${styles.itemPart} ${fillActive.details.length > 1 ? '' : styles.itemPartOne}`}>
                <span className={styles.itemPartL} title={item.name}>{item.name}</span>
                <span className={styles.itemPartT}>
                  <input type="text"
                    placeholder="(填写)"
                    value={item.value}
                    onKeyUp={(e) => { this.changeActivePart(idx, e.target.value.trim()) }}
                  />
                  <p className={styles.unit} title={item.labelSuffix}>{item.labelSuffix}</p>
                </span>
              </li>
            )
          }
        })
      }
    </ul>
  }
  handleSign(item,idx){
    const { handleSign,handlePush } = this.props;
    handleSign(item,idx)
    handlePush && handlePush({mode:8});       //右侧推送
  }
  getSearchList(list) {//搜索列表
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    return <ul className={`${styles.searchLiUl} ${styles.searchIsp}`} style={{height:'205px',width:'356px',overflow:'auto'}}>
      {
        list && list.map((item, idx) => {
          let renderText = item.uniqueName ? item.uniqueName + `(${item.name})` : item.name   // 有大项需要显示大项
          return <li key={idx}
            className={styles.searchLi}
            title={renderText}
            onClick={() => {
              this.props.setHighter(48)
              this.handleSign(item, idx, 'search');
              this.setState({ show: false })
            }}
          >
            {renderText}
          </li>
        })
      }
      </ul>;
  }
  getCommonList() {//常用列表
    const { handleSign, inspectList } = this.props;
    return <ul className={styles.searchLiUl}>
      {
        inspectList && inspectList.map((item, idx) => {
          return <li key={idx}
            className={styles.searchLi}
            title={item.name}
            onClick={() => {
              this.props.setHighter(48)
              this.handleSign(item.questionId, idx, 'common');
              this.setState({ show: false })
            }}
          >
            {item.name}
          </li>
        })
      }
    </ul>
  }
  showDetails(val) {
    let min = val.minValue, max = val.maxValue, value = val.value, dom = '';
    dom = getDomUpDown(min,max,value)
    if (val.questionDetailList.length > 0) {
      return val.questionDetailList.map((item) => {
        if (val.value == item.name) {
          return <td style={{ width: '20%' }} className={item.abnormal != '0' ? "red" : ''}>{val.value}</td>
        }
      })
    } else {
      // return <td style={{ width: '20%' }}><span className={(val.value - 0).toString() == 'NaN' ? "red" : (val.maxValue || val.minValue) ? (val.value > val.maxValue || val.value < val.minValue ? "red" : '') : ''}>{val.value}</span> {val.labelSuffix}</td>
      return <td style={{ width: '20%' }}>{dom} {val.labelSuffix}</td>
    }
  }
  render() {
    const {setHighter,refreshScroller,checkOnOff, getInfomation,setTipValue, handleChangeValue,labelListSmall,inspectList, inspectVal, list, labelListBig, windowHeight, windowWidth,detailClick, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush,handleDelConfirm } = this.props;
    const { tmpId, tmpIdx, time, pageTop, impId } = this.state;
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    return (
      <div className={styles.wrapper}>
        <div className={styles.check}>
          
          <ul className={styles.labelWrap} >
            {
              labelListSmall && labelListSmall.map((item, idx) => {
                return <SlidePic
                  item={item}
                  checkOnOff={checkOnOff}
                  idx={idx}
                  time={time}
                  handlePush={handlePush}
                  handleDelClick={this.handleDelClick}
                  setTipValue={setTipValue}
                  handleDelConfirm={handleDelConfirm}
                ></SlidePic>
              })
            }
            {
              labelListBig && labelListBig.map((item, idx) => {
                return <SlidePic
                  item={item}
                  checkOnOff={checkOnOff}
                  idx={idx}
                  time={time}
                  handlePush={handlePush}
                  handleDelClick={this.handleDelClick}
                  setTipValue={setTipValue}
                  handleDelConfirm={handleDelConfirm}
                ></SlidePic>
              })
            }
          </ul>
        </div>
        <div style={{ position: "relative", clear: "both", top: "5px" }}>
          <Add showText="添加检验项" handleClick={(e) => this.handleSearchShow(e)} id="searchWrap" />
          {this.state.show ? <SearchOption searchType="1" detailClick={detailClick} windowHeight={windowHeight} height={280} refreshScroller={refreshScroller} pageTop={pageTop} handleChangeValue={handleChangeValue} visible={true}>
            {list && list.length > 0 ? this.getSearchList(list) : (inspectVal == '' ? '' : <p style={{ padding: '5px 136px', color: '#bfbfbf' }}>暂无筛选项</p>)}
            {/* {
              (list && list.length > 0) || (inspectVal != '') || (inspectList&&inspectList.length==0) ? '' : <div>
                <p style={{ padding: '5px 30px', color: '#bfbfbf' }}>常用检验项</p>
                <ScrollArea speed={0.8}
                            horizontal={false}
                            stopScrollPropagation={true}
                            style={{height:'225px'}}
                            className={styles["area"]}
                            verticalContainerStyle={contStyle}
                            verticalScrollbarStyle={barStyle}
                            contentClassName="content">
                {
                  this.getCommonList()
                }
                </ScrollArea>
              </div>
            } */}
          </SearchOption> : ''}
        </div>
      </div>
    )
  }
}

export default Inspect;