refactor(utils): 将过滤器函数从KitUtil.js迁移到独立的filters.js模块

- 从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

@@ -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)
 
-/**
+// 注册全局过滤器
- * 日期格式化<br/>
+// 使用方法：{{ value | filter-key }}
- * 例子: <el-tag>{{ scope.row.createTime | formatDate }}</el-tag>
+Object.keys(filters).forEach(key => {
- */
+  Vue.filter(key, filters[key])
-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}`
-})
-
-/**
- * 日期时间格式化<br/>
- * 例子: <el-tag>{{ scope.row.createTime | formatDateTime }}</el-tag>
- */
-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位小数<br/>
- * 例子: <el-tag>{{ scope.row.totalAmount | formatAmount2 }}</el-tag>
- */
-Vue.filter('formatAmount2', function(data) {
-  if (data) {
-    return data.toFixed(2)
-  }
-  return '-'
-})
-
-/**
- * 金额格式化，并保留1位小数<br/>
- * 例子: <el-tag>{{ scope.row.totalAmount | formatAmount1 }}</el-tag>
- */
-Vue.filter('formatAmount1', function(data) {
-  if (data) {
-    return data.toFixed(1)
-  }
-  return '-'
-})
-
-/**
- * 千分位数值格式化，并保留dot位小数<br/>
- * data是value, dot是param1
- * 例子: <el-tag>{{ scope.row.totalAmount | formatNumber(2) }}</el-tag>
- */
-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 '-'
 })
 
 Vue.config.productionTip = false

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 FormatDateTime(cellValue)
-    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}`
 }
 
 /**
@@ -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

cutejava-front/src/utils/filters.js

@@ -0,0 +1,165 @@
+import dayjs from 'dayjs'
+
+/**
+ * 日期格式化
+ * @param value /
+ * @returns {string}
+ * @例子: <el-tag>{{ scope.row.createTime | FormatDate }}</el-tag>
+ */
+export function FormatDate(value) {
+  if (!value) {
+    return '-'
+  }
+  return dayjs(value).format('YY-MM-DD')
+}
+
+/**
+ * 日期时间格式化
+ * @param value /
+ * @returns {string}
+ * @例子: <el-tag>{{ scope.row.createTime | FormatDateTime }}</el-tag>
+ */
+export function FormatDateTime(value) {
+  if (!value) {
+    return '-'
+  }
+  return dayjs(value).format('YY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 金额格式化，并保留2位小数
+ * @param value /
+ * @returns {string}
+ * @例子: <el-tag>{{ scope.row.totalAmount | FormatAmount2 }}</el-tag>
+ */
+export function FormatAmount2(value) {
+  if (!value) {
+    return '-'
+  }
+  if (value && value instanceof Number) {
+    return value.toFixed(2)
+  }
+}
+
+/**
+ * 金额格式化，并保留1位小数
+ * @param value /
+ * @returns {string}
+ * @例子: <el-tag>{{ scope.row.totalAmount | FormatAmount1 }}</el-tag>
+ */
+export function FormatAmount1(value) {
+  if (!value) {
+    return '-'
+  }
+  if (value && value instanceof Number) {
+    return value.toFixed(1)
+  }
+}
+
+/**
+ * 金额格式化，并保留dot位小数
+ * @param value /
+ * @param dot 参数1。小数位
+ * @returns {string}
+ * @例子: <el-tag>{{ scope.row.totalAmount | FormatAmount(0) }}</el-tag>
+ */
+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}
+ * @例子： <el-tag>{{ scope.row.totalAmount | FormatNumber(2) }}</el-tag>
+ */
+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}
+ * @例子： <el-tag>{{ scope.row.total | FormatBytes }}</el-tag>
+ */
+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}
+ * @例子： <el-tag>{{ scope.row.sex | FormatOptionsLabel(sexOptions) }}</el-tag>
+ */
+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}
+ * @例子： <el-tag>{{ scope.row.mobile | MaskMobile }}</el-tag>
+ */
+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}
+ * @例子： <el-tag>{{ scope.row.email | MaskEmail }}</el-tag>
+ */
+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
+}