Vue2全局管理格式化器和Filter

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

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方法同样