newICSS/src/components/Inspect/index.jsx

import React from 'react';
import { ItemBox, ConfirmModal, WrapModalContainer } from '@commonComp';
import AddInspect from '../AddInspect';
import styles from './index.less';
import { getExcelList } from '@store/actions/inspect';
import Notify from '@commonComp/Notify';
import store from '@store';
import $ from 'jquery';
import { host, prefix } from '@utils/config.js';
import { isIE, getUrlArgObject,getCurrentDate } from '@utils/tools.js';
import { dragBox } from '@utils/drag';
import WrapModalBody from '../WrapModalBody';


(function ($) {
  var FileAPI = {
    // @default: "./dist/"
    staticPath: './dists/',

    // @default: FileAPI.staticPath + "FileAPI.flash.swf"
    flashUrl: './dists/FileAPI.flash.swf',

    // @default: FileAPI.staticPath + "FileAPI.flash.image.swf"
    flashImageUrl: './dists/FileAPI.flash.image.swf'
  };
  return FileAPI
})($)

import "./dists/FileAPI.js";

const isLocal = window.location.hostname.indexOf('localhost') != -1;
const qhost = isLocal ? host + prefix : prefix;
const api = {
  upload: qhost + '/lisExcelRes/lisExcelAnalysis'
};
let numFlg = 0;

class Inspect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: '',
      visible: false,
      dom: [],
      isIE: isIE(),
      ieVersion: null,
      height: '-1',
      hide: false,
      importLis:false
    }
    this.handleImportExcel = this.handleImportExcel.bind(this)
    this.cancel = this.cancel.bind(this)
    this.getWarings = this.getWarings.bind(this)
    this.checkSystemIpt = this.checkSystemIpt.bind(this)
    this.onClose = this.onClose.bind(this)
    this.handleBindFileApi = this.handleBindFileApi.bind(this)
    this.showInIcss = this.showInIcss.bind(this)
    this.showSlideImport = this.showSlideImport.bind(this)
  }  
  componentDidMount() {
    $(document).click((event) => {
      let searchWrap = $('#importInspectBtn')[0];   // 导入按钮按钮
      let searchOption = $('#importList')[0];   // 下拉列表
      if (searchOption&&$('#importList').css("display")=="block") {
        if(searchWrap != event.target){
          this.setState({ importLis: false });
        }
      }
    });
  }
  handleBindFileApi(){
    const {message} = this.props;
    var ua = navigator.userAgent;
    var _isIE = ua.indexOf("MSIE") > -1;
    if (_isIE) {
      let version = ua.match(/MSIE ([\d.]+)/)[1];
      this.setState({
        ieVersion: version
      })
    }
    $('iframe').bind('load', function () { })
    const { fetchPushInfos } = this.props;
    // FileAPI.debug = true
    $.support.cors = true;
    const that = this;
    var choose = document.getElementById('choose');
    FileAPI.event.on(choose, 'change', function (evt) {
      var files = FileAPI.getFiles(evt);
      FileAPI.filterFiles(files, function (file, info) {
        let name = file.name;
        // if( name.split('.')[1] == 'xlsx' || name.split('.')[1] == 'xls' ){
        //     Notify.error('请选择正确的excel表格')
        //     return false;
        // }else{
        //     return true;
        //   }
          return true;
      },
        function (files, rejected) {
          if (files.length) {
            //console.log(files[0])
            const securityCode = getUrlArgObject("code");
            const appKeyId = getUrlArgObject("appI");
            const appKeySecret = getUrlArgObject("appS");
            FileAPI.upload({
              // url: '/api/icss/lisExcelRes/lisExcelAnalysis',
              url: api.upload,
              data: { hospitalCode: message == '{}' ? '' : message.hospitalCode },
              files: { uploadfile: files[0] },
              headers: {
                appKeyId: appKeyId,
                appKeySecret: appKeySecret,
                securityCode: securityCode
              },
              complete: function (err, xhr) {
                if (!err) {
                  let res = JSON.parse(xhr.response);
                  if(res.code == 0){
                    let message = res.data.messages;
                    if(res.data.lisExcelRes){
                      for(let i = 0;i < res.data.lisExcelRes.length;i++){
                        let tmpLisExcelItem = res.data.lisExcelRes[i]
                        if(tmpLisExcelItem.lisExcelItem){
                          for(let j = 0;j < tmpLisExcelItem.lisExcelItem.length;j++){
                            tmpLisExcelItem.lisExcelItem[j].time = tmpLisExcelItem.lisExcelItem[j].time||getCurrentDate(1)
                          }
                        }
                      }
                    }
                    store.dispatch(getExcelList(res.data));
                    fetchPushInfos && fetchPushInfos();
                    if (message && message.length != 0) {
                      that.setState({
                        visible: true,
                        dom: message,
                        height: message.length
                      })
                    }
                  }else{
                    Notify.error(res.msg)
                  }
                  $("#choose").val("");
                } else {
                  let res = JSON.parse(xhr.response);
                  Notify.error(res.msg)
                  $("#choose").val("");
                }
              }
            });
          }
        });
    });
  }
  handleImportExcel() {
    this.inputRef.click();
  }
  cancel() {
    this.setState({ visible: false })
  }
  getStyle() {
    const { ieVersion } = this.state;
    if (ieVersion && ieVersion <= 9) {
      return styles.disabledBtn;
    } else {
      return styles.button;
    }
  }
  getWarings(lis) {
    <ul>
      {
        lis.length > 0 && lis.map((val) => {
          return <li>
            {val}
          </li>
        })
      }
    </ul>
  }
  checkSystemIpt() {
    this.setState({
      hide: true
    })
  }
  onClose() {
    this.setState({
      hide: false
    })
    dragBox('previewWrapper', 'previewStatic', 'del')
  }
  showInIcss(){
    const {showInIcss} = this.props
    this.setState({
      hide: false
    })
    showInIcss&&showInIcss();
    dragBox('previewWrapper', 'previewStatic', 'del')
  }
  showSlideImport(){
    let flg = this.state.importLis
    this.setState({
      importLis:!flg
    })
  }
  render() {
    const { fetchPushInfos, hospitalSonInspect, checkedList,selectWaring,message, selectOneCheck, selectGroupList, allCheckImport, allCheck, hospitalInspect, handleGetSonList, getInfomation, hospitalMsg, inspectVal, handleSearch, windowHeight, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList, delPartItem, inspectList } = this.props;
    const { ieVersion, isIE, hide,importLis } = this.state;
    const { checkSystemIpt, onClose,handleBindFileApi,showInIcss,showSlideImport } = this;
    if(JSON.stringify(hospitalMsg) != {} && document.getElementById("choose")){//动态绑定只绑定一次
      ++numFlg
      numFlg == 1?handleBindFileApi():null
    }
    return (
      <div className={styles.wrapper}>
        {/* 导入功能插件，ie8/9权限问题暂未解决，先隐藏 */}
        <div className={styles.top}>
          <span id="inspectResultData">化验结果数据</span>
          {/* <div className={this.getStyle()} onClick={ieVersion&&ieVersion<=9?null:this.handleImportExcel}> */}
          <div className={this.getStyle()} style={{ display: hospitalMsg.import_way_lis == 0 ? 'none' : 'block' }}>
            {/* <button disabled={ieVersion&&ieVersion>9?true:false}onClick={ieVersion && ieVersion <= 9 ? null : this.handleImportExcel}>导入化验结果</button>
            <input accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} /> */}

            {/* {0没有，1本地，2医院，3本地和医院} */}
            {
              hospitalMsg.import_way_lis == 1 ? <div className={styles.pushButton} disabled={ieVersion && ieVersion > 9 ? true : false} onClick={ieVersion && ieVersion <= 9 ? null : this.handleImportExcel}>
                <p className={styles.importInspectBtn}>导入化验结果</p>
                <input accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} />
              </div> : hospitalMsg.import_way_lis == 2 ? <div className={styles.pushButton} disabled={ieVersion && ieVersion > 9 ? true : false} onClick={checkSystemIpt}>
                <p className={styles.importInspectBtn}>导入化验结果</p>
              </div> : hospitalMsg.import_way_lis == 3 ? <div className={`${styles.pushButton} ${styles.importInspect}`} onClick={showSlideImport}>
                <p id="importInspectBtn" className={styles.importInspectBtn}>导入化验结果</p>
                {
                  <ul className={styles.importSelect} style={{display:importLis?'block':'none'}} id="importList">
                    <li className={styles.excelIpt}>
                      <div onClick={ieVersion && ieVersion <= 9 ? null : this.handleImportExcel}>本地导入</div>
                      <input accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} />
                    </li>
                    <li className={`${styles.excelIpt} ${styles.systemIpt}`} onClick={checkSystemIpt}>从设备导入</li>
                  </ul>
                }
              </div> : null
            }

            {
              hide ? <WrapModalContainer title={'导入化验数据'} width={1000} height={650} onClose={onClose}>
                <WrapModalBody
                  hospitalSonInspect={hospitalSonInspect}
                  hospitalInspect={hospitalInspect}
                  handleGetSonList={handleGetSonList}
                  handleSearch={handleSearch}
                  allCheckImport={allCheckImport}
                  allCheck={allCheck}
                  selectGroupList={selectGroupList}
                  checkedList={checkedList}
                  selectOneCheck={selectOneCheck}
                  selectWaring={selectWaring}
                  showInIcss={showInIcss}
                  message={message}
                  height={650}
                ></WrapModalBody>
              </WrapModalContainer> : null
            }
          </div>
        </div>
        <ItemBox
          className={styles.title}
          title={'化验'}
          editable={false}
          border={true}
          marginTop={'20px'}
        >
          <div style={{ padding: '10px', boxSizing: 'border-box' }} >
            <AddInspect
              handleSign={handleSign}
              handleChangeValue={handleChangeValue}
              list={list}
              handlePush={fetchPushInfos}
              labelList={labelList}
              handleLabelSub={handleLabelSub}
              fillActive={fillActive}
              handleClear={handleClear}
              handleConfirm={handleConfirm}
              changeActivePart={changeActivePart}
              getExcelDataList={getExcelDataList}
              handleCloseExcel={handleCloseExcel}
              labelListActive={labelListActive}
              delPartItem={delPartItem}
              inspectList={inspectList}
              getInfomation={getInfomation}
              inspectVal={inspectVal}
              windowHeight={windowHeight}
            >
            </AddInspect>
          </div>
        </ItemBox>
        <ConfirmModal visible={this.state.visible}
          okText='删除'
          cancelText='确定'
          width="450"
          height={(this.state.height > 2 && this.state.height < 8) ? ((this.state.height * 30 + 120) + 'px') : this.state.height > 8 ? '350px' : '200px'}
          noFooter={true}
          close={this.cancel}>
          <ul className={styles.excelList}>
            {
              this.state.dom.length > 0 && this.state.dom.map((val) => {
                return <li className={styles.excelListWaring}>
                  {val}
                </li>
              })
            }
          </ul>
          <div onClick={this.cancel} className={styles.confirmBtn}>确定</div>
        </ConfirmModal>
      </div>
    )
  }
}

export default Inspect;