xs-common-plugins 1.2.6 → 1.2.8

package/README.md

@@ -307,3 +307,9 @@
    1.2.6
    1.新增 el-input 回车执行查询方法
 ```
+
+```
+   1.2.7
+   1.优化common.popup弹窗方法。
+   2.优化common.clone方法
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xs-common-plugins",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/common/common.js

@@ -6,6 +6,8 @@ import {OrgEnum} from '@/utils/enum'
 import filterRules from '@/utils/filterRules'
 import request from "xs-request";
 import moduleCfg from '@/modules/module.config.js'
+
+
 const common = {}
 
 /**
@@ -246,103 +248,133 @@ common.confirm = (that, message, title, callBack) => {
  *
  */
 common.popup = (options) => {
-    if (!options) return;
-    let { title, component, srcData, width, showButton, callBack, props, dialogCfg } = common.clone(options);
-    if (!component) return;
-    let e = document.createElement("div");
-    document.getElementsByTagName("body")[0].appendChild(e);
-    let template = '';
-    let v = '';
-    if (typeof component == 'string') {
-    } else {
-        let button = '';
-        if (showButton) {
-            button = `<div style="text-align:right"><el-button size="medium" type='primary' @click="confirm">确认</el-button><el-button size="medium" @click="cancel()">取消</el-button></div>`
-        }
-        template = `<div v-if="visible"> <el-dialog :title="title" v-bind="dialogCfg" :visible.sync="visible" :width="width" :before-close="beforeClose" append-to-body><child ref="child"  v-bind="props" :srcData="srcData" @close="close" @cancel="cancel" />${button}</el-dialog></div>`
-    }
-    v = new Vue({
-        el: e,
-        template: template,
-        router,
-        store,
-        data: function () {
-            return {
-                title: title ? title : '弹窗组件',
-                visible: true,
-                width: width ? width : '30%',
-                props: props ? props : null,
-                srcData: srcData ? srcData : null,
-                dialogCfg: dialogCfg ? dialogCfg: null
-            }
-        },
-        components: {
-            child: component
-        },
-        methods: {
-            confirm() {
-                if (this.$refs.child.confirm) {
-                    this.$refs.child.confirm();
-                }
-            },
-            beforeClose(done) {
-                if (this.$refs.child.beforeClose) {
-                    this.$refs.child.beforeClose(done);
-                } else {
-                    done()
-                }
-            },
-            cancel () {
-                this.visible = false
-            },
-            close(res) {
-                if (callBack) {
-                    callBack(res);
-                }
-                this.visible = false
-            }
-        }
-    })
-    return v
+	if (!options) return;
+	const { title, component, srcData, width, showButton, callBack, props, dialogCfg } = common.clone(options);
+	if (!component) return;
+
+	const div = document.createElement("div");
+	document.body.appendChild(div);
+
+	const dialogComponent = {
+		components: {
+			child: component
+		},
+		props: {
+			title: {
+				type: String,
+				default: '弹窗组件',
+			},
+			srcData: {
+				type: Object,
+				default: null,
+			},
+			showButton: {
+				type: Boolean,
+				default: true,
+			},
+			width: {
+				type: String,
+				default: '30%',
+			},
+			dialogCfg: {
+				type: Object,
+				default: null,
+			},
+			props: {
+				type: Object,
+				default: null,
+			},
+			callBack: {
+				type: Function,
+				default: null,
+			},
+		},
+		data() {
+			return {
+				visible: true,
+			};
+		},
+		methods: {
+			confirm() {
+				if (this.$refs.child.confirm) {
+					this.$refs.child.confirm();
+				}
+			},
+			beforeClose(done) {
+				if (this.$refs.child.beforeClose) {
+					this.$refs.child.beforeClose(done);
+				} else {
+					done();
+				}
+			},
+			cancel() {
+				this.visible = false;
+			},
+			close(res) {
+				if (this.callBack) {
+					this.callBack(res);
+				}
+				this.visible = false;
+			}
+		},
+		template: `
+			<div>
+			<el-dialog :title="title" el-drag-dialog :visible.sync="visible" :width="width" :before-close="beforeClose" v-bind="dialogCfg" append-to-body>
+				<child ref="child" :srcData="srcData" v-bind="props" @close="close" @cancel="cancel"/>
+				<div v-if="showButton" style="text-align: right;">
+					<el-button size="medium" type="primary" @click="confirm">确认</el-button>
+					<el-button size="medium" @click="cancel">取消</el-button>
+				</div>
+			</el-dialog>
+			</div>
+		`,
+	};
+
+	return new Vue({
+		el: div,
+		render(h) {
+			return h(dialogComponent, {
+				props: {
+					title,
+					srcData,
+					width,
+					showButton,
+					callBack,
+					props,
+					dialogCfg,
+				},
+			});
+		},
+	});
 }
 
+
+
 /**
  * 深度拷贝
  */
 common.clone = (obj) => {
-    // 其他类型
-    if (null == obj || 'object' == typeof (obj)) {
-        return obj
-    }
-    // 日期类型
-    if (obj instanceof Date) {
-        let copy = new Date();
-        copy.setTime(obj.getTime());
-        return copy;
-    }
-    //数组类型
-    if (obj instanceof Array) {
-        let copy = [];
-        for (let i = 0; index < obj.length; index++) {
-            copy[i] = common.clone(obj[i])
-        }
-        return copy
-    }
-    //对象类型
-    if (obj instanceof Object) {
-        let copy = {}
-        for (const key in obj) {
-            if (Object.hasOwnProperty.call(object, key)) {
-                copy[key] = common.copy(obj[key])
-            }
-        }
-        return copy
-    }
+	if (obj === null || typeof obj !== 'object') {
+		return obj;
+	}
+
+	if (obj instanceof Date) {
+		return new Date(obj.getTime());
+	}
 
-    throw new Error("无法复制对象！不支持其类型")
+	const clone = Array.isArray(obj) ? [] : {};
+
+	for (const key in obj) {
+		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+			clone[key] = common.clone(obj[key]);
+		}
+	}
+
+	return clone;
 }
 
 
+
 /**
  *导出数据报表
  *@param query 默认 列表上的 query 条件去掉 data

package/src/common/fullScreenDirective.js

@@ -0,0 +1,157 @@
+export default {
+	bind(el, binding, vnode, oldVnode) {
+		let resizeEvent = new CustomEvent('drag-resize', { detail: '尺寸变化', bubbles: false });
+		//初始化不最大化
+		el.fullscreen = false;
+		//弹框可拉伸最小宽高
+		let minWidth = 400;
+		let minHeight = 300;
+		//当前宽高
+		let nowWidth = minWidth;
+		let nowHight = minHeight;
+		//当前顶部高度
+		let nowMarginTop = 0;
+		//获取弹框头部（这部分可双击全屏）
+		const dialogHeaderEl = el.querySelector('.el-dialog__header');
+		let hasSetBodyHight = false;
+		//弹窗
+		const dragDom = el.querySelector('.el-dialog');
+		dragDom.className += ' el-drag-dialog';
+		//清除选择头部文字效果
+		dialogHeaderEl.onselectstart = new Function("return false");
+		//头部加上可拖动cursor
+		dialogHeaderEl.style.cursor = 'move';
+
+		// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+
+		//头部插入最大化最小化元素
+		let maxMin = document.createElement("button");
+		maxMin.className += ' el-dialog__headerbtn el-dialog__minmax';
+		maxMin.style.right = '40px';
+		maxMin.style.color = '#909399';
+		maxMin.title = el.fullscreen ? '还原' : '最大化';
+		maxMin.innerHTML = '<i class=' + (el.fullscreen ? '"el-icon-crop"' : '"el-icon-full-screen"') + ' onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>';
+		dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1]);
+		let moveDown = (e) => {
+			// 鼠标按下，计算当前元素距离可视区的距离
+			const disX = e.clientX - dialogHeaderEl.offsetLeft;
+			const disY = e.clientY - dialogHeaderEl.offsetTop;
+
+			// 获取到的值带px 正则匹配替换
+			let styL, styT;
+
+			// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+			if (sty.left.includes('%')) {
+				styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
+				styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
+			} else {
+				styL = +sty.left.replace(/\px/g, '');
+				styT = +sty.top.replace(/\px/g, '');
+			}
+
+			document.onmousemove = function (e) {
+				// 通过事件委托，计算移动的距离
+				const l = e.clientX - disX;
+				const t = e.clientY - disY;
+
+				// 移动当前元素
+				dragDom.style.left = `${l + styL}px`;
+				dragDom.style.top = `${t + styT}px`;
+
+				//将此时的位置传出去
+				//binding.value({x:e.pageX,y:e.pageY})
+			};
+
+			document.onmouseup = function (e) {
+				document.onmousemove = null;
+				document.onmouseup = null;
+			};
+		}
+		dialogHeaderEl.onmousedown = moveDown;
+		let bodyHeight = 'auto';
+
+		function setMaxMin() {
+			// debugger
+			if (el.fullscreen) {
+				let i = maxMin.querySelector('.el-icon-crop');
+				i.classList.remove('el-icon-crop');
+				i.classList.add('el-icon-full-screen');
+				maxMin.innerHTML = '<i class="el-icon-full-screen"></i>';
+				maxMin.title = '最大化';
+				dragDom.style.height = "auto";
+				dragDom.style.width = nowWidth + 'px';
+				dragDom.style.marginTop = nowMarginTop;
+				el.fullscreen = false;
+				dialogHeaderEl.style.cursor = 'move';
+				dialogHeaderEl.onmousedown = moveDown;
+				dragDom.querySelector('.el-dialog__body').style.height = bodyHeight;
+				hasSetBodyHight = false;
+			} else {
+				let i = maxMin.querySelector('.el-icon-full-screen');
+				i.classList.remove('el-icon-full-screen');
+				i.classList.add('el-icon-crop');
+				maxMin.title = '还原';
+				bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px';
+				nowHight = dragDom.clientHeight;
+				nowWidth = dragDom.clientWidth;
+				nowMarginTop = dragDom.style.marginTop;
+				dragDom.style = 'width:100vw;height:100vh !important;'
+				el.fullscreen = true;
+				dialogHeaderEl.style.cursor = 'initial';
+				dialogHeaderEl.onmousedown = null;
+				if (!hasSetBodyHight) {
+					let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight;
+					dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)';
+					hasSetBodyHight = true;
+				}
+			}
+			el.dispatchEvent(resizeEvent);
+		}
+
+		// 点击放大缩小效果
+		maxMin.onclick = setMaxMin;
+
+		//双击头部效果
+		// dialogHeaderEl.ondblclick = setMaxMin;
+
+		//拉伸
+		let resizeEl = document.createElement("div");
+		dragDom.appendChild(resizeEl);
+		//在弹窗右下角加上一个10-10px的控制块
+		resizeEl.style.cursor = 'se-resize';
+		resizeEl.style.position = 'absolute';
+		resizeEl.style.height = '10px';
+		resizeEl.style.width = '10px';
+		resizeEl.style.right = '0px';
+		resizeEl.style.bottom = '0px';
+		//鼠标拉伸弹窗
+		resizeEl.onmousedown = (e) => {
+			// 记录初始x位置
+			const clientX = e.clientX;
+			// 鼠标按下，计算当前元素距离可视区的距离
+			const disX = e.clientX - resizeEl.offsetLeft;
+			const disY = e.clientY - resizeEl.offsetTop;
+			document.onmousemove = function (e) {
+				e.preventDefault(); // 移动时禁用默认事件
+				// 通过事件委托，计算移动的距离
+				const x = e.clientX - disX + (e.clientX - clientX);//这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
+				const y = e.clientY - disY;
+				//比较是否小于最小宽高
+				dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
+				dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
+				if (!hasSetBodyHight) {
+					let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight;
+					dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)';
+					hasSetBodyHight = true;
+				}
+			};
+			//拉伸结束
+			document.onmouseup = function (e) {
+				document.onmousemove = null;
+				document.onmouseup = null;
+				el.dispatchEvent(resizeEvent);
+			};
+		}
+	}
+}

package/src/plugins/index.js

@@ -4,9 +4,14 @@ import utils from 'xs-component/lib/utils'
 import base from 'xs-component/lib/base'
 import api from '@/automatically/api'
 import Vue from 'vue'
+import FullScreenDirective from "../common/fullScreenDirective";
 import store from '../store/index'
 import {request, requestApi} from 'xs-request'
 import ossService from '@/utils/ossService'
+
+Vue.directive('el-drag-dialog',FullScreenDirective)
+
+
 //  以上部分为 xs-component 引入
 base.install(api ? api : {}) // 请求及api映射