From d37b6cb0af359048b3b60e06b14c1cb1d9f44cf0 Mon Sep 17 00:00:00 2001
From: "[li_she]" <[li.she@xujiesoft.com]>
Date: Mon, 19 Jul 2021 11:40:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/js/LodopFuncs.js | 146 ++++++++++++++++++++++
src/directives.js | 80 ++++++++++++
src/main.js | 1 +
src/views/modules/sys/language/common.vue | 38 +-----
static/config/index.js | 2 +-
5 files changed, 230 insertions(+), 37 deletions(-)
create mode 100644 src/assets/js/LodopFuncs.js
create mode 100644 src/directives.js
diff --git a/src/assets/js/LodopFuncs.js b/src/assets/js/LodopFuncs.js
new file mode 100644
index 0000000..98a8446
--- /dev/null
+++ b/src/assets/js/LodopFuncs.js
@@ -0,0 +1,146 @@
+//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==
+
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
+
+//==判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop() {
+ try {
+ var ua = navigator.userAgent;
+ if (ua.match(/Windows\sPhone/i))
+ return true;
+ if (ua.match(/iPhone|iPod|iPad/i))
+ return true;
+ if (ua.match(/Android/i))
+ return true;
+ if (ua.match(/Edge\D?\d+/i))
+ return true;
+
+ var verTrident = ua.match(/Trident\D?\d+/i);
+ var verIE = ua.match(/MSIE\D?\d+/i);
+ var verOPR = ua.match(/OPR\D?\d+/i);
+ var verFF = ua.match(/Firefox\D?\d+/i);
+ var x64 = ua.match(/x64/i);
+ if ((!verTrident) && (!verIE) && (x64))
+ return true;
+ else if (verFF) {
+ verFF = verFF[0].match(/\d+/);
+ if ((verFF[0] >= 41) || (x64))
+ return true;
+ } else if (verOPR) {
+ verOPR = verOPR[0].match(/\d+/);
+ if (verOPR[0] >= 32)
+ return true;
+ } else if ((!verTrident) && (!verIE)) {
+ var verChrome = ua.match(/Chrome\D?\d+/i);
+ if (verChrome) {
+ verChrome = verChrome[0].match(/\d+/);
+ if (verChrome[0] >= 41)
+ return true;
+ }
+ }
+ return false;
+ } catch (err) {
+ return true;
+ }
+}
+
+//==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
+function loadCLodop() {
+ if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
+ CLodopJsState = "loading";
+ var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
+ var JS1 = document.createElement("script");
+ var JS2 = document.createElement("script");
+ JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
+ JS2.src = "http://localhost:18000/CLodopfuncs.js";
+ JS1.onload = JS2.onload = function() {CLodopJsState = "complete";}
+ JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";}
+ head.insertBefore(JS1, head.firstChild);
+ head.insertBefore(JS2, head.firstChild);
+ CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
+}
+
+if (needCLodop()){loadCLodop();}//加载
+
+//==获取LODOP对象主过程,判断是否安装、需否升级:==
+function getLodop(oOBJECT, oEMBED) {
+ var strHtmInstall = "
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
+ var strHtmUpdate = "
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
+ var strHtm64_Install = "
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
+ var strHtm64_Update = "
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
+ var strHtmFireFox = "
（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）";
+ var strHtmChrome = "
(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）";
+ var strCLodopInstall_1 = "
Web打印服务CLodop未安装启动，点击这里下载执行安装";
+ var strCLodopInstall_2 = "
（若此前已安装过，可点这里直接再次启动）";
+ var strCLodopInstall_3 = "，成功后请刷新本页面。";
+ var strCLodopUpdate = "
Web打印服务CLodop需升级!点击这里执行升级,升级后请刷新页面。";
+ var LODOP;
+ try {
+ var ua = navigator.userAgent;
+ var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
+ if (needCLodop()) {
+ try {
+ LODOP = getCLodop();
+ } catch (err) {}
+ if (!LODOP && CLodopJsState !== "complete") {
+ if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程.");
+ return;
+ }
+ if (!LODOP) {
+ document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
+ return;
+ } else {
+ if (CLODOP.CVERSION < "4.1.2.7") {
+ document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
+ }
+ if (oEMBED && oEMBED.parentNode)
+ oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素
+ if (oOBJECT && oOBJECT.parentNode)
+ oOBJECT.parentNode.removeChild(oOBJECT);
+ }
+ } else {
+ var is64IE = isIE && !!(ua.match(/x64/i));
+ //==如果页面有Lodop就直接使用,否则新建:==
+ if (oOBJECT || oEMBED) {
+ if (isIE)
+ LODOP = oOBJECT;
+ else
+ LODOP = oEMBED;
+ } else if (!CreatedOKLodopObject) {
+ LODOP = document.createElement("object");
+ LODOP.setAttribute("width", 0);
+ LODOP.setAttribute("height", 0);
+ LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
+ if (isIE)
+ LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
+ else
+ LODOP.setAttribute("type", "application/x-print-lodop");
+ document.documentElement.appendChild(LODOP);
+ CreatedOKLodopObject = LODOP;
+ } else
+ LODOP = CreatedOKLodopObject;
+ //==Lodop插件未安装时提示下载地址:==
+ if ((!LODOP) || (!LODOP.VERSION)) {
+ if (ua.indexOf('Chrome') >= 0)
+ document.body.innerHTML = strHtmChrome + document.body.innerHTML;
+ if (ua.indexOf('Firefox') >= 0)
+ document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
+ document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
+ return LODOP;
+ }
+ }
+ if (LODOP.VERSION < "6.2.2.6") {
+ if (!needCLodop())
+ document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
+ }
+ //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
+
+
+ //=======================================================
+ return LODOP;
+ } catch (err) {
+ alert("getLodop出错:" + err);
+ }
+}
+
+export default getLodop
diff --git a/src/directives.js b/src/directives.js
new file mode 100644
index 0000000..9d62237
--- /dev/null
+++ b/src/directives.js
@@ -0,0 +1,80 @@
+import Vue from 'vue';
+
+// v-dialogDrag: 弹窗拖拽属性
+Vue.directive('drag', {
+ bind(el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header');
+ const dragDom = el.querySelector('.el-dialog');
+
+ dialogHeaderEl.style.cssText += ';cursor:move;'
+ dragDom.style.cssText += ';top:0px;'
+
+ // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+ const sty = (() => {
+ 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/src/main.js b/src/main.js
index 06e5e64..7ecc2eb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import { isAuth } from '@/utils'
import cloneDeep from 'lodash/cloneDeep'
import JsonExcel from 'vue-json-excel'
import i18n from '@/i18n/i18n'
+import './directives'
Vue.component('downloadExcel', JsonExcel)
diff --git a/src/views/modules/sys/language/common.vue b/src/views/modules/sys/language/common.vue
index 414ecbe..449fd28 100644
--- a/src/views/modules/sys/language/common.vue
+++ b/src/views/modules/sys/language/common.vue
@@ -79,19 +79,6 @@
style="width: 100px; height: 80px"/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+