VUE静态字典lookup

最近在开发项目中发现很多地方都会涉及数据字典的应用，在每个页面里面定义，会发现很占行数，后面就统一写了个静态字典lookup; 每个页面用到的字典数据写在各自业务命名的文件夹下，我这里就叫mapOne, mapTwo; 新建config文件夹，config下新建constant文件夹，将mapOne, mapTwo丢在constant下，在config下面新建一个lookup.js文件。文件目录如下图：

mapOne里面存放一些mapOne页面需要用到的map字典数据：

const STATUS_OPTIONS = {
  '1': '成功',
  '2': '失败',
  '3': '不知道',
  '4': '不成功就疯了',
  '5': '失败永远颓废'
}
const NAME_OPTIONS = [
  {value: '1', label: '失败是成功之母'},
  {value: '2', label: '成功是失败之母'},
  {value: '3', label: '中立是成功之母'}
]
export default {
  STATUS_OPTIONS,
  NAME_OPTIONS
}

mapTwo里面存放一些mapTwo页面需要用到的map子弹数据：

const SEX_OPTIONS = {
  '1': '男',
  '2': '女'
}
const HOBBY_OPTIONS = [
  {value: '1', label: '篮球'},
  {value: '2', label: '足球'},
  {value: '3', label: '兵乓球'}
]
export default {
  SEX_OPTIONS,
  HOBBY_OPTIONS
}

下面就是lookup文件啦 首先引入mapOne,mapTwo; 这里需要引入一下vue对象，因为需要用到vue对象里面的message组件提示报错； 定义一个总的lookupMaps,将各个模块拼接在一起； 最后定义lookup对象，里面定义find, findLabel, findValue的方法，比较简单的函数，这里就不说了，直接粘贴代码吧；

/*静态字典*/
// 导入各个模块用到的静态字典
import mapOne from "@/config/constant/mapOne";
import mapTwo from "@/config/constant/mapTwo";
// 引入vue
import Vue from 'vue'
const vm = new Vue();

// 将各个模块的字典拼接在一起
const lookupMaps = {
  ...mapOne,
  ...mapTwo
}
// 定义lookup对象，里面定义各种方法
const lookup = {
  find: function (optionFlag) { // 找到对应的map
    let arr = Object.keys(lookupMaps);
    console.log(arr);
    if(!arr.includes(optionFlag)) {
      vm.$message.error('该字典不存在');
      return [];
    }
    return lookupMaps[optionFlag];
  },
  findValue: function (optionFlag, label) { // 根据label值找value
    let target = this.find(optionFlag);
    if(Object.prototype.toString.call(target) === '[object Object]') { // 是对象{}
      console.log(target);
      for(let key in target) {
        if (target[key] === label) {
          return key
        }
      }
      // 如果没有提示不存在
      vm.$message.error('该value不存在');
      return '';
    } else if(Object.prototype.toString.call(target) === '[object Array]') { // 是数组对象[{}, {}]
      for(let item of target) {
        if(item.label === label) {
          return item.value
        }
      }
      // 没找到就报错，并且返回空
      vm.$message.error('该value不存在');
      return '';
    }
  },
  findLabel: function (optionFlag, value) { // 根据value值找label
    let target = this.find(optionFlag);
    if(Object.prototype.toString.call(target) === '[object Object]') { // 是对象{}
      let arr = Object.keys(target);
      // 没找到就报错，并且返回空
      if(!arr.includes(optionFlag)) {
        vm.$message.error('该label不存在');
        return '';
      }
      return target[value];
    } else if(Object.prototype.toString.call(target) === '[object Array]') { // 是数组对象[{}, {}]
      for(let item of target) {
        if(item.value === value) {
          return item.label
        }
      }
      // 没找到就报错，并且返回空
      vm.$message.error('该label不存在');
      return '';
    }
  }
}
export default lookup

最后在main.js里面引入lookup

import lookup from "@/config/lookup";

Vue.prototype.lookup = lookup

最后在相应的页面使用：

let target = this.lookup.find('NAME_OPTIONS');
let value = this.lookup.findValue('NAME_OPTIONS', '失败是成功之母');
let label = this.lookup.findLabel('NAME_OPTIONS', '2');
let labelError = this.lookup.findLabel('NAME_OPTIONS', '4');