自定义可拖动弹窗宽高指令

RuoYi

2021-08-20 961fe9a5f159fcd8518d069d0f3a47d38cfb5658

自定义可拖动弹窗宽高指令

 ruoyi-ui/src/directive/dialog/dragHeight.js

New file
@@ -0,0 +1,34 @@
/**

* v-dialogDragWidth 可拖动弹窗高度（右下角）

* Copyright (c) 2019 ruoyi

*/



export default {

    bind(el) {

        const dragDom = el.querySelector('.el-dialog');

        const lineEl = document.createElement('div');

        lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';

        lineEl.addEventListener('mousedown',

            function(e) {

                // 鼠标按下，计算当前元素距离可视区的距离

                const disX = e.clientX - el.offsetLeft;

                const disY = e.clientY - el.offsetTop;

                // 当前宽度 高度

                const curWidth = dragDom.offsetWidth;

                const curHeight = dragDom.offsetHeight;

                document.onmousemove = function(e) {

                    e.preventDefault(); // 移动时禁用默认事件

                    // 通过事件委托，计算移动的距离

                    const xl = e.clientX - disX;

                    const yl = e.clientY - disY

                    dragDom.style.width = `${curWidth + xl}px`;

                    dragDom.style.height = `${curHeight + yl}px`;

                };

                document.onmouseup = function(e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }, false);

        dragDom.appendChild(lineEl);

    }

}

 ruoyi-ui/src/directive/dialog/dragWidth.js

New file
@@ -0,0 +1,30 @@
/**

* v-dialogDragWidth 可拖动弹窗宽度（右侧边）

* Copyright (c) 2019 ruoyi

*/



export default {

    bind(el) {

        const dragDom = el.querySelector('.el-dialog');

        const lineEl = document.createElement('div');

        lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';

        lineEl.addEventListener('mousedown',

            function (e) {

                // 鼠标按下，计算当前元素距离可视区的距离

                const disX = e.clientX - el.offsetLeft;

                // 当前宽度

                const curWidth = dragDom.offsetWidth;

                document.onmousemove = function (e) {

                    e.preventDefault(); // 移动时禁用默认事件

                    // 通过事件委托，计算移动的距离

                    const l = e.clientX - disX;

                    dragDom.style.width = `${curWidth + l}px`;

                };

                document.onmouseup = function (e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }, false);

        dragDom.appendChild(lineEl);

    }

}

 ruoyi-ui/src/directive/index.js

@@ -1,17 +1,20 @@
import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight'

const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
  Vue.directive('dialogDrag', dialogDrag)
  Vue.directive('dialogDragWidth', dialogDragWidth)
  Vue.directive('dialogDragHeight', dialogDragHeight)
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  window['dialogDrag'] = dialogDrag
  Vue.use(install); // eslint-disable-line
}


 sql/quartz.sql

@@ -56,7 +56,7 @@
-- ----------------------------

create table QRTZ_SIMPLE_TRIGGERS (

    sched_name           varchar(120)    not null            comment '调度名称',

    trigger_name         varchar(200)    not null            comment 'qrtz_triggers表trigger_ name的外键',

    trigger_name         varchar(200)    not null            comment 'qrtz_triggers表trigger_name的外键',

    trigger_group        varchar(200)    not null            comment 'qrtz_triggers表trigger_group的外键',

    repeat_count         bigint(7)       not null            comment '重复的次数统计',

    repeat_interval      bigint(12)      not null            comment '重复的间隔时间',

@@ -134,7 +134,7 @@
-- ---------------------------- 

create table QRTZ_SCHEDULER_STATE (

    sched_name           varchar(120)    not null            comment '调度名称',

    instance_name        varchar(200)    not null            comment '之前配置文件中org.quartz.scheduler.instanceId配置的名字，就会写入该字段',

    instance_name        varchar(200)    not null            comment '实例名称',

    last_checkin_time    bigint(13)      not null            comment '上次检查时间',

    checkin_interval     bigint(13)      not null            comment '检查间隔时间',

    primary key (sched_name, instance_name)

@@ -154,7 +154,7 @@
-- ---------------------------- 

create table QRTZ_SIMPROP_TRIGGERS (

    sched_name           varchar(120)    not null            comment '调度名称',

    trigger_name         varchar(200)    not null            comment 'qrtz_triggers表trigger_ name的外键',

    trigger_name         varchar(200)    not null            comment 'qrtz_triggers表trigger_name的外键',

    trigger_group        varchar(200)    not null            comment 'qrtz_triggers表trigger_group的外键',

    str_prop_1           varchar(512)    null                comment 'String类型的trigger的第一个参数',

    str_prop_2           varchar(512)    null                comment 'String类型的trigger的第二个参数',