let loadingStatus = null; import { ElMessage } from 'element-plus'; import { ElLoading } from 'element-plus'; export default { /** * 页面顶部出现消息提示 * @param {Object} options 传入一个对象为配置项,其中: * @param {Boolean} showClose 是否显示可手动关闭的 x 于提示框右侧,默认 false * @param {Boolean} center 消息提示内容是否居中,默认 true * @param {String} msg 消息提示的内容 * @param {String} type 消息提示的类型,可选值为 ['success(成功)','warning(警告)','error(错误)',或者直接传入空字符串],默认 error */ showMsg(options) { ElMessage({ showClose: (options.showClose == true || options.showClose == false) ? options.showClose : false, center: (options.center == true || options.center == false) ? options.center : true, message: options.msg, type: (options.type || options.type === '') ? options.type : 'error' }); }, /** * 显示防穿透点击 loading 蒙版 * @param {Objectr} opt 传入一个对象为配置项,其中: * @param {String} target 此蒙版需要绑定的 DOM 标签 ID 或者 CLASS 或者 TAGNAME,默认绑在 body 上 * @param {Boolean} body 是否插入蒙版至 boyd 上,默认 true * @param {Boolean} fullscreen 蒙版是否全屏蒙住整个 html 页面,默认 true * @param {Boolean} lock 蒙版出现时,是否锁定屏幕滚动,默认 false * @param {String} text 蒙版上显示的提示文本 * @param {String} background 蒙版的背景颜色,写死 50% 透明度的纯黑色 */ showLoading(opt) { let options = opt || {}; loadingStatus = ElLoading.service({ target: options.target || 'body', body: (options.body == true || options.body == false) ? options.body : false, fullscreen: (options.fullscreen == true || options.fullscreen == false) ? options.fullscreen : true, lock: (options.lock == true || options.lock == false) ? options.lock : false, text: options.text || '请稍等...', background: 'rgba(0,0,0,.5)', }); }, /** * 获取标签上的自定义属性 * @param {any} node 传入 字符串 或 标准DOM对象 或 jQuery DOM对象 ,函数自动判断传入的类型并返回其 dataset 属性。 */ getCurrentData(node) { // 如果传入的是 jQuery 对象 if (window.jQuery && node instanceof jQuery) { return node[0].dataset; } else { // 判断传入的是否是标准 DOM 对象 let isDom = (typeof node === 'object') ? function (obj) { return obj instanceof HTMLElement; } : function (obj) { return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'; }; // 如果是标准 DOM 对象,输出 dataset if (isDom(node)) { return node.dataset; } else { // 如果是不是,则表示传入的是字符串,根据字符串取 DOM 后输出 dataset let dom = document.querySelector(node); return dom.dataset; } } }, /** * 关闭loading */ closeLoading() { loadingStatus && loadingStatus.close(); }, /** * 深拷贝 json 数组 * @param {Array} jsonArray 传入 Json 数组,返回一个指向新指针拷贝份数据 */ deepCopy(jsonArray) { return JSON.parse(JSON.stringify(jsonArray)); }, /** * 根据后端返回的 ID 遍历树形结构包装组件编辑用数据函数 * @param {String} key 需要找到的 ID * @param {Array} treeData 树形 Array */ getTreeDeepArr(key, treeData) { let arr = []; // 在递归时操作的数组 let returnArr = []; // 存放结果的数组 let depth = 0; // 定义全局层级 // 定义递归函数 function childrenEach(childrenData, depthN) { for (var j = 0; j < childrenData.length; j++) { depth = depthN; // 将执行的层级赋值 到 全局层级 arr[depthN] = (childrenData[j].id); if (childrenData[j].id == key) { // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系 returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组,截断并保存到结果数组 break; } else { if (childrenData[j].children) { depth++; childrenEach(childrenData[j].children, depth); } } } return returnArr; } return childrenEach(treeData, depth); }, /** * 获取数据的类型 * @param {any} options 传入一个数据,返回其类型 (object, array, string, number等) */ getType(options) { return Object.prototype.toString.call(options).slice(8, Object.prototype.toString.call(options).length - 1).toLowerCase(); }, /** * 控制页面滚动到指定位置 * @param {Object} options 传入一个配置项,其中: * @param {String} el 需要滚动的 DOM 元素选择器,可以为 CLASS 或 ID * @param {Number} scrollTop 需要滚动到顶部的位置,数值越低滚动的越靠近顶部,默认 0 * @param {Number} scrollLeft 需要滚动到顶部的位置,数值越低滚动的越靠近顶部,默认 0 * @param {Number} speed 滚动到指定位置需要的时间 (动画时间),默认 200 * @param {Function} success 滚动执行完毕后的回调函数 */ scrollTo(options) { if (!options || !options.el) { this.showMsg({ msg: 'scrollTo() 方法需要传入 el 属性' }); return; } if ($(options.el)[0] && ($(options.el)[0].scrollHeight > (window.innerHeight || document.documentElement.clientHeight))) { $(options.el).animate({ scrollTop: options.scrollTop || 0, scrollLeft: options.scrollLeft || 0, }, options.speed || 200, () => { options.success && options.success(); }); } else { options.success && options.success(); } }, /** * 导出 Json 为 excel 表格 * @param {Object} tableData 用于规定表格表头和内容的 Object * @param {String} excelName 导出的文件名 */ exportExcel(tableData, excelName) { const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径 let tHeader = []; // 上面设置Excel的表格第一行的标题 let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值 const formatJson = function (filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])); }; tableData.column.forEach(ele => { tHeader.push(ele.name); filterVal.push(ele.field); }); const list = tableData.data; //把要导出的数据tableData存到list const data = formatJson(filterVal, list); export_json_to_excel(tHeader, data, (excelName || "导出的Excel")); // 最后一个是表名字 }, /** * 导出多个 sheet 的单独表格 * @param {Array} thArray sheet 的表头,需传入二维数组 * @param {Array} dataArray 表格数据,需传入二维数组 * @param {Array} sheetNameArray sheet 的名称 * @param {String} fileName 导出的文件名称 */ exportMultiple(thArray, dataArray, sheetNameArray, fileName) { const { exportMultiple } = require('@tools/excel/Export2Excel.js'); exportMultiple(thArray, dataArray, sheetNameArray, fileName); }, // JS 触发全屏功能 requestFullscreen() { //全屏 const docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } }, /** * 颜色进制转换 16 <--> 10 互转 * @param {String} colorStr 传入一个颜色字符串, 16进制 或者 10进制 ,返回转换后的结果,例:传入 #1890ff ,返回 rgb(24, 144, 255),反之亦然 */ replaceColor(colorStr) { if (!colorStr) return ''; let colorString = colorStr.replace(/#|rgb|\(|\)|\|;|\s+/g, ""); if (colorString.indexOf(",") === -1) { let color10 = []; for (let i = 0; i < colorString.length; i++) { if (!((i + 1) % 2)) { color10.push(parseInt((colorString[i - 1] + colorString[i]), 16)); } } return "rgb(" + color10.toString() + ")"; } else { let colorArray = colorString.split(','); let color16 = ''; colorArray.forEach(ele => { color16 += (parseInt(ele).toString(16)); }); return "#" + color16; } }, /** * 生成指定范围内的随机数 * @param {Int} minNum 范围下限 * @param {Int} maxNum 范围上限 * @returns */ randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); default: return 0; } }, // 正则表达式 regs: { // 是否为手机号 isPhone: /^1(3|4|5|6|7|8|9)\d{9}$/, // 是否为合法 15 或 18 位身份证号 isIdentityCard: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, // 是否是邮箱 isMail: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, // 是否是数字 isNumber: /^(-?\d+)(\.\d+)?$/ }, elCkeck: { isNumber(rule, value, callback) { if (value === '') { callback(new Error('该值不可为空')); } else if (!/^(-?\d+)(\.\d+)?$/.test(value)) { callback(new Error('输入有误,仅支持输入数字')); } else { callback(); } } } }