forked from Gitlink/forgeplus-react
114 lines
2.7 KiB
JavaScript
114 lines
2.7 KiB
JavaScript
import React ,{ useImperativeHandle ,forwardRef , useState , useEffect } from 'react';
|
||
import { Dropdown , Icon , Menu } from 'antd';
|
||
|
||
const menus=[
|
||
{
|
||
id:1,
|
||
name:"发布人",
|
||
choose:0,
|
||
menu:["caishi","he","xiao","jiang"]
|
||
},
|
||
{
|
||
id:7,
|
||
updateName:"更换优先级",
|
||
choose:0,
|
||
menu:["紧急","正常","低","高"]
|
||
},
|
||
{
|
||
id:2,
|
||
name:"标记",
|
||
updateName:"更换标记",
|
||
choose:0,
|
||
menu:["caishi","he","xiao","jiang"]
|
||
},
|
||
{
|
||
id:3,
|
||
name:"里程碑",
|
||
updateName:"更换里程碑",
|
||
choose:0,
|
||
menu:["caishi","he","xiao","jiang"]
|
||
},
|
||
{
|
||
id:4,
|
||
name:"负责人",
|
||
updateName:"更换负责人",
|
||
choose:0,
|
||
menu:["caishi","he","xiao","jiang"]
|
||
},
|
||
{
|
||
id:5,
|
||
name:"状态",
|
||
updateName:"更换状态",
|
||
choose:0,
|
||
menu:["新增","正在解决","已解决","反馈","关闭","拒绝"]
|
||
},
|
||
{
|
||
id:6,
|
||
name:"排序",
|
||
choose:0,
|
||
menu:["最新创建","最早创建","最近更新","最早更新","高优先级","低优先级"]
|
||
}
|
||
]
|
||
function Menus({update},ref){
|
||
const [ dropmenu , setDropMenu ] = useState(menus);
|
||
|
||
|
||
useImperativeHandle(ref, () => ({
|
||
clearChoose: () => {
|
||
// 父组件按钮：清除筛选条件，将dropmenu里的choose字段全部改为0
|
||
changeMenusValue(0);
|
||
}
|
||
}))
|
||
|
||
useEffect(()=>{
|
||
if(update){
|
||
|
||
}
|
||
},[update])
|
||
|
||
// 修改menus数组里的字段值
|
||
function changeMenusValue(value,id){
|
||
let todoList = [...dropmenu];
|
||
let list = [];
|
||
if(id){
|
||
list = todoList.map((i,k)=>id===i.id ? {...i,choose:value} : i);
|
||
}else{
|
||
list = todoList.map((i,k)=>id ? i : {...i,choose:value});
|
||
}
|
||
setDropMenu(list);
|
||
// 修改后调用父组件方法重新查询数据
|
||
|
||
}
|
||
|
||
function menu(menu,choose,id){
|
||
if(menu && menu.length>0){
|
||
return <Menu selectedKeys={[`${choose}`]}>
|
||
{
|
||
menu.map((i,j)=>{
|
||
return <Menu.Item key={j+1} onClick={()=>changeMenusValue(j+1,id)}>{i}</Menu.Item>
|
||
})
|
||
}
|
||
</Menu>
|
||
}
|
||
else{
|
||
return "";
|
||
}
|
||
}
|
||
return(
|
||
dropmenu && dropmenu.length >0 ?
|
||
<ul className="dropboxul">
|
||
{
|
||
dropmenu.map((item,i)=>{
|
||
return(
|
||
((!update && item.name) || (update && item.updateName)) &&
|
||
<Dropdown overlay={menu(item.menu,item.choose,item.id)} placement="bottomRight" >
|
||
<li><span className="task-hide">{item.choose !== 0 ? item.menu[item.choose-1]:(update ? item.updateName : item.name)}</span><Icon type="caret-down" className="ml5 color-grey-6" /></li>
|
||
</Dropdown>
|
||
)
|
||
})
|
||
}
|
||
</ul>
|
||
:<div></div>
|
||
)
|
||
}
|
||
export default forwardRef(Menus); |