import {
|
ProForm,
|
ProFormText,
|
ProFormTextArea,
|
ProFormSelect,
|
ProFormDigit
|
} from '@ant-design/pro-components';
|
import { Button, Input, message, Upload, Form } from 'antd';
|
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) => {
|
const hide = message.loading('正在更新');
|
try {
|
const resp = await Http.doPost('api/user/update', val);
|
if (resp.code === 200) {
|
message.success('更新成功');
|
return true;
|
} else {
|
message.error(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.error('配置失败请重试！');
|
return false;
|
} finally {
|
hide();
|
}
|
};
|
|
const BaseView = () => {
|
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) => {
|
// console.log(values); return
|
handleUpdate(values);
|
};
|
|
return (
|
<div className={styles.baseView}>
|
{loading ? null : (
|
<>
|
<div className={styles.left}>
|
<ProForm
|
form={form}
|
layout="vertical"
|
onFinish={handleFinish}
|
submitter={{
|
searchConfig: {
|
submitText: '更新基本信息',
|
},
|
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;
|
