/* eslint-disable */
|
import React from 'react';
|
import { Link } from 'react-router-dom';
|
import { Card, Row, Col, Icon, Form, Input, Button, Select, Table, DatePicker, message, Breadcrumb, Spin, Layout, Upload, Modal } from 'antd';
|
import MultiSelect from '../../components/common/multiSelect';
|
import { BASE_URL } from '../../api/httpurl';
|
import fetch from '../../api/request';
|
import ChangePswView from '../../components/common/ChangePswView';
|
import { createHashHistory } from 'history';
|
|
const history = createHashHistory();
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
|
class UserDetail extends React.Component {
|
constructor(props) {
|
super(props)
|
this.id = props.match.params.id == 'new' ? '' : props.match.params.id;
|
this.flag = props.match.params.flag == 'Modify' ? '修改' : '新增';
|
this.state = {
|
spinning: false,
|
user: {},
|
account: {},
|
groupIds: [], //组
|
roleIds: [], //角色
|
|
previewVisible: false,
|
previewImage: '',
|
fileList: [],
|
|
roleList: [],
|
ownRoles: [],
|
groupList: [],
|
ownGroups: [],
|
changePswVisible: false,
|
btnLoading: false
|
}
|
}
|
componentDidMount() {
|
let p = [this.findGroups(), this.findRoles()];
|
if (this.id) {
|
p = p.concat(this.getUserDetail());
|
}
|
this.setState({
|
spinning: true
|
})
|
Promise.all(p).then(res => {
|
if (res.length == p.length) {
|
this.setState({
|
spinning: false,
|
groupList: res[0],
|
roleList: res[1]
|
});
|
if (this.id) {
|
let detail = res[res.length - 1]; //用户信息
|
this.setState({
|
dataSet: detail,
|
spinning: false,
|
user: detail.user,
|
account: detail.account,
|
groupIds: detail.groupIds,
|
roleIds: detail.roleIds,
|
fileList: (detail.user.avatar == null || detail.user.avatar == '') ? [] : [{
|
uid: '-1',
|
name: 'xxx.png',
|
status: 'done',
|
url: detail.user.avatar
|
}]
|
})
|
}
|
}
|
})
|
}
|
|
//组
|
findGroups = () => {
|
return new Promise((resolve, reject) => {
|
fetch({
|
url: `api/group/finds`,
|
}).then(res => {
|
resolve(res)
|
})
|
})
|
}
|
|
// 角色
|
findRoles = () => {
|
return new Promise((resolve, reject) => {
|
fetch({
|
url: `api/role/finds`,
|
}).then(res => {
|
resolve(res)
|
})
|
})
|
}
|
|
// 基础信息
|
getUserDetail = () => {
|
return new Promise((resolve, reject) => {
|
fetch({
|
url: `api/user/getById`,
|
params: {
|
id: this.id
|
}
|
}).then(res => {
|
if (res) {
|
resolve(res)
|
}
|
})
|
})
|
}
|
|
// 返回函数
|
goBack = () => {
|
history.goBack();
|
}
|
|
handleCancel = () => this.setState({ previewVisible: false })
|
|
handlePreview = (file) => {
|
this.setState({
|
previewImage: file.url || file.thumbUrl,
|
previewVisible: true,
|
});
|
}
|
|
handleChange = ({ fileList, file }) => {
|
const { user } = this.state;
|
this.setState({
|
fileList,
|
})
|
if (file.status == 'done') {
|
this.setState({
|
user: {
|
...user,
|
avatar: file.response.data
|
}
|
})
|
}
|
}
|
|
handleRemove = ({ fileList }) => {
|
const { user } = this.state;
|
this.setState({
|
user: {
|
...user,
|
avatar: ''
|
},
|
fileList: []
|
})
|
}
|
|
roleChange = checkedValues => {
|
this.setState({ roleIds: checkedValues })
|
}
|
groupChange = checkedValues => {
|
this.setState({ groupIds: checkedValues })
|
}
|
|
//修改用户密码
|
onOK = (data) => {
|
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;
|
_this.props.form.validateFields((err, values) => {
|
if (err) return;
|
_this.setState({ spinning: true });
|
fetch({
|
url: `api/user/save`,
|
method: 'POST',
|
data: {
|
account: {
|
..._this.state.account,
|
id: _this.state.account.id || '',
|
account: values.account,
|
credential: values.credential,
|
},
|
user: {
|
..._this.state.user,
|
id: _this.state.user.id,
|
trueName: values.trueName,
|
sex: values.sex,
|
idcard: values.idcard,
|
mobile: values.mobile,
|
email: values.email,
|
},
|
roleIds: _this.state.roleIds,
|
groupIds: _this.state.groupIds
|
}
|
}).then(res => {
|
_this.setState({ spinning: false })
|
if (res) {
|
message.success('保存用户成功');
|
history.goBack();
|
}
|
})
|
})
|
}
|
|
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()
|
}
|
|
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()
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 10 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
|
};
|
const { user, account, groupIds, roleIds, previewVisible, previewImage, fileList, roleList, groupList, changePswVisible, btnLoading } = this.state;
|
const uploadButton = (
|
<div>
|
<Icon type="plus" />
|
<div className="ant-upload-text">上传头像</div>
|
</div>
|
);
|
return (
|
<div className="userdetail-main margin padding bg-white">
|
|
<Spin spinning={this.state.spinning}>
|
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
</Modal>
|
<div style={{ margin: 20 }}>
|
<Form onSubmit={this.handleSubmit}>
|
<Card title="账号信息" bordered={false} extra={
|
<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.goBack}>返回</Button>
|
</Col>
|
<Col>
|
<Button type="primary" htmlType="submit" >确认</Button>
|
</Col>
|
</Row>
|
}>
|
<Row>
|
<Col span={16}>
|
{
|
this.flag == '修改' ?
|
<Row>
|
<Col span={12}>
|
<FormItem label={"账号"} {...formItemLayout}>
|
{account.account || ''}
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"密码"} {...formItemLayout}>
|
{'********'}
|
</FormItem>
|
</Col>
|
</Row>
|
:
|
<Row>
|
<Col span={12}>
|
<FormItem label={"账号"} {...formItemLayout}>
|
{getFieldDecorator('account', {
|
rules: [{ required: true, message: '账号必填' }],
|
initialValue: account.account || ''
|
})(
|
<Input placeholder="请输入账号" />
|
)}</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"密码"} {...formItemLayout} hasFeedback>
|
{getFieldDecorator('credential', {
|
rules: [{ required: true, message: '密码必填' }],
|
initialValue: account.credential || ''
|
})(
|
<Input.Password placeholder="请输入密码" type="password" />
|
)}</FormItem>
|
</Col>
|
</Row>
|
}
|
</Col>
|
{
|
this.flag == '修改' &&
|
<Col span={8}>
|
<div style={{ marginLeft: '20%' }}>
|
<Button type="primary" onClick={() => {
|
this.setState({
|
changePswVisible: true
|
})
|
}}>修改密码</Button>
|
</div>
|
</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
|
})(
|
<Select placeholder="请选择">
|
<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>
|
<Col span={8}>
|
<div style={{ marginLeft: '20%' }}>
|
<Upload
|
action={BASE_URL + `api/user/uploadAvatar`}
|
listType="picture-card"
|
fileList={fileList}
|
onPreview={this.handlePreview}
|
onChange={this.handleChange}
|
onRemove={this.handleRemove}
|
>
|
{fileList.length > 0 ? null : uploadButton}
|
</Upload>
|
</div>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
|
<Card title="拥有角色" bordered={false} extra={<Link to={{ pathname: "/organizationMgt/roleDetail/new/Add", state: { id: 'new' } }}>没有角色？点击新建</Link>}>
|
<Row>
|
<MultiSelect key={roleIds ? roleIds.toString() : 'init'} all={roleList} own={roleIds} onChange={this.roleChange} />
|
</Row>
|
</Card>
|
|
<Card title="拥有组" bordered={false} extra={<Link to={{ pathname: "/baseManage/groupDetail/new/Add", state: { id: '' } }}>没有组？点击新建</Link>}>
|
<Row>
|
<MultiSelect key={groupIds ? groupIds.toString() : 'init'} all={groupList} own={groupIds} onChange={this.groupChange} />
|
</Row>
|
</Card>
|
</div>
|
</Spin>
|
{
|
changePswVisible && <ChangePswView onCancel={() => { this.setState({ changePswVisible: false }) }} onOK={this.onOK} btnLoading={btnLoading} />
|
}
|
</div>
|
)
|
}
|
}
|
|
const UserDetailForm = Form.create()(UserDetail);
|
export default UserDetailForm;
|
