305 lines
12 KiB
TypeScript
305 lines
12 KiB
TypeScript
import './head.css'
|
|
import BalanceHead from '../../components/balance/BalanceHead.tsx';
|
|
import RechargeHead from '../../components/recharge/RechargeHead.tsx';
|
|
import { Dropdown, MenuProps, message, Modal, Space, Spin } from "antd";
|
|
import { DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined, MenuFoldOutlined, UsergroupAddOutlined } 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";
|
|
import logoImg from '../../static/head/logo.png'
|
|
import userImg from '../../static/homeimg/userimg.png'
|
|
import { reMenuActive } from '../../util/cache';
|
|
// import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
|
|
import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
|
|
import ContactPeople from '../../components/ContactPeople/ContactPeople.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);
|
|
const [isInvoiceModalOpen, setIsInvoiceModalOpen] = useState(false);
|
|
// 所属者弹窗
|
|
const [belongModal, setBelongModal] = useState(false)
|
|
const [belongPeopleInfo, setBelongPeopleInfo] = useState({
|
|
authorName: '',
|
|
authorType: '',
|
|
authorIdCardType: '',
|
|
authorIdCard: '',
|
|
authorCrcAccount: '',
|
|
authorId: '',
|
|
authorProvinceCity: ''
|
|
})
|
|
|
|
const setValue = () => {
|
|
// console.log(value);
|
|
}
|
|
const setConcatValue = () => {
|
|
|
|
}
|
|
// 联系人弹窗
|
|
const [contactModal, setContactModal] = useState(false)
|
|
const [concatPeopleInfo, setConcatPeopleInfo] = useState({
|
|
applyConcatId: '',
|
|
applyContactCsaNo: '',
|
|
applyContactEmail: '',
|
|
applyContactName: '',
|
|
applyContactPhone: '',
|
|
applyContactCompany: ''
|
|
})
|
|
|
|
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: () => {
|
|
setIsInvoiceModalOpen(true);
|
|
}
|
|
},
|
|
{
|
|
key: 'belong',
|
|
label: (
|
|
<div className="dropdown-item">
|
|
<MenuFoldOutlined />
|
|
<span className="title">产权所属者</span>
|
|
</div>
|
|
),
|
|
onClick: () => {
|
|
setBelongModal(true)
|
|
}
|
|
},
|
|
{
|
|
key: 'contact',
|
|
label: (
|
|
<div className="dropdown-item">
|
|
<UsergroupAddOutlined />
|
|
<span className="title">产权联系人</span>
|
|
</div>
|
|
),
|
|
onClick: () => {
|
|
setContactModal(true)
|
|
}
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: (
|
|
<div className="dropdown-item">
|
|
<LogoutOutlined />
|
|
<span className="title">退出系统</span>
|
|
</div>
|
|
),
|
|
onClick: () => {
|
|
reMenuActive()
|
|
|
|
window.location.href = '/copyright/logout'
|
|
}
|
|
},
|
|
|
|
]
|
|
|
|
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> */}
|
|
<img src={logoImg} alt="" />
|
|
</div>
|
|
{/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
|
|
|
|
<div className="right">
|
|
<div className='head-nav' onClick={() => {
|
|
window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
|
|
}}>
|
|
系统操作流程
|
|
</div>
|
|
<BalanceHead />
|
|
<RechargeHead />
|
|
{/*<MessageHead/>*/}
|
|
<div style={{ display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer' }}>
|
|
<div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '20px', marginRight: '10px' }} >
|
|
<img src={userImg} alt="" width={50} height={50} />
|
|
</div>
|
|
<Dropdown menu={{
|
|
items: items
|
|
}}>
|
|
<Space>
|
|
{/* 您好：{globalContext.user.nickname} */}
|
|
个人中心
|
|
<DownOutlined />
|
|
</Space>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal open={isSelfModalOpen}
|
|
destroyOnClose={true}
|
|
title="个人信息"
|
|
footer={false}
|
|
onCancel={() => {
|
|
if (!globalContext.user.hasUserInfo) {
|
|
messageApi.info('请完善个人信息');
|
|
return;
|
|
}
|
|
setIsSelfModalOpen(false)
|
|
// console.log('用户信息',globalContext.user.hasUserInfo);
|
|
|
|
}}>
|
|
<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={isInvoiceModalOpen}
|
|
title="发票管理"
|
|
width={1100}
|
|
footer={false}
|
|
onCancel={() => setIsInvoiceModalOpen(false)}
|
|
>
|
|
<InvoiceList />
|
|
</Modal>
|
|
<Modal title="知识产权所属者"
|
|
destroyOnClose
|
|
|
|
open={belongModal}
|
|
width={1200}
|
|
|
|
footer={null}
|
|
onCancel={() => {
|
|
setBelongModal(false)
|
|
|
|
}}>
|
|
|
|
<BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={false} ></BelongPeople>
|
|
</Modal>
|
|
<Modal title="知识产权联系人"
|
|
destroyOnClose
|
|
|
|
open={contactModal}
|
|
width={1200}
|
|
|
|
footer={null}
|
|
onCancel={() => {
|
|
setContactModal(false)
|
|
|
|
}}>
|
|
|
|
<ContactPeople isShow={false} closeModal={() => { setContactModal(false) }} setConcatPeopleInfo={setConcatPeopleInfo} concatPeopleInfo={concatPeopleInfo} setConcatValue={setConcatValue}></ContactPeople>
|
|
</Modal>
|
|
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
|
{contextHolder}
|
|
{modalHolder}
|
|
</>
|
|
)
|
|
}
|