From 58fb11b78f0d861eb9b87b7f79c20ea2cd93fcf8 Mon Sep 17 00:00:00 2001 From: "meilin.huang" <954537473@qq.com> Date: Wed, 5 Apr 2023 22:41:53 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=95=8C=E9=9D=A2=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mayfly_go_web/src/assets/iconfont/iconfont.js | 2 +- .../src/components/contextmenu/index.vue | 135 ++++++++++ .../layout/navBars/tagsView/contextmenu.vue | 230 ++++++++++-------- .../layout/navBars/tagsView/tagsView.vue | 9 +- .../src/views/ops/component/TagTree.vue | 48 +++- mayfly_go_web/src/views/ops/db/SqlExec.vue | 53 ++-- mayfly_go_web/src/views/ops/db/db.ts | 3 + 7 files changed, 349 insertions(+), 131 deletions(-) create mode 100644 mayfly_go_web/src/components/contextmenu/index.vue diff --git a/mayfly_go_web/src/assets/iconfont/iconfont.js b/mayfly_go_web/src/assets/iconfont/iconfont.js index 515f52f5..80adf06a 100644 --- a/mayfly_go_web/src/assets/iconfont/iconfont.js +++ b/mayfly_go_web/src/assets/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_3953964='',function(c){var t=(t=document.getElementsByTagName("script"))[t.length-1],a=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,e,i,o,n,h=function(t,a){a.parentNode.insertBefore(t,a)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}l=function(){var t,a=document.createElement("div");a.innerHTML=c._iconfont_svg_string_3953964,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(t=document.body).firstChild?h(a,t.firstChild):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=l,o=c.document,n=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function s(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file +window._iconfont_svg_string_3953964='',function(c){var t=(t=document.getElementsByTagName("script"))[t.length-1],a=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,e,i,o,n,h=function(t,a){a.parentNode.insertBefore(t,a)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}l=function(){var t,a=document.createElement("div");a.innerHTML=c._iconfont_svg_string_3953964,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(t=document.body).firstChild?h(a,t.firstChild):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=l,o=c.document,n=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function s(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file diff --git a/mayfly_go_web/src/components/contextmenu/index.vue b/mayfly_go_web/src/components/contextmenu/index.vue new file mode 100644 index 00000000..131a8127 --- /dev/null +++ b/mayfly_go_web/src/components/contextmenu/index.vue @@ -0,0 +1,135 @@ + + + + + \ No newline at end of file diff --git a/mayfly_go_web/src/views/layout/navBars/tagsView/contextmenu.vue b/mayfly_go_web/src/views/layout/navBars/tagsView/contextmenu.vue index acebb00e..3e28ae8f 100644 --- a/mayfly_go_web/src/views/layout/navBars/tagsView/contextmenu.vue +++ b/mayfly_go_web/src/views/layout/navBars/tagsView/contextmenu.vue @@ -1,110 +1,138 @@ - + \ No newline at end of file diff --git a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue index 57a510c2..8f2f5563 100644 --- a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue +++ b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue @@ -9,8 +9,8 @@ if (el) tagsRefs[k] = el; } "> - + {{ v.meta.title }} @@ -82,7 +82,7 @@ const initTagsView = () => { state.tagsViewList = getSession('tagsViewList'); } else { state.tagsViews?.map((v: any) => { - if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v }); + if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v }); }); addTagsView(route.fullPath); } @@ -523,4 +523,5 @@ onBeforeRouteUpdate((to) => { .layout-navbars-tagsview-shadow { box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px; -} +} + diff --git a/mayfly_go_web/src/views/ops/component/TagTree.vue b/mayfly_go_web/src/views/ops/component/TagTree.vue index 42e9defa..ce1cd7a3 100644 --- a/mayfly_go_web/src/views/ops/component/TagTree.vue +++ b/mayfly_go_web/src/views/ops/component/TagTree.vue @@ -1,5 +1,5 @@ @@ -36,6 +33,7 @@ import { onMounted, reactive, ref, watch, toRefs } from 'vue'; import { TagTreeNode } from './tag'; import TagInfo from './TagInfo.vue'; +import Contextmenu from '@/components/contextmenu/index.vue'; const props = defineProps({ height: { @@ -45,6 +43,10 @@ const props = defineProps({ load: { type: Function, required: true, + }, + loadContextmenuItems: { + type: Function, + required: false, } }) @@ -54,12 +56,18 @@ const treeProps = { isLeaf: 'isLeaf', } -const emit = defineEmits(['nodeClick']) +const emit = defineEmits(['nodeClick', 'currentContextmenuClick']) const treeRef: any = ref(null) +const contextmenuRef = ref(); const state = reactive({ height: 600 as any, filterText: '', + dropdown: { + x: 0, + y: 0, + }, + contextmenuItems: [], opend: {}, }) const { filterText } = toRefs(state) @@ -101,6 +109,29 @@ const loadNode = async (node: any, resolve: any) => { const treeNodeClick = (data: any) => { emit('nodeClick', data); + // 关闭可能存在的右击菜单 + contextmenuRef.value.closeContextmenu(); +} + +// 树节点右击事件 +const nodeContextmenu = (event: any, data: any) => { + if (!props.loadContextmenuItems) { + return; + } + // 加载当前节点是否需要显示右击菜单 + const items = props.loadContextmenuItems(data) + if (!items || items.length == 0) { + return; + } + state.contextmenuItems = items; + const { clientX, clientY } = event; + state.dropdown.x = clientX; + state.dropdown.y = clientY; + contextmenuRef.value.openContextmenu(data); +} + +const onCurrentContextmenuClick = (clickData: any) => { + emit('currentContextmenuClick', clickData); } const reloadNode = (nodeKey: any) => { @@ -125,6 +156,7 @@ defineExpose({