2021-09-07 字典数据vuex

前言:为了减少发送请求次数,字典数据统一放入到vuex管理

vuex封装字典管理

// dict.js
// 请求字典的封装方法
import { getDicts } from "@/api/system/dict/data";

const getDefaultState = () => {
  return {
// 存储格式
//{
//  approveState:[{DataValue:1,DataText:'待审批'},{DataValue:2,DataText:'审批中'}],
//  enableState:[{DataValue:1,DataText:'可用'},{DataValue:2,DataText:'禁用'}],
//  ...
//}
    // 字典map 
    dictMap: {}
  }
}

const state = getDefaultState()

const mutations = {
  // 保存字典项
  SAVE_DICT_ITEM: (state, data) => {
    let obj = {}
    obj[data.dictKey] = data
    // 需要拷贝一份,要不然数据变动监听不到
    state.dictMap = Object.assign({}, state.dictMap, obj)
  }
}

const actions = {
  // 获取字典的action
  getByDictKey({ commit }, data) {
    if(!data.dictKey) return
    return new Promise((resolve, reject) => {
      if (state.dictMap[data.dictKey]) {
        resolve()
      } else {
        // 根据字典类型请求后台数据
        getDicts(data.dictKey).then((res) => {
          commit('SAVE_DICT_ITEM', {
            dictKey: data.dictKey,
            items: res.Data
          })
          resolve()
        })
      }
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

//getter获取字典map
const getters = {
  subName: state => state.user.subName,
  dictMap: state => state.dict.dictMap
}
export default getters

select下拉框使用

import { mapGetters } from 'vuex'
created() {
     // 初始化数据,根据字典类型请求后台,获取下拉框列表
    if (!this.dictMap['sys_normal_disable']) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: 'sys_normal_disable'
      })
    }
  },
computed: {
    ...mapGetters([
      'dictMap'
    ]),
    statusOptions(){  // getter获取下拉列表
      return this.dictMap['sys_normal_disable'] && this.dictMap['sys_normal_disable'].items
    }
  },
// 页面下拉框使用
<el-select
          v-model="queryParams.Search.Status"
          placeholder="角色状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.DataValue"
            :label="dict.DataText"
            :value="dict.DataValue"
          />
        </el-select>

通过字典key显示对应的文字,封装全局组件DictTag.vue

<template>
  <div>
    <slot v-bind:dict="dict">
      <span v-for="item in dict.items" :key="item.DataValue">
        <template v-if="istag=='no'">
          <span v-if="item.DataValue == value">{{ item.DataText }}</span>
        </template>
        <template v-else>
          <el-tag :type="item.ListClass == 'primary' ? '' : item.ListClass" size="small" v-if="item.DataValue == value">{{ item.DataText }}</el-tag>
        </template>
      </span>
    </slot>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "DictTag",
  props: {
    // 字典唯一编码(表名_字段名)
    dictKey: {
      type: String,
      default: undefined
    },
    value: [String,Number, Array],
    istag:{
      type:String,
      default:'yes'
    }
  },
  created() {
    if (!this.dictMap[this.dictKey]) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: this.dictKey,
        type: this.type
      })
    }
  },
  computed: {
    ...mapGetters([
      'dictMap'
    ]),
    // 当前字典
    dict() {
      return this.dictMap[this.dictKey] || {}
    }
  },
};
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

//main.js 注册全局组件
import DictTag from '@/components/DictTag'
Vue.component('DictTag', DictTag)
// 页面使用,传递参数(值,字典类型)
<dict-tag v-model="scope.row.ApprovalStatus" dict-key="applyStatus"></dict-tag>
el.png
// 纯文本显示,配置istag
<dict-tag v-model="item.BadType" dict-key="quality_mrb_MrbBadType" istag="no"/>
wenziC.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 一定要用力的活下去啊! 使用数据字典给表单下拉框设置选择项 如下,我们需要实现在新增记录和修改记录时有这种下拉框选...
    尹楷楷阅读 11,119评论 1 2
  • 1. input页面下拉框使用 效果展示 实现 定义数据字典 引用并调用JDictSelectTag组件impor...
    出来混要还的阅读 5,256评论 1 3
  • 概述 数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用。1.多个页面下拉框使用同样的数据...
    fallsea阅读 3,002评论 0 1
  • 为什么学习Python? 通过什么途径学习的Python? 上网收集视频,资料 关注公证号 买教程,书籍 Pyth...
    130920阅读 1,198评论 0 0
  • VUE.js 基本命令v-if || v-for : 条件与循环v-model: 为页面输入框进行数据双向绑定v-...
    楼水流云阅读 628评论 0 0