常用的封装函数

194 阅读3分钟

1.将excel文件中的日期格式的内容转回成标准时间

// 把excel文件中的日期格式的内容转回成标准时间
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

2.中文key转为英文key

后端需要的数据是这样的格式的

[{'姓名''小张''手机号': '13712345678'}{.....}]

我们需要将他转换为

[ {'username''小张''mobile': '13712345678'}, {.....} ]

思路:

1.定义一个数据对象 key是中文 value是英文  我们只需要对象[中文]就额可以拿到对象中的英 文value  例如 :{username:"姓名"}

2.使用Object.keys拿到么一个数组中所有的key属性 ---中文key

3.使用map循环数组  数组里面有几项就转换成几个 返回的是一个数组  

4.在map定义空对象 之后循环中文key的每一项来处理每一个数据

5.给空对象的英文key进行赋值 数组里的每一项的中文key

代码如下

 format(result, header) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
       const arr = result.map(it => {
        const enobj = {}
        header.forEach(zhkey => {
          const enkey = mapInfo[zhkey]
          if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
            enobj[enkey] = new Date(formatExcelDate(it[zhkey]))
          } else {
            enobj[enkey] = it[zhkey]
          }
        })
        arr.push(enobj)
      })
      return arr
    },

3.英文key转化为中文key

  formatData(list) {
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      console.log(list)
      let header = []
      // header = ['id', 'mobile', 'username', .....]
      // data = [
      //     ['65c2', '1380000002', '管理员', ....],
      //     ['65c3', '1380000003', '孙财', ....],
      // ]
      let data = []
      // 开始代码
      // 找到一个元素
      const one = list[0]
      if (!one) {
        return { header, data }
      }
      header = Object.keys(one).map(key => {
        return map[key]
      })
 
      // data把list中每一个对象转成 对应的value数组
      data = list.map(obj1 => {
        // 把  Obj['formOfEmployment']: 1 , 2   ---> '正式', '非正式'
        const key = obj1['formOfEmployment'] // 1, 2
        obj1['formOfEmployment'] = obj[key] // hireTypEnmu:{1:'正式', '2':'非正式' }
 
        return Object.values(obj1)
      })
 
      return { header, data }
    },

4.数组转换为树形

4-1递归形式实现

   <script>
           let arr=[
           { 'id': '29', 'pid': '',     'name': '总裁办' },
           { 'id': '2c', 'pid': '',     'name': '财务部' },
           { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
           { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
           { 'id': 'd2', 'pid': '',     'name': '技术部'},
           { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}
           ]
        function tranListToTreeData(list,pid='') {
          // 先找到所有的根节点
          let tranList=list.filter(it=>it.pid===pid)
          tranList.forEach(itm =>{
           //传入id  list进行递归 在筛选出 他的父级 是一个数组
            itm.children=tranListToTreeData(list,itm.id)
          })
          return tranList
       }
       
       console.log(tranListToTreeData(arr));

4-2 非递归方式实现

// 数组转换为树形的函数

export function tranListToTreeData(list) {
 // 最终要产出的树状数据的数组
 const treeList = []
 // 所有项都使用对象存储起来
 const map = {}

 // 建立一个映射关系:通过id快速找到对应的元素
 list.forEach(item => {
   if (!item.children) {
     item.children = []
   }
   map[item.id] = item
 })
 // map:
 // {
 //   "312c": { 'id': '312c', 'pid': '',     'name': '财务部',    children: [{ 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}] },
 //   "312d": { 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}
 // }

 list.forEach(item => {
   // 对于每一个元素来说,先找它的上级
   //    如果能找到,说明它有上级,则要把它添加到上级的children中去
   //    如果找不到,说明它没有上级,直接添加到 treeList
   const parent = map[item.pid]
   // 如果存在则表示item不是最顶层的数据
   if (parent) {
     parent.children.push(item)
   } else {
     // 如果不存在 则是顶层数据
     treeList.push(item)
   }
 })
 // 返回出去
 return treeList
}

5.重置路由

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

6.定时器(手机验证码、5秒跳转都适用)

import { useEffect, useRef, useState } from 'react'
export default function useCountDown (initCount = 10, callBack) {
  // 存入到useRef中
  const refTimer = useRef()
  /* 用户可以定义:
     1.倒计时的时间
     2.倒计时结束的动作
     3.何时开始倒计时
     */
  // 1. 初始化倒计时的时间
  const [count, setCount] = useState(initCount)
  // 2.开启定时器
  const start = () => {
    setCount(initCount)
    refTimer.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  // 2.倒计时结束做的事情
  useEffect(
    () => {
      if (count === 0) {
        clearInterval(refTimer.current)
        callBack()
      }
    },
    [count]
  )
  // 3.组件销毁之前清掉定时器
  useEffect(() => {
    return () => {
      clearInterval(refTimer.current)
    }
  }, [])
  //  3.最后会返回给用户一个倒计时的时间和何时开始倒计时
  return {
    count,
    start
  }
}

7.城市及城市下地区 封装

export const datas = [
    {
        city: '北京市',
        area: [
          '东城区',
          '西城区',
          '朝阳区',
            ...
        ]
  },
  {
        city: '天津市',
        area: [
          '和平区',
          '河东区',
          '河西区',
            ...
    ]
  },
  ...
]

// 所有城市
export const provinces = () => {
  return datas.map(item => {
    return item.city
  })
}
 
// 城市下地区
export const citys = pname => {
  for (const item of datas) {
    if (item.city === pname) {
      return item.area
    }
  }
  return []
}

8. 通过id值查找该元素

// 通过id值查找该元素
export function getChidlren (id, data) {
  var hasFound = false, // 表示是否有找到id值
    result = null
  var fn = function (data) {
    console.log(data, hasFound)
    if (Array.isArray(data) && !hasFound) {
      // 判断是否是数组并且没有的情况下,
      data.forEach((item) => {
        if (item.id === id) {
          // 数据循环每个子项,并且判断子项下边是否有id值
          result = item // 返回的结果等于每一项
          hasFound = true // 并且找到id值
        } else if (item.children) {
          fn(item.children) // 递归调用下边的子项
        }
      })
    }
  }
  fn(data) // 调用一下
  return result
}