字典过滤器

与字典相关的全局过滤器，使用这些过滤器，您可以轻松将label和value随意转换

getLabelByCode getCodeByLabel 值必须是单个字符串

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

<template>
  <div class="dict-normal">
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s flex-col">
        <div class="field">getLabelByCode</div>
        <div class="value">{{ personUserInfo.gend | getLabelByCode("AAC004")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getCodeByLabel</div>
        <div class="value">{{ personUserInfo.gendLabel | getCodeByLabel("AAC004")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getLabelByCodes</div>
        <div class="value">{{ personUserInfo.fruits | getLabelByCodes("FRUITS")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getCodeByLabels</div>
        <div class="value">{{ personUserInfo.fruitsLabel | getCodeByLabels("FRUITS")}}</div>
      </div>

      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCode</div>
        <div class="value">{{ personUserInfo.cityCode | getTreeLabelByCode("city")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCodes</div>
        <div class="value">{{ personUserInfo.cityCodes | getTreeLabelByCodes("city")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeCodeByLabel</div>
        <div class="value">{{ personUserInfo.cityName | getTreeCodeByLabel("city")}}</div>
      </div>
      <div class="row flex-c-s flex-col">
        <div class="field">getTreeLabelByCode</div>
        <div class="value">{{ personUserInfo.cityNames | getTreeCodeByLabels("city")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "filters-dict-normal",
  data() {
    return {
      personUserInfo: {
        gend: "1",
        gendLabel: "男",
        fruits: "1,2,3,5",
        fruitsLabel: "草莓,西瓜,芒果",
        cityCode: "35062400",
        cityCodes: "35062400,35062401",
        cityName: "漳州市",
        cityNames: "诏安县,金星乡"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .info-box {
    padding: 0 20px;
    .row {
      width: 100%;
      margin-top: 32px;
      align-items: flex-start;
      .field {
        width: 144px;
        font-size: 16px;
        color: #666666;
        line-height: 18px;
      }
      .value {
        font-size: 16px;
        color: #333333;
        line-height: 18px;
      }
    }
  }

</style>

显示代码

Filters 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 {*} labels 返回字典表查找后的字典值  如果没有  则展示默认值 对应位置展示
     * @author: syx
     */  
const getLabelByCodes = (vals, type, defaultVal = "", formatFun, spacer = ",")


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


/**
 * @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 = ",")