# # 字典方法

方法调用获取字典相关数据

getLabelByCode getCodeByLabel 值必须是单个字符串

getLabelByCodes getCodeByLabels 值可以是数组也可以是字符串,并用某个分隔符分开,分隔符可配置

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

    <div class="questions-box flex-c-b flex-col">
      <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>
      <van-button type="primary"  v-if="answer6.PERSON_TYPE.length === 0" @click="getDictObjByDictTypes2">点击查看</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city,漳州市的值为啥?</div>
      <div class="answer" v-if="answer7">{{answer7}}</div>
      <van-button type="primary" v-if="!answer7" @click="getTreeCodeByLabel">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city,35062401是哪个地方?</div>
      <div class="answer" v-if="answer8">{{answer8}}</div>
      <van-button type="primary" v-if="!answer8" @click="getTreeLabelByCode">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city,35062401,35062402 是哪个地方?</div>
      <div class="answer" v-if="answer9">{{answer9}}</div>
      <van-button type="primary" v-if="!answer9" @click="getTreeLabelByCodes">点击获取答案</van-button>
    </div>

    <div class="questions-box flex-c-b flex-col">
      <div class="question">字典类型为city,太平镇,金星乡的值为啥?</div>
      <div class="answer" v-if="answer10">{{answer10}}</div>
      <van-button type="primary" v-if="!answer10" @click="getTreeCodeByLabels">点击获取答案</van-button>
    </div>

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

<script>
export default {
  name: "functions-dict",
  data() {
    return {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      answer5: [],
      answer6: {
        SPORTS: [],
        PERSON_TYPE: []
      },
      answer7: "",
      answer8: "",
      answer9: "",
      answer10: ""
    }
  },
  methods: {
    reset() {
      this.answer1 = this.answer2 = this.answer3 = this.answer4 = this.answer7 = this.answer8 = this.answer9 = this.answer10 = "" 
      this.answer6 = {
        SPORTS: [],
        PERSON_TYPE: []
      }
      this.answer5 = []
    },
    //通过值获取中文值
    getLabelByCode() {
      this.$getLabelByCode("1", "FRUITS").then(data => {
        this.answer1 = data
      })
    },
    //通过中文值获取值
    getCodeByLabel() {
      this.$getCodeByLabel("草莓", "FRUITS").then(data => {
        this.answer2 = data
      })
    },
    //通过多个值获取多个中文值
    getLabelByCodes() {
      this.$getLabelByCodes("1,2,23131233,4", "FRUITS", "~~").then(data => {
        this.answer3 = data
      })
    },
    //通过多个中文值获取多个值
    getCodeByLabels() {
      this.$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
      })
    },
    getTreeCodeByLabel() {
      this.$getTreeCodeByLabel("漳州市", "city").then(data => {
        this.answer7 = data
      })
    },
    getTreeLabelByCode() {
      this.$getTreeLabelByCode("35062401", "city").then(data => {
        this.answer8 = data
      })
    },
    getTreeLabelByCodes() {
      this.$getTreeLabelByCodes("35062401,35062402", "city").then(data => {
        this.answer9 = data
      })
    },
    getTreeCodeByLabels() {
      this.$getTreeCodeByLabels("太平镇,金星乡", "city").then(data => {
        this.answer10 = data
      })
    }
  }
}
</script>

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

/**

  • @description: getCodeByLabel 通过label获取code
  • @param {*} val 字典值
  • @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)

/**

  • @description: getTreeLabelByCode
  • @param {*} val 数据值
  • @param {*} type 字典类型
  • @param {*} defaultVal 展示默认值
  • @param {*} formatFun 对展示值进行方法格式化
  • @param {*} setting 设置,字段同字典包配置中的 treeSetting
  • @return {*} "350624" =》 "福建省/漳州市/诏安县"
  • @author: syx */ function getTreeLabelByCode(val, type, defaultVal = "", formatFun, setting)

/**

  • @description: getTreeCodeByLabel

  • @param {*} val 数据值

  • @param {*} type 字典类型

  • @param {*} defaultVal 展示默认值

  • @param {*} formatFun 对展示值进行方法格式化

  • @param {*} setting 设置,字段同字典包配置中的 treeSetting

  • @return {*} "诏安县" => "35000/350600/350624"

  • @author: syx */ function getTreeCodeByLabel(val, type, defaultVal = "", formatFun, setting

                          /**
    
  • @description: getTreeLabelByCodes

  • @param {*} vals 数据值

  • @param {*} type 字典类型

  • @param {*} defaultVal 展示默认值

  • @param {*} formatFunIn 对里面的数组进行方法格式化

  • @param {*} setting 设置,字段同字典包配置中的 treeSetting

  • @param {*} formatFunOut 对外面的数组进行方法格式化

  • @param {*} spacer 数据值间隔符

  • @return {*} "350624,350600" => "福建省/漳州市/诏安县,福建省/漳州市"

  • @author: syx */ function getTreeLabelByCodes(vals, type, defaultVal = "", formatFunIn, setting, formatFunOut, spacer = ",")

/**

  • @description: getTreeCodeByLabels
  • @param {*} vals 数据值
  • @param {*} type 字典类型
  • @param {*} defaultVal 展示默认值
  • @param {*} formatFunIn 对里面的数组进行方法格式化
  • @param {*} setting 设置,字段同字典包配置中的 treeSetting
  • @param {*} formatFunOut 对外面的数组进行方法格式化
  • @param {*} spacer 数据值间隔符
  • @return {*} "诏安县,漳州市" => "35000/350600/350624,35000/350600"
  • @author: syx */ function getTreeCodeByLabels(vals, type, defaultVal = "", formatFunIn, setting, formatFunOut, spacer = ",")

/** V1.1.0版本开始

  • @description: 根据目标值查找树形数据的结构
  • @param {*} arr
  • @param {*} targetValue
  • @param {*} config const defaultConfig = { targetField: "id", childrenField: "children" //子节点标识字段名 }
  • @return {*}
  • @author: syx */ const getTreePathByValue = (arr, targetValue, config)

::: warning

上述方法均为promise,需要使用promise,且上述方法已注册到 Vue.prototype.  可使用

this.$方法名调用。 部分页面也可 按需引入方式调用,

如 import {getTreeCodeByLabels} from “vue2-vant-dict”

:::
上次更新: June 29th 2023, 12:35:53