zoukankan      html  css  js  c++  java
  • 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
    }
  • 相关阅读:
    【剑指Offer-循环和递归】面试题10.4:矩形覆盖
    【剑指Offer-循环和递归】面试题10.3:变态跳台阶
    【剑指Offer-面试案例】面试题66:把字符串转为整数
    【剑指Offer-发散思维能力】面试题66:构建乘积数组
    【剑指Offer-发散思维能力】面试题65:不用加减乘除做加法
    【剑指Offer-发散思维能力】面试题64:求1+2+...+n
    【剑指Offer-抽象建模能力】面试题62:圆圈中最后剩下的数字
    【剑指Offer-抽象建模能力】面试题61:扑克牌中的顺子
    【剑指Offer-知识迁移能力】面试题59:滑动窗口的最大值
    【剑指Offer-知识迁移能力】面试题58.2:左旋转字符串
  • 原文地址:https://www.cnblogs.com/xiaoer-heidou/p/14764855.html
Copyright © 2011-2022 走看看