forked from github/dataease
feat(dialog):dialog 支持拖动位置
This commit is contained in:
junjie
parent
41ee91a38e
commit
5a2a5bb368
@ -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);
|
||||
|
||||
@ -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
|
||||
|
||||
79
frontend/src/utils/dialog.js
Normal file
79
frontend/src/utils/dialog.js
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -99,7 +99,7 @@
|
||||
</el-col>
|
||||
|
||||
<!--group add/edit-->
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name" />
|
||||
@ -180,7 +180,7 @@
|
||||
</el-tree>
|
||||
|
||||
<!--rename chart-->
|
||||
<el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="tableForm.name" />
|
||||
@ -194,6 +194,7 @@
|
||||
|
||||
<!--添加视图-选择数据集-->
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('chart.add_chart')"
|
||||
:visible="selectTableFlag"
|
||||
:show-close="false"
|
||||
|
||||
@ -202,7 +202,7 @@
|
||||
</el-row>
|
||||
|
||||
<!--显示名修改-->
|
||||
<el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
|
||||
<el-dialog v-dialogDrag :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
|
||||
<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="itemForm.name" size="mini" clearable />
|
||||
@ -216,6 +216,7 @@
|
||||
|
||||
<!--指标过滤器-->
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('chart.add_filter')"
|
||||
:visible="quotaFilterEdit"
|
||||
:show-close="false"
|
||||
@ -229,6 +230,7 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('chart.add_filter')"
|
||||
:visible="dimensionFilterEdit"
|
||||
:show-close="false"
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name" />
|
||||
@ -220,7 +220,7 @@
|
||||
</span>
|
||||
</el-tree>
|
||||
|
||||
<el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="tableForm.name" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user