render(){
...
...
const loop = data => data.map((item) => {
// if (item.list && item.list.length >= 0) {
if (item.itemType === 'cat') { // 一级目录
return (
<TreeNode
title={
<div
className="container-title"
onMouseEnter={() => this.enterItem(item._id)}
onMouseLeave={this.leaveItem}
>
<Link
className="interface-item"
onClick={e => {
e.stopPropagation();
this.changeExpands();
}}
to={'/project/' + matchParams.id + '/interface/api/cat_' + item._id}
>
<Icon type="folder-open" style={{ marginRight: 5 }} />
{item.name || item.title}
</Link>
<div className="btns">
<Tooltip title="删除分类">
<Icon
type="delete"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.showDelCatConfirm(item._id);
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
<Tooltip title="修改分类">
<Icon
type="edit"
className="interface-delete-icon"
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
onClick={e => {
e.stopPropagation();
this.changeModal('change_cat_modal_visible', true);
this.setState({
curCatdata: item
});
}}
/>
</Tooltip>
<Tooltip title="添加接口">
<Icon
type="plus"
className="interface-delete-icon"
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
onClick={e => {
e.stopPropagation();
this.changeModal('visible', true);
this.setState({
curCatid: item._id,
parentid: null
});
}}
/>
</Tooltip>
<Tooltip title="创建目录">
<Icon
type="folder"
className="interface-delete-icon"
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
onClick={e => {
e.stopPropagation();
this.changeModal('add_folder_modal_visible', true);
this.setState({
curCatid: item._id,
parentid: null
});
}}
/>
</Tooltip>
<Tooltip title="创建文档">
<Icon
type="file"
className="interface-delete-icon"
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
onClick={e => {
e.stopPropagation();
this.changeModal('add_file_modal_visible', true);
this.setState({
curCatid: item._id,
parentid: null
});
}}
/>
</Tooltip>
</div>
</div>
}
key={'cat_' + item._id}
className={`interface-item-nav1`}
isLeaf={true}
autoExpandParent
>
{loop(item.list)}
</TreeNode>)
} else if(item.record_type === 2) { //文件夹类型
return (
<TreeNode
className={`interface-item-nav2`}
title={
<div
className="container-title"
onMouseEnter={() => this.enterItem(item._id)}
onMouseLeave={this.leaveItem}
>
<div className="interface-item" onClick={e => e.stopPropagation()}>
<Icon type="folder-open" style={{ marginRight: 5 }} />
{item.title || item.name}
</div>
<div className="btns">
<Tooltip title="删除">
<Icon
type="delete"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.showConfirm(item);
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
<Tooltip title="修改目录">
<Icon
type="edit"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.changeModal('change_dir_modal_visible', true);
this.setState({
curDirData: item
});
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
<Tooltip title="创建目录">
<Icon
type="folder"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.changeModal('add_folder_modal_visible', true);
this.setState({
curCatid: item.catid,
curParentId: item._id
});
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
<Tooltip title="创建接口">
<Icon
type="plus"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.changeModal('visible', true);
this.setState({
curCatid: item.catid,
curParentId: item._id
});
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
<Tooltip title="创建文档">
<Icon
type="file"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.changeModal('add_file_modal_visible', true);
this.setState({
curCatid: item.catid,
curParentId: item._id
});
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
</div>
</div>
}
key={'cat_' + item._id}
isLeaf={true}
autoExpandParent
>
{item.list && loop(item.list)}
</TreeNode>)
} else {
return ( //文档 api类型
<TreeNode
className={`interface-item-nav3`}
title={
<div
className="container-title"
onMouseEnter={() => this.enterItem(item._id)}
onMouseLeave={this.leaveItem}
>
<Link
className="interface-item"
onClick={e => {
e.stopPropagation();
this.changeExpands();
}}
to={'/project/' + matchParams.id + '/interface/api/' + item._id}
>
{item.record_type == 0 ? (<Icon type={item.interface_type === 'http' ? 'api' : 'code'} style={{ marginRight: 5 }} />) : ('')}
{item.record_type == 1 ? (<Icon type="file-text" style={{ marginRight: 5 }} />) : ('')}
{item.title || item.name}
</Link>
<div className="btns">
<Tooltip title="删除">
<Icon
type="delete"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.showConfirm(item);
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
{item.record_type === 0 ? (
<Tooltip title="复制接口">
<Icon
type="copy"
className="interface-delete-icon"
onClick={e => {
e.stopPropagation();
this.copyInterface(item._id);
}}
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
/>
</Tooltip>
) : ('')
}
</div>
</div>
}
key={'' + item._id}
isLeaf={true}
autoExpandParent
/>)
}
})
return(
。。。
。。。
<Tree
className="interface-list"
defaultExpandedKeys={currentKes.expands}
defaultSelectedKeys={currentKes.selects}
//expandedKeys={currentKes.expands}
selectedKeys={currentKes.selects}
onSelect={this.onSelect}
onExpand={this.onExpand}
draggable
onDrop={this.onDrop}
autoExpandParent
>
<TreeNode
className="item-all-interface"
title={
<Link
onClick={e => {
e.stopPropagation();
this.changeExpands();
}}
to={'/project/' + matchParams.id + '/interface/api'}
>
<Icon type="folder" style={{ marginRight: 5 }} />
全部接口
</Link>
}
key="root"
/>
{loop(menuList)}
</Tree>
)
}