21 changed files with 957 additions and 942 deletions
@ -1,163 +1,171 @@ |
|||||
/* |
/* |
||||
* @description : |
* @description : |
||||
* @Date : 2021-04-07 14:39:33 |
* @Date : 2021-04-07 14:39:33 |
||||
* @FilePath : \web\client\src\sections\user\components\userManagement\importUser.js |
* @FilePath : \web\client\src\sections\user\components\userManagement\importUser.js |
||||
* @useStrict : use strict |
* @useStrict : use strict |
||||
*/ |
*/ |
||||
|
|
||||
'use strict'; |
"use strict"; |
||||
import React, { useState } from 'react'; |
import React, { useState } from "react"; |
||||
import { connect } from 'react-redux'; |
import { connect } from "react-redux"; |
||||
import { Button, Input, Card, Modal, Upload, message } from 'antd'; |
import { Button, Input, Card, Modal, Upload, message } from "antd"; |
||||
import { Request } from '@peace/utils' |
import { Request } from "@peace/utils"; |
||||
import request from 'superagent' |
import request from "superagent"; |
||||
import XLSX from 'xlsx' |
import XLSX from "xlsx"; |
||||
// import { userBulkAdd } from '../../actions'
|
import { postInProject } from "../actions/article"; |
||||
|
|
||||
//TODO 下载模板和上传文件读取
|
//TODO 下载模板和上传文件读取
|
||||
const ImportUser = props => { |
const ImportUser = (props) => { |
||||
const { user, dispatch, handleCancel, params,editData } = props |
const { user, dispatch, handleCancel, params, editData } = props; |
||||
const [msg, setMsg] = useState('') |
const [msg, setMsg] = useState(""); |
||||
const [loading, setLoading] = useState('') |
const [loading, setLoading] = useState(""); |
||||
const [postData, setPostData] = useState([]) |
const [postData, setPostData] = useState([]); |
||||
|
|
||||
const confirm = () => { |
const confirm = () => { |
||||
if (postData.length) { |
if (postData.length) { |
||||
setLoading(true) |
setLoading(true); |
||||
// dispatch(userBulkAdd(postData, params.departmentId ? params.departmentId : null)).then(res => {
|
dispatch(postInProject(postData)).then((res) => { |
||||
// if (res.success) {
|
console.log(res) |
||||
|
if (res.success) { |
||||
// }
|
handleCancel(); |
||||
// setLoading(false)
|
message.success("上传成功"); |
||||
// })
|
|
||||
} else { |
|
||||
message.warn('没有数据可以提交，请上传数据文件') |
|
||||
} |
} |
||||
|
setLoading(false); |
||||
|
}); |
||||
|
} else { |
||||
|
message.warn("没有数据可以提交，请上传数据文件"); |
||||
} |
} |
||||
|
}; |
||||
|
|
||||
return ( |
return ( |
||||
<Modal |
<Modal |
||||
visible={props.importVisible} |
visible={props.importVisible} |
||||
onOk={confirm} |
onOk={confirm} |
||||
confirmLoading={loading} |
confirmLoading={loading} |
||||
onCancel={() => { |
onCancel={() => { |
||||
setMsg('') |
setMsg(""); |
||||
setLoading(false) |
setLoading(false); |
||||
setPostData([]) |
setPostData([]); |
||||
handleCancel() |
handleCancel(); |
||||
}} |
}} |
||||
destroyOnClose |
destroyOnClose |
||||
> |
> |
||||
{/* <Button size="small" type='primary' onClick={() => { |
{/* <Button size="small" type='primary' onClick={() => { |
||||
Request.get(`attachments?src=upload/files/1.jpg&filename=${encodeURIComponent('1.jpg')}&token=${user.token}`).then(res => { |
Request.get(`attachments?src=upload/files/1.jpg&filename=${encodeURIComponent('1.jpg')}&token=${user.token}`).then(res => { |
||||
|
|
||||
}) |
}) |
||||
}}>下载模板</Button> */} |
}}>下载模板</Button> */} |
||||
<a href={'/_api/' + `attachments?src=files/用户信息导入模板.xlsx&filename=${encodeURIComponent('用户信息导入模板.xlsx')}&token=${user.token}`} > |
<a |
||||
<Button size="small" type='primary' >下载模板</Button> |
href={ |
||||
</a> |
"/_api/" + |
||||
<div style={{ marginTop: 10 }}>下载模板后填写完整后上传</div> |
`attachments?src=files/用户信息导入模板.xlsx&filename=${encodeURIComponent( |
||||
<div style={{ marginTop: 10 }}> |
"用户信息导入模板.xlsx" |
||||
<Upload {...{ |
)}&token=${user.token}` |
||||
name: 'user_d', |
} |
||||
action: '/', |
> |
||||
maxCount: 1, |
<Button size="small" type="primary"> |
||||
showUploadList: { |
下载模板 |
||||
showRemoveIcon: false |
</Button> |
||||
}, |
</a> |
||||
beforeUpload: (file) => { |
<div style={{ marginTop: 10 }}>下载模板后填写完整后上传</div> |
||||
setMsg('') |
<div style={{ marginTop: 10 }}> |
||||
setPostData([]) |
<Upload |
||||
const extNames = file.name.split('.'); |
{...{ |
||||
let isDAE = false; |
name: "user_d", |
||||
if (extNames.length > 0) { |
action: "/", |
||||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
maxCount: 1, |
||||
isDAE = ['xlsx', 'xls'].some((f) => f == fileType); |
showUploadList: { |
||||
} |
showRemoveIcon: false, |
||||
if (!isDAE) { |
}, |
||||
setMsg(`只能上传 ${['xlsx', 'xls'].join()} 格式的文件!`); |
beforeUpload: (file) => { |
||||
return false; |
setMsg(""); |
||||
} |
setPostData([]); |
||||
}, |
const extNames = file.name.split("."); |
||||
onChange(info) { |
let isDAE = false; |
||||
|
if (extNames.length > 0) { |
||||
|
let fileType = extNames[extNames.length - 1].toLowerCase(); |
||||
|
isDAE = ["xlsx", "xls"].some((f) => f == fileType); |
||||
|
} |
||||
|
if (!isDAE) { |
||||
|
setMsg(`只能上传 ${["xlsx", "xls"].join()} 格式的文件!`); |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
onChange(info) {}, |
||||
|
customRequest: async (data) => { |
||||
|
const { file, onSuccess, onError } = data; |
||||
|
|
||||
}, |
const reader = new FileReader(); // 使用 FileReader 读取数据
|
||||
customRequest: async (data) => { |
reader.onload = function (e) { |
||||
const { file, onSuccess, onError } = data |
// 数据读取完成后的回调函数
|
||||
|
const data = new Uint8Array(e.target.result); |
||||
|
const workbook = XLSX.read(data, { type: "array" }); // workbook 是 xlsx 解析 excel 后返回的对象
|
||||
|
|
||||
const reader = new FileReader(); // 使用 FileReader 读取数据
|
const firstSheetName = workbook.SheetNames[0]; // 获取第一个 sheet 的名字
|
||||
reader.onload = function (e) { // 数据读取完成后的回调函数
|
const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个 sheet 的内容
|
||||
const data = new Uint8Array(e.target.result); |
const res = XLSX.utils.sheet_to_json(worksheet); // 使用 utils 里的方法转换内容为便于使用的数组
|
||||
const workbook = XLSX.read(data, { type: 'array' }); // workbook 是 xlsx 解析 excel 后返回的对象
|
const error = (msg) => { |
||||
|
setMsg(msg); |
||||
|
onError({ message: msg }); |
||||
|
}; |
||||
|
if (res.length > 1000) { |
||||
|
error("一次性上传数据行数应小于1000行，请分批上传"); |
||||
|
return; |
||||
|
} |
||||
|
if (!res.length) { |
||||
|
error("请填写至少一行数据"); |
||||
|
return; |
||||
|
} |
||||
|
let postData = []; |
||||
|
|
||||
const firstSheetName = workbook.SheetNames[0]; // 获取第一个 sheet 的名字
|
for (let i = 0; i < res.length; i++) { |
||||
const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个 sheet 的内容
|
let d = res[i]; |
||||
const res = XLSX.utils.sheet_to_json(worksheet); // 使用 utils 里的方法转换内容为便于使用的数组
|
let name_project = String(d["版本计划"]).trim(); |
||||
const error = (msg) => { |
|
||||
setMsg(msg) |
let part_people_in = String(d["投入人力"]).trim(); |
||||
onError({ message: msg }) |
let build_time = String(d["构建时间"]).trim(); |
||||
} |
let publish_time = String(d["发布时间"]).trim(); |
||||
if (res.length > 1000) { |
let progress = String(d["目前进度"]).trim(); |
||||
error('一次性上传数据行数应小于1000行，请分批上传') |
if (!name_project || !part_people_in || !build_time || !publish_time||!progress) { |
||||
return |
error(`第${i + 1} 行有空值，请填写后重新上传`); |
||||
} |
return; |
||||
if (!res.length) { |
} |
||||
error('请填写至少一行数据') |
let part_people = part_people_in.split('、').map((i) => { |
||||
return |
return {name_people:i} |
||||
} |
}) |
||||
let postData = [] |
|
||||
const pattern = /^1[3|4|5|6|7|8|9]\d{9}$/ |
postData.push({ |
||||
for (let i = 0; i < res.length; i++) { |
name_project, |
||||
let d = res[i] |
part_people, |
||||
let name = String(d['姓名']).trim(); |
build_time, |
||||
let phone = String(d['手机号码']).trim(); |
publish_time,progress |
||||
let account = String(d['账号']).trim(); |
}); |
||||
let peopleCode = d['人员编号'] && String(d['人员编号']).trim(); |
} |
||||
if (!name || !phone || !account || !peopleCode) { |
if (postData.length) { |
||||
error(`第${i + 1} 行有空值，请填写后重新上传`) |
setPostData(postData); |
||||
return |
} |
||||
} |
let msg = "文件解析完成，点击确定按钮上传保存！"; |
||||
if (!pattern.test(phone)) { |
setMsg(msg); |
||||
error(`第${i + 1} 行手机号码错误`) |
onSuccess({ message: msg }); |
||||
return |
}; |
||||
} |
reader.readAsArrayBuffer(file); // 读取数据
|
||||
if (name.length > 128 || account.length > 128) { |
}, |
||||
error(`第${i + 1} 行数据字符长度大于 128，请更改后重新上传`) |
}} |
||||
return |
> |
||||
} |
<Button>上传文件</Button> |
||||
if (postData.some(p => p.account == account)) { |
</Upload> |
||||
error(`第${i + 1} 行账号重复，请更改后重新上传`) |
<br /> |
||||
return |
<span>{msg}</span> |
||||
} |
</div> |
||||
postData.push({ |
</Modal> |
||||
name, phone, account, peopleCode |
); |
||||
}) |
}; |
||||
} |
|
||||
if (postData.length) { |
|
||||
setPostData(postData) |
|
||||
} |
|
||||
let msg = '文件解析完成，点击确定按钮上传保存！' |
|
||||
setMsg(msg) |
|
||||
onSuccess({ message: msg }) |
|
||||
}; |
|
||||
reader.readAsArrayBuffer(file); // 读取数据
|
|
||||
}, |
|
||||
}}> |
|
||||
<Button>上传文件</Button> |
|
||||
</Upload> |
|
||||
<br /> |
|
||||
<span>{msg}</span> |
|
||||
</div> |
|
||||
</Modal > |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
function mapStateToProps(state) { |
function mapStateToProps(state) { |
||||
const { auth, customizeList } = state; |
const { auth, customizeList } = state; |
||||
return { |
return { |
||||
user: auth.user, |
user: auth.user, |
||||
} |
}; |
||||
} |
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(ImportUser); |
||||
export default connect(mapStateToProps)(ImportUser); |
|
||||
|
|||||
@ -1,182 +1,182 @@ |
|||||
import React, { Component, useState, useEffect } from 'react'; |
// import React, { Component, useState, useEffect } from 'react';
|
||||
import { connect } from 'react-redux'; |
// import { connect } from 'react-redux';
|
||||
import { |
// import {
|
||||
Card, Form, Input, Button, Row, Col, Alert, message, |
// Card, Form, Input, Button, Row, Col, Alert, message,
|
||||
} from 'antd'; |
// } from 'antd';
|
||||
import { resetPwd, RESET_PASSWORD_SUCCESS } from '../actions/reset-pwd'; |
// import { resetPwd, RESET_PASSWORD_SUCCESS } from '../actions/reset-pwd';
|
||||
import { sendPhoneCode, checkPhoneCode, checkPhone } from '../actions/validate-phone'; |
// import { sendPhoneCode, checkPhoneCode, checkPhone } from '../actions/validate-phone';
|
||||
|
|
||||
const FormItem = Form.Item; |
// const FormItem = Form.Item;
|
||||
|
|
||||
function ForgetPwdContainer(props) { |
// function ForgetPwdContainer(props) {
|
||||
const { dispatch, match: { params }, isRequesting } = props; |
// const { dispatch, match: { params }, isRequesting } = props;
|
||||
const [form] = Form.useForm(); |
// const [form] = Form.useForm();
|
||||
const [sleeping, setSleeping] = useState(false); |
// const [sleeping, setSleeping] = useState(false);
|
||||
let [sleepCount, setSleepCount] = useState(60); |
// let [sleepCount, setSleepCount] = useState(60);
|
||||
const [done, setDone] = useState(false); |
// const [done, setDone] = useState(false);
|
||||
let timer; |
// let timer;
|
||||
|
|
||||
const _checkPhone = async (rule, value, callback) => { |
// const _checkPhone = async (rule, value, callback) => {
|
||||
await checkPhone(value, params.domain).then((_) => { |
// await checkPhone(value, params.domain).then((_) => {
|
||||
|
|
||||
}, (err) => { |
// }, (err) => {
|
||||
throw new Error('未发现绑定该手机的账号!'); |
// throw new Error('未发现绑定该手机的账号!');
|
||||
}); |
// });
|
||||
}; |
// };
|
||||
|
|
||||
const fetchVCode = async () => { |
// const fetchVCode = async () => {
|
||||
const phoneObj = await form.validateFields(['phone']); |
// const phoneObj = await form.validateFields(['phone']);
|
||||
await sendPhoneCode(phoneObj.phone).then((_) => { |
// await sendPhoneCode(phoneObj.phone).then((_) => {
|
||||
setSleeping(true); |
// setSleeping(true);
|
||||
timer = setInterval((_) => { |
// timer = setInterval((_) => {
|
||||
if (sleepCount == 0) { |
// if (sleepCount == 0) {
|
||||
setSleeping(false); |
// setSleeping(false);
|
||||
setSleepCount(60); |
// setSleepCount(60);
|
||||
clearInterval(timer); |
// clearInterval(timer);
|
||||
return; |
// return;
|
||||
} |
// }
|
||||
setSleepCount(sleepCount--); |
// setSleepCount(sleepCount--);
|
||||
}, 1000); |
// }, 1000);
|
||||
setSleepCount(sleepCount--); |
// setSleepCount(sleepCount--);
|
||||
}); |
// });
|
||||
}; |
// };
|
||||
|
|
||||
const submit = () => { |
// const submit = () => {
|
||||
form.validateFields().then((values) => { |
// form.validateFields().then((values) => {
|
||||
checkPhoneCode(values.phone, values.code).then((_) => { |
// checkPhoneCode(values.phone, values.code).then((_) => {
|
||||
dispatch(resetPwd(params.domain, values.phone, values.code, values.password)) |
// dispatch(resetPwd(params.domain, values.phone, values.code, values.password))
|
||||
.then((action) => { |
// .then((action) => {
|
||||
if (action.type == RESET_PASSWORD_SUCCESS) { |
// if (action.type == RESET_PASSWORD_SUCCESS) {
|
||||
setDone(true); |
// setDone(true);
|
||||
} else { |
// } else {
|
||||
message.error(action.payload.error); |
// message.error(action.payload.error);
|
||||
} |
// }
|
||||
}); |
// });
|
||||
}, (err) => { |
// }, (err) => {
|
||||
message.error(err.response.body.message); |
// message.error(err.response.body.message);
|
||||
}); |
// });
|
||||
}); |
// });
|
||||
}; |
// };
|
||||
|
|
||||
return ( |
// return (
|
||||
<div> |
// <div>
|
||||
<div style={{ textAlign: 'center', padding: '100px 0 50px 0' }}> |
// <div style={{ textAlign: 'center', padding: '100px 0 50px 0' }}>
|
||||
<img src="/assets/images/anxinyun.png" width="180px" /> |
// <img src="/assets/images/anxinyun.png" width="180px" />
|
||||
</div> |
// </div>
|
||||
<Card style={{ width: 500, padding: 50, margin: '0 auto' }}> |
// <Card style={{ width: 500, padding: 50, margin: '0 auto' }}>
|
||||
<h3 style={{ |
// <h3 style={{
|
||||
color: '#666', paddingBottom: 5, marginBottom: 30, borderBottom: '1px solid #666', |
// color: '#666', paddingBottom: 5, marginBottom: 30, borderBottom: '1px solid #666',
|
||||
}} |
// }}
|
||||
> |
// >
|
||||
找回密码 |
// 找回密码
|
||||
</h3> |
// </h3>
|
||||
{ |
// {
|
||||
done |
// done
|
||||
? ( |
// ? (
|
||||
<Alert |
// <Alert
|
||||
message="完成" |
// message="完成"
|
||||
description={( |
// description={(
|
||||
<div> |
// <div>
|
||||
<p> |
// <p>
|
||||
已成功验证您的手机号： |
// 已成功验证您的手机号：
|
||||
{form.getFieldValue('phone')} |
// {form.getFieldValue('phone')}
|
||||
, 并重置密码 |
// , 并重置密码
|
||||
</p> |
// </p>
|
||||
<div style={{ padding: '30px 0', fontWeight: 'bold' }}> |
// <div style={{ padding: '30px 0', fontWeight: 'bold' }}>
|
||||
<a href={`/${params.domain}/signin`}>返回登录</a> |
// <a href={`/${params.domain}/signin`}>返回登录</a>
|
||||
</div> |
// </div>
|
||||
</div> |
// </div>
|
||||
)} |
// )}
|
||||
type="success" |
// type="success"
|
||||
showIcon |
// showIcon
|
||||
/> |
// />
|
||||
) |
// )
|
||||
: ( |
// : (
|
||||
<div> |
// <div>
|
||||
<Form form={form}> |
// <Form form={form}>
|
||||
<FormItem |
// <FormItem
|
||||
hasFeedback |
// hasFeedback
|
||||
name="phone" |
// name="phone"
|
||||
validateFirst |
// validateFirst
|
||||
rules={[{ |
// rules={[{
|
||||
pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '手机号码无效', |
// pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '手机号码无效',
|
||||
}, { |
// }, {
|
||||
required: true, message: '手机号码不能为空', |
// required: true, message: '手机号码不能为空',
|
||||
}, { |
// }, {
|
||||
validator: _checkPhone, |
// validator: _checkPhone,
|
||||
}, { |
// }, {
|
||||
validateTrigger: 'onBlur', |
// validateTrigger: 'onBlur',
|
||||
}]} |
// }]}
|
||||
> |
// >
|
||||
<Input maxLength="11" placeholder="请输入注册时填写的手机号" /> |
// <Input maxLength="11" placeholder="请输入注册时填写的手机号" />
|
||||
</FormItem> |
// </FormItem>
|
||||
<FormItem> |
// <FormItem>
|
||||
<Row> |
// <Row>
|
||||
<Col span={16}> |
// <Col span={16}>
|
||||
<FormItem |
// <FormItem
|
||||
name="code" |
// name="code"
|
||||
noStyle |
// noStyle
|
||||
rules={[{ |
// rules={[{
|
||||
required: true, message: '验证码不能为空', |
// required: true, message: '验证码不能为空',
|
||||
}]} |
// }]}
|
||||
> |
// >
|
||||
<Input type="text" maxLength="8" placeholder="请输入验证码" /> |
// <Input type="text" maxLength="8" placeholder="请输入验证码" />
|
||||
</FormItem> |
// </FormItem>
|
||||
|
|
||||
</Col> |
// </Col>
|
||||
<Col span={8}> |
// <Col span={8}>
|
||||
<Button type="primary" onClick={fetchVCode} loading={sleeping} style={{ float: 'right' }}> |
// <Button type="primary" onClick={fetchVCode} loading={sleeping} style={{ float: 'right' }}>
|
||||
{sleeping ? `${sleepCount}s后重试` : '获取验证码'} |
// {sleeping ? `${sleepCount}s后重试` : '获取验证码'}
|
||||
</Button> |
// </Button>
|
||||
</Col> |
// </Col>
|
||||
</Row> |
// </Row>
|
||||
</FormItem> |
// </FormItem>
|
||||
<FormItem |
// <FormItem
|
||||
hasFeedback |
// hasFeedback
|
||||
name="password" |
// name="password"
|
||||
rules={[{ |
// rules={[{
|
||||
pattern: /^[a-z0-9A-Z_]{6,20}$/, message: '密码由6-20位字母、数字或_组成', |
// pattern: /^[a-z0-9A-Z_]{6,20}$/, message: '密码由6-20位字母、数字或_组成',
|
||||
}, { |
// }, {
|
||||
required: true, message: '密码不能为空', |
// required: true, message: '密码不能为空',
|
||||
}]} |
// }]}
|
||||
> |
// >
|
||||
<Input type="password" placeholder="请输入新密码" /> |
// <Input type="password" placeholder="请输入新密码" />
|
||||
</FormItem> |
// </FormItem>
|
||||
<FormItem |
// <FormItem
|
||||
hasFeedback |
// hasFeedback
|
||||
name="rptpwd" |
// name="rptpwd"
|
||||
rules={[{ |
// rules={[{
|
||||
required: true, message: '密码不能为空', |
// required: true, message: '密码不能为空',
|
||||
}, { |
// }, {
|
||||
validator: async (rule, value) => { |
// validator: async (rule, value) => {
|
||||
if (form.getFieldValue('password') != value) { |
// if (form.getFieldValue('password') != value) {
|
||||
throw new Error('两次输入的密码不一致!'); |
// throw new Error('两次输入的密码不一致!');
|
||||
} |
// }
|
||||
}, |
// },
|
||||
}]} |
// }]}
|
||||
> |
// >
|
||||
<Input type="password" placeholder="请再次输入新密码" /> |
// <Input type="password" placeholder="请再次输入新密码" />
|
||||
</FormItem> |
// </FormItem>
|
||||
<FormItem> |
// <FormItem>
|
||||
<Button type="primary" style={{ width: '100%' }} loading={isRequesting} onClick={submit}>重设密码</Button> |
// <Button type="primary" style={{ width: '100%' }} loading={isRequesting} onClick={submit}>重设密码</Button>
|
||||
</FormItem> |
// </FormItem>
|
||||
</Form> |
// </Form>
|
||||
<div style={{ padding: '30px 0 0 0' }}> |
// <div style={{ padding: '30px 0 0 0' }}>
|
||||
<a href={`/${params.domain}/signin`}>返回登录</a> |
// <a href={`/${params.domain}/signin`}>返回登录</a>
|
||||
</div> |
// </div>
|
||||
</div> |
// </div>
|
||||
) |
// )
|
||||
} |
// }
|
||||
</Card> |
// </Card>
|
||||
</div> |
// </div>
|
||||
); |
// );
|
||||
} |
// }
|
||||
|
|
||||
function mapStateToProps(state) { |
// function mapStateToProps(state) {
|
||||
const { resetPwd } = state; |
// const { resetPwd } = state;
|
||||
return { |
// return {
|
||||
isRequesting: resetPwd.isRequesting, |
// isRequesting: resetPwd.isRequesting,
|
||||
}; |
// };
|
||||
} |
// }
|
||||
|
|
||||
export default connect(mapStateToProps)(ForgetPwdContainer); |
// export default connect(mapStateToProps)(ForgetPwdContainer);
|
||||
|
|||||
@ -0,0 +1,92 @@ |
|||||
|
import PropTypes from 'prop-types' |
||||
|
import React, { useEffect, useState } from "react"; |
||||
|
import { connect } from 'react-redux' |
||||
|
import { Table, message } from 'antd' |
||||
|
// import { getPartyMember } from '../../homePage/actions/profile'
|
||||
|
import { editLaborParty } from '../actions/party' |
||||
|
import EditParty from '../components/edit-party'; |
||||
|
|
||||
|
var request = false |
||||
|
export const Default = (props) => { |
||||
|
|
||||
|
const { dispatch } = props; |
||||
|
|
||||
|
const [partyLabor, setPartyLabor] = useState(); |
||||
|
const [showEdit, setShowEdit] = useState(false); |
||||
|
const [editData, setEditData] = useState(); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
// dispatch(getPartyMember()).then(res => {
|
||||
|
// if (res.success) {
|
||||
|
// setPartyLabor(res.payload.data);
|
||||
|
// }
|
||||
|
// })
|
||||
|
}, [request]) |
||||
|
|
||||
|
const onEditParty = (record) => { |
||||
|
setShowEdit(true); |
||||
|
setEditData(record) |
||||
|
} |
||||
|
|
||||
|
const tableColumns = [ |
||||
|
{ |
||||
|
key: 'num', |
||||
|
dataIndex: 'num', |
||||
|
title: '序号', |
||||
|
render: () => { |
||||
|
return <span>1</span> |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
key: 'partyNumber', |
||||
|
dataIndex: 'partyNumber', |
||||
|
title: '党员人数', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'laborUnion', |
||||
|
dataIndex: 'laborUnion', |
||||
|
title: '工会人数', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'ation', |
||||
|
title: '操作', |
||||
|
render: (text, record) => { |
||||
|
return <a onClick={() => onEditParty(record)}>编辑</a> |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const handleOk = (values) => { |
||||
|
if (values) { |
||||
|
const { labor, party } = values |
||||
|
const result = { partyNumber: party, laborUnion: labor } |
||||
|
dispatch(editLaborParty(result)).then(res => { |
||||
|
if (res.success) { |
||||
|
message.success("编辑成功"); |
||||
|
request = !request; |
||||
|
handleCancel(); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
const handleCancel = () => { |
||||
|
setShowEdit(false); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<p style={{ marginBottom: 16, fontSize: 16 }}>党员、工会人数维护</p> |
||||
|
<Table columns={tableColumns} dataSource={partyLabor ? [partyLabor] : []} /> |
||||
|
<EditParty editData={editData} visible={showEdit} handleOk={handleOk} handleCancel={handleCancel} /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
Default.propTypes = { |
||||
|
second: PropTypes.third |
||||
|
} |
||||
|
|
||||
|
const mapStateToProps = (state) => ({}) |
||||
|
|
||||
|
|
||||
|
export default connect(mapStateToProps)(Default) |
||||
@ -1,163 +1,189 @@ |
|||||
/* |
/* |
||||
* @description : |
* @description : |
||||
* @Date : 2021-04-07 14:39:33 |
* @Date : 2021-04-07 14:39:33 |
||||
* @FilePath : \web\client\src\sections\user\components\userManagement\importUser.js |
* @FilePath : \web\client\src\sections\user\components\userManagement\importUser.js |
||||
* @useStrict : use strict |
* @useStrict : use strict |
||||
*/ |
*/ |
||||
|
|
||||
'use strict'; |
"use strict"; |
||||
import React, { useState } from 'react'; |
import React, { useState } from "react"; |
||||
import { connect } from 'react-redux'; |
import { connect } from "react-redux"; |
||||
import { Button, Input, Card, Modal, Upload, message } from 'antd'; |
import { Button, Input, Card, Modal, Upload, message } from "antd"; |
||||
import { Request } from '@peace/utils' |
import { Request } from "@peace/utils"; |
||||
import request from 'superagent' |
import request from "superagent"; |
||||
import XLSX from 'xlsx' |
import XLSX from "xlsx"; |
||||
// import { userBulkAdd } from '../../actions'
|
import { postInPeople } from "../actions/article"; |
||||
|
|
||||
//TODO 下载模板和上传文件读取
|
//TODO 下载模板和上传文件读取
|
||||
const ImportUser = props => { |
const ImportUser = (props) => { |
||||
const { user, dispatch, handleCancel, params,editData } = props |
const { user, dispatch, handleCancel, params, editData } = props; |
||||
const [msg, setMsg] = useState('') |
const [msg, setMsg] = useState(""); |
||||
const [loading, setLoading] = useState('') |
const [loading, setLoading] = useState(""); |
||||
const [postData, setPostData] = useState([]) |
const [postData, setPostData] = useState([]); |
||||
|
|
||||
const confirm = () => { |
const confirm = () => { |
||||
if (postData.length) { |
if (postData.length) { |
||||
setLoading(true) |
setLoading(true); |
||||
// dispatch(userBulkAdd(postData, params.departmentId ? params.departmentId : null)).then(res => {
|
dispatch(postInPeople(postData)).then((res) => { |
||||
// if (res.success) {
|
if (res.success) { |
||||
|
handleCancel(); |
||||
// }
|
message.success("上传成功"); |
||||
// setLoading(false)
|
|
||||
// })
|
|
||||
} else { |
|
||||
message.warn('没有数据可以提交，请上传数据文件') |
|
||||
} |
} |
||||
|
setLoading(false); |
||||
|
}); |
||||
|
} else { |
||||
|
message.warn("没有数据可以提交，请上传数据文件"); |
||||
} |
} |
||||
|
}; |
||||
|
|
||||
return ( |
return ( |
||||
<Modal |
<Modal |
||||
visible={props.importVisible} |
visible={props.importVisible} |
||||
onOk={confirm} |
onOk={confirm} |
||||
confirmLoading={loading} |
confirmLoading={loading} |
||||
onCancel={() => { |
onCancel={() => { |
||||
setMsg('') |
setMsg(""); |
||||
setLoading(false) |
setLoading(false); |
||||
setPostData([]) |
setPostData([]); |
||||
handleCancel() |
handleCancel(); |
||||
}} |
}} |
||||
destroyOnClose |
destroyOnClose |
||||
> |
> |
||||
{/* <Button size="small" type='primary' onClick={() => { |
{/* <Button size="small" type='primary' onClick={() => { |
||||
Request.get(`attachments?src=upload/files/1.jpg&filename=${encodeURIComponent('1.jpg')}&token=${user.token}`).then(res => { |
Request.get(`attachments?src=upload/files/1.jpg&filename=${encodeURIComponent('1.jpg')}&token=${user.token}`).then(res => { |
||||
|
|
||||
}) |
}) |
||||
}}>下载模板</Button> */} |
}}>下载模板</Button> */} |
||||
<a href={'/_api/' + `attachments?src=files/用户信息导入模板.xlsx&filename=${encodeURIComponent('用户信息导入模板.xlsx')}&token=${user.token}`} > |
<a |
||||
<Button size="small" type='primary' >下载模板</Button> |
href={ |
||||
</a> |
"/_api/" + |
||||
<div style={{ marginTop: 10 }}>下载模板后填写完整后上传</div> |
`attachments?src=files/用户信息导入模板.xlsx&filename=${encodeURIComponent( |
||||
<div style={{ marginTop: 10 }}> |
"用户信息导入模板.xlsx" |
||||
<Upload {...{ |
)}&token=${user.token}` |
||||
name: 'user_d', |
} |
||||
action: '/', |
> |
||||
maxCount: 1, |
<Button size="small" type="primary"> |
||||
showUploadList: { |
下载模板 |
||||
showRemoveIcon: false |
</Button> |
||||
}, |
</a> |
||||
beforeUpload: (file) => { |
<div style={{ marginTop: 10 }}>下载模板后填写完整后上传</div> |
||||
setMsg('') |
<div style={{ marginTop: 10 }}> |
||||
setPostData([]) |
<Upload |
||||
const extNames = file.name.split('.'); |
{...{ |
||||
let isDAE = false; |
name: "user_d", |
||||
if (extNames.length > 0) { |
action: "/", |
||||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
maxCount: 1, |
||||
isDAE = ['xlsx', 'xls'].some((f) => f == fileType); |
showUploadList: { |
||||
} |
showRemoveIcon: false, |
||||
if (!isDAE) { |
}, |
||||
setMsg(`只能上传 ${['xlsx', 'xls'].join()} 格式的文件!`); |
beforeUpload: (file) => { |
||||
return false; |
setMsg(""); |
||||
} |
setPostData([]); |
||||
}, |
const extNames = file.name.split("."); |
||||
onChange(info) { |
let isDAE = false; |
||||
|
if (extNames.length > 0) { |
||||
|
let fileType = extNames[extNames.length - 1].toLowerCase(); |
||||
|
isDAE = ["xlsx", "xls"].some((f) => f == fileType); |
||||
|
} |
||||
|
if (!isDAE) { |
||||
|
setMsg(`只能上传 ${["xlsx", "xls"].join()} 格式的文件!`); |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
onChange(info) {}, |
||||
|
customRequest: async (data) => { |
||||
|
const { file, onSuccess, onError } = data; |
||||
|
|
||||
}, |
const reader = new FileReader(); // 使用 FileReader 读取数据
|
||||
customRequest: async (data) => { |
reader.onload = function (e) { |
||||
const { file, onSuccess, onError } = data |
// 数据读取完成后的回调函数
|
||||
|
const data = new Uint8Array(e.target.result); |
||||
|
const workbook = XLSX.read(data, { type: "array" }); // workbook 是 xlsx 解析 excel 后返回的对象
|
||||
|
|
||||
const reader = new FileReader(); // 使用 FileReader 读取数据
|
const firstSheetName = workbook.SheetNames[0]; // 获取第一个 sheet 的名字
|
||||
reader.onload = function (e) { // 数据读取完成后的回调函数
|
const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个 sheet 的内容
|
||||
const data = new Uint8Array(e.target.result); |
const res = XLSX.utils.sheet_to_json(worksheet); // 使用 utils 里的方法转换内容为便于使用的数组
|
||||
const workbook = XLSX.read(data, { type: 'array' }); // workbook 是 xlsx 解析 excel 后返回的对象
|
console.log(res); |
||||
|
const error = (msg) => { |
||||
|
setMsg(msg); |
||||
|
onError({ message: msg }); |
||||
|
}; |
||||
|
if (res.length > 1000) { |
||||
|
error("一次性上传数据行数应小于1000行，请分批上传"); |
||||
|
return; |
||||
|
} |
||||
|
if (!res.length) { |
||||
|
error("请填写至少一行数据"); |
||||
|
return; |
||||
|
} |
||||
|
let postData = []; |
||||
|
|
||||
const firstSheetName = workbook.SheetNames[0]; // 获取第一个 sheet 的名字
|
for (let i = 0; i < res.length; i++) { |
||||
const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个 sheet 的内容
|
let d = res[i]; |
||||
const res = XLSX.utils.sheet_to_json(worksheet); // 使用 utils 里的方法转换内容为便于使用的数组
|
let name_people = String(d["人员姓名"]).trim(); |
||||
const error = (msg) => { |
|
||||
setMsg(msg) |
let post_people = String(d["岗位"]).trim(); |
||||
onError({ message: msg }) |
let time = String(d["本周计划"]).trim(); |
||||
} |
let project = String(d["本周任务"]).trim(); |
||||
if (res.length > 1000) { |
if (!name_people || !post_people || !time || !project) { |
||||
error('一次性上传数据行数应小于1000行，请分批上传') |
error(`第${i + 1} 行有空值，请填写后重新上传`); |
||||
return |
return; |
||||
} |
} |
||||
if (!res.length) { |
postData.push({ |
||||
error('请填写至少一行数据') |
name_people, |
||||
return |
post_people, |
||||
} |
time, |
||||
let postData = [] |
project, |
||||
const pattern = /^1[3|4|5|6|7|8|9]\d{9}$/ |
}); |
||||
for (let i = 0; i < res.length; i++) { |
} |
||||
let d = res[i] |
if (postData.length) { |
||||
let name = String(d['姓名']).trim(); |
let newArray = postData.reduce((total, cur, index) => { |
||||
let phone = String(d['手机号码']).trim(); |
let hasValue = total.findIndex((current) => { |
||||
let account = String(d['账号']).trim(); |
return current.name_people === cur.name_people; |
||||
let peopleCode = d['人员编号'] && String(d['人员编号']).trim(); |
}); |
||||
if (!name || !phone || !account || !peopleCode) { |
let obj = { |
||||
error(`第${i + 1} 行有空值，请填写后重新上传`) |
name_people: cur.name_people, |
||||
return |
post_people: cur.post_people, |
||||
} |
work: [ |
||||
if (!pattern.test(phone)) { |
{ |
||||
error(`第${i + 1} 行手机号码错误`) |
time: cur.time, |
||||
return |
project: cur.project, |
||||
} |
}, |
||||
if (name.length > 128 || account.length > 128) { |
], |
||||
error(`第${i + 1} 行数据字符长度大于 128，请更改后重新上传`) |
}; |
||||
return |
let obj1 = { |
||||
} |
time: cur.time, |
||||
if (postData.some(p => p.account == account)) { |
project: cur.project, |
||||
error(`第${i + 1} 行账号重复，请更改后重新上传`) |
}; |
||||
return |
hasValue === -1 && total.push(obj); |
||||
} |
hasValue !== -1 && total[hasValue].work.push(obj1); |
||||
postData.push({ |
return total; |
||||
name, phone, account, peopleCode |
}, []); |
||||
}) |
console.log(newArray); |
||||
} |
setPostData(newArray); |
||||
if (postData.length) { |
} |
||||
setPostData(postData) |
let msg = "文件解析完成，点击确定按钮上传保存！"; |
||||
} |
setMsg(msg); |
||||
let msg = '文件解析完成，点击确定按钮上传保存！' |
onSuccess({ message: msg }); |
||||
setMsg(msg) |
}; |
||||
onSuccess({ message: msg }) |
reader.readAsArrayBuffer(file); // 读取数据
|
||||
}; |
}, |
||||
reader.readAsArrayBuffer(file); // 读取数据
|
}} |
||||
}, |
> |
||||
}}> |
<Button>上传文件</Button> |
||||
<Button>上传文件</Button> |
</Upload> |
||||
</Upload> |
<br /> |
||||
<br /> |
<span>{msg}</span> |
||||
<span>{msg}</span> |
</div> |
||||
</div> |
</Modal> |
||||
</Modal > |
); |
||||
) |
}; |
||||
} |
|
||||
|
|
||||
function mapStateToProps(state) { |
function mapStateToProps(state) { |
||||
const { auth, customizeList } = state; |
const { auth, customizeList } = state; |
||||
return { |
return { |
||||
user: auth.user, |
user: auth.user, |
||||
} |
}; |
||||
} |
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(ImportUser); |
||||
export default connect(mapStateToProps)(ImportUser); |
|
||||
|
|||||
Loading…
Reference in new issue