197 lines
7.5 KiB
TypeScript
197 lines
7.5 KiB
TypeScript
import './head.css'
|
||
import BalanceHead from '../../components/balance/BalanceHead.tsx';
|
||
import RechargeHead from '../../components/recharge/RechargeHead.tsx';
|
||
import {Divider, Dropdown, MenuProps, message, Modal, Space, Spin} from "antd";
|
||
import {DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined} from "@ant-design/icons";
|
||
import {useContext, useEffect, useState} from "react";
|
||
import {put} from "../../util/AjaxUtils.ts";
|
||
import {GlobalContext, GlobalDispatchContext, reloadUser} from "../../context/GlobalContext.ts";
|
||
import UserEdit from "../../components/user/UserEdit.tsx";
|
||
import PasswordChange from "../../components/password/PasswordChange.tsx";
|
||
import headRightBg from '../../assets/head-right-bg.png';
|
||
import InvoiceList from "../../components/invoice/InvoiceList.tsx";
|
||
|
||
|
||
export default function Head() {
|
||
const globalContext = useContext(GlobalContext);
|
||
const globalDispatchContext = useContext(GlobalDispatchContext);
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const [modal, modalHolder] = Modal.useModal();
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const [isSelfModalOpen, setIsSelfModalOpen] = useState(false);
|
||
const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
reloadUser(messageApi, globalDispatchContext).then((data) => {
|
||
if (!data.hasUserInfo) {
|
||
setIsSelfModalOpen(true);
|
||
}
|
||
});
|
||
}, [globalContext.user]);
|
||
|
||
const items: MenuProps['items'] = [
|
||
{
|
||
key: 'userinfo',
|
||
label: (
|
||
<div className="dropdown-item">
|
||
<UserOutlined/>
|
||
<span className="title">个人信息</span>
|
||
</div>
|
||
),
|
||
onClick: () => {
|
||
setIsSelfModalOpen(true);
|
||
}
|
||
},
|
||
{
|
||
key: 'changePass',
|
||
label: (
|
||
<div className="dropdown-item">
|
||
<KeyOutlined/>
|
||
<span className="title">修改密码</span>
|
||
</div>
|
||
),
|
||
onClick: () => {
|
||
setIsPasswordModalOpen(true);
|
||
}
|
||
},
|
||
{
|
||
key: 'invoice',
|
||
label: (
|
||
<div className="dropdown-item">
|
||
<AccountBookOutlined />
|
||
<span className="title">发票管理</span>
|
||
</div>
|
||
),
|
||
onClick: () => {
|
||
// nav('/invoice-list');
|
||
}
|
||
},
|
||
{
|
||
key: 'logout',
|
||
label: (
|
||
<div className="dropdown-item">
|
||
<LogoutOutlined/>
|
||
<span className="title">退出系统</span>
|
||
</div>
|
||
),
|
||
},
|
||
]
|
||
|
||
return (
|
||
<>
|
||
<div className="head">
|
||
<div className="center">
|
||
<div className="left">
|
||
<span className="sys-title">AI引擎软著</span>
|
||
<Divider type="vertical"/>
|
||
<span className="sys-title-sub">软件著作权一站式服务平台</span>
|
||
</div>
|
||
<div className="right" style={{backgroundImage: `url(${headRightBg})`}}>
|
||
<BalanceHead/>
|
||
<RechargeHead/>
|
||
{/*<MessageHead/>*/}
|
||
<div style={{display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer'}}>
|
||
<Dropdown menu={{
|
||
items: items
|
||
}}>
|
||
<Space>
|
||
您好：{globalContext.user.nickname}
|
||
<DownOutlined/>
|
||
</Space>
|
||
</Dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal open={isSelfModalOpen}
|
||
title="个人信息"
|
||
footer={false}
|
||
onCancel={() => {
|
||
if (!globalContext.user.hasUserInfo) {
|
||
messageApi.info('请完善个人信息');
|
||
return;
|
||
}
|
||
setIsSelfModalOpen(false)
|
||
}}>
|
||
<UserEdit handleConfirm={(data) => {
|
||
modal.confirm({
|
||
title: '提示',
|
||
content: '确定保存吗？',
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
okButtonProps: {
|
||
style: {
|
||
backgroundColor: 'var(--color-primary)'
|
||
}
|
||
},
|
||
onOk: () => {
|
||
setIsSelfModalOpen(false);
|
||
put({
|
||
messageApi,
|
||
url: '/api/user-info/update-self',
|
||
body: data,
|
||
onBefore() {
|
||
setLoading(true);
|
||
},
|
||
onSuccess() {
|
||
messageApi.success('修改成功');
|
||
},
|
||
onFinally() {
|
||
setLoading(false);
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}}/>
|
||
</Modal>
|
||
<Modal open={isPasswordModalOpen}
|
||
title="修改密码"
|
||
footer={false}
|
||
onCancel={() => {
|
||
setIsPasswordModalOpen(false)
|
||
}}>
|
||
<PasswordChange handleConfirm={(data) => {
|
||
modal.confirm({
|
||
title: '提示',
|
||
content: '确定修改吗？',
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
okButtonProps: {
|
||
style: {
|
||
backgroundColor: 'var(--color-primary)'
|
||
}
|
||
},
|
||
onOk: () => {
|
||
put({
|
||
messageApi,
|
||
url: '/api/user/update-password',
|
||
body: data,
|
||
onBefore() {
|
||
setLoading(true);
|
||
},
|
||
onSuccess() {
|
||
setIsPasswordModalOpen(false);
|
||
messageApi.success('修改成功，重新登录生效');
|
||
},
|
||
onFinally() {
|
||
setLoading(false);
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}}/>
|
||
</Modal>
|
||
<Modal open={true}
|
||
title="发票管理"
|
||
width={1100}
|
||
footer={false}
|
||
>
|
||
<InvoiceList/>
|
||
</Modal>
|
||
<Spin tip="正在提交..." spinning={loading} fullscreen/>
|
||
{contextHolder}
|
||
{modalHolder}
|
||
</>
|
||
)
|
||
}
|