From 9b7c297d21c5bf77f64573424511b268ab7e9f7c Mon Sep 17 00:00:00 2001 From: Odboy Date: Wed, 4 Feb 2026 23:37:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor(utils):=20=E5=B0=86=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=E5=99=A8=E5=87=BD=E6=95=B0=E4=BB=8EKitUtil.js=E8=BF=81?= =?UTF-8?q?=E7=A7=BB=E5=88=B0=E7=8B=AC=E7=AB=8B=E7=9A=84filters.js?= =?UTF-8?q?=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 从KitUtil.js中移除所有过滤器相关函数,包括NumberToFixed、GetOptionLabelByValue、FormatBytesStr、FormatDateStr、FormatDateTimeStr等 - 新增src/utils/filters.js文件,将日期格式化、金额格式化、手机号邮箱掩码等功能重构为过滤器函数 - 在main.js中引入并注册所有过滤器,替代原有的手动注册方式 - KitUtil.js中的FormatRowDateTimeStr函数改为调用新的FormatDateTime过滤器 - 统一过滤器命名规范,使用帕斯卡命名法,如FormatDate、FormatDateTime、FormatAmount2等 --- cutejava-front/src/main.js | 81 ++------------ cutejava-front/src/utils/KitUtil.js | 119 +------------------- cutejava-front/src/utils/filters.js | 165 ++++++++++++++++++++++++++++ 3 files changed, 174 insertions(+), 191 deletions(-) create mode 100644 cutejava-front/src/utils/filters.js diff --git a/cutejava-front/src/main.js b/cutejava-front/src/main.js index 3783579f..ddcd32ee 100644 --- a/cutejava-front/src/main.js +++ b/cutejava-front/src/main.js @@ -32,7 +32,9 @@ import router from './router/routers' import './assets/icons' // icon import './router/index' -import dayjs from 'dayjs' // permission control + +// 过滤器 +import * as filters from './utils/filters' Vue.use(checkPer) Vue.use(permission) @@ -45,79 +47,10 @@ Vue.use(Element, { Vue.component('split-pane', SplitPane) -/** - * 日期格式化
- * 例子: {{ scope.row.createTime | formatDate }} - */ -Vue.filter('formatDate', function(originVal) { - if (originVal) { - return dayjs(originVal).format('YY-MM-DD') - } else { - return '-' - } - // const dt = new Date(originVal) - // const y = dt.getFullYear() - // const m = (dt.getMonth() + 1 + '').padStart(2, '0') - // const d = (dt.getDate() + '').padStart(2, '0') - // return `${y}-${m}-${d}` -}) - -/** - * 日期时间格式化
- * 例子: {{ scope.row.createTime | formatDateTime }} - */ -Vue.filter('formatDateTime', function(originVal) { - if (originVal) { - return dayjs(originVal).format('YY-MM-DD HH:mm:ss') - } else { - return '-' - } - // const dt = new Date(originVal) - // const y = dt.getFullYear() - // const m = (dt.getMonth() + 1 + '').padStart(2, '0') - // const d = (dt.getDate() + '').padStart(2, '0') - // const hh = (dt.getHours() + '').padStart(2, '0') - // const mm = (dt.getMinutes() + '').padStart(2, '0') - // const ss = (dt.getSeconds() + '').padStart(2, '0') - // return `${y}-${m}-${d} ${hh}:${mm}:${ss}` -}) - -/** - * 金额格式化,并保留2位小数
- * 例子: {{ scope.row.totalAmount | formatAmount2 }} - */ -Vue.filter('formatAmount2', function(data) { - if (data) { - return data.toFixed(2) - } - return '-' -}) - -/** - * 金额格式化,并保留1位小数
- * 例子: {{ scope.row.totalAmount | formatAmount1 }} - */ -Vue.filter('formatAmount1', function(data) { - if (data) { - return data.toFixed(1) - } - return '-' -}) - -/** - * 千分位数值格式化,并保留dot位小数
- * data是value, dot是param1 - * 例子: {{ scope.row.totalAmount | formatNumber(2) }} - */ -Vue.filter('formatNumber', function(data, dot) { - if (data) { - const formatter = new Intl.NumberFormat('zh-CN', { - minimumFractionDigits: dot || 0, - maximumFractionDigits: dot || 0 - }) - return formatter.format(Number(data)) - } - return '-' +// 注册全局过滤器 +// 使用方法:{{ value | filter-key }} +Object.keys(filters).forEach(key => { + Vue.filter(key, filters[key]) }) Vue.config.productionTip = false diff --git a/cutejava-front/src/utils/KitUtil.js b/cutejava-front/src/utils/KitUtil.js index 7e2ab0ba..cad8e0c8 100644 --- a/cutejava-front/src/utils/KitUtil.js +++ b/cutejava-front/src/utils/KitUtil.js @@ -1,5 +1,6 @@ import store from '@/store' import dayjs from 'dayjs' +import { FormatDateTime } from '@/utils/filters' /** * 权限校验 @@ -34,16 +35,6 @@ export function StringToNumber(value) { } } -/** - * 保留几位小数 - * @param num Number - * @param accuracy 精度 - * @returns {string|number} - */ -export function NumberToFixed(num, accuracy) { - return num instanceof Number ? num.toFixed(accuracy) : num -} - /** * 浅拷贝 * @param source 源对象 @@ -87,69 +78,6 @@ export function CountArraysObjectByPropKey(arr, propKey, targetValue) { return cnt } -/** - * 根据value获取label - * @param options / - * @param value / - * @returns {*} - */ -export function GetOptionLabelByValue(options, value) { - if (options instanceof Array) { - const find = options.find(f => f.value === value) - if (find) { - return find.label - } - return '' - } -} - -/** - * 格式化字节数字符串 - * @param value - * @returns {string} - * @constructor - */ -export function FormatBytesStr(value) { - if (typeof value !== 'number' || isNaN(value) || value <= 0) { - return '0 Bytes' - } - const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] - const index = Math.floor(Math.log(value) / Math.log(1024)) - const unit = units[Math.min(index, units.length - 1)] - const result = (value / Math.pow(1024, index)).toFixed(2) - return `${result} ${unit}` -} - -/** - * 格式化日期字符串 - * @param originVal - * @returns {string} - * @constructor - */ -export function FormatDateStr(originVal) { - if (originVal === undefined) { - return '' - } - const dt = new Date(originVal) - const y = dt.getFullYear() - const m = (dt.getMonth() + 1 + '').padStart(2, '0') - const d = (dt.getDate() + '').padStart(2, '0') - return `${y}-${m}-${d}` -} - -/** - * 格式化日期时间字符串 - * @param originVal - * @returns {string} - * @constructor - */ -export function FormatDateTimeStr(originVal) { - if (originVal) { - return dayjs(originVal).format('YYYY-MM-DD HH:mm:ss') - } - return '' -} - /** * 格式化日期时间字符串,不带分割符号 * @param originVal @@ -173,17 +101,7 @@ export function FormatDateTimeShortStr(originVal) { * @constructor */ export function FormatRowDateTimeStr(row, column, cellValue, index) { - if (cellValue === undefined) { - return '' - } - const dt = new Date(cellValue) - const y = dt.getFullYear() - const m = (dt.getMonth() + 1 + '').padStart(2, '0') - const d = (dt.getDate() + '').padStart(2, '0') - const hh = (dt.getHours() + '').padStart(2, '0') - const mm = (dt.getMinutes() + '').padStart(2, '0') - const ss = (dt.getSeconds() + '').padStart(2, '0') - return `${y}-${m}-${d} ${hh}:${mm}:${ss}` + return FormatDateTime(cellValue) } /** @@ -206,39 +124,6 @@ export function UniqueArrays(arr) { return [...new Set(arr)] } -/** - * 手机号掩码 - * @param mobile - * @returns {*|string} - * @constructor - */ -export function MaskMobile(mobile) { - if (mobile.length > 7) { - return mobile.substr(0, 3) + '****' + mobile.substr(7) - } - return mobile -} - -/** - * 邮箱掩码 - * @param email - * @returns {string} - * @constructor - */ -export function MaskEmail(email) { - if (String(email).indexOf('@') > 0) { - const str = email.split('@') - let _s = '' - if (str[0].length > 3) { - for (let i = 0; i < str[0].length - 3; i++) { - _s += '*' - } - } - return str[0].substr(0, 3) + _s + '@' + str[1] - } - return email -} - /** * 获取Url中的查询参数 * @param {string} url diff --git a/cutejava-front/src/utils/filters.js b/cutejava-front/src/utils/filters.js new file mode 100644 index 00000000..238d3588 --- /dev/null +++ b/cutejava-front/src/utils/filters.js @@ -0,0 +1,165 @@ +import dayjs from 'dayjs' + +/** + * 日期格式化 + * @param value / + * @returns {string} + * @例子: {{ scope.row.createTime | FormatDate }} + */ +export function FormatDate(value) { + if (!value) { + return '-' + } + return dayjs(value).format('YY-MM-DD') +} + +/** + * 日期时间格式化 + * @param value / + * @returns {string} + * @例子: {{ scope.row.createTime | FormatDateTime }} + */ +export function FormatDateTime(value) { + if (!value) { + return '-' + } + return dayjs(value).format('YY-MM-DD HH:mm:ss') +} + +/** + * 金额格式化,并保留2位小数 + * @param value / + * @returns {string} + * @例子: {{ scope.row.totalAmount | FormatAmount2 }} + */ +export function FormatAmount2(value) { + if (!value) { + return '-' + } + if (value && value instanceof Number) { + return value.toFixed(2) + } +} + +/** + * 金额格式化,并保留1位小数 + * @param value / + * @returns {string} + * @例子: {{ scope.row.totalAmount | FormatAmount1 }} + */ +export function FormatAmount1(value) { + if (!value) { + return '-' + } + if (value && value instanceof Number) { + return value.toFixed(1) + } +} + +/** + * 金额格式化,并保留dot位小数 + * @param value / + * @param dot 参数1。小数位 + * @returns {string} + * @例子: {{ scope.row.totalAmount | FormatAmount(0) }} + */ +export function FormatAmount(value, dot) { + if (!value) { + return '-' + } + if (value && value instanceof Number) { + return value.toFixed(dot) + } +} + +/** + * 千分位数值格式化,并保留dot位小数 + * @param value / + * @param dot 参数1。小数位 + * @returns {string} + * @例子: {{ scope.row.totalAmount | FormatNumber(2) }} + */ +export function FormatNumber(value, dot) { + if (!value) { + return '-' + } + const formatter = new Intl.NumberFormat('zh-CN', { + minimumFractionDigits: dot || 0, maximumFractionDigits: dot || 0 + }) + return formatter.format(Number(value)) +} + +/** + * 格式化字节数字符串 + * @param value / + * @returns {string} + * @例子: {{ scope.row.total | FormatBytes }} + */ +export function FormatBytes(value) { + if (typeof value !== 'number' || isNaN(value) || value <= 0) { + return '0 Bytes' + } + const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + const index = Math.floor(Math.log(value) / Math.log(1024)) + const unit = units[Math.min(index, units.length - 1)] + const result = (value / Math.pow(1024, index)).toFixed(2) + return `${result} ${unit}` +} + +/** + * 根据value获取label + * @param value / + * @param options 参数1。选项数据源 + * @returns {*|string} + * @例子: {{ scope.row.sex | FormatOptionsLabel(sexOptions) }} + */ +export function FormatOptionsLabel(value, options) { + if (!value) { + return '-' + } + if (options instanceof Array) { + const find = options.find(f => f.value === value) + if (find) { + return find.label + } + } +} + +/** + * 手机号掩码 + * @param value / + * @returns {*|string} + * @例子: {{ scope.row.mobile | MaskMobile }} + */ +export function MaskMobile(value) { + if (!value) { + return '-' + } + if (value.length > 7) { + return value.substr(0, 3) + '****' + value.substr(7) + } + return value +} + +/** + * 邮箱掩码 + * @param value / + * @returns {string} + * @例子: {{ scope.row.email | MaskEmail }} + */ +export function MaskEmail(value) { + if (!value) { + return '-' + } + if (String(value).indexOf('@') > 0) { + const str = value.split('@') + let _s = '' + if (str[0].length > 3) { + for (let i = 0; i < str[0].length - 3; i++) { + _s += '*' + } + } + return str[0].substr(0, 3) + _s + '@' + str[1] + } + return value +}