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