js常用utils封装

1.1、下载excel方法

/**
 * @description: 下载excel
 * @param  res {Blob} 后台返回的Blob对象
 * @param suffix 文件后缀
 * @param name  文件名称
 */
export function downloadFile(res, suffix = 'xlsx', name = '') {
  const blob = new Blob([res], {
    type: 'application/vnd.ms-excel;charset=utf-8',
  })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.download = name + +new Date() + '.' + suffix
  // downloadElement.download = +new Date() + '.xlsx' // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

1.2、使用

import { downloadFile} from '@/utils/util'
// ExportSaleRecordsData改为自己真实接口

...

methods: {
  // 文件导出
  async exportHandle() {
    ExportSaleRecordsData().then((res) => {
      downloadFile(res, 'xlsx', '某某表')
    })
  },
}

2.1、数组对象中查找所需对象方法

/**
 * @description: 查找数组对象某项值
 * @param objArray 目标对象数据
 * @param key      某项属性
 * @param value    值
 */
export function parseArray(objArray, key, value) {
  for (let i in objArray) {
    let element = objArray[i]
    if (typeof element === 'object') {
      let result = parseArray(element, key, value)
      if (result) return result
    } else {
      if (i === key) {
        if (element === value) return objArray
      }
    }
  }
}

2.2、使用

import { parseArray } from '@/utils/util'
// objArr = [
// 	{id: 111, name: '111', age: '111', sex: '111'},
// 	{id: 222, name: '222', age: '222', sex: '222'},
// 	{id: 333, name: '333', age: '333', sex: '333'},
// 	{id: 444, name: '444', age: '444', sex: '444'}
// ]

let aaa = parseArray(objArr, 'id', 111)
// aaa 打印出为 {id: 111, name: '111', age: '111', sex: '111'}

3.1、返回数组第一项值方法

/**
 * @description:  获取数组的第一项值，若空返回相应值
 * @param arr  目标数组
 * @param key  属性
 * @param val  数组为空时希望返回的值（默认undefined）
 */
export function getFirstValue(arr, key, val = undefined) {
  if (arr.length !== 0) {
    if (typeof arr[0] === 'object') {
      return arr[0][key]
    } else {
      return arr[0]
    }
  } else {
    return val
  }
}

3.2、使用

import { getFirstValue } from '@/utils/util'
// objArr1 = [
// 	{id: 111, name: '111', age: '111', sex: '111'},
// 	{id: 222, name: '222', age: '222', sex: '222'},
// ]
let aaa = getFirstValue(objArr1 , 'id')
// aaa 打印出为 111

// objArr2 = []
let bbb = getFirstValue(objArr2 , 'id', null)
// bbb 打印出为 null

4.1、数组对象相同项合并处理方法

/**
 * @description:  将数组对象中相同项合并处理
 * @param arr  目标数组
 */
export function repArr(arr) {
  let map = {}
  let dest = []
  for (let i = 0; i < arr.length; i++) {
    let ai = arr[i]
    if (!map[ai.name]) {
      dest.push({ name: ai.name, data: ai.data })
      map[ai.name] = ai
    } else {
      for (let j = 0; j < dest.length; j++) {
        let dj = dest[j]
        if (dj.name == ai.name) {
          dj.data = dj.data.concat(ai.data)
          break
        }
      }
    }
  }
  return dest
},

4.2、使用

import { repArr } from '@/utils/util'
// objArr =[
//  {name: '测试1', data: ['10']}, 
//  {name: '测试2', data: ['15']}, 
//  {name: '测试1', data: ['20']}, 
//  {name: '测试2', data: ['25']}
//]

let aaa = repArr (objArr)
// aaa 打印出为
// [
//  {name: '测试1', data: ['10', '20']}, 
//  {name: '测试2', data: ['15', '25']}
// ]

5.1、复制方法

/**
 * @description:    复制文本信息
 * @param text      复制的文字信息
 * @param callback  回调函数 
 */
export function copyText(text, callback) {
  var tag = document.createElement('input')
  tag.setAttribute('id', 'cp_hgz_input')
  tag.value = text
  document.getElementsByTagName('body')[0].appendChild(tag)
  document.getElementById('cp_hgz_input').select()
  document.execCommand('copy')
  document.getElementById('cp_hgz_input').remove()
  if (callback) {
    callback(text)
  } else {
    Vue.prototype.$message.success('复制成功')
  }
}

5.2、使用

import { copyText } from '@/utils/util'
...
// 点击触发事件方法,弹出 复制成功
copyText('123456')

6.1、正则方法

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile (s) {
  return /^(13[0-9]|14[4579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * 金额
 * @param {*} s
 */
export function isMoney (s) {
  // 金额 只允许正数
  var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
  // 金额 允许正（+）负数
  // var exp = /(^([+-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([+-]?)(0){1}$)|(^([+-]?)[0-9]\.[0-9]([0-9])?$)/

  // 金额 允许正负数
  // var exp = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/
  if (exp.test(s)) {
    return true
  } else {
    return false
  }
}