第四章：常用函数

介绍

saiadmin 内置了很多函数和方法，方便程序开发，主要目录位于 src/utils 目录下

Tag使用

• 添加tag

import { addTag } from '@/utils/common'
import { useRoute } from 'vue-router'

const route = useRoute()

// 页面tag栏，新增一个tag
addTag({ name: route.name, path: route.path, title: route.ｍｅｔａ.title, query: route.query })

• 关闭tag

import { closeTag } from '@/utils/common'
import { useRoute } from 'vue-router'

const route = useRoute()

// 关闭一个tag
closeTag({ name: route.name, path: route.path })

• 刷新tag

import { refreshTag } from '@/utils/common'

// 刷新当前Tag
refreshTag()

消息通知

import { success, info, error } from '@/utils/common'

// 成功状态通知栏
success('提示', '任务已经完成')

// 警告状态通知栏
info('注意', '你工作的时间太久了，该休息一会了')

// 错误状态通知栏
error('错误', '系统崩溃了，请刷新页面')

权限检查

import { auth } from '@/utils/common'
// 检查某个权限
if (auth('system:user:save')) {
  // 业务代码
}

前端Localstorage

import tool from '@/utils/tool'

// 存储数据
const data = { key1: '示例1', key2: '示例2' }
tool.local.set('demo', data)

// 获取数据
const demo = tool.local.get('demo')
console.log(demo.key1) // 示例1

// 删除数据
tool.local.remove('demo')

// 清空数据
tool.local.clear()

前端session存储

import tool from '@/utils/tool'

// 存储数据
const data = { key1: '示例1', key2: '示例2' }
tool.session.set('demo', data)

// 获取数据
const demo = tool.session.get('demo')
console.log(demo.key1) // 示例1

// 删除数据
tool.session.remove('demo')

// 清空数据
tool.session.clear()

Cookie存储

import tool from '@/utils/tool'

// 存储数据
const cfg = {
  expires: 86400 * 7,
  path: '/',
  domain: 'http://xxx.com',
}
tool.cookie.set('username', 'superAdmin', cfg)

// 获取数据
console.log(tool.cookie.get('username')) // superAdmin

// 删除数据
tool.cookie.remove('username')

MD5加密

mport tool from '@/utils/tool'

const str = tool.md5('hello')

base64加解密

import tool from '@/utils/tool'

// 加密
const str1 = tool.base64.encode('hello')

// 解密
const str2 = tool.base64.decode(str1)

aes加解密

import tool from '@/utils/tool'

// 定义密钥
const key = 'secret key'

// 加密
const str1 = tool.aes.encode('hello', key)

// 解密
const str2 = tool.aes.decode(str1, key)

日期格式化

import tool from '@/utils/tool'

const date = tool.dateFormat(new Date(), 'yyyy-MM-dd', '-')

千分符

import tool from '@/utils/tool'

// 进行转换
const price = tool.groupSeparator(12345678)

console.log('￥' + price) // ￥12,345,678

格式化数据大小

import tool from '@/utils/tool'

// 进行格式化
const size = tool.formatSize(1024)

console.log(size) // 1KB

文件下载

import tool from '@/utils/tool'

// 传入服务器返回的数据，第二个参数可不带，会自动识别
tool.download(response, '文件.txt')

josn转url参数

import tool from '@/utils/tool'

// 第二个参数是否带上问号 ?
const parmas = tool.httpBuild({ id: '1', age: 22 }, true)

console.log(params) // ?id=1&age=22

获取token

import tool from '@/utils/tool'

// 获取当前用户登录的token
const token = tool.getToken()

根据字典和值，获取字典标签名称

import tool from '@/utils/tool'
import { useDictStore } from '@/store'

// 获取字典数组
const dictList = useDictStore().data

// 获取字典data_status中值为1的标签 
const token = tool.getLabel('1', dictList['data_status']) // 正常

根据字典和值的顺序，获取对应颜色，颜色可以作为参数，也可以使用默认颜色

import tool from '@/utils/tool'
import { useDictStore } from '@/store'

// 获取字典数组
const dictList = useDictStore().data

// 获取字典data_status中值为1的color
const color = tool.getColor('1', dictList['data_status']) // 默认第一位color为green

// 获取字典data_status中值为1的标签 
const color = tool.getColor('1', dictList['data_status'], ['blue', 'green']) // 获取第一位color为blue