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
}
原文地址:https://www.cnblogs.com/xiaoer-heidou/p/14764855.html