AvatarDropdown.js

import React from 'react';

import {
  Avatar,
  Form,
  Input,
  message,
  Modal,
  Popover,
  Spin,
  Upload,
} from 'antd';
import { withRouter } from 'react-router';
import Cookies from 'js-cookie';
import {
  FormattedMessage,
  useIntl,
} from '@/locales/localeExports';
import { request } from '@wisdom-utils/utils';

import { appService } from '../../api';
// eslint-disable-next-line import/named
import { API } from '../../api/service/base';
import globalHeader from '../../locales/zh-CN/globalHeader';
import styles from './index.less';

// import i18n from '../../utils/share';
// const app = i18n.getI18n('component');
const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
};

/* eslint-disable */
const getIOT = () =>
  (window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html' ||
    window.globalConfig.loginTemplate === '新春 - 智联.html')
class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */

  constructor(props) {
    super(props);
    let {
      currentUser = {
        avatar: this.transformAvatarImage(),
        name:
          (props.global &&
            props.global.userInfo &&
            props.global.userInfo.fullName) ||
          'Serati Ma',
      },
    } = this.props;
    this.state = {
      currentUser: currentUser,
      visible: false,
      popVisible: false,
      path: null,
      version: null,
      action: API.UPLOAD_FILE_URL
    }
  }
  loginout = event => {
    // eslint-disable-next-line no-undef
    this.props.logout();
    if (
      window.globalConfig.style === 'ios' &&
      window.globalConfig.loginTemplate === 'IOSCloud.html'
    ) {
      window.location.href = `${window.location.origin}/#login`;
      return false;
    }
    // console.log(this.props)
    // this.props.history.push('/login')
    // window.location.reload();
    //
  };

  getRoles = () => {
    const roles = this.props.global.userInfo.roles || [];
    const ret = [];
    roles.forEach(item => {
      ret.push(item.name);
    });
    return ret.join(',');
  };


  showModal = event => {
    event.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  handleOk = (event, form) => {
    event.stopPropagation();
    form
      .validateFields()
      .then(res => {
        const params = getIOT()
          ? {
              newPassword: res.newPwd,
              phone: window.globalConfig.userInfo.Phone,
            }
          : {
              password: res.oldPwd,
              newpassword: res.newPwd,
              token: window.globalConfig.token,
            };
        appService.changePassword(params)
          .then(res => {
            if (res.success) {
              //message.success(useIntl().formatMessage({id: 'component.account.password.update.success'}));
              message.success(globalHeader['component.account.password.update.success']);
              setTimeout(() => {
                this.setState({
                  visible: false,
                });
              }, 300);
            } else {
              message.error(useIntl().formatMessage({id: 'component.account.oldpassword.errorMessage'}));
            }
          })
          .catch(error => {
            message.error(useIntl().formatMessage({id: 'component.account.password.update.fail'}));
          });
      })
      .catch(error => {
        console.log(error);
      });
  };

  handleCancel = (event, form) => {
    event.stopPropagation();
    form.resetFields();
    this.setState({
      visible: false,
    });
  };

  transformAvatarImage() {
    const { userInfo } = this.props.global;
    const defaultImage = `${
      window.location.origin
    }/civweb4/assets/images/icon/熊猫新2.png`;
    let image = defaultImage;
    if (
      userInfo &&
      userInfo.UserImge &&
      userInfo.UserImge.indexOf('个人信息') > -1
    ) {
      image = `/cityinterface/rest/services/filedownload.svc/download/${userInfo.UserImge}`;
    } else if (
      userInfo.UserImge &&
      userInfo.UserImge !== '' &&
      userInfo.UserImge !== 'default_user.png'
    ) {
      image = userInfo.UserImge;
    } else if (userInfo.WxImage && userInfo.WxImage !== '') {
      image = userInfo.WxImage;
    }
    return image;
  }

  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    const path = (new Date()).getTime();
    this.setState({
      path: path,
      action: this.state.action.replace('{path}', path).replace('{filename}', file.name)
    })
    return isJpgOrPng && isLt2M;
  }

  handleChange(data) {
    console.log(data)
  }

  componentDidMount() {
    appService.getVersion({
      ignoreSite: true
    }).then(res => {
      if(res.success) {
        this.setState({
          version: res.message
        })
      }
    }).catch(error => {
      message.error(useIntl().formatMessage({id: 'component.getVersion.errorMessage'}))
    })
  }

  customRequest = ({
    action,
    data,
    file,
    filename,
    headers,
    onError,
    onProgress,
    onSuccess,
    withCredentials,}) => {
    const formData = new FormData();
    if(data) {
      Object.keys(data).forEach(key => {
        formData.append(key, data[key]);
      })
    }
    formData.append("filedata", file);
    request(action, {
      withCredentials,
      headers: {
        ...headers,
        Accept: '*/*',
        'civ-site': ''
      },
      method: 'post',
      data: formData,
      ignoreSite: true,
      onUploadProgress: ({ total, loaded }) => {
        onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
      },
    })
      .then(res => {
        onSuccess(res, file);
      })
      .catch(onError);
    return {
      abort() {
        console.log('upload progress is aborted.');
      }
    }
  }

  render() {
    const self = this;
    const { props } = this;
    const { userInfo } = props.global;
    const site =
      props.global &&
      props.global.userInfo &&
      props.global.userInfo.site &&
      userInfo.site !== '' &&
      props.global.client !== 'oms'
        ? userInfo.site
        : '';


    const uploadProps = {
      action: this.state.action,
      onStart(file) {
        console.log('onStart', file, file.name);
      },
      onSuccess(res, file) {
        if(res.success) {
          const avatarPath =  "/个人信息/" + self.state.path + '/' + file.name;
          const params = {
            userID: props.global.get("userInfo.OID"),
            loginName: props.global.get("userInfo.loginName"),
            userName: props.global.get("userInfo.fullName"),
            _version: self.state.version,
            mark: props.global.get("userInfo.Mark"),
            phone: props.global.get("userInfo.Phone"),
            email: props.global.get("userInfo.Email"),
            userImage: decodeURIComponent(avatarPath),
            WXid: props.global.get("userInfo.WXid")
          }

          appService.updateAvatar(params).then(res => {
            if(res.success) {
              // message.success(useIntl().formatMessage({id: 'component.avatar.update.success'}));
              message.success(globalHeader['component.avatar.update.success']);
              self.setState({
                currentUser: {
                  name: self.state.currentUser.name,
                  avatar: `${API.AVATAR_FILE_URL}${avatarPath}`,
                  action: API.UPLOAD_FILE_URL
                }
              })
            }
          }).catch(e => {
            message.error(useIntl().formatMessage({id: 'component.avatar.update.fail'}))
          })
        } else {
          message.error(res.message);
        }
      },
      onError(err) {
        console.log('onError', err);
      },
      onProgress({ percent }, file) {
        console.log('onProgress', `${percent}%`, file.name);
      },
      customRequest: this.customRequest.bind(this),
      beforeUpload: this.beforeUpload.bind(this),
      onChange: this.handleChange.bind(this)
    }
    const currentUser = this.state.currentUser;
    const menuHeaderDropdown = (
      <div className={styles.userInfo}>
        <div className={styles.header}>
          <Upload className="avatar-uploader" {...uploadProps} maxCount={1} itemRender={()=>(<></>)}>
            <div
              className={styles.avatar}
              style={{ backgroundImage: `url(${currentUser.avatar})` }}
            />
          </Upload>
          <div className={styles.name}>{userInfo.fullName}</div>
        </div>
        <div className={styles.body}>
          <div className={styles.item}>
            <ul>
              <li>
                <span />
                <span className={styles.label}><FormattedMessage id="component.avatar.account"/>：</span>
                <span className={styles.value}>{userInfo.loginName}</span>
              </li>
              <li>
                <span />
                <span className={styles.label}><FormattedMessage id="component.avatar.name"/>：</span>
                <span className={styles.value}>{userInfo.fullName}</span>
              </li>
              <li>
                <span />
                <span className={styles.label}><FormattedMessage id="component.avatar.depart"/>：</span>
                <span className={styles.value}>
                  {userInfo && userInfo.depart && userInfo.depart.name}
                </span>
              </li>
              <li>
                <span />
                <span className={styles.label}><FormattedMessage id="component.avatar.role"/>：</span>
                <span className={styles.value}>{this.getRoles()}</span>
              </li>
              {site ? (
                <li>
                  <span />
                  <span className={styles.label}><FormattedMessage id="component.siteCode"/>：</span>
                  <span className={styles.value}>{userInfo.site}</span>
                </li>
              ) : null}
            </ul>
          </div>
          <div className={styles.exit}>
            {userInfo && userInfo.site === '' && (
              <a onClick={event => this.showModal(event)}><FormattedMessage id="component.password.update"/></a>
            )}

            <a onClick={this.loginout}><FormattedMessage id="component.exit.login"/></a>
          </div>
        </div>
      </div>
    );

    return currentUser && currentUser.name ? (
      <>
        <Popover
          overlayClassName={styles.userWrapper}
          placement="bottom"
          trigger="click"
          content={
            props.global && props.global.userInfo ? menuHeaderDropdown : null
          }
        >
          <span
            className={`${styles.action} ${styles.account}`}
            ref={r => (this.avatarRef = r)}
          >
            <Avatar
              size="small"
              className={styles.avatar}
              src={currentUser.avatar}
              alt="avatar"
            />
            {/* <span className={`${styles.name} anticon`}>{currentUser.name}</span> */}
          </span>
        </Popover>
        <Modal
          title="修改密码"
          centered
          width="480px"
          visible={this.state.visible}
          wrapClassName={styles.updatePassword}
          cancelText="取消"
          okText="确定"
          onOk={event => this.handleOk(event, this.form)}
          onCancel={event => this.handleCancel(event, this.form)}
          zIndex={2000}
        >
          <Form
            labelAlign="right"
            {...formItemLayout}
            ref={f => (this.form = f)}
          >
            {!getIOT() && (
              <Form.Item
                name="oldPwd"
                label="原密码"
                rules={[
                  {
                    required: true,
                    message: '请输入原始密码',
                  },
                ]}
                hasFeedback
              >
                <Input.Password />
              </Form.Item>
            )}
            <Form.Item
              name="newPwd"
              label="新密码"
              rules={[
                {
                  required: true,
                  message: '请输入新密码',
                },
                {
                  pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/,
                  message: '密码字符长度为8-16个字符',
                },
              ]}
              hasFeedback
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              name="confirmPwd"
              label="确认密码"
              dependencies={['newPwd']}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入确认密码',
                },
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    if (!value || getFieldValue('newPwd') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject('确认密码与新密码输入不一致');
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>
          </Form>
        </Modal>
      </>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
}

export default withRouter(AvatarDropdown);