| | |
| | | import React, { Component } from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { notification } from 'antd' |
| | | import * as XLSX from 'xlsx' |
| | | import * as XLSX from 'sheetjs-style' |
| | | import Utils from '@/utils/utils.js' |
| | | import './index.scss' |
| | | |
| | | class ExcelIn extends Component { |
| | | static propTpyes = { |
| | | btn: PropTypes.object, // 按钮信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | returndata: PropTypes.func // 获取返回数据 |
| | | btn: PropTypes.object, // 按钮信息 |
| | | returndata: PropTypes.func, // 获取返回数据 |
| | | triggerExcelIn: PropTypes.func // 修改上传状态 |
| | | } |
| | | |
| | | state = { |
| | |
| | | |
| | | exceltrigger = () => { |
| | | const { excelId } = this.state |
| | | let _excelInput = document.getElementById(excelId + this.props.MenuID) |
| | | let _excelInput = document.getElementById(excelId) |
| | | |
| | | if (_excelInput) { |
| | | _excelInput.click() |
| | |
| | | const { files } = file.target |
| | | const fileReader = new FileReader() |
| | | |
| | | this.props.triggerExcelIn() |
| | | fileReader.onload = event => { |
| | | try { |
| | | const { result } = event.target |
| | |
| | | const workbook = XLSX.read(result, { type: 'binary' }) |
| | | |
| | | let errors = null |
| | | let sheetName = btn.verify.sheet |
| | | let errDetail = '' |
| | | |
| | | if (!workbook.Sheets.hasOwnProperty(btn.verify.sheet)) { |
| | | if (sheetName === 'Sheet1' && Object.keys(workbook.Sheets).length === 1) { |
| | | sheetName = Object.keys(workbook.Sheets)[0] |
| | | } |
| | | |
| | | if (!workbook.Sheets.hasOwnProperty(sheetName)) { |
| | | errors = 'notexit' |
| | | } else if (range === 1) { |
| | | let header = XLSX.utils.sheet_to_json(workbook.Sheets[btn.verify.sheet], {header: columns})[0] |
| | | |
| | | let header = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: columns})[0] |
| | | |
| | | if (!header) { |
| | | errors = 'empty' |
| | | } else { |
| | | let iserror = false |
| | | btn.verify.columns.forEach(op => { |
| | | if (header[op.Column] !== op.Text) { |
| | | let _name = typeof(header[op.Column]) === 'string' ? header[op.Column].replace(/(^\s*|\s*$)/g, '') : header[op.Column] |
| | | let _text = op.Text ? op.Text.replace(/(^\s*|\s*$)/g, '') : op.Text |
| | | |
| | | if (!_name && !iserror) { |
| | | iserror = true |
| | | errors = 'headerError' |
| | | errDetail = `Excel中不存在(${_text})列!` |
| | | } else if (_name !== _text && !iserror) { |
| | | iserror = true |
| | | errors = 'headerError' |
| | | errDetail = `Excel中(${_name})与按钮列信息(${_text})不一致!` |
| | | } |
| | | }) |
| | | |
| | | if (iserror) { |
| | | errors = 'headerError' |
| | | } |
| | | } |
| | | } |
| | | |
| | | let data = [] |
| | | |
| | | if (!errors) { |
| | | data = XLSX.utils.sheet_to_json(workbook.Sheets[btn.verify.sheet], {header: columns, range: (range)}) |
| | | data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: columns, range: (range)}) |
| | | } |
| | | |
| | | // 最终获取到并且格式化后的 json 数据 |
| | | this.props.returndata(data, errors) |
| | | this.props.returndata(data, errors, sheetName, errDetail) |
| | | this.setState({ |
| | | excelId: '', |
| | | }, () => { |
| | |
| | | }) |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '文件解析错误,请检查文件格式!', |
| | | message: '文件解析错误!', |
| | | duration: 5 |
| | | }) |
| | | // 错误传递 |
| | |
| | | render() { |
| | | return ( |
| | | <span> |
| | | {this.state.excelId ? <input className="excel-in-input" id={this.state.excelId + this.props.MenuID} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} /> : null} |
| | | {this.state.excelId ? <input className="excel-in-input" id={this.state.excelId} type='file' accept='.xlsx, .xls' onAbort={this.onImportExcel} onChange={this.onImportExcel} /> : null} |
| | | </span> |
| | | ) |
| | | } |