关于vue项目工具文件utils.js使用的代码分享

程序员文章站 2022-05-10 19:51:08
...
本篇文章给大家分享的内容是关于vue项目工具文件utils.js使用的代码分享，有着一定的参考价值，有需要的朋友可以参考一下
import Vue from 'vue'
import XLSX from 'xlsx'
/**
 * 图片预览方法
 * 已注入所有Vue实例，
 * template模板里调用 $imgPreview(src)
 * 组件方法里调用 this.$imgPreview(src)
 */
const imgPreview = (src) => {
let p = document.createElement('p')
let img = document.createElement('img')
let close = document.createElement('i')
p.className = 'body__img__preview'
img.src = src
close.className = 'body__img__close'
close.onclick = () => {
document.body.removeChild(p)
}
p.appendChild(img)
p.appendChild(close)
document.body.appendChild(p)
}
/**
 * 格式化日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $dateFormat(date)
 * 组件方法里调用 this.$dateFormat(date)
 * 例：this.$dateFormat('Dec 27, 2017 3:18:14 PM') 得到 '2017-12-27 15:18:14'
 */
const dateFormat = (date) => {
if (!date) return ''
let date_format = new Date(date)
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = '0' + month
let mydate = date_format.getDate()
if (mydate < 10) mydate = '0' + mydate
let hours = date_format.getHours()
if (hours < 10) hours = '0' + hours
let minutes = date_format.getMinutes()
if (minutes < 10) minutes = '0' + minutes
let seconds = date_format.getSeconds()
if (seconds < 10) seconds = '0' + seconds
let time = `${year}-${month}-${mydate} ${hours}:${minutes}:${seconds}`
return time
}
/**
 * 格式化日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $dateFormatNoTime(date)
 * 组件方法里调用 this.$dateFormatNoTime(date)
 * 例：this.$dateFormatNoTime('Dec 27, 2017 3:18:14 PM') 得到 '2017-12-27'
 */
const dateFormatNoTime = (date) => {
if (!date) return ''
let date_format = new Date(date)
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = '0' + month
let mydate = date_format.getDate()
if (mydate < 10) mydate = '0' + mydate
let time = `${year}-${month}-${mydate}`
return time
}
/**
 * 获取当天日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $todayFormat
 * 组件方法里调用 this.$todayFormat
 * 例：this.$todayFormat() 得到 '2018-01-31'
 */
const todayFormat = () => {
let date_format = new Date()
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = '0' + month
let date = date_format.getDate()
if (date < 10) date = '0' + date
let time = `${year}-${month}-${date}`
return time
}
/**
 * 导出数据报表xlsx文件
 * 已注入所有Vue实例，
 * template模板里调用 $$outputXlsxFile
 * 组件方法里调用 this.$outputXlsxFile
 * 例：this.$outputXlsxFile([['字段1', '字段2'], [1, 2]], [{wch: 10}, {wch: 50}], '测试导出') 得到 测试导出.xlsx 文件
 * 第一个参数是导出的数组对象，第二个参数是设置字段宽度，第三个参数是文件名
 */
const outputXlsxFile = (data, wscols, xlsxName) => {
/* convert state to workbook */
const ws = XLSX.utils.aoa_to_sheet(data)
ws['!cols'] = wscols
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
/* generate file and send to client */
XLSX.writeFile(wb, xlsxName + ".xlsx")
}
/**
 * 判断开始时间和结束时间
 * 已注入所有Vue实例，
 * template模板里调用 $checkTime
 * 组件方法里调用 this.$checkTime
 * 例：this.$checkTime(['2018-01-01', '2018-02-02']) 得到 {'2018/01/01', '2018/02/02'}
 */
const checkTime = (date) => {
if (!date) {
Vue.prototype.$notify.error({
message: '日期不能为空'
})
return false
} else {
let begTime = date[0].replace(/-/g, '/')
let endTime = date[1].replace(/-/g, '/')
if (+((new Date(endTime)).getTime()) < +((new Date(begTime)).getTime())) {
Vue.prototype.$notify.error({
message: '开始日期不能大于结束日期'
})
return false
} else {
begTime = date[0]
endTime = date[1]
return {begTime, endTime}
}
}
}
/**
 * 判断性别
 * 已注入所有Vue实例，
 * template模板里调用 $typeSex
 * 组件方法里调用 this.$typeSex
 * 例：this.$typeSex(1) 得到 男
 * 参数 0：未知 1:男 2:女
 */
const typeSex = (value) => {
let sex = ''
switch (value) {
case '0' : sex = '未知'
break
case '1' : sex = '男'
break
case '2' : sex = '女'
break
}
return sex
}
/**
 * 时间戳转换
 * 已注入所有Vue实例，
 * template模板里调用 $timestampToTime
 * 组件方法里调用 this.$timestampToTime
 * 例：this.$timestampToTime(1523440865000) 得到 '2018-04-11 18:1:5'
 */
const timestampToTime = (timestamp) => {
var date = new Date(timestamp)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = date.getDate() + ' '
let h = date.getHours() + ':'
let m = date.getMinutes() + ':'
let s = date.getSeconds()
return Y + M + D + h + m + s
}
Vue.prototype.$imgPreview = imgPreview
Vue.prototype.$dateFormat = dateFormat
Vue.prototype.$dateFormatNoTime = dateFormatNoTime
Vue.prototype.$todayFormat = todayFormat
Vue.prototype.$outputXlsxFile = outputXlsxFile
Vue.prototype.$checkTime = checkTime
Vue.prototype.$typeSex = typeSex
Vue.prototype.$timestampToTime = timestampToTime