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 SlideSelect from './SlideSelect';
import { deepClone, getPageCoordinate, getStatusImg ,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,
      id: 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.delConfirm = this.delConfirm.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)
  }
  delConfirm() {//弹窗确定
    const { delPartItem, handleCloseExcel, handlePush } = this.props;
    const { type, id, impId } = this.state;
    if (type == 1) {
      delPartItem(id)
    } else if (type == 2) {
      handleCloseExcel(impId)
    }
    this.setState({
      type: null,
      id: null,
      impId: null
    })
    Notify.success("删除成功");
    handlePush && handlePush();       //右侧推送
  }
  handleDelClick(type, idx) {
    if (type == 2) {
      this.setState({
        impId: idx,
        type: type,
        id: null
      })
    } else {
      this.setState({
        type: type,
        id: idx,
        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) {
        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) {
        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) {
        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
          })
        }
      }
    });
    // 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;
    this.setState({ show: !tmpShow, pageTop: getPageCoordinate(e).boxTop })
    // e.stopPropagation();
    if(tmpShow){
      this.props.setHighter(48)
    }else{
      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>
  }
  getSearchList(list) {//搜索列表
    const { handleSign } = this.props;
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    return <ScrollArea speed={0.8}
                       horizontal={false}
                       stopScrollPropagation={list.length>6?true:false}
                       style={{height:'225px'}}
                       className={styles["area"]}
                       verticalContainerStyle={contStyle}
                       verticalScrollbarStyle={barStyle}
                       contentClassName="content">
      <ul className={styles.searchLiUl}>
      {
        list && list.map((item, idx) => {
          return <li key={idx}
            className={styles.searchLi}
            title={(item.name == item.retrievalName || !item.retrievalName) ? item.name : item.name + '(' + item.retrievalName + ')'}
            onClick={() => {
              this.props.setHighter(48)
              handleSign(item.questionId, idx, 'search');
              this.setState({ show: false })
            }}
          >
            {item.name}{(item.name == item.retrievalName || !item.retrievalName) ? null : '(' + item.retrievalName + ')'}
          </li>
        })
      }
      </ul></ScrollArea>;
  }
  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)
              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 = '';
    if (!isNaN(min) && !isNaN(max)) {//有最大值最小值
      if (isNaN(value)) {//输入的不是数据
        dom = getStatusImg(1, value, 1)
      } else if (value <= min) {//下降
        dom = getStatusImg(3, value, 1)
      } else if (value >= max) {//上升
        dom = getStatusImg(2, value, 1)
      } else {//正常
        dom = getStatusImg(0, value, 1)
      }
    } else if (isNaN(min) && !isNaN(max)) {//有最大值无最小值
      if (value >= max) {//上升
        dom = getStatusImg(2, value, 1)
      } else {//正常
        dom = getStatusImg(0, value, 1)
      }
    } else if (!isNaN(min) && isNaN(max)) {//有最小值无最大值
      if (value <= min) {//下降
        dom = getStatusImg(3, value, 1)
      } else {//正常
        dom = getStatusImg(0, value, 1)
      }
    } else {//无最大最小值
      dom = getStatusImg(1, value, 1)
    }
    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, getInfomation, handleChangeValue,inspectList, inspectVal, list, labelList, windowHeight, windowWidth,delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
    const { tmpId, tmpIdx, id, 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}>
          {
            getExcelDataList.length > 0 && getExcelDataList.map((items, ind) => {
              return <div style={{ marginTop: '10px' }}>
                {
                  items && items.lisExcelRes.length > 0 ? <ul className={styles.excelDataLists}>
                    {/*<img className={styles.close} src={close} alt="关闭导入excel数据" onClick={() => { this.handleDelClick(2, id) }} />*/}
                    <span className={styles.close} id="impClose" onClick={() => { this.handleDelClick(2, ind) }}></span>
                    <DelToast show={impId == ind ? true : false}
                      top={'22px'}
                      right={'-34px'}
                      name="该导入项"
                      cancel={this.handleCancel}
                      confirm={this.delConfirm} />
                    {
                      items.lisExcelRes.map((item, idx) => {
                        return <SlideExcel
                          items={items}
                          item={item}
                          idx={idx}
                          dateTime={this.state.dateTime}
                          getInfomation={getInfomation}
                        ></SlideExcel>
                      })
                    }
                  </ul> : null
                }
              </div>
            })
          }
          <ul className={styles.labelWrap} >
            {
              labelList && labelList.map((item, idx) => {
                return <SlideSelect
                  item={item}
                  idx={idx}
                  listDom={this.$ul}
                  windowWidth={windowWidth}
                  refreshScroller={refreshScroller}
                  showToast={idx == id ? true : false}
                  showFill={this.state.showFill}
                  handlePush={handlePush}
                  fillActive={fillActive}
                  handleLabelSub={handleLabelSub}
                  date={this.state.date}
                  dateTime={this.state.dateTime}
                  currentIdx={this.state.currentIdx}
                  currentData={this.state.currentData}
                  showDetails={this.showDetails}
                  handleShowDate={this.handleShowDate}
                  handleChangeDate={this.handleChangeDate}
                  changeShowFill={this.changeShowFill}
                  handleFillShow={this.handleFillShow}
                  getItemList={this.getItemList}
                  changeActivePart={this.changeActivePart}
                  handleDelClick={this.handleDelClick}
                  handleDelConfirm={this.delConfirm}
                  handleConfirm={handleConfirm}
                  getInfomation={getInfomation}
                  setHighter={setHighter}
                ></SlideSelect>
              })
            }
          </ul>
        </div>
        <div style={{ position: "relative", clear: "both", top: "5px" }}>
          <Add showText="添加化验项" handleClick={(e) => this.handleSearchShow(e)} id="searchWrap" />
          {this.state.show ? <SearchOption windowHeight={windowHeight} height={280} refreshScroller={refreshScroller} pageTop={pageTop} handleChangeValue={handleChangeValue} visible={true}>
            {list && list.length > 0 ? this.getSearchList(list) : (inspectVal == '' ? '' : <p style={{ padding: '5px 30px', 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;