newICSS/src/components/Inspect/index.jsx

import React from 'react';
import { ItemBox,ConfirmModal } 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 } from '@utils/config.js';
import {isIE} from '@utils/tools.js';


(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:'';
const api = {
    upload: qhost+'/api/icss/lisExcelRes/lisExcelAnalysis'
};

class Inspect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val: '',
            visible:false,
            dom:[],
            isIE:isIE(),
        }
        this.handleImportExcel = this.handleImportExcel.bind(this)
        this.cancel = this.cancel.bind(this)
        this.getWarings = this.getWarings.bind(this)
    }
    componentDidMount(){       
        $('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);
            var baseData = store.getState().patInfo.message;
            FileAPI.filterFiles(files, function (file, info){
                let name = file.name;
                // if( name.split('.')[1] == 'xlsx' || name.split('.')[1] == 'xls' ){
                //     Notify.error('请选择正确的excel表格')
                //     return;
                // }else{
                //     alert(9)
                //     return true;
                // }
                return true;
            },
            function (files, rejected){
                if( files.length ){
                    console.log(files[0])
                    FileAPI.upload({
                        // url: '/api/icss/lisExcelRes/lisExcelAnalysis',
                        url: api.upload,
                        data:{ hospitalCode:baseData == '{}'? '' : baseData.hospitalCode },
                        files: { uploadfile: files[0] },
                        headers:{
                            // 'Content-Type':'Content-Type: multipart/form-data'
                            // 'Content-Type':'application/json;charset=UTF-8'
                            // 'Content-type': "text/plain"
                            // "Content-Type": 'multipart/form-data',
                            // 'Accept':'application/json'
                        },
                        complete: function (err, xhr){
                            if( !err ){
                                let res = JSON.parse(xhr.response);
                                let message = res.data.messages;
                                store.dispatch(getExcelList(res.data));
                                fetchPushInfos&&fetchPushInfos();
                                if (message.length != 0) {
                                    that.setState({
                                        visible:true,
                                        dom:message
                                    })
                                }
                                $("#choose").val("");
                            }else{
                                Notify.error(res.msg)
                            }
                        }
                    });
                }
            });
        });
    }
    handleImportExcel() {
        this.inputRef.click();
    }
    cancel(){
        this.setState({visible:false})
    }
  getStyle(){
        if(this.state.isIE){
            return styles.disabledBtn;
        }else{
            return styles.button;
        }
  }
    getWarings(lis){
        <ul>
            {
                lis.length>0 && lis.map((val)=>{
                    return <li>
                        {val}
                    </li>
                })
            }
        </ul>
    }
    render() {
        const {fetchPushInfos, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList,delPartItem } = this.props;
        return (
            <div className={styles.wrapper} >
                {/* 导入功能插件，ie8/9权限问题暂未解决，先隐藏 */}

                <div className={styles.top}>
                    <span>化验结果数据</span>
                    <div className={this.getStyle()} onClick={this.state.isIE?null:this.handleImportExcel}>
                        <button disabled={this.state.isIE?true:false}>导入化验结果</button>
                        <input type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} />
                    </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}
                        >
                        </AddInspect>
                    </div>
                </ItemBox>
                <ConfirmModal visible={this.state.visible} 
                    okText='删除' 
                    cancelText='确定' 
                    width="450"
                    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;