12 changed files with 332 additions and 107 deletions
@ -0,0 +1,94 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { delFileDir, queryFileDir, updateFileDir, } from '../../actions/file'; |
|||
import './menu.less' |
|||
import { message, Modal } from 'antd'; |
|||
import { ExclamationCircleOutlined } from '@ant-design/icons' |
|||
|
|||
const { confirm } = Modal; |
|||
|
|||
const FunctionMenu = props => { |
|||
const { dispatch, onDelDir, selectRoad } = props; |
|||
|
|||
useEffect(() => { |
|||
const box = document.getElementById('tree-box'); |
|||
if (box) |
|||
box.oncontextmenu = function (e) { |
|||
//取消默认的浏览器自带右键 很重要！！
|
|||
e.preventDefault(); |
|||
|
|||
//获取我们自定义的右键菜单
|
|||
var menu = document.querySelector("#rihgt-click-menu"); |
|||
|
|||
//根据事件对象中鼠标点击的位置，进行定位
|
|||
menu.style.left = e.clientX + 'px'; |
|||
menu.style.top = e.clientY + 'px'; |
|||
|
|||
//改变自定义菜单的高宽，让它显示出来
|
|||
menu.style.display = 'block'; |
|||
} |
|||
|
|||
//关闭右键菜单，很简单
|
|||
window.onclick = function (e) { |
|||
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
|
|||
document.querySelector('#rihgt-click-menu') ? document.querySelector('#rihgt-click-menu').style.display = 'none' : '' |
|||
} |
|||
}, [true]) |
|||
|
|||
const onDeleteDir = () => { |
|||
|
|||
if (selectRoad) { |
|||
const id = selectRoad |
|||
dispatch(delFileDir({ id })).then(res => { |
|||
const { type } = res; |
|||
if (type == 'DEL_FILE_DIR_SUCCESS') { |
|||
dispatch(queryFileDir()); |
|||
message.success('删除成功') |
|||
} else { |
|||
message.error('删除失败') |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const showDeleteConfirm = () => { |
|||
|
|||
confirm({ |
|||
title: `是否确认删除该道路?`, |
|||
icon: <ExclamationCircleOutlined />, |
|||
// content: 'Some descriptions',
|
|||
okText: '是', |
|||
okType: 'danger', |
|||
cancelText: '否', |
|||
onOk() { |
|||
onDeleteDir(); |
|||
}, |
|||
onCancel() { |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
const refreshFileDir = () => { |
|||
dispatch(queryFileDir()); |
|||
} |
|||
|
|||
return ( |
|||
<div id="rihgt-click-menu"> |
|||
<div class="context_item"> |
|||
<div class="inner_item" onClick={showDeleteConfirm}> |
|||
<i class="glyphicon glyphicon-file"></i> 删除 |
|||
</div> |
|||
</div> |
|||
<div class="context_item"> |
|||
<div class="inner_item" onClick={refreshFileDir}> |
|||
<i class="glyphicon glyphicon-file"></i> 刷新 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
) |
|||
} |
|||
|
|||
FunctionMenu.propTypes = {} |
|||
|
|||
export default FunctionMenu |
|||
@ -0,0 +1,43 @@ |
|||
#rihgt-click-menu { |
|||
display: none; |
|||
font-size: 1.1em; |
|||
position: fixed; |
|||
width: 200px; |
|||
height: auto; |
|||
padding: 5px 0px; |
|||
border-radius: 5px; |
|||
top: 10; |
|||
left: 10; |
|||
background-color: #fff; |
|||
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); |
|||
color: #333; |
|||
z-index: 999; |
|||
} |
|||
|
|||
#rihgt-click-menu .context_item { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
cursor: pointer; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
#rihgt-click-menu .context_item:hover { |
|||
background-color: #ddd; |
|||
} |
|||
|
|||
#rihgt-click-menu .context_item .inner_item { |
|||
margin: 0px 10px; |
|||
} |
|||
|
|||
#rihgt-click-menu .context_item .inner_item i { |
|||
margin: 0 5px 0 0; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
#rihgt-click-menu .context_hr { |
|||
height: 1px; |
|||
border-top: 1px solid #bbb; |
|||
margin: 3px 10px; |
|||
} |
|||
Loading…
Reference in new issue