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 '../../common/multiSelect';
|
import Fetch from '../fetch';
|
import { saveUser, findGroups, findRoles } from "../fetch/api";
|
import ChangePswView from '../component/ChangePswView';
|
import { domain } from "../fetch/_";
|
console.log(domain)
|
|
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: true,
|
user: {},
|
account: {},
|
groupIds: [], //组
|
roleIds: [], //角色
|
|
previewVisible: false,
|
previewImage: '',
|
fileList: [],
|
|
roleList: [],
|
ownRoles: [],
|
groupList: [],
|
ownGroups: [],
|
changePswVisible: false,
|
btnLoading: false
|
}
|
}
|
componentWillMount() {
|
let _this = this;
|
findGroups().then(res => {
|
_this.setState({
|
groupList: res.data
|
})
|
});
|
findRoles().then(res => {
|
_this.setState({
|
roleList: res.data
|
})
|
})
|
}
|
|
componentDidMount() {
|
let _this = this;
|
if (_this.id !== '') {
|
Fetch.getUserDetail({ id: _this.id })
|
.then(res => {
|
console.log('detail', res)
|
this.setState({
|
dataSet: res,
|
spinning: false,
|
user: res.user,
|
account: res.account,
|
groupIds: res.groupIds,
|
roleIds: res.roleIds,
|
fileList: (res.user.avatar == null || res.user.avatar == '') ? [] : [{
|
uid: '-1',
|
name: 'xxx.png',
|
status: 'done',
|
url: res.user.avatar
|
}]
|
});
|
});
|
}
|
_this.setState({
|
spinning: false
|
})
|
}
|
|
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) => {
|
console.log('data', data);
|
let _this = this;
|
const { getFieldValue } = _this.props.form;
|
let formData = {
|
accountId: _this.state.account.id,
|
newPassword: data.newPassWord
|
}
|
_this.setState({
|
btnLoading: true
|
})
|
Fetch.getChangePsw(formData).then(res => {
|
console.log('res', res);
|
if (res.code == 0) {
|
message.success("密码修改成功", 2);
|
} else {
|
message.error(res.message, 2);
|
}
|
_this.setState({
|
btnLoading: false,
|
changePswVisible: false
|
})
|
})
|
}
|
|
handleSubmit = (e) => { // 提交表单数据
|
e.preventDefault();
|
let _this = this;
|
_this.props.form.validateFields((err, values) => {
|
if (err) return;
|
_this.setState({ spinning: true });
|
(values.sex == "1" || values.sex == "男") ? values.sex = 1 : values.sex = 2;
|
saveUser({
|
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 => {
|
if (res.code === 0) {
|
message.success("保存用户成功", 2, () => {
|
_this.setState({ spinning: false });
|
_this.props.history.push("/baseManage/user")
|
});
|
} else {
|
message.error(res.msg, 2);
|
}
|
})
|
})
|
}
|
|
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 (
|
<Layout className="h-100 page-table">
|
<Breadcrumb className="breadcrumb-style">
|
<Breadcrumb.Item>基础管理</Breadcrumb.Item>
|
<Breadcrumb.Item>用户管理</Breadcrumb.Item>
|
<Breadcrumb.Item>{this.flag}</Breadcrumb.Item>
|
</Breadcrumb>
|
<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}>
|
<div className="border-bottom card-title">
|
<Row style={{ borderStyle: 'solid', borderWidth: 0.01, display: 'flex' }} className="flexbox" align="middle">
|
<span style={{ fontSize: 16, fontWeight: 650 }} className="flex1 vertical-middle">账号信息</span>
|
<div style={{ float: 'right' }}>
|
{/* <Link to="/baseManage/user"><Button type="default">返回</Button></Link>
|
*/}
|
<Button type="default" onClick={() => {
|
this.props.history.goBack();
|
}}>返回</Button>
|
<Button htmlType="submit" type="primary">确认</Button>
|
</div>
|
</Row>
|
</div>
|
<Card>
|
<Row>
|
<Col span={16}>
|
{
|
this.flag == '修改' ?
|
<Row>
|
<Col span={12}>
|
<FormItem label={"账号"} {...formItemLayout}>
|
{/* <Input placeholder="请输入账号" value={account.account || ''} disabled /> */}
|
{account.account || ''}
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={"密码"} {...formItemLayout}>
|
{/* <Input placeholder="请输入密码" disabled={true} type="password" value={account.credential || ''} disabled /> */}
|
{/* {account.credential || ''} */}
|
{'********'}
|
</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>
|
<div className="border-bottom card-title">
|
<Row style={{ borderStyle: 'solid', borderWidth: 0.01, display: 'flex' }} className="flexbox" align="middle">
|
<span style={{ fontSize: 16, fontWeight: 650 }} className="flex1 vertical-middle">基础信息</span>
|
</Row>
|
</div>
|
<Card>
|
<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>
|
<Option value="">请选择</Option>
|
<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={domain + `api/user/uploadAvatar`}
|
listType="picture-card"
|
fileList={fileList}
|
onPreview={this.handlePreview}
|
onChange={this.handleChange}
|
onRemove={this.handleRemove}
|
>
|
{fileList.length > 0 ? null : uploadButton}
|
</Upload>
|
{/* <img style={{height:200,width:200}} src={user.avatar || 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539672841&di=042d8481194441c486945d99dfe79495&src=http://www.qqwangming.org/uploads/71f459727f5055a0/8.jpg'} alt=""/> */}
|
</div>
|
</Col>
|
</Row>
|
</Card>
|
</Form>
|
<div className="border-bottom card-title">
|
<Row style={{ borderStyle: 'solid', borderWidth: 0.01, display: 'flex' }} className="flexbox" align="middle">
|
<span style={{ fontSize: 16, fontWeight: 650 }} className="flex1">拥有角色</span>
|
<Link to={{ pathname: "/organizationMgt/roleDetail/new/Add", state: { id: 'new' } }}>
|
<span style={{ float: 'right', fontSize: 10, fontColor: 'blue' }}>没有角色？点击新建</span>
|
</Link>
|
</Row>
|
</div>
|
<Card>
|
<Row>
|
<MultiSelect key={roleIds ? roleIds.toString() : 'init'} all={roleList} own={roleIds} onChange={this.roleChange} />
|
</Row>
|
</Card>
|
<div className="border-bottom card-title">
|
<Row style={{ borderStyle: 'solid', borderWidth: 0.01, display: 'flex' }} className="flexbox" align="middle">
|
<span style={{ fontSize: 16, fontWeight: 650 }} className="flex1">拥有组</span>
|
<Link to={{ pathname: "/baseManage/groupDetail/new/Add", state: { id: '' } }}>
|
<span style={{ float: 'right', fontSize: 10, fontColor: 'blue' }}>没有组？点击新建</span>
|
</Link>
|
</Row>
|
</div>
|
<Card>
|
<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} />
|
}
|
</Layout>
|
)
|
}
|
}
|
|
const UserDetailForm = Form.create()(UserDetail);
|
export default UserDetailForm;
|
