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.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} options 传入一个配置项,根据传入的配置项导出对应的 excel 表格,其中: * @param {Array} tTitle 表格的标题,置空则为默认以日期为标题的表格 * @param {Array} tHeader 表格的表头,必传 * @param {Array} tBody 表格需要展示的字段名,必传 * @param {Array} tMerges 表格标题需要合并的单元格,置空则为默认 A1 格为表格标题显示区域 * @param {Array} tData 表格渲染所用的数据源,必传 * @param {Boolean} autoWidth 表是否根据表格内容自动撑开列宽,置空则为默认 true * @param {String} exportName 所导出的表格文件名,置空则以时间戳为文件名称进行导出 */ exportExcelForJson (options) { const { export_json_to_excel } = __getExport2Excel(); let title = options.tTitle; if (!title || !title.length) { title = [] options.tBody.forEach((ele, index) => { if (!index) { title.push(new Date().formatDate("yyyy-MM-dd") + '导出的表格'); } else { title.push(""); } }); } let header = options.tHeader; let data = options.tData.map(data => options.tBody.map(key => data[key])); let merges = options.tMerges || []; let filename = options.exportName || new Date().getTime(); let bookType = "xlsx"; let autoWidth = (options.autoWidth == true || options.autoWidth == false) ? options.autoWidth : true; data.map(item => { item.map((i, index) => { if (!i) item[index] = ""; }); }); export_json_to_excel({ title, header, data, merges, filename, bookType, autoWidth }); }, /** * 颜色进制转换 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; } }, // 正则表达式 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+)?$/ } };