wuqun
2 years ago
3 changed files with 222 additions and 72 deletions
@ -1,70 +0,0 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { Modal, Form, Button, Upload } from '@douyinfe/semi-ui'; |
|||
import { IconUpload } from '@douyinfe/semi-icons'; |
|||
import ExportJsonExcel from 'js-export-excel'; |
|||
const ExportMembersModal = (props) => { |
|||
const { onCancel, user } = props; |
|||
useEffect(() => { |
|||
|
|||
}, []); |
|||
|
|||
const handleOk = () => { |
|||
|
|||
} |
|||
|
|||
const download = () => { |
|||
dldTemplate(); |
|||
dldText("填写说明.txt", "12121212121212"); |
|||
} |
|||
|
|||
const dldTemplate = () => { |
|||
let dataTable = []; |
|||
let option = {}; |
|||
option.fileName = '人资系统人员信息导入模板'; |
|||
option.datas = [ |
|||
{ |
|||
sheetData: dataTable, |
|||
sheetName: '人资系统人员信息导入模板', |
|||
sheetFilter: ['人员编号', '姓名', '证件号', '性别(男/女)', '出生年月日(例2022/02/01)', '籍贯', '婚育状态(已婚/未婚/已婚已育)', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验(年)', '历史工作经历与职务'], //excel文件中需显示的列数据 |
|||
sheetHeader: ['人员编号', '姓名', '证件号', '性别(男/女)', '出生年月日(例2022/02/01)', '籍贯', '婚育状态(已婚/未婚/已婚已育)', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验(年)', '历史工作经历与职务'], //excel文件中每列的表头名称 |
|||
} |
|||
] |
|||
let toExcel = new ExportJsonExcel(option); //生成excel文件 |
|||
toExcel.saveExcel(); //下载excel文件 |
|||
} |
|||
|
|||
const dldText = (filename, text) => { |
|||
var element = document.createElement('a'); |
|||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); |
|||
element.setAttribute('download', filename); |
|||
|
|||
element.style.display = 'none'; |
|||
document.body.appendChild(element); |
|||
|
|||
element.click(); |
|||
document.body.removeChild(element); |
|||
} |
|||
|
|||
const action = '/_file-server/upload?type=excel&token=' + user.token; |
|||
const fileLimit = '.xls,.xlsx,.csv'; |
|||
|
|||
return ( |
|||
<Modal title="导入信息" visible={true} okText='完成' |
|||
onOk={() => handleOk(null)} |
|||
onCancel={onCancel}> |
|||
<Form> |
|||
<Form.Upload label={'员工信息'} labelPosition='left' action={action} accept={fileLimit} maxSize={200}> |
|||
<Button icon={<IconUpload />} theme="light"> |
|||
请选择文件 |
|||
</Button> |
|||
</Form.Upload> |
|||
<div style={{ color: '#ccc' }}>最大不超过200M,导入文件需与 |
|||
<span onClick={() => download()} style={{ cursor: 'pointer', color: '#0066FF' }}>导入模板</span> |
|||
一致</div> |
|||
</Form> |
|||
</Modal> |
|||
) |
|||
} |
|||
|
|||
|
|||
export default ExportMembersModal; |
@ -0,0 +1,220 @@ |
|||
'use strict'; |
|||
import React, { useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
//import { Button, Input, Card, Modal, Upload, message } from 'antd';
|
|||
import { Modal, Form, Button, Upload, Notification } from '@douyinfe/semi-ui'; |
|||
import { IconUpload } from '@douyinfe/semi-icons'; |
|||
//import { Request } from '@peace/utils'
|
|||
//import request from 'superagent'
|
|||
import XLSX from 'xlsx' |
|||
//import { userBulkAdd } from '../../actions'
|
|||
|
|||
//TODO 下载模板和上传文件读取
|
|||
const ImportUser = props => { |
|||
const { user, dispatch, onCancel } = props |
|||
const [msg, setMsg] = useState('') |
|||
const [loading, setLoading] = useState('') |
|||
const [postData, setPostData] = useState([]) |
|||
|
|||
const confirm = () => { |
|||
if (postData.length) { |
|||
setLoading(true) |
|||
// dispatch(userBulkAdd(postData, params.departmentId ? params.departmentId : null)).then(res => {
|
|||
// if (res.success) {
|
|||
|
|||
// }
|
|||
// setLoading(false)
|
|||
// })
|
|||
} else { |
|||
Notification.warn('没有数据可以提交,请上传数据文件') |
|||
} |
|||
} |
|||
|
|||
const download = () => { |
|||
dldTemplate(); |
|||
dldText("填写说明.txt", "12121212121212"); |
|||
} |
|||
|
|||
const dldTemplate = () => { |
|||
let dataTable = []; |
|||
let option = {}; |
|||
option.fileName = '人资系统人员信息导入模板'; |
|||
option.datas = [ |
|||
{ |
|||
sheetData: dataTable, |
|||
sheetName: '人资系统人员信息导入模板', |
|||
sheetFilter: ['人员编号', '姓名', '证件号', '性别(男/女)', '出生年月日(例2022/02/01)', '籍贯', '婚育状态(已婚/未婚/已婚已育)', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验(年)', '历史工作经历与职务'], //excel文件中需显示的列数据
|
|||
sheetHeader: ['人员编号', '姓名', '证件号', '性别(男/女)', '出生年月日(例2022/02/01)', '籍贯', '婚育状态(已婚/未婚/已婚已育)', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验(年)', '历史工作经历与职务'], //excel文件中每列的表头名称
|
|||
} |
|||
] |
|||
let toExcel = new ExportJsonExcel(option); //生成excel文件
|
|||
toExcel.saveExcel(); //下载excel文件
|
|||
} |
|||
|
|||
const dldText = (filename, text) => { |
|||
var element = document.createElement('a'); |
|||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); |
|||
element.setAttribute('download', filename); |
|||
|
|||
element.style.display = 'none'; |
|||
document.body.appendChild(element); |
|||
|
|||
element.click(); |
|||
document.body.removeChild(element); |
|||
} |
|||
//const action = '/file/qiniu/upload?type=excel&token=' + user.token;
|
|||
const fileLimit = '.xls,.xlsx,.csv'; |
|||
|
|||
const getFileBlob = (url) => { |
|||
return new Promise((resolve, reject) => { |
|||
let request = new XMLHttpRequest() |
|||
request.open("GET", url, true) |
|||
request.responseType = "blob" |
|||
request.onreadystatechange = e => { |
|||
if (request.readyState == 4) { |
|||
if (request.status == 200) { |
|||
if (window.FileReader) { |
|||
let reader = new FileReader(); |
|||
reader.readAsBinaryString(request.response); |
|||
reader.onload = event => { |
|||
try { |
|||
const { result } = event.target; |
|||
// 以二进制流方式读取得到整份excel表格对象
|
|||
const workbook = XLSX.read(result, { |
|||
type: "binary", |
|||
cellDates: true,//设为true,将天数的时间戳转为时间格式
|
|||
}); |
|||
let data = []; // 存储获取到的数据
|
|||
// 遍历每张工作表进行读取(这里默认只读取第一张表)
|
|||
for (const sheet in workbook.Sheets) { |
|||
if (workbook.Sheets.hasOwnProperty(sheet)) { |
|||
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); |
|||
} |
|||
} |
|||
resolve(data);//导出数据
|
|||
} catch (e) { |
|||
reject("失败"); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<Modal |
|||
title="导入信息" visible={true} |
|||
onOk={confirm} |
|||
confirmLoading={loading} |
|||
onCancel={() => { |
|||
setMsg('') |
|||
setLoading(false) |
|||
setPostData([]) |
|||
onCancel() |
|||
}} |
|||
> |
|||
<div style={{ borderBottom: '1px solid #DCDEE0', margin: '0px -24px' }}></div> |
|||
<Form> |
|||
<Form.Upload |
|||
label={'员工信息'} labelPosition='left' |
|||
action={'/'} accept={fileLimit} |
|||
maxSize={200} limit={1} |
|||
customRequest={(data) => { |
|||
const { file, onSuccess, onError } = data |
|||
getFileBlob(file.url).then(res => { |
|||
const error = (msg) => { |
|||
setMsg(msg) |
|||
onError({ message: msg }) |
|||
} |
|||
if (res.length > 1000) { |
|||
error('一次性上传数据行数应小于1000行,请分批上传') |
|||
return |
|||
} |
|||
if (!res.length) { |
|||
error('请填写至少一行数据') |
|||
return |
|||
} |
|||
let postData = [] |
|||
const pattern = /^1[3|4|5|6|7|8|9]\d{9}$/; |
|||
const sfz = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//身份证
|
|||
for (let i = 0; i < res.length; i++) { |
|||
let d = res[i] |
|||
let number = String(d['人员编号']).trim(); |
|||
let name = String(d['姓名']).trim(); |
|||
let idNumber = String(d['证件照']).trim(); |
|||
let gender = String(d['性别(男/女)']).trim(); |
|||
let birthday = String(d['出生年月日(例2022/02/01)']).trim(); |
|||
let nativePlace = String(d['籍贯']).trim(); |
|||
let marital = String(d['婚育状态(已婚/未婚/已婚已育)']).trim(); |
|||
let politicsStatus = String(d['政治面貌']).trim(); |
|||
let phoneNumber = String(d['联系方式']).trim(); |
|||
|
|||
let workPlace = String(d['工作地点']).trim(); |
|||
let graduatedFrom = String(d['毕业院校']).trim(); |
|||
let educationBackground = String(d['学历']).trim(); |
|||
let specialty = String(d['专业']).trim(); |
|||
let graduationDate = String(d['毕业时间']).trim(); |
|||
let hiredate = String(d['入职时间']).trim(); |
|||
|
|||
let turnProbationPeriod = String(d['转试用期时间']).trim(); |
|||
let regularDate = String(d['转正时间']).trim(); |
|||
let dimissionDate = String(d['离职日期']).trim(); |
|||
let experienceYear = String(d['工作经验(年)']).trim(); |
|||
let occupationalHistory = String(d['历史工作经历与职务']).trim(); |
|||
|
|||
//let account = String(d['账号']).trim()
|
|||
if (!number || !name) { |
|||
error(`第${i + 1} 行有空值,请填写后重新上传`) |
|||
return |
|||
} |
|||
if (!sfz.test(idcard)) { |
|||
error(`第${i + 1} 行证件号错误`) |
|||
return |
|||
} |
|||
if (!pattern.test(phoneNumber)) { |
|||
error(`第${i + 1} 行手机号码错误`) |
|||
return |
|||
} |
|||
if (name.length > 128 || account.length > 128) { |
|||
error(`第${i + 1} 行数据字符长度大于 128,请更改后重新上传`) |
|||
return |
|||
} |
|||
if (postData.some(p => p.number == number)) { |
|||
error(`第${i + 1} 行人员编号重复,请更改后重新上传`) |
|||
return |
|||
} |
|||
postData.push({ |
|||
name, phoneNumber, account |
|||
}) |
|||
} |
|||
if (postData.length) { |
|||
setPostData(postData) |
|||
} |
|||
let msg = '文件解析完成,点击确定按钮上传保存!' |
|||
setMsg(msg) |
|||
onSuccess({ message: msg }) |
|||
}) |
|||
}} |
|||
> |
|||
<Button icon={<IconUpload />} theme="light"> |
|||
请选择文件 |
|||
</Button> |
|||
</Form.Upload> |
|||
<div style={{ color: '#ccc' }}>最大不超过200M,导入文件需与 |
|||
<span onClick={() => download()} style={{ cursor: 'pointer', color: '#0066FF' }}>导入模板</span> |
|||
一致</div> |
|||
</Form> |
|||
</Modal > |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, customizeList } = state; |
|||
return { |
|||
user: auth.user, |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(ImportUser); |
Loading…
Reference in new issue