| | |
|---|
| | | import { |
|---|
| | | ProForm, |
|---|
| | | ProFormText, |
|---|
| | | ProFormTextArea, |
|---|
| | | ProFormSelect, |
|---|
| | | ProFormDigit |
|---|
| | | } from '@ant-design/pro-components'; |
|---|
| | | import { Button, Input, message, Upload, Form } from 'antd'; |
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
|---|
| | | import React from 'react'; |
|---|
| | | import useStyles from './index.style'; |
|---|
| | | import Http from '@/utils/http'; |
|---|
| | | |
|---|
| | | import defaultAvat from '/public/img/defaultAva.png' |
|---|
| | | |
|---|
| | | const handleUpdate = async (val, intl) => { |
|---|
| | | const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在更新' })); |
|---|
| | | try { |
|---|
| | | const resp = await Http.doPost('api/user/update', val); |
|---|
| | | if (resp.code === 200) { |
|---|
| | | message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' })); |
|---|
| | | return true; |
|---|
| | | } else { |
|---|
| | | message.error(resp.msg); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } catch (error) { |
|---|
| | | message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '更新失败请重试！' })); |
|---|
| | | return false; |
|---|
| | | } finally { |
|---|
| | | hide(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const BaseView = () => { |
|---|
| | | const intl = useIntl(); |
|---|
| | | const { styles } = useStyles(); |
|---|
| | | const [loading, setLoading] = React.useState(false); |
|---|
| | | const [currentUser, setCurrentUser] = React.useState({}); |
|---|
| | | const [form] = Form.useForm(); |
|---|
| | | |
|---|
| | | const AvatarView = ({ avatar }) => ( |
|---|
| | | <> |
|---|
| | | <div className={styles.avatar_title}>头像</div> |
|---|
| | | <div className={styles.avatar}> |
|---|
| | | <img src={avatar} alt="avatar" /> |
|---|
| | | </div> |
|---|
| | | <Upload showUploadList={false}> |
|---|
| | | <div className={styles.button_view}> |
|---|
| | | {/* <Button> |
|---|
| | | <UploadOutlined /> |
|---|
| | | 更换头像 |
|---|
| | | </Button> */} |
|---|
| | | </div> |
|---|
| | | </Upload> |
|---|
| | | </> |
|---|
| | | ); |
|---|
| | | |
|---|
| | | const queryCurrent = () => { |
|---|
| | | setLoading(true); |
|---|
| | | Http.doGetPromise('api/auth/user', {}, (res) => { |
|---|
| | | setLoading(false); |
|---|
| | | setCurrentUser(res.data); |
|---|
| | | }).catch((err) => { |
|---|
| | | console.error(err); |
|---|
| | | setLoading(false); |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | React.useEffect(() => { |
|---|
| | | queryCurrent(); |
|---|
| | | }, []); |
|---|
| | | |
|---|
| | | const getAvatarURL = () => { |
|---|
| | | if (currentUser) { |
|---|
| | | if (currentUser.avatar) { |
|---|
| | | return currentUser.avatar; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return defaultAvat; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleFinish = async (values) => { |
|---|
| | | handleUpdate(values, intl); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div className={styles.baseView}> |
|---|
| | | {loading ? null : ( |
|---|
| | | <> |
|---|
| | | <div className={styles.left}> |
|---|
| | | <ProForm |
|---|
| | | form={form} |
|---|
| | | layout="vertical" |
|---|
| | | onFinish={handleFinish} |
|---|
| | | submitter={{ |
|---|
| | | searchConfig: { |
|---|
| | | submitText: intl.formatMessage({ id: 'personal.base.button.name', defaultMessage: '更新基本信息' }), |
|---|
| | | }, |
|---|
| | | render: (_, dom) => dom[1], |
|---|
| | | }} |
|---|
| | | initialValues={{ |
|---|
| | | ...currentUser, |
|---|
| | | }} |
|---|
| | | hideRequiredMark |
|---|
| | | > |
|---|
| | | <ProFormDigit |
|---|
| | | name="id" |
|---|
| | | disabled |
|---|
| | | hidden={true} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="username" |
|---|
| | | label="账号" |
|---|
| | | disabled |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: '请输入您的账号!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="nickname" |
|---|
| | | label="名称" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: '请输入您的名称!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormSelect |
|---|
| | | width="md" |
|---|
| | | name="sex" |
|---|
| | | label="性别" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | options={[ |
|---|
| | | { label: '未知', value: 0 }, |
|---|
| | | { label: '男', value: 1 }, |
|---|
| | | { label: '女', value: 2 }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="phone" |
|---|
| | | label="手机号" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '请输入您的手机号!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="email" |
|---|
| | | label="邮箱" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '请输入您的邮箱!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="realName" |
|---|
| | | label="真实姓名" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '请输入您的真实姓名!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | width="md" |
|---|
| | | name="idCard" |
|---|
| | | label="身份证号" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '请输入您的身份证号!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormTextArea |
|---|
| | | name="introduction" |
|---|
| | | label="个人简介" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '请输入个人简介!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | </ProForm> |
|---|
| | | </div> |
|---|
| | | <div className={styles.right}> |
|---|
| | | <AvatarView avatar={getAvatarURL()} /> |
|---|
| | | </div> |
|---|
| | | </> |
|---|
| | | )} |
|---|
| | | </div> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default BaseView; |
|---|
| | | import {
|
|---|
| | | ProForm,
|
|---|
| | | ProFormText,
|
|---|
| | | ProFormTextArea,
|
|---|
| | | ProFormSelect,
|
|---|
| | | ProFormDigit
|
|---|
| | | } from '@ant-design/pro-components';
|
|---|
| | | import { Button, Input, message, Upload, Form } from 'antd';
|
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max';
|
|---|
| | | import React from 'react';
|
|---|
| | | import useStyles from './index.style';
|
|---|
| | | import Http from '@/utils/http';
|
|---|
| | |
|
|---|
| | | import defaultAvat from '/public/img/defaultAva.jpg'
|
|---|
| | |
|
|---|
| | | const handleUpdate = async (val, intl) => {
|
|---|
| | | const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在更新' }));
|
|---|
| | | try {
|
|---|
| | | const resp = await Http.doPost('api/user/update', val);
|
|---|
| | | if (resp.code === 200) {
|
|---|
| | | message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' }));
|
|---|
| | | return true;
|
|---|
| | | } else {
|
|---|
| | | message.error(resp.msg);
|
|---|
| | | return false;
|
|---|
| | | }
|
|---|
| | | } catch (error) {
|
|---|
| | | message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '更新失败请重试！' }));
|
|---|
| | | return false;
|
|---|
| | | } finally {
|
|---|
| | | hide();
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const BaseView = () => {
|
|---|
| | | const intl = useIntl();
|
|---|
| | | const { styles } = useStyles();
|
|---|
| | | const [loading, setLoading] = React.useState(false);
|
|---|
| | | const [currentUser, setCurrentUser] = React.useState({});
|
|---|
| | | const [form] = Form.useForm();
|
|---|
| | |
|
|---|
| | | const AvatarView = ({ avatar }) => (
|
|---|
| | | <>
|
|---|
| | | <div className={styles.avatar_title}>头像</div>
|
|---|
| | | <div className={styles.avatar}>
|
|---|
| | | <img src={avatar} alt="avatar" />
|
|---|
| | | </div>
|
|---|
| | | <Upload showUploadList={false}>
|
|---|
| | | <div className={styles.button_view}>
|
|---|
| | | {/* <Button>
|
|---|
| | | <UploadOutlined />
|
|---|
| | | 更换头像
|
|---|
| | | </Button> */}
|
|---|
| | | </div>
|
|---|
| | | </Upload>
|
|---|
| | | </>
|
|---|
| | | );
|
|---|
| | |
|
|---|
| | | const queryCurrent = () => {
|
|---|
| | | setLoading(true);
|
|---|
| | | Http.doGetPromise('api/auth/user', {}, (res) => {
|
|---|
| | | setLoading(false);
|
|---|
| | | setCurrentUser(res.data);
|
|---|
| | | }).catch((err) => {
|
|---|
| | | console.error(err);
|
|---|
| | | setLoading(false);
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | React.useEffect(() => {
|
|---|
| | | queryCurrent();
|
|---|
| | | }, []);
|
|---|
| | |
|
|---|
| | | const getAvatarURL = () => {
|
|---|
| | | if (currentUser) {
|
|---|
| | | if (currentUser.avatar) {
|
|---|
| | | return currentUser.avatar;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | return defaultAvat;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleFinish = async (values) => {
|
|---|
| | | handleUpdate(values, intl);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | return (
|
|---|
| | | <div className={styles.baseView}>
|
|---|
| | | {loading ? null : (
|
|---|
| | | <>
|
|---|
| | | <div className={styles.left}>
|
|---|
| | | <ProForm
|
|---|
| | | form={form}
|
|---|
| | | layout="vertical"
|
|---|
| | | onFinish={handleFinish}
|
|---|
| | | submitter={{
|
|---|
| | | searchConfig: {
|
|---|
| | | submitText: intl.formatMessage({ id: 'personal.base.button.name', defaultMessage: '更新基本信息' }),
|
|---|
| | | },
|
|---|
| | | render: (_, dom) => dom[1],
|
|---|
| | | }}
|
|---|
| | | initialValues={{
|
|---|
| | | ...currentUser,
|
|---|
| | | }}
|
|---|
| | | hideRequiredMark
|
|---|
| | | >
|
|---|
| | | <ProFormDigit
|
|---|
| | | name="id"
|
|---|
| | | disabled
|
|---|
| | | hidden={true}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="username"
|
|---|
| | | label={intl.formatMessage({ id: 'common.username', defaultMessage: "账号" })}
|
|---|
| | | disabled
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="nickname"
|
|---|
| | | label={intl.formatMessage({ id: 'common.nickname', defaultMessage: "名称" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormSelect
|
|---|
| | | width="md"
|
|---|
| | | name="sex"
|
|---|
| | | label={intl.formatMessage({ id: 'common.sex', defaultMessage: "性别" })}
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | options={[
|
|---|
| | | { label: intl.formatMessage({ id: 'common.undefined', defaultMessage: "未知" }), value: 0 },
|
|---|
| | | { label: intl.formatMessage({ id: 'common.male', defaultMessage: '男' }), value: 1 },
|
|---|
| | | { label: intl.formatMessage({ id: 'common.female', defaultMessage: '女' }), value: 2 },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="phone"
|
|---|
| | | label={intl.formatMessage({ id: 'common.phone', defaultMessage: "手机号" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="email"
|
|---|
| | | label={intl.formatMessage({ id: 'common.email', defaultMessage: "邮箱" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="realName"
|
|---|
| | | label={intl.formatMessage({ id: 'common.realname', defaultMessage: "真实姓名" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | width="md"
|
|---|
| | | name="idCard"
|
|---|
| | | label={intl.formatMessage({ id: 'common.idcard', defaultMessage: "身份证号" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormTextArea
|
|---|
| | | name="introduction"
|
|---|
| | | label={intl.formatMessage({ id: 'common.introduction', defaultMessage: "个人简介" })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | </ProForm>
|
|---|
| | | </div>
|
|---|
| | | <div className={styles.right}>
|
|---|
| | | <AvatarView avatar={getAvatarURL()} />
|
|---|
| | | </div>
|
|---|
| | | </>
|
|---|
| | | )}
|
|---|
| | | </div>
|
|---|
| | | );
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | export default BaseView;
|
|---|
