From 5a2a5bb36835d8337d39c1975f106ecbb4aa5df1 Mon Sep 17 00:00:00 2001 From: junjie Date: Fri, 7 May 2021 11:04:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(dialog):dialog=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=8B=96=E5=8A=A8=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/db/migration/V8__system.sql | 2 +- frontend/src/main.js | 1 + frontend/src/utils/dialog.js | 79 +++++++++++++++++++ frontend/src/views/chart/group/Group.vue | 5 +- frontend/src/views/chart/view/ChartEdit.vue | 4 +- frontend/src/views/dataset/group/Group.vue | 4 +- 6 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 frontend/src/utils/dialog.js diff --git a/backend/src/main/resources/db/migration/V8__system.sql b/backend/src/main/resources/db/migration/V8__system.sql index 02a4155ef7..4ab3aaab51 100644 --- a/backend/src/main/resources/db/migration/V8__system.sql +++ b/backend/src/main/resources/db/migration/V8__system.sql @@ -71,7 +71,7 @@ INSERT INTO `sys_menu` VALUES (3, 1, 3, 1, '菜单管理', '菜单管理', 'syst INSERT INTO `sys_menu` VALUES (4, 1, 3, 1, '组织管理', '组织管理', 'system/dept/index', 3, 'dept', 'dept', NULL, b'0', b'0', 'dept:read', NULL, NULL, NULL, NULL); INSERT INTO `sys_menu` VALUES (5, 1, 3, 1, '角色管理', '角色管理', 'system/role/index', 4, 'role', 'role', b'0', b'0', b'0', 'role:read', NULL, NULL, 1614683852133, 1614683852133); INSERT INTO `sys_menu` VALUES (6, 1, 0, 1, '参数管理', '参数管理', 'system/systemParamSettings/index', 5, 'sys-tools', 'systemParamSettings', NULL, b'0', b'0', 'sysparam:read', NULL, NULL, NULL, 1615790294169); -INSERT INTO `sys_menu` VALUES (8, 0, 0, 1, '数据管理', '数据管理', 'dataset/index', 3, '', '/dataset', NULL, b'0', b'0', 'data:read', NULL, NULL, NULL, 1614916684821); +INSERT INTO `sys_menu` VALUES (8, 0, 0, 1, '数据集', '数据集', 'dataset/index', 3, '', '/dataset', NULL, b'0', b'0', 'data:read', NULL, NULL, NULL, 1614916684821); INSERT INTO `sys_menu` VALUES (10, 0, 0, 1, '视图', '视图', 'chart/index', 2, '', '/chart', NULL, b'0', b'0', 'chart:read', NULL, NULL, NULL, 1614915491036); INSERT INTO `sys_menu` VALUES (12, 3, 0, 2, '创建菜单', NULL, NULL, 999, NULL, NULL, b'0', b'0', b'0', 'menu:add', NULL, NULL, 1614924617327, 1614924617327); INSERT INTO `sys_menu` VALUES (13, 3, 0, 2, '删除菜单', NULL, NULL, 999, NULL, NULL, b'0', b'0', b'0', 'menu:del', NULL, NULL, 1614924667808, 1614924667808); diff --git a/frontend/src/main.js b/frontend/src/main.js index 4889bf382e..9da6c562bc 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -16,6 +16,7 @@ import filter from '@/filter/filter' import directives from './directive' import VueClipboard from 'vue-clipboard2' import widgets from '@/components/widget' +import './utils/dialog' import '@/components/canvas/custom-component' // 注册自定义组件 Vue.config.productionTip = false diff --git a/frontend/src/utils/dialog.js b/frontend/src/utils/dialog.js new file mode 100644 index 0000000000..f97ff02a51 --- /dev/null +++ b/frontend/src/utils/dialog.js @@ -0,0 +1,79 @@ +import Vue from 'vue' + +// v-dialogDrag: 弹窗拖拽属性 +Vue.directive('dialogDrag', { + bind(el, binding, vnode, oldVnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header') + const dragDom = el.querySelector('.el-dialog') + // dialogHeaderEl.style.cursor = 'move'; + dialogHeaderEl.style.cssText += ';cursor:move;' + dragDom.style.cssText += ';top:0px;' + + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const sty = (function() { + if (window.document.currentStyle) { + return (dom, attr) => dom.currentStyle[attr] + } else { + return (dom, attr) => getComputedStyle(dom, false)[attr] + } + })() + + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下，计算当前元素距离可视区的距离 + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop + + const screenWidth = document.body.clientWidth // body当前宽度 + const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取) + + const dragDomWidth = dragDom.offsetWidth // 对话框宽度 + const dragDomheight = dragDom.offsetHeight // 对话框高度 + + const minDragDomLeft = dragDom.offsetLeft + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth + + const minDragDomTop = dragDom.offsetTop + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight + + // 获取到的值带px 正则匹配替换 + let styL = sty(dragDom, 'left') + let styT = sty(dragDom, 'top') + + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) + styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) + } else { + styL = +styL.replace(/\px/g, '') + styT = +styT.replace(/\px/g, '') + } + + document.onmousemove = function(e) { + // 通过事件委托，计算移动的距离 + let left = e.clientX - disX + let top = e.clientY - disY + + // 边界处理 + if (-(left) > minDragDomLeft) { + left = -(minDragDomLeft) + } else if (left > maxDragDomLeft) { + left = maxDragDomLeft + } + + if (-(top) > minDragDomTop) { + top = -(minDragDomTop) + } else if (top > maxDragDomTop) { + top = maxDragDomTop + } + + // 移动当前元素 + dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` + } + + document.onmouseup = function(e) { + document.onmousemove = null + document.onmouseup = null + } + } + } +}) diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 763248792f..d66e4f660f 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -99,7 +99,7 @@ - + @@ -180,7 +180,7 @@ - + @@ -194,6 +194,7 @@ - + @@ -216,6 +216,7 @@ - + @@ -220,7 +220,7 @@ - +