常用工具库

工作中常用的函数方法

yarn add pps-tools

接口请求

# import { Api,HTTP_METHODS,ApiConfig,HTTP_BODY_TYPES } from 'pps-tools/http'
# 接口返回格式规定为
# 可根据后台返回的（code且errno不存在）或者（res.data.code或res.data.success）等于后台定义的成功标识则表示请求成功

# 使用
const ppsApi = new api()
# ppsApi.setOptions(opt) // 可自行配置基础的请求设置，详细查看ApiConfig接口定义
# PPSApi.httpErrorHandle = message => {
#  ElMessage.error(message)
# } 自定义报错处理
function test () {
    return ppsApi.send({
      mock: {
        code: 200,
        data: {
          name: '1'
        },
        message: 'ene'
      }, # 可自行mock，不需要则注释即可请求后台接口
      url: '/api/system/upload-attachments/{id}', # 后台接口
      params, # 请求参数,会自动过滤url中携带的id
      method: HTTP_METHODS.POST, # 请求方法
      bodyType: HTTP_BODY_TYPES.FORM_DATA, # 请求body体
      errorText: '新增失败' # 报错前台在后台无message自定义的提示信息
    })
  }
const [res,rej] = await test1()
# 会自动进行错误信息toast
console.log(res) # 正确返回的数据
console.log(rej) # 失败返回的数据 需要进行特殊的报错处理

数组去重

# import ArrayOnly from 'pps-tools/array_only'
# 此方法也可以使用lodash相关数组去重方法。
# 场景： 数据唯一性处理，可处理普通数据和数组对象
const data = [{name: '章三',age: 12},{name: '李四',age: 12}, 3, 3, 4, NaN, 0,undefined, false, null,null, '']
const result = [{name: '章三',age: 12}, 3, 4, NaN, 0,undefined, false, null,'']
const res = ArrayOnly(data,['age'])
res = result
const result1 = [{name: '章三',age: 12},{name: '李四',age: 12}, 3, 4, NaN, 0,undefined, false, null,'']
const res1 = ArrayOnly(data)
res1 = result1

颜色值判定

# import IsColor from 'pps-tools/color'
# 场景： 当前值是否为颜色值
IsColor('#343434') # true
IsColor('rgb(123,123,3)') # true
IsColor('rgba(123,123,3, 1)') # true
IsColor('1') # false

运行环境判定

# import Environ from 'pps-tools/Environment'
# 场景： 当前运行环境
Environ('applets') # applets 微信小程序
Environ('weChat') # weChat 微信公众号
Environ('app') # ios/android/pc/''
Environ('pc') # ie/opera/safari/chrome/firefox/''

金额格式化

# import FormatAmount from 'pps-tools/format_amount'
# 场景：处理金额的格式
/** 格式化数据
 * @param num 原数据 12323
 * @param { isDecimal = true }是否取自定义的定制的小数位
 * @param { decimals = 2 } 最低保留小数位数 默认 2 位
 * @param { decPoint = '.' } 小数位符号 默认 .
 * @param { thousandsSep = ',' } 前分位符号 默认 ,
 * @param { isRound = false } 是否需要四舍五入 默认 false
 * @returns 格式化后的数据 "12,323.00"
 */
FormatAmount({ num: '12345.567' }) # 12,345.56
FormatAmount({ num: '12', isDecimal: false, decimals: 0 }) # 12
FormatAmount({ num: null }) # 0.00

数子百分比格式化

# import FormatPercent from 'pps-tools/format_percent'
# 场景： 需要对数据进行百分比化
/** 格式数据为百分比
 * @param num 原数据 0.122 (此处数据是需要乘以100的数据)
 * @param { isDecimal = true } 是否取自定义的定制的小数位
 * @param { decimals = 2 } 最低保留小数位数
 * @param { isRound = false } 是否四舍五入
 * @returns 返回百分比的数据 12.20%
 */
FormatPercent({ num: 0.124567 }) # 12.45%
FormatPercent({ num: 0.10,isDecimals: false, isRound: true }) # 10%
FormatPercent({ num: null }) # 0.00%

数据处理

# import { FilterApiData, SetData, getLabelWithList } from 'pps-tools/format_data'
# 场景：需要对后台给予的数据处理成想要的类型或者显示的定义格式
/** FilterApiData
 * 对后台返回的数据二次处理，可默认填充，可加前后缀
 * @param opt  参数
 * obj原数据, key需处理的字段key, defaultFill无值默认填充的, type数据区分日期类型, prefix,suffix前后缀
 * @returns 最终处理后的新数据
 */
 /**SetData
 * 解决后台返回数据类型跟前台定义不一致导致前台报错问题
 * 初始化数据为前台定义的数据类型
 * @param apiData 后台接口返回的数据
 * @param target 前台定义的数据
 */
 /**getLabelWithList
 * 通过 value 取对应的 name
 * @param params
 * getLabelWithList({target: [{sex:1, label: '章三'},{sex:2, label: '章三岁'}], key: 'sex', value: 1})
 * 章三
 */
const data = {
    name: [],
    body: {}
}
const form = {
    name: null,
    date: '2020/09/09',
    body: null,
    info: {
      age: 12,
      sex: null,
      from: '中国',
      img: []
    }
}
const labelData = [
    {name: '章三', age: 23},
    {name: '李四', age: 233},
]

FilterApiData({ target: form.info, key: 'age', suffix: '岁' }) # 12岁
FilterApiData({ target: form.info, key: 'img', type: 'normal'}) # []
FilterApiData({ target: form.info, key: 'from', prefix: '来自' }) # 来自中国
{ target: form, key: 'date', type: 'date', format: 'yyyy年MM月dd日' })
SetData(form, data) # {name: [], body: {}}
getLabelWithList({ target: labelData, key: 'age', value: 23, labelKey: 'name' }) # 章三
getLabelWithList({ target: labelData, key: 'age', value: [23,233], labelKey: 'name',connectStr: '/' }) # 章三/李四

日期格式化

# import { GetTimeText, FormatDate } from 'pps-tools/format_date'
# 日期格式化全能函数方法可使用dayjs
# 场景： 日期格式化
FormatDate('2020-09-09') # 2020-09-09
FormatDate('2020-09-09','yyyy年MM月dd日 hh时mm分ss秒') # 2020年09月09日 08时00分00秒
GetTimeText()  # 上午好/下午好/晚上好

中文转拼音

# import PY from 'pps-tools/pinyin'
# 场景：需要将中文转成拼音
/**
 * @typedef Option
 * @type Object
 * @property {Boolean} [checkPolyphone=false] 是否检查多音字
 * @property {Number} [charCase='titlecase'] 输出拼音的大小写模式，titlecase-首字母大写；lowercase-全小写；uppercase-全大写
 */
PY({str: '章三'}) # Zhangsan
PY({opt: {charCase: 'lowercase'}, str: '章三'}) # zhangsan
PY({str: '章三', isFull: false}) # ZS

随机字符

# import RandomString from 'pps-tools/random'
/** 生成随机字符串
 * @param n 随机生成位数
 * @param type 随机生成的参数类型，letter 只生成字母， number 只生成数字， all 包含字母数字
 * @param repeat 是否可重复
 * @returns 随机生成的指定位数的字符串
 */
console.log('16位随机不可重复字符）'+ RandomString(16,'all',false))
console.log('32位随机可重复字符'+ RandomString())
console.log('3位随机可重复数字'+ RandomString(3,'number'))
console.log('3位随机可重复字母'+ RandomString(3,'letter'))

中文名字分割成姓和名

import SplitName from 'pps-tools/split_name'
SplitName('张三') # {lastName: '张', firstName: '三'}
SplitName('慕容云海') # {lastName: '慕容', firstName: '云海'}
SplitName('林郑月娥') # {lastName: '林', firstName: '郑月娥'}

sotrage缓存数据

import { GetStorage, SetStorage, RemoveStorage } from 'pps-tools/storage'
# 场景： 缓存的存储和取值需要处理
GetStorage('key') # null
SetStorage('result', {name: '章三'})
GetStorage('result') # {name: '章三'}
RemoveStorage('result')
RemoveStorage('',true)