字典方法

与字典相关的全局方法，使用这些方法

TIP

字典包会自动将方法挂在到Vue实例中，在页面上可以直接调用 this.$方法调用该方法

使用示例

desensitization 第一个参数接收脱敏类型或者表示展示前面几项，第二个参数接收默认值，第三个参数接收展示后面几项，第四个参数用来配置中间展示几个*

dayFormat 第一个参数接收格式化类型，可选date、month、datetime、time、year，或者自定义格式，第二个参数接收默认值

<template>
  <div class="functions-dict">
    <div class="questions-box flex-c-b">
      <div class="question">字典类型为FRUITS，值为1的水果名称?</div>
      <div class="answer" v-if="answer1">{{answer1}}</div>
      <el-button type="primary" v-if="!answer1" @click="getLabelByCode">点击获取答案</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">字典类型为FRUITS，名称为草莓的水果值?</div>
      <div class="answer" v-if="answer2">{{answer2}}</div>
      <el-button type="primary" v-if="!answer2" @click="getCodeByLabel">点击获取答案</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">字典类型为FRUITS，值为1,2,3,4的水果名称分别是什么?</div>
      <div class="answer" v-if="answer3">{{answer3}}</div>
      <el-button type="primary" v-if="!answer3" @click="getLabelByCodes">点击获取答案</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">字典类型为FRUITS，名称为草莓,芒果,西瓜的水果值分别是什么?</div>
      <div class="answer" v-if="answer4">{{answer4}}</div>
      <el-button type="primary" v-if="!answer4" @click="getCodeByLabels">点击获取答案</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">想看字典类型为FRUITS的数据值?</div>
      <div class="answer" v-if="answer5.length > 0">
        <div class="flex-c-b" v-for="item in answer5" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
      </div>
      <el-button type="primary" v-if="answer5.length === 0" @click="getDictObjByDictTypes1">点击查看</el-button>
    </div>

    <div class="questions-box flex-c-b">
      <div class="question">想看字典类型为SPORTS,PERSON_TYPE的数据值?</div>
      <div class="answer" v-if="answer6.PERSON_TYPE.length > 0">
        SPORTS
        <div class="flex-c-b" v-for="item in answer6.SPORTS" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
        PERSON_TYPE
        <div class="flex-c-b" v-for="item in answer6.PERSON_TYPE" :key="item.value">
          <div class="value">{{item.value}}</div>
          <div class="label">{{item.label}}</div>
        </div>
      </div>
      <el-button type="primary"  v-if="answer6.PERSON_TYPE.length === 0" @click="getDictObjByDictTypes2">点击查看</el-button>
    </div>

    <el-button type="primary" @click="reset">重置</el-button>
  </div>
</template>

<script>
import {getCodeByLabel} from "~/index"
const {getCodeByLabels} = require("~/index")
export default {
  name: "functions-dict",
  data() {
    return {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      answer5: [],
      answer6: {
        SPORTS: [],
        PERSON_TYPE: []
      }
    }
  },
  methods: {
    reset() {
      this.answer1 = this.answer2 = this.answer3 = this.answer4 = "" 
      this.answer6 = {
        SPORTS: [],
        PERSON_TYPE: []
      }
      this.answer5 = []
    },
    //通过值获取中文值
    getLabelByCode() {
      this.$getLabelByCode("1", "FRUITS").then(data => {
        this.answer1 = data
      })
    },
    //通过中文值获取值
    getCodeByLabel() {
      getCodeByLabel("草莓", "FRUITS").then(data => {
        this.answer2 = data
      })
    },
    //通过多个值获取多个中文值
    getLabelByCodes() {
      this.$getLabelByCodes("1,2,23131233,4", "FRUITS", "~~").then(data => {
        this.answer3 = data
      })
    },
    //通过多个中文值获取多个值
    getCodeByLabels() {
      getCodeByLabels("草莓,芒果das的萨达,西瓜", "FRUITS", "~~").then(data => {
        this.answer4 = data
      })
    },
    getDictObjByDictTypes1() {
      this.$getDictObjByDictTypes("FRUITS").then(data => {
        this.answer5 = data["FRUITS"]
      })
    },
    getDictObjByDictTypes2() {
      this.$getDictObjByDictTypes("SPORTS,PERSON_TYPE").then(data => {
        this.answer6 = data
      })
    }
  }
}
</script>

<style scoped>
.questions-box{
  margin-bottom: 20px;
}
</style>

显示代码

WARNING

字典方法均为promise对象

Functions Dict Api

 /**
   * @description: getLabelByCode 通过code获取label
   * @param {*} val 字典值
   * @param {*} type 字典类型
   * @param {*} defaultVal 默认值  默认 ""
   * @return {*} label  返回字典表查找后的字典值  如果没有  则展示默认值
   * @author: syx
   */  
const getLabelByCode = (val, type, defaultVal = "")

 /**
   * @description: getCodeByLabel 通过label获取code
   * @param {*} val 字典值
   * @param {*} type 字典类型
   * @param {*} defaultVal 默认值  默认 ""
   * @return {*} code  返回字典表查找后的字典值  如果没有  则展示默认值
   * @author: syx
   */  
const getCodeByLabel = (val, type, defaultVal = "")


	/**
     * @description: 通过codes 获取 labels
     * @param {*} vals 字典值 多个的话 可传数组形式，字符串形式默认英文逗号隔开，如果不是的话，可配置spacer
     * @param {*} type 字典类型
     * @param {*} defaultVal 默认值
     * @param {*} formatFun 配置数据展示格式
     * @param {*} spacer 字典值间隔符
     * @return {*}
     * @author: syx
     */  
const getLabelByCodes = (vals, type, defaultVal = "", formatFun, spacer = ",")


	/**
     * @description: 通过labels 获取 codes
     * @param {*} vals 字典值 多个的话 可传数组形式，字符串形式默认英文逗号隔开，如果不是的话，可配置spacer
     * @param {*} type 字典类型
     * @param {*} defaultVal 默认值
     * @param {*} formatFun 配置数据展示格式
     * @param {*} spacer 字典值间隔符
     * @return {*}
     * @author: syx
     */  
const getCodeByLabels = (vals, type, defaultVal = "", formatFun, spacer = ",")


	/**
     * @description: 通过字典类型获取该字典类型数据
     * @param {*} types 字典类型 多个的话 可传数组形式，字符串形式默认英文逗号隔开
     * @return {*} 返回字典类型对应的数据   如 {AAC004: [{},{}], AAC058: [{},{}]}
     * @author: syx
     */  
const getDictObjByDictTypes = (types)