惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Security Affairs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Jina AI
Jina AI
P
Palo Alto Networks Blog
GbyAI
GbyAI
大猫的无限游戏
大猫的无限游戏
A
Arctic Wolf
Hugging Face - Blog
Hugging Face - Blog
小众软件
小众软件
Y
Y Combinator Blog
T
The Blog of Author Tim Ferriss
Blog — PlanetScale
Blog — PlanetScale
S
Schneier on Security
V
Vulnerabilities – Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
雷峰网
雷峰网
T
Tenable Blog
人人都是产品经理
人人都是产品经理
T
Tor Project blog
C
Cyber Attacks, Cyber Crime and Cyber Security
AWS News Blog
AWS News Blog
Microsoft Security Blog
Microsoft Security Blog
J
Java Code Geeks
Scott Helme
Scott Helme
SecWiki News
SecWiki News
C
CERT Recently Published Vulnerability Notes
Recorded Future
Recorded Future
I
InfoQ
Security Archives - TechRepublic
Security Archives - TechRepublic
Help Net Security
Help Net Security
Cloudbric
Cloudbric
C
Check Point Blog
Engineering at Meta
Engineering at Meta
TaoSecurity Blog
TaoSecurity Blog
B
Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园_首页
N
News and Events Feed by Topic
云风的 BLOG
云风的 BLOG
MyScale Blog
MyScale Blog
腾讯CDC
量子位
Application and Cybersecurity Blog
Application and Cybersecurity Blog
K
Kaspersky official blog
Vercel News
Vercel News
F
Full Disclosure
T
Troy Hunt's Blog
Forbes - Security
Forbes - Security
S
Security @ Cisco Blogs

博客园 - 飘扬De黑夜

SqlServer 批量修改某个字段类型 U8数据库表汇总 FastReport 使用JSON作为数据源,手工赋值和导出PDF elementui关于表单校验validator Vue.js 2 使用 extends 扩展 element-ui 组件 FastReport-Barcode/QRCode 控件总是存在白色空白区域 双网卡同时访问内外网 vs项目启动后总是提示ID为XXX的进程当前未运行 uniapp 以npm模式安装插件的项目,如何让自定义组件支持easycom方式自动导入 Http请求中 Content-Type 常用格式说明 WPF入门基础之双向数据绑定 WPF入门之设置样式 ElementUI-如何给 el-dropdown 的 command 事件传递多个参数 TortoiseGit使用 管理系统中台示例参照 淘宝源安装npm visual studio 2022 自定义组件和自定义控件和用户控件的区别 SqlServer GoupBy 分组后对于非分组的某个字符串进行拼接 SQL Server 实现类似CountIF的函数
Vue2全局管理格式化器和Filter
飘扬De黑夜 · 2025-05-09 · via 博客园 - 飘扬De黑夜

有很多格式化器很多地方都要用,定义一个统一的文件进行管理方便使用

golbalFormatter.js

import moment from 'moment'
import store from '@/store'

/**
 * 格式化日期表示
 * @RETURN {示例:2021-04-01}
 */
function dateFormatter(row, column, currentValue) {
  return currentValue === null || currentValue === '' ? '' : moment(currentValue).format('YYYY-MM-DD')
}
/**
 * 格式化时间表示
 * @RETURN {示例:2021-04-01 18:04:01}
 */
function datetimeFormatter(row, column, currentValue) {
  return currentValue === null || currentValue === '' ? '' : moment(currentValue).format('YYYY-MM-DD HH:mm:ss')
}

// exports.install = function(Vue, options) {
//   /**
//    * 格式化日期表示
//    * @RETURN {示例:2021-04-01}
//    */
//   Vue.prototype.dateFormatter = function(row, column, currentValue) {
//     return currentValue === null ? '' : moment(currentValue).format('YYYY-MM-DD')
//   }
//   /**
//    * 格式化时间表示
//    * @RETURN {示例:2021-04-01 18:04:01}
//    */
//   Vue.prototype.datetimeFormatter = function(row, column, currentValue) {
//     return currentValue === null ? '' : moment(currentValue).format('YYYY-MM-DD HH:mm:ss')
//   }
// }

/**
 * @Description: 数据字典格式化通用函数(指定特定的TypeCode)
 * @Author: Shawn.zhang
 * @Date: 2021/9/3
 */
function dictionaryFormatter(cellValue, typeCode) {
  // console.log(store.getters.dataDict.length === 0)
  if (cellValue === null) {
    return ''
  }
  let dictData = store.getters.dataDict
  // console.log(dictData,'dictionary-data')
  if (dictData===null || dictData.length === 0) {
    store.dispatch('dataDict/getDataDict').then(result => {
      dictData = result
    })
  }

  const enumList = dictData.filter(item => {
    return item.TypeCode === typeCode
  })

  const formatterItem = enumList.find(item => {
    // 字符串和数字兼容设置
    return item.EnumValue === cellValue || item.EnumValue.toString() === cellValue || item.EnumValue === cellValue.toString()
  })

  // console.log(typeCode, cellValue, enumList, formatterItem, 'dictionaryFormatter-typeCode')
  return formatterItem === undefined ? cellValue : formatterItem.EnumDesc
}

/**
 * @Description:
 * @Author: Shawn.zhang
 * @Date: 2021/11/4
 */
function whetherFormatter(row, column, currentValue) {
  const yesNoDict = {
    true: '是',
    false: '否'
  }
  return currentValue===null?'否':yesNoDict[currentValue]
}

function enableFormatter(row, column, currentValue) {
  const dict = {
    true: '启用',
    false: '停用'
  }
  return dict[currentValue]
}

/**
 * @Description:
 * @Author: Shawn.zhang
 * @Date: 2021/11/4
 */
function equipmentStatusFormatter(row, column, cellValue,index) {
  const itemOptions =  [{ value: 1, label: '在用' }, { value: 2, label: '维修中' }, { value: 3, label: '停用' }, { value: 4, label: '报废' }]
  const formatterItem = itemOptions.find(item => {
    // 字符串和数字兼容设置
    return item.value === cellValue || item.value.toString() === cellValue || item.value === cellValue.toString()
  })
  return formatterItem === undefined ? cellValue : formatterItem.label
}

function inspectionStatusFormatter(row,column,cellValue,index) {
  const itemOptions= [{value:0,label:'未检验'},{value:1,label:'合格'},{value:2,label:'不合格'}]
  const formatterItem = itemOptions.find(item => {
    // 字符串和数字兼容设置
    return item.value === cellValue || item.value.toString() === cellValue || item.value === cellValue.toString()
  })

  return formatterItem === undefined ? cellValue : formatterItem.label
}

module.exports = {
  dateFormatter,
  datetimeFormatter,
  dictionaryFormatter,
  whetherFormatter,
  enableFormatter,
  equipmentStatusFormatter,
  inspectionStatusFormatter
}

再main.js中统一注册:

 

import formatters from '@/utils/formatter'
console.log(formatters,'formatters')
Object.keys(formatters).forEach(key => {
  //Vue.filter(key, formatters[key])
  // console.log(key,formatters[key])
  // console.log(key,'----')
  Vue.prototype[key] = formatters[key]
})

  Filter方法同样