131 lines
5.3 KiB
TypeScript
131 lines
5.3 KiB
TypeScript
import './menu-with-top-button.css'
|
|
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
|
|
import objImg from '../../static/left/obj.png'
|
|
import newImg from '../../static/left/new.png'
|
|
import refunimg from '../../static/refun.png'
|
|
import correctionImg from '../../static/correction.png'
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
RightOutlined
|
|
} from '@ant-design/icons';
|
|
import { getMenuActive, setMenuActive } from './../../util/cache'
|
|
import { useEffect, useState } from 'react'
|
|
export default function MenuWithTopButton(props: IMenuWithTopButton) {
|
|
const navugate = useNavigate()
|
|
const [menuItem, setMenuItem] = useState<IMenuListItem[]>([])
|
|
useEffect(() => {
|
|
setMenuItem(
|
|
props.list.map((m) => {
|
|
if (getMenuActive()) {
|
|
if (getMenuActive() == m.id) {
|
|
m['active'] = true
|
|
} else {
|
|
m['active'] = false
|
|
}
|
|
}
|
|
return m
|
|
})
|
|
)
|
|
}, [getMenuActive()])
|
|
|
|
const list = menuItem.map((item, index) => (
|
|
// 创建项目下三个选项
|
|
<li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
|
|
props.handleListItem(e, index, item);
|
|
setMenuActive(item.id)
|
|
if (props.button.name == '项目') {
|
|
// props.enableBelongpeople()
|
|
navugate('/home', {
|
|
state: {
|
|
keyword: props.keywords,
|
|
name: props.type,
|
|
chargeAdditionals: props.chargeAdditionals,
|
|
tagDataId: props.tagDataId,
|
|
authorId: props.authorId
|
|
}
|
|
})
|
|
}
|
|
if (props.button.name == '退款') {
|
|
// props.disableBelongpeople()
|
|
navugate('/refun', {
|
|
state: {
|
|
type: item.id
|
|
}
|
|
})
|
|
}
|
|
if (props.button.name == '补正') {
|
|
// props.disableBelongpeople()
|
|
navugate('/correction', {
|
|
state: {
|
|
type: item.id == 'Correction-PENDING' ? 'PENDING' : item.id == 'Correction-APPROVED' ? 'APPROVED' : item.id == 'Correction-REJECTED' ? 'REJECTED' : item.id == 'Correction-CANCELED' ? 'CANCELED' : ''
|
|
}
|
|
})
|
|
}
|
|
|
|
}}>
|
|
|
|
{item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
|
|
<span className="menu-name">{item.name}</span>
|
|
<span className='topIcon'><RightOutlined /></span>
|
|
</li>
|
|
));
|
|
|
|
return (
|
|
<div className="menu-with-top-button">
|
|
{/* button 是三个黄色按钮 */}
|
|
<div className='top'>
|
|
<div className='top-lift'>
|
|
<img src={objImg} alt="" style={{ display: props.button.name == '项目' ? 'block' : 'none' }} />
|
|
<img src={refunimg} alt="" style={{ display: props.button.name == '退款' ? 'block' : 'none', width: 16 }} />
|
|
<img src={correctionImg} alt="" style={{ display: props.button.name == '补正' ? 'block' : 'none', width: 16 }} />
|
|
|
|
<div> {props.button.name}</div>
|
|
</div>
|
|
<div className='top-right' onClick={(e) => {
|
|
props.button.handle(e);
|
|
// 当点击创建时其他按钮默认为不被选中
|
|
// props.list.forEach(item => item.active = false);
|
|
// console.log(props.list);
|
|
// setMenuActive('ALL')
|
|
if (props.button.name == '项目') {
|
|
// setMenuActive('ALL')
|
|
|
|
}
|
|
if (props.button.name == '退款' ){
|
|
setMenuActive('PENDING')
|
|
navugate('/refun', {
|
|
state: {
|
|
type: 'PENDING'
|
|
}
|
|
})
|
|
|
|
}
|
|
if (props.button.name == '补正' ){
|
|
setMenuActive('Correction-PENDING')
|
|
navugate('/correction', {
|
|
state: {
|
|
type: 'PENDING'
|
|
}
|
|
})
|
|
}
|
|
}}>
|
|
{/* refunimg */}
|
|
<img src={newImg} alt="" />
|
|
<div style={{ display: props.button.name == '项目' ? 'block' : 'none' }}>创建</div>
|
|
<div style={{ display: props.button.name == '退款' ? 'block' : 'none' }}>申请</div>
|
|
<div style={{ display: props.button.name == '补正' ? 'block' : 'none' }}>申请</div>
|
|
</div>
|
|
</div>
|
|
{/* <button className="btn btn-orange top-button"
|
|
onClick={(e) => {
|
|
props.button.handle(e);
|
|
console.log(e);
|
|
|
|
}}
|
|
>
|
|
{props.button.name}
|
|
</button> */}
|
|
<ul style={{}}>{list}</ul>
|
|
</div>
|
|
)
|
|
} |