93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
import React ,{ useState , useRef , useEffect } from 'react';
|
||
import { Input , Menu , Icon } from 'antd';
|
||
import { getImageUrl } from 'educoder';
|
||
import Drop from './drop';
|
||
const { Search } = Input;
|
||
|
||
/**
|
||
* @param {className} <li>的样式名称
|
||
* @param {name} 未选择时显示的内容
|
||
* @param {lists} 下拉列表，从接口获取，需一一填充
|
||
* @param {imgControl} 控制是否显示头像
|
||
* @param {size} 下拉框宽度，small：120px,large:260px
|
||
* @param {ids} 默认选择的项的id数组
|
||
* @param {search} 搜索方法
|
||
* @param {chooseFunc} 选择项后需调用列表的查询方法
|
||
* @param {update} 编辑状态
|
||
* @param {double} 是否可以多选
|
||
*/
|
||
function Menus({className,name, ids , lists , size , imgControl , searchFunc , chooseFunc , update , double ,names },ref){
|
||
const dropRef = useRef(null);
|
||
const [ chooseValue , setChooseValue ] = useState([]);
|
||
const [ showValue , setShowValue ] = useState(undefined);
|
||
|
||
useEffect(()=>{
|
||
ids ? setChooseValue(ids.split(",")) : setChooseValue([]);
|
||
setShowValue(names);
|
||
},[ids,names])
|
||
|
||
|
||
// 修改menus数组里的字段值
|
||
function changeMenusValue(i){
|
||
let l = ids;
|
||
let id = i.id.toString();
|
||
if(double){
|
||
l = ids ? ids.split(",") : [] ;
|
||
let nameArr = names ? names.split(",") : [] ;
|
||
if(l && l.indexOf(id)>=0){
|
||
l = l.filter(k=>k.toString() !== id);
|
||
nameArr = nameArr.filter(k=>k.toString() !== i.name);
|
||
}else{
|
||
l.push(id);
|
||
nameArr.push(i.name);
|
||
}
|
||
setChooseValue(l);
|
||
setShowValue(nameArr.join(","));
|
||
chooseFunc(l,nameArr.join(","));
|
||
}else{
|
||
if(l && l.indexOf(id)>=0){
|
||
setChooseValue([]);
|
||
setShowValue(undefined);
|
||
chooseFunc([]);
|
||
}else{
|
||
setChooseValue([`${i.id}`]);
|
||
setShowValue([i.name]);
|
||
chooseFunc([id],i.name);
|
||
}
|
||
dropRef.current && dropRef.current.clearVisible(false);
|
||
}
|
||
}
|
||
|
||
function menu(data){
|
||
return <div className={`overlaydrop ${size}`}>
|
||
{ size !== "small" &&
|
||
<div className="pb10"><Search placeholder={`搜索${name}`} onChange={(e)=>searchFunc(e.target.value)}/></div>
|
||
}
|
||
{
|
||
data && data.length>0 ?
|
||
<Menu selectedKeys={chooseValue}>
|
||
{
|
||
data.map((i,j)=>{
|
||
return <Menu.Item key={i.id}>
|
||
{imgControl && <img src={getImageUrl(i.image_url)} alt=""/>}
|
||
{i.color && <span style={{backgroundColor:i.color,marginRight:"0px"}} className="colorpiece"></span>}
|
||
<span className="task-hide" onClick={()=>changeMenusValue(i)}>{i.name}</span>
|
||
</Menu.Item>
|
||
})
|
||
}
|
||
</Menu>
|
||
:
|
||
<div className="pl15">暂无{ids ? <span>'{name}'</span>: name}</div>
|
||
}
|
||
</div>
|
||
}
|
||
return(
|
||
<li className={className || ""}>
|
||
<Drop className={className} ref={dropRef} overlay={menu(lists)} placement={"bottomRight"} >
|
||
<span className="task-hide">{showValue || (update ? `更换${name}` : name) }</span>
|
||
<Icon type="caret-down" className="color-grey-6" />
|
||
</Drop>
|
||
</li>
|
||
)
|
||
}
|
||
export default Menus; |