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;
|
