vue开发过程常用方法封装
/* * Created by luoxuemei on 2019/09/02. */ // 拖动调整左右两侧div的宽度 // resizeName表示拖到的工具条的className // left表示左边的区域的className。leftWid表示左边的最小宽度 // midName表示右边区域的className。rightWid表示右边的最小宽度 // boxName表示父级元素的className import moment from 'moment'; export function dragControllerDiv(resizeName='resize', leftName = 'left', midName = 'mid', boxName = 'box', leftWid = 250, rightWid = 800){ var resize = document.getElementsByClassName(resizeName); var left = document.getElementsByClassName(leftName); var mid = document.getElementsByClassName(midName); var box = document.getElementsByClassName(boxName); for (let i = 0; i < resize.length; i++) { // 鼠标按下事件 resize[i].onmousedown = function (e) { var startX = e.clientX; resize[i].left = resize[i].offsetLeft; // 鼠标拖动事件 document.onmousemove = function (e) { var endX = e.clientX; var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度 var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度 if (moveLen < leftWid) moveLen = leftWid; // 左边区域的最小宽度为150px if (moveLen > maxT - rightWid) moveLen = maxT - rightWid; //右边区域最小宽度为800px resize[i].style.left = moveLen; // 设置左侧区域的宽度 for (let j = 0; j < left.length; j++) { left[j].style.width = moveLen + 'px'; mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'; } } // 鼠标松开事件 document.onmouseup = function (evt) { document.onmousemove = null; document.onmouseup = null; resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 } resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获 return false; } } } // 对象深拷贝 export function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {} for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object' && obj[key] !== null) { result[key] = deepCopy(obj[key]) } else { result[key] = obj[key] } } } return result } /*菜单树下拉,禁止选择当前项及其子项,以防止死循环*/ export function diGuiTreeEdit(item, compID) { // 编辑情况下,禁止选择当前节点及其子节点 const dataSor = item let treeAry = [] for (let i in dataSor) { const v = dataSor[i] let node = {} if (v === null || v === undefined) { } else { if (v.children && v.children.length > 0) { if (v.id == compID) { node.isDisabled = true } else { node.isDisabled = false } node.id = v.id node.label = v.label node.name = v.name node.children = diGuiTreeEdit(v.children, compID) treeAry.push(node) } else { if (v.id == compID) { node.isDisabled = true } else { node.isDisabled = false } node.id = v.id node.label = v.label node.name = v.name treeAry.push(node) } } } return treeAry } // 递归遍历根据id,找到对应的node节点。treeAry主要是用于递归push的值 export function rspTreeNodeFormID(item,id,idVal, treeAry=[]) { const dataSor = item for (let v of dataSor) { if (v === null || v === undefined) { } else { if (v.children && v.children.length > 0) { if (v[id] == idVal) { treeAry.push(v) break } else { rspTreeNodeFormID(v.children, id, idVal,treeAry ) } } else { if (v[id] == idVal) { treeAry.push(v) break } } } } return treeAry } // 递归遍历根据id,找到对应的node节点下的data属性里面的对应的值。treeAry主要是用于递归push的值 export function rspTreeNodeDataFormID(item,firstAttr,secAttr,idVal, treeAry=[]) { const dataSor = item for (let v of dataSor) { if (v === null || v === undefined) { } else { if (v.children && v.children.length > 0) { if (v[firstAttr] && v[firstAttr][secAttr] && v[firstAttr][secAttr] == idVal) { treeAry.push(v) break } else { rspTreeNodeDataFormID(v.children, firstAttr,secAttr, idVal,treeAry ) } } else { if (v[firstAttr] && v[firstAttr][secAttr] && v[firstAttr][secAttr] == idVal) { treeAry.push(v) break } } } } return treeAry } // 传入按钮组和按钮权限组,判断按钮组的按钮是否存在权限组里面,存在则true。不存在则false export function btnPermissFun(btnList, permissList) { for(let item in btnList){ let isPermiss = false for(let pitem of permissList) { if(item == pitem.code) { isPermiss = true break } } btnList[item] = isPermiss } return btnList } // 字符串合并 export function strMergeCom(str1, str2){ if(str1== null) { str1 = '' } if(str2 == null) { str2 = '' } return `${str1}(${str2})` } // 根据id,以及id的值,遍历list对象,得出label export function rstLabelFormID(list, id, label, idVal) { let rsp = '' for (let i = 0; i < list.length; i++) { if (list[i][id] === idVal) { rsp = list[i][label] break } } return rsp } // 根据id,以及id的值,遍历list集合,得出对应的对象 export function rstListFormID(list, id, idVal) { let rsp = undefined for (let i = 0; i < list.length; i++) { if (list[i][id] === idVal) { rsp = list[i] break } } return rsp } // 根据id,label,以及id的值和label的值,遍历list集合,得出对应的对象集合 // 此处是比对2个对象,过滤出包含的,类似于模糊搜索id或者名称 export function rstListFormIDOrLabel(list, id,label, compVal) { let newAry = [] for (let i = 0; i < list.length; i++) { if (list[i][id].includes(compVal) || list[i][label].includes(compVal)) { newAry.push(list[i]) } } return newAry } // 遍历obj已有的排序对象,对另一个对象进行排序 // compField表示两个对象关联的属性,类似与外键 export function sortObjFromObj(sortObj, orgObj, compField = 'id') { var arr = Object.keys(sortObj); if(arr.length >0) { // 用于排序的不为空 let sortOrgObj = [] const newItemAry = []// 移除为空的项 for(let item of orgObj) { sortOrgObj[(sortObj[item[compField]])-1] = item // 此处保存的数组,存在空值 } for(let newItem of sortOrgObj) { if(newItem) { newItemAry.push(newItem) } } return newItemAry } else { return orgObj } } // 判断数据是否为空,为空的话返回指定的数值 export function isNullORFalse(checkVal,rstVal) { if(checkVal == '' || checkVal == null || checkVal == undefined || typeof(checkVal) == undefined){ if(rstVal == null || rstVal == ''){ rstVal = ""; } return rstVal; } else { return checkVal; } } // 判断数组的每一项是否不为空,或者不为undefined。不为空的话,返回true;为空返回false // 如果不为空,返回true export function isNotNullObj(objAry) { let isNull = false for(let item of objAry){ if(item != "" && item != null && item != undefined && typeof item != 'undefined') { isNull = true break } } return isNull } // 获取的localstrage是否为空或者不存在,则转为空数组[] export function getNullLocalstrageToAry(str) { if(str == null || typeof(str) == undefined ) { return []; } else{ return str; } } // 根据文件url,判断是否指定的文件类型,返回bool值 // 定义视频和图片的文件后缀。通过这个后缀去判断文件类型 const VIDEO_TYPE = ['mp4', 'ogg', 'webm','mkv']; const IMAGE_TYPE = ['jpg', 'png', 'gif', 'webp', 'jpeg',]; export function isFileType(fileUrl,fileType) { const fileTypeName = (fileUrl).substring(fileUrl.lastIndexOf('.') * 1 + 1 * 1); // 获取后缀名 // 文件后缀和兼容的格式,统一转为小写比对 const fileTypeNameLower = fileTypeName.toLowerCase(); if (fileType == 'image') { let supportFormat = IMAGE_TYPE; let index = supportFormat.indexOf(fileTypeNameLower); if (index == -1) { // 说明核实不符合 return false; } else { return true; } } else if (fileType == 'video') { let supportFormat = VIDEO_TYPE; let index = supportFormat.indexOf(fileTypeNameLower); if (index == -1) { // 说明核实不符合 return false; } else { return true; } } } // 当数值过大是,超过9位数(亿)转为亿单位展示 export function rspHundredMill(val, unit = 'HM') { if(unit == 'HM') { if(val>100000000) { //大于1亿 return (val/100000000).toFixed(3)+'亿' } else { return val } } } // 全部替换 // str表示原字符串,s表示要被替换的内容,replaceStr用于替换的内容 export function repalceAll(str, s ,replaceStr = '') { var reg = new RegExp(s, "g")//g,表示全部替换 return str.replace(reg,replaceStr) } //计算两个日期天数差的函数,通用,时间格式为yyyy-MM-dd格式 export function dateDiff(sDate1, sDate2) { //sDate1和sDate2是yyyy-MM-dd格式 let aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为yyyy-MM-dd格式 aDate = sDate2.split("-") oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数 return iDays; //返回相差天数 } // 获取当前时刻 // ymdhms表示返回年月日时分秒,ymd表示返回年月日,hms表示返回时分秒 export function curDateTime(type='ymdhms') { function getNow(s) { return s < 10 ? '0' + s : s } const myDate = new Date() const year = myDate.getFullYear() // 获取当前年 const month = myDate.getMonth() + 1 * 1 // 获取当前月 const date = myDate.getDate() // 获取当前日 const h = myDate.getHours() // 获取当前小时数(0-23) const m = myDate.getMinutes() // 获取当前分钟数(0-59) const s = myDate.getSeconds() let now = year + '-' + getNow(month) + '-' + getNow(date) + ' ' + getNow(h) + ':' + getNow(m) + ':' + getNow(s) if(type == 'ymd') { now = year + '-' + getNow(month) + '-' + getNow(date) } else if(type == 'hms') { now = getNow(h) + ':' + getNow(m) + ':' + getNow(s) } return now } // 获取今天星期几 export function getWeekFun() { const weekDay = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'] let week = new Date().getDay(); return weekDay[week]; } // 查询最近n年,n表示前多少年的意思 // 例如查询近5年的时间,n=4,不包括今年的的前4年 export function getLastNYear(n) { const myDate = new Date; const curYear = myDate.getFullYear(); if(n =='' || n==undefined || n == null){ n =0; } let rstYear = curYear*1 - n*1; return rstYear; } // 查询最近n月,n表示前多少月的意思 export function getLastNMonth(n) { const myDate = new Date; const curYear = myDate.getFullYear(); const curMonth = myDate.getMonth()+1; // 月份从0开始算起。需要加1 if(n =='' || n==undefined || n == null){n =0;} let rstYear = ''; let rstMonth = ''; if(n>curMonth){ //表示去到去年的月份,年份需要去到上一年 rstYear = curYear*1-1*1; rstMonth = 12-(n-curMonth)+1; } else { rstYear =curYear; rstMonth = curMonth -n; } rstMonth = (rstMonth)>9?rstMonth:'0'+(rstMonth); let rstYearMonth = rstYear + '-' + rstMonth; return rstYearMonth; } // 获取最近n天的时间,n表示前多少天的意思。 // 例如查询近7天的时间,n=6,不包括当天的的前6天 // fommatterb表示间隔符,例如:-,/ export function getLastNDate(n,fommatter ='-') { const d = new Date(); var myDate=new Date(d.getTime()-86400000*n); // 获取前n天的日期 const year = myDate.getFullYear()>9?myDate.getFullYear():'0'+myDate.getFullYear(); const month = (myDate.getMonth() + 1)>9?myDate.getMonth() + 1:'0'+(myDate.getMonth() + 1); const date = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate(); let last7Date = year + fommatter + month + fommatter + date; return last7Date; } // 获取最近的n个小时,n表示前多少小时的意思。 export function getLastNHour(n,fommatter ='-') { const d = new Date(); var myDate=new Date(d.getTime()-86400000*n); // 获取前n天的日期 const year = myDate.getFullYear()>9?myDate.getFullYear():'0'+myDate.getFullYear(); const month = (myDate.getMonth() + 1)>9?myDate.getMonth() + 1:'0'+(myDate.getMonth() + 1); const date = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate(); const h = myDate.getHours()>9?myDate.getHours():'0'+myDate.getHours(); //获取当前小时数(0-23) const m = myDate.getMinutes()>9?myDate.getMinutes():'0'+myDate.getMinutes(); //获取当前分钟数(0-59) const s = myDate.getSeconds()>9?myDate.getSeconds():'0'+myDate.getSeconds(); let nowTime = year + fommatter + month + fommatter + date + " " + h + fommatter + m + fommatter + s; return nowTime; } // 搜索时间下拉框,快捷键 export const pickerOptionsTimeEle = [{ text: '今日', onClick(picker) { const end = new Date() end.setTime(end.getTime()) end.setHours(end.getHours()) end.setMinutes(end.getMinutes()) end.setSeconds(end.getSeconds()) const start = new Date() start.setTime(start.getTime()) start.setHours(0); start.setMinutes(0); start.setSeconds(0) picker.$emit('pick', [start, end]) } }, { text: '近7天', onClick(picker) { const end = new Date() end.setHours(23); end.setMinutes(59); end.setSeconds(59) const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 6) start.setHours(0); start.setMinutes(0); start.setSeconds(0) picker.$emit('pick', [start, end]) } }, { text: '近30天', onClick(picker) { const end = new Date() end.setHours(23); end.setMinutes(59); end.setSeconds(59) const start = new Date() start.setHours(0); start.setMinutes(0); start.setSeconds(0) start.setTime(start.getTime() - 3600 * 1000 * 24 * 29) picker.$emit('pick', [start, end]) } }, { text: '昨天', onClick(picker) { const end = new Date() end.setTime(end.getTime() - 3600 * 1000 * 24 * 1) end.setHours(23); end.setMinutes(59); end.setSeconds(59) const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 1) start.setHours(0); start.setMinutes(0); start.setSeconds(0) picker.$emit('pick', [start, end]) } }, { text: '最近90天', onClick(picker) { const end = new Date() end.setHours(23); end.setMinutes(59); end.setSeconds(59) const start = new Date() start.setHours(0); start.setMinutes(0); start.setSeconds(0) start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) picker.$emit('pick', [start, end]) } }] export function getCurrWeekDays () { let date=[]; let weekOfday = moment().format('E');//计算今天是这周第几天 let start = moment().subtract(weekOfday-1, 'days').format('YYYY-MM-DD');//周一日期 let end= moment().add(7-weekOfday, 'days').format('YYYY-MM-DD');//周日日期 date.push(start) date.push(end) return date } export function getCurrMonthDays(){ let date = [] let start = moment().startOf('month').format('YYYY-MM-DD') let end = moment().endOf('month').format('YYYY-MM-DD') date.push(start) date.push(end) return date } // elementUI 时间范围选择器,数据格式转换 // 时间范围选择,中国标准时间转为yyyy-MM-dd HH:mm:ss. export function standardTimeToYMDHMS(timeStr) { if(timeStr == null || typeof(timeStr) == undefined ) { return ''; } else{ return timeStr.getFullYear() + '-' + ((timeStr.getMonth() + 1)>9?(timeStr.getMonth() + 1):'0'+(timeStr.getMonth() + 1)) + '-' + (timeStr.getDate()>9?timeStr.getDate():'0'+timeStr.getDate()) + ' ' + (timeStr.getHours()>9?timeStr.getHours():'0'+timeStr.getHours()) + ':' + (timeStr.getMinutes()>9?timeStr.getMinutes():'0'+timeStr.getMinutes()) + ':' + (timeStr.getSeconds()>9?timeStr.getSeconds():'0'+timeStr.getSeconds()); } } // 用于数据库管理,动态条件拼接 // 遍历搜索条件,把时间范围搜索的条件的参数拆分成min,max // {fieldValue: ["2019-09-21 00:00:00", "2019-10-22 00:00:00"]}拆分成{min:'2019-09-21 00:00:00',max:'2019-10-22 00:00:00'} // luoxm@2019-09-21 export function dataPackage(list) { for(let i =0; i<list.length; i++) { if(list[i]['javaType'] == 'datetime' && list[i]['fieldValue']) { if(list[i]['fieldValue'].length>0 && list[i]['fieldValue'].length == 2) { list[i]['min'] = list[i]['fieldValue'][0] list[i]['max'] = list[i]['fieldValue'][1] list[i]['fieldValue'] = undefined } } } return list } // 用于数据库管理,动态条件拼接 // 和dataPackageshi是翻转的一个操作 // 遍历搜索条件,把min,max参数拼装成时间范围搜索的条件 // {min:'2019-09-21 00:00:00',max:'2019-10-22 00:00:00'}拼装成{fieldValue: ["2019-09-21 00:00:00", "2019-10-22 00:00:00"]} // luoxm@2019-09-21 export function dataPackageReverse(list) { for(let i =0; i<list.length; i++) { if(list[i]['javaType'] == 'datetime' && list[i]['min'] && list[i]['max']) { list[i]['fieldValue'] = [] list[i]['fieldValue'].push(list[i]['min']) list[i]['fieldValue'].push(list[i]['max']) list[i]['min'] = undefined list[i]['max'] = undefined } } return list } // 把后台返回的时间默认值,赋值到搜索条件上 export function setQryParam(list) { for(let i =0; i<list.length; i++) { if(list[i]['javaType'] == 'datetime' && list[i]['min'] && list[i]['max']) { list[i]['fieldValue'] = [] list[i]['fieldValue'][0] = list[i]['min'] list[i]['fieldValue'][1] = list[i]['max'] } } return list } // 过滤掉javaType=feature的对象 export function paramNotFeatureFun(obj) { let rspData = [] for(let item of obj) { if(item.javaType != 'feature') { rspData.push(item) } } return rspData } // 用于数据库管理,动态条件拼接,把阈值从【0,1】转为【0-100】 export function similarExpand100(list) { for(let item of list) { if(item.javaType == 'feature') { if(item.similar) { item.similar = (item.similar * 100).toFixed(2) } } } return list } // 用于数据库管理,动态条件拼接,把阈值从【0-100】转为【0,1】 export function similarReduce100(list) { for(let item of list) { if(item.javaType == 'feature') { if(item.similar) { item.similar = (item.similar / 100).toFixed(4) } } } return list } // 用于数据库管理,清空动态的搜索条件的filedValue字段数据 export function clearActiveQry(obj) { for(let item of obj) { if(item.javaType == 'datetime') { item.min = undefined item.max = undefined item.fieldValue = "" } else { item.fieldValue = "" } } } // 用户数据库管理,默认选择左侧第一个数据数据库的菜单 export function getDBTreeItem(tree) { let rspNode = [] const dataSor = tree for (let i in dataSor) { const item = dataSor[i] if(item.dirType == 1) { // 表示数据库,并返回 if(item.children && item.children.length>0) { // 有children,则递归找children的第一个数据库 rspNode = [item.children[0],item.id] break } else { continue// 既不是数据库,也没有子节点,则表示是一个目录.不需要 } } } return rspNode }