forked from Gitlink/forgeplus-react
del file
This commit is contained in:
parent
efa3f32773
commit
d2c23ff27e
|
|
@ -1,179 +0,0 @@
|
|||
import React ,{ useState , useEffect , useRef } from 'react';
|
||||
import { Dropdown , Menu , Input, message } from 'antd';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param name：显示的标题
|
||||
* @param names：选择下拉项后显示的内容
|
||||
* @param list[]：选项
|
||||
* @param emptyName:没有选择项时显示的内容
|
||||
* @param value[]：显示的值
|
||||
* @param onAdd：标记管理、只针对标记
|
||||
* @param searchFlag：是否显示搜索输入框
|
||||
* @param editFlag：是否有编辑按钮
|
||||
* @param double：可多选
|
||||
* @param onChange:选择项后返回id数组
|
||||
* @param permission:权限
|
||||
* @returns
|
||||
*/
|
||||
function EditMenus({
|
||||
name ,
|
||||
names,
|
||||
emptyName='未设置',
|
||||
list,
|
||||
value ,
|
||||
onAdd ,
|
||||
searchFlag ,
|
||||
editFlag ,
|
||||
searchFunc ,
|
||||
double ,
|
||||
onChange ,
|
||||
imgFlag,
|
||||
permission
|
||||
}){
|
||||
const [ menus , setMenus ] = useState([]);
|
||||
const [ searchValue , setSearchValue ]= useState(undefined);
|
||||
const [ showValue , setShowValue ] = useState(undefined);
|
||||
const [ valueId , setValueId ] = useState([]);
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
|
||||
const refFa = useRef(null);
|
||||
const refBox = useRef(null);
|
||||
|
||||
useEffect(()=>{
|
||||
setMenus(list);
|
||||
setValueId(value);
|
||||
setShowValue(names && names.length >0 ? names : undefined);
|
||||
},[names,value,list])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('click', clickMe , false);
|
||||
}, [])
|
||||
|
||||
const clickMe = ({ target }) => {
|
||||
// 查找父组件
|
||||
const faComponent = findDOMNode(refFa.current);
|
||||
const boxComponent = findDOMNode(refBox.current);
|
||||
if (faComponent && boxComponent) {
|
||||
const isChild = faComponent.contains(target);
|
||||
const isBox = boxComponent.contains(target);
|
||||
if(!isChild && !isBox){
|
||||
setVisible(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function chooseMenu(i){
|
||||
if(!double){
|
||||
setVisible(false);
|
||||
}
|
||||
let l = valueId;
|
||||
let idStr = i && i.id ? i.id.toString() :i.name;
|
||||
// 分支列表没有id，只能根据name判断
|
||||
if(double){
|
||||
l = valueId || [] ;
|
||||
let nameArr = names || [] ;
|
||||
if(l && l.indexOf(idStr)>=0){
|
||||
l = l.filter(k=>k.toString() !== idStr);
|
||||
nameArr = nameArr.filter(k=>k.toString() !== i.name);
|
||||
}else{
|
||||
if(valueId && valueId.length >= double){
|
||||
message.info(`最多只能添加${double}个${name}`);
|
||||
return;
|
||||
}
|
||||
l.push(idStr);
|
||||
nameArr.push(i.name);
|
||||
}
|
||||
setValueId(l);
|
||||
setShowValue(nameArr);
|
||||
onChange(l,nameArr);
|
||||
}else{
|
||||
if(l && l.indexOf(idStr)>=0){
|
||||
setValueId([]);
|
||||
onChange([]);
|
||||
setShowValue(undefined);
|
||||
}else{
|
||||
setValueId([`${i.id || i.name}`]);
|
||||
onChange([`${i.id || i.name}`],[i.name]);
|
||||
setShowValue(i.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function changeSearchvalue(e){
|
||||
setSearchValue(e.target.value);
|
||||
searchFunc(e.target.value);
|
||||
}
|
||||
|
||||
function renderNames(nameArrs){
|
||||
return <React.Fragment>
|
||||
{
|
||||
nameArrs && nameArrs.length>0?
|
||||
nameArrs.map((i,k)=>{
|
||||
return(
|
||||
<p className="task-hide">{i}</p>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<li>
|
||||
<span>
|
||||
{name}
|
||||
{!editFlag && <a ref={refBox} onClick={()=>setVisible(visible ? false : true)}><i className="iconfont icon-a-bianji12 font-13" style={{color:"#898d9d"}}></i></a>}
|
||||
</span>
|
||||
<Dropdown
|
||||
visible={visible}
|
||||
overlayClassName={"overlayStyle"}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
overlay={
|
||||
<div ref={refFa}>
|
||||
{ searchFlag &&
|
||||
<div className="searchbox">
|
||||
<Search
|
||||
placeholder={`搜索${name}`}
|
||||
value={searchValue}
|
||||
onChange={changeSearchvalue}
|
||||
style={{marginRight:"18px"}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menus && menus.length >0?
|
||||
<Menu className="piecemenu" selectedKeys={valueId}>
|
||||
{
|
||||
menus.map((i,k)=>{
|
||||
return(
|
||||
<Menu.Item key={i.id || i.name} onClick={()=>chooseMenu(i)}>
|
||||
{ imgFlag && <img src={getImageUrl(i.image_url)} alt="" width="22px" className="mr5 radius"/>}
|
||||
{i.color && <span style={{backgroundColor:i.color}} className="colorpiece"></span>}
|
||||
<span className="task-hide">{i.name}</span>
|
||||
</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
:
|
||||
<div className="menusEmpty">
|
||||
<p>{searchValue ? <span>暂无{name}“{searchValue}”</span>: `暂无${name}`}</p>
|
||||
{ onAdd && (permission && permission!=="reporter") && <a className="color-blue font-15" onClick={()=>{setVisible(false);onAdd()}}><i className="iconfont icon-a-bianji12 font-14 mr5"></i>标记管理</a>}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}>
|
||||
<div className={showValue?"operatevalue color-grey-3":"operatevalue"}>{ names ? renderNames(names) : emptyName}</div>
|
||||
</Dropdown>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
export default EditMenus;
|
||||
|
|
@ -4,7 +4,6 @@ import { getImageUrl } from 'educoder';
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Box , LongWidth } from '../../Component/layout';
|
||||
import RenderHtml from "../../../components/render-html";
|
||||
import EditMenus from '../Component/editMenus';
|
||||
import DropMenu from '../Component/dropMenu';
|
||||
import NewPanel from '../Component/newPanel';
|
||||
import Attachments from "../../Upload/attachment";
|
||||
|
|
|
|||
Loading…
Reference in New Issue