/* eslint-disable */
|
/**kelq
|
* 4/29/2020, 4:28:00 PM
|
* doc comment for the file goes here
|
*/
|
|
/** 个人信息 */
|
import React, { ReactNode, ReactEventHandler, Component } from 'react';
|
import { Card, Form, Row, Col, Input, Button, Select, message, Spin } from 'antd';
|
import ChangePswView from '../../../common/ChangePswView';
|
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
|
import './index.scss';
|
import fetch from '../../../../api/request';
|
import creatHistory from 'history/createHashHistory';
|
const history = creatHistory();//返回上一页这段代码
|
|
class Information extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {
|
};
|
this.state = {
|
spinning: true,
|
btnLoading: false,//修改密码弹窗loading
|
submitLoading: false,//提交按钮loading
|
account: {},
|
user: {}
|
};
|
}
|
|
componentDidMount() {
|
this.initPersonInfo();
|
}
|
|
initPersonInfo = () => {
|
this.setState({ spinning: true })
|
fetch({
|
url: `api/user/findUserInfo`,
|
}).then(res => {
|
this.setState({ spinning: false });
|
if (res) {
|
console.log('res', res);
|
this.setState({
|
...res
|
})
|
}
|
})
|
}
|
|
// 验证手机格式
|
isMobile = (rule, value, callback) => {
|
const regMobile = /^0?1[3|4|5|8][0-9]\d{8}$/
|
if (!regMobile.test(value)) {
|
if (value == "") {
|
callback();
|
return;
|
} else {
|
callback('手机号码格式不正确');
|
return;
|
}
|
}
|
callback()
|
}
|
|
// 验证idcard格式
|
isIdCard = (rule, value, callback) => {
|
const regMobile = /^[1-9]\d{7}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
|
if (!regMobile.test(value)) {
|
if (value == "") {
|
callback();
|
return;
|
} else {
|
callback('身份证号码格式不正确');
|
return;
|
}
|
}
|
callback()
|
}
|
|
//修改密码
|
onOK = (data) => {
|
console.log('data', data);
|
let _this = this;
|
let formData = {
|
accountId: _this.state.account.id,
|
newPassword: data.newPassWord
|
}
|
_this.setState({
|
btnLoading: true
|
})
|
fetch({
|
url: `api/account/changePassword`,
|
params: formData
|
}).then(res => {
|
_this.setState({
|
btnLoading: false,
|
changePswVisible: false
|
})
|
if (res) {
|
message.success("密码修改成功");
|
}
|
})
|
}
|
|
//修改个人信息
|
handleSubmit = (e) => {
|
e.preventDefault();
|
let _this = this;
|
let { account, user } = _this.state;
|
_this.props.form.validateFields((err, values) => {
|
if (err) return;
|
console.log(values);
|
_this.setState({ submitLoading: true })
|
fetch({
|
url: `api/user/save`,
|
method: 'POST',
|
data: {
|
user: {
|
..._this.state.user,
|
trueName: values.trueName,
|
sex: values.sex,
|
idcard: values.idcard,
|
mobile: values.mobile,
|
email: values.email,
|
}
|
}
|
}).then(res => {
|
_this.setState({ submitLoading: false });
|
if (res) {
|
message.success('保存成功')
|
this.props.setData({
|
key: Date.now()
|
})
|
}
|
})
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const { account, user, changePswVisible, btnLoading, spinning, submitLoading } = this.state;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 10 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
|
};
|
|
return (
|
<div className="information-main">
|
{
|
spinning && <Spin spinning={this.state.spinning} style={{ height: 200, display: 'flex', justifyContent: 'center', alignItems: 'center' }}></Spin>
|
}
|
{
|
!spinning && <React.Fragment>
|
<Card title="账号信息" bordered={false} >
|
<Row>
|
<Col span={16}>
|
<Row>
|
<Col span={12}>
|
<FormItem label={"账号"} {...formItemLayout}>
|
{account.account || ''}
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"密码"} {...formItemLayout}>
|
<div>
|
********<Button type="primary" onClick={() => {
|
this.setState({
|
changePswVisible: true
|
})
|
}} style={{ marginLeft: 20 }}>修改密码</Button>
|
</div>
|
</FormItem>
|
</Col>
|
</Row>
|
</Col>
|
</Row>
|
</Card>
|
<Card title="基础信息" bordered={false} >
|
<Row>
|
<Col span={16}>
|
<Row>
|
<Col span={12}>
|
<FormItem label={"姓名"} {...formItemLayout}>
|
{getFieldDecorator('trueName', {
|
rules: [{ required: true, message: '姓名必填' }],
|
initialValue: user.trueName || ''
|
})(
|
<Input placeholder="请输入姓名" />
|
)}</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"性别"} {...formItemLayout}>
|
{getFieldDecorator('sex', {
|
rules: [{ required: true, message: '微信用户名称必填' }],
|
initialValue: user.sex || undefined
|
})(
|
// <Input placeholder="请输入" />
|
<Select placeholder="请选择" style={{ width: '100%' }}>
|
<Option value={1}>男</Option>
|
<Option value={2}>女</Option>
|
</Select>
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={12}>
|
<FormItem label={"手机号码"} {...formItemLayout}>
|
{getFieldDecorator('mobile', {
|
rules: [{
|
required: true, message: '手机号码必填'
|
}, {
|
validator: this.isMobile
|
}],
|
initialValue: user.mobile || ''
|
})(
|
<Input placeholder="请输入手机号码" />
|
)}</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"电子邮箱"} {...formItemLayout}>
|
{getFieldDecorator('email', {
|
rules: [{
|
type: 'email', message: '电子邮箱格式不正确',
|
}],
|
initialValue: user.email || ''
|
})(
|
<Input placeholder="请输入电子邮箱" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Col span={12}>
|
<FormItem label={"身份证号码"} {...formItemLayout}>
|
{getFieldDecorator('idcard', {
|
rules: [{
|
required: true, message: '身份证号码必填'
|
}, {
|
validator: this.isIdCard
|
}],
|
initialValue: user.idcard || ''
|
})(
|
<Input placeholder="请输入身份证号码" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
</Col>
|
</Row>
|
</Card>
|
|
<Row type="flex" gutter={20} style={{ marginTop: '12px' }}>
|
{/* <Col className="gutter-row" ><Button onClick={() => { history.goBack() }}>返回</Button></Col> */}
|
<Col className="gutter-row" ><Button type="primary" loading={submitLoading} onClick={this.handleSubmit}>确定</Button></Col>
|
</Row>
|
{
|
changePswVisible && <ChangePswView onCancel={() => { this.setState({ changePswVisible: false }) }} onOK={this.onOK} btnLoading={btnLoading} />
|
}
|
</React.Fragment>
|
}
|
|
</div>
|
|
)
|
}
|
}
|
|
const InformationForm = Form.create()(Information);
|
export default InformationForm;
|
