import React, { Component } from 'react'
|
import PropTypes from 'prop-types'
|
import { notification } from 'antd'
|
import * as XLSX from 'xlsx'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
class ExcelIn extends Component {
|
static propTpyes = {
|
btn: PropTypes.object, // 按钮信息
|
returndata: PropTypes.func, // 获取返回数据
|
triggerExcelIn: PropTypes.func // 修改上传状态
|
}
|
|
state = {
|
excelId: Utils.getuuid()
|
}
|
|
exceltrigger = () => {
|
const { excelId } = this.state
|
let _excelInput = document.getElementById(excelId)
|
|
if (_excelInput) {
|
_excelInput.click()
|
}
|
}
|
onImportExcel = file => {
|
const { btn } = this.props
|
|
let columns = btn.verify.columns.map(option => option.Column)
|
let range = btn.verify.range || 0
|
|
// excel数据处理
|
const { files } = file.target
|
const fileReader = new FileReader()
|
|
this.props.triggerExcelIn()
|
fileReader.onload = event => {
|
try {
|
const { result } = event.target
|
// 以二进制流方式读取得到整份excel表格对象
|
const workbook = XLSX.read(result, { type: 'binary' })
|
|
let errors = null
|
let sheetName = btn.verify.sheet
|
let errDetail = ''
|
|
if (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[sheetName], {header: columns})[0]
|
|
if (!header) {
|
errors = 'empty'
|
} else {
|
let iserror = false
|
btn.verify.columns.forEach(op => {
|
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}）不一致！`
|
}
|
})
|
}
|
}
|
|
let data = []
|
|
if (!errors) {
|
data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: columns, range: (range)})
|
}
|
|
// 最终获取到并且格式化后的 json 数据
|
this.props.returndata(data, errors, sheetName, errDetail)
|
this.setState({
|
excelId: '',
|
}, () => {
|
this.setState({
|
excelId: Utils.getuuid()
|
})
|
})
|
} catch (e) {
|
this.setState({
|
excelId: ''
|
}, () => {
|
this.setState({
|
excelId: Utils.getuuid()
|
})
|
})
|
notification.warning({
|
top: 92,
|
message: '文件解析错误！',
|
duration: 5
|
})
|
// 错误传递
|
this.props.returndata([], 'other')
|
}
|
}
|
|
// 以二进制方式打开文件
|
fileReader.readAsBinaryString(files[0])
|
}
|
|
render() {
|
return (
|
<span>
|
{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>
|
)
|
}
|
}
|
|
export default ExcelIn
|
