123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 |
- import React, { PureComponent } from 'react';
- import { Card, Form, Table, Input, Button, Radio, Icon, Switch } from 'antd';
- import { connect } from 'dva';
- import { routerRedux } from 'dva/router';
- import FooterToolbar from '../../../components/FooterToolbar';
- import {renderAvatar, renderGender, renderStatus, boolToStatus, statusToBool} from '../../../utils/utils';
- import styles from './CmsUserCreate.less';
- const genders = [{
- title: '男',
- value: 'MALE',
- }, {
- title: '女',
- value: 'FEMALE',
- }];
- const fieldLabels = {
- nickName: '用户昵称',
- gender: '用户性别',
- birthday: '出生日期',
- mobile: '电话',
- mail: '邮箱',
- qq: 'QQ号码',
- weChat: '微信号码',
- password: '用户密码',
- confirm: '确认密码',
- status: '账号状态',
- };
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 6 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 14 },
- md: { span: 12 },
- },
- };
- function cmsUserDataFormatter(item) {
- const {
- qq,
- name,
- mail,
- weChat,
- mobile,
- status,
- gender,
- avatar,
- birthday,
- nickName,
- merchantName,
- } = item;
- return [{
- key: 1,
- field: '用户头像',
- text: renderAvatar(avatar, nickName),
- }, {
- key: 2,
- field: '用户名称',
- text: name,
- }, {
- key: 3,
- field: '用户昵称',
- text: nickName,
- }, {
- key: 4,
- field: '出生日期',
- text: birthday,
- }, {
- key: 5,
- field: '用户性别',
- text: renderGender(gender),
- }, {
- key: 6,
- field: '所属商户',
- text: merchantName,
- }, {
- key: 7,
- field: '联系电话',
- text: mobile,
- }, {
- key: 8,
- field: 'QQ号码',
- text: qq,
- }, {
- key: 9,
- field: '微信',
- text: weChat,
- }, {
- key: 10,
- field: '邮箱',
- text: mail,
- }, {
- key: 11,
- field: '账号状态',
- text: renderStatus(status),
- }];
- }
- @Form.create()
- @connect(({ loading, cmsUser }) => ({
- cmsUser,
- submitting: loading.models.cmsUser,
- }))
- export default class CmsUserEditPage extends PureComponent {
- state = {
- currentItem: {},
- passwordEdit: false,
- };
- componentWillMount() {
- this.setState({
- currentItem: this.props.location.state.currentItem,
- });
- }
- checkPassword = (rule, value, callback) => {
- if (value && value !== this.props.form.getFieldValue('password')) {
- callback('两次输入的密码不一致');
- } else if (!value) {
- callback('请再次输入密码进行确认');
- } else {
- callback();
- }
- };
- handlePasswordEdit = () => {
- this.setState({
- passwordEdit: true,
- });
- };
- handlePasswordSave = () => {
- this.props.form.validateFieldsAndScroll((error) => {
- if (!error) {
- this.setState({
- passwordEdit: false,
- });
- }
- });
- };
- handlePageSubmit = () => {
- this.props.form.validateFieldsAndScroll((error, values) => {
- const { currentItem, passwordEdit } = this.state;
- const { id } = currentItem;
- const { status, ...restProps } = values;
- restProps.status = boolToStatus(status);
- restProps.id = id;
- if (!error && !passwordEdit) {
- this.props.dispatch({
- type: 'cmsUser/updateCmsUserItem',
- payload: restProps,
- states: this.props.location.state,
- });
- }
- });
- };
- handlePageBack = () => {
- this.props.dispatch(routerRedux.push({
- pathname: '/system/cms-user/list',
- state: this.props.location.state,
- }));
- };
- render() {
- const { form, submitting } = this.props;
- const { currentItem, passwordEdit } = this.state;
- const { getFieldDecorator } = form;
- const {
- qq,
- mail,
- gender,
- weChat,
- status,
- birthday,
- nickName,
- mobile,
- } = currentItem;
- const campusColumns = [{
- title: '字段名',
- key: 1,
- dataIndex: 'field',
- width: '15%',
- }, {
- title: '字段值',
- key: 2,
- dataIndex: 'text',
- width: '85%',
- }];
- return (
- <div>
- <Card title="用户详情" style={{ marginBottom: 16 }}>
- <Form>
- <Form.Item wrapperCol={{ span: 13, offset: 5 }}>
- <Table
- bordered
- size="small"
- showHeader={false}
- pagination={false}
- className={styles.infoTable}
- columns={campusColumns}
- dataSource={cmsUserDataFormatter(currentItem)}
- />
- </Form.Item>
- </Form>
- </Card>
- <Card title="修改信息" style={{ marginBottom: 70 }}>
- <Form hideRequiredMark>
- <Form.Item label={fieldLabels.nickName} {...formItemLayout}>
- {getFieldDecorator('nickName', {
- initialValue: nickName,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.password} {...formItemLayout}>
- {getFieldDecorator('password', {
- rules: [
- {
- pattern: /^[a-zA-Z0-9|-]+$/ig, message: '密码格式错误!',
- }],
- })(
- <Input
- type="password"
- placeholder="请输入"
- disabled={!passwordEdit}
- addonBefore={<Icon type="lock" />}
- addonAfter={
- passwordEdit ? (
- <Icon type="save" onClick={this.handlePasswordSave} />
- ) : (
- <Icon type="edit" onClick={this.handlePasswordEdit} />
- )
- }
- />
- )}
- </Form.Item>
- {passwordEdit && (
- <Form.Item label={fieldLabels.confirm} {...formItemLayout}>
- {getFieldDecorator('confirm', {
- rules: [
- {
- validator: this.checkPassword,
- }],
- })(
- <Input
- type="password"
- placeholder="请输入"
- addonBefore={<Icon type="lock" />}
- />
- )}
- </Form.Item>
- )}
- <Form.Item label={fieldLabels.birthday} {...formItemLayout}>
- {getFieldDecorator('birthday', {
- initialValue: birthday,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.mobile} {...formItemLayout}>
- {getFieldDecorator('mobile', {
- rules: [{
- pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
- }],
- initialValue: mobile,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.mail} {...formItemLayout}>
- {getFieldDecorator('mail', {
- initialValue: mail,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.qq} {...formItemLayout}>
- {getFieldDecorator('qq', {
- initialValue: qq,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.weChat} {...formItemLayout}>
- {getFieldDecorator('weChat', {
- initialValue: weChat,
- })(
- <Input placeholder="请输入" />
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.gender} {...formItemLayout}>
- {getFieldDecorator('gender', {
- initialValue: gender,
- })(
- <Radio.Group className={styles.radio}>
- {
- genders.map(item =>
- (
- <Radio.Button
- key={item.value}
- value={item.value}
- >{item.title}
- </Radio.Button>
- )
- )
- }
- </Radio.Group>
- )}
- </Form.Item>
- <Form.Item label={fieldLabels.status} {...formItemLayout}>
- {getFieldDecorator('status', {
- valuePropName: 'checked',
- initialValue: statusToBool(status),
- })(
- <Switch
- checkedChildren="启用"
- unCheckedChildren="禁用"
- />
- )}
- </Form.Item>
- </Form>
- </Card>
- <FooterToolbar style={{ width: '100%' }}>
- <Button
- onClick={this.handlePageBack}
- style={{ marginRight: 10 }}
- >取消
- </Button>
- <Button
- type="primary"
- loading={submitting}
- onClick={this.handlePageSubmit}
- >提交
- </Button>
- </FooterToolbar>
- </div>
- );
- }
- }
|