• springboot2.x+security+vue2.x后台管理框架---字典管理（四）

    springboot2.x+security+vue2.x后台管理框架---字典管理（四）

    字典管理

    在管理系统中很多地方都会用到下拉表，但是通常的下拉列表中的数据都是写死的，复用性太低了，字典管理可以达到前端可以多次利用,实现效果如下图：
    在这里插入图片描述

    一、数据库构建

    -- longzy.sys_dict definition

CREATE TABLE `sys_dict` (
  `dictid` int(20) NOT NULL AUTO_INCREMENT COMMENT '字典id',
  `type` varchar(100) NOT NULL COMMENT '类型',
  `code` varchar(100) NOT NULL COMMENT '码值code',
  `label` varchar(100) NOT NULL COMMENT '码值名称',
  `effective` varchar(1) NOT NULL COMMENT '有效状态',
  PRIMARY KEY (`dictid`)
) ENGINE=InnoDB AUTO_INCREMENT=1000000012 DEFAULT CHARSET=utf8mb4 COMMENT='字典';

    在这里插入图片描述

    二、字典管理前端及后台构建

    1、前端效果

    在这里插入图片描述

    2、自定义ElementUI 的el-table

    <template>
    <el-table 
        :data="data"
        :height="height"
        :stripe="stripe"
        :border="border"
        size="small"
        :fit="fit"
        :highlight-current-row="highlightCurrentRow"
        :tooltip-effect="tooltipEffect"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :selection="selection"
        :row-key="rowKey"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="selectionChange"
        @row-click="rowClick"
    >
        <el-table-column v-if="selection"
            type="selection"
            width="100"
            align="center">
        el-table-column>
        <el-table-column v-for="item, index in columns"
            :key="index"
            :type="item.type"
            :index="item.indexMethod"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :fixed="item.fixed"
            :align="item.align"
            :show-overflow-tooltip="true"
        >
            <template v-if="item.slot" #default="scope">
                <slot :name="item.prop" :scope="scope">slot>
            template>
        el-table-column>
    el-table>
template>
<script>
    export default{
        name: 'myTable',
        props:{
            // 表头
            columns: {
                type: Array,
                default: () => []
            },
            // 表格数据
            data: {
                type: Array,
                default: () => []
            },
            // Table 的高度，默认为自动高度
            height: {
                type: String,
                default: ''
            },
            // 是否为斑马纹 table
            stripe: {
                type: Boolean,
                default: false
            },
            // 是否带有纵向边框
            border: {
                type: Boolean,
                default: false
            },
            // 列的宽度是否自撑开
            fit: {
                type: Boolean,
                default: true
            },
            // 是否要高亮当前行
            highlightCurrentRow: {
                type: Boolean,
                default: false
            },
            // tooltip effect 属性  dark/light
            tooltipEffect: {
                type: String,
                default: ''
            },
            // 是否显示多选
            selection: {
                type: Boolean,
                default: false
            },
            // 树形结构id
            rowKey: {
                type: String,
                default: ''
            },
        },
        methods: {
            // 当选择项发生变化时会触发该事件 表格checkbox 选择行回调
            selectionChange(val) {
                this.$emit('selectionChange', val)
            },
            // 当某一行被点击时会触发该事件
            rowClick(row, column, event){
                this.$emit('rowClick', row, column, event)
            }	
        }
       
    }

script>
<style lang="less" scoped>
style>

    3、dictManagement.vue页面

    <template>
    <div class="app-content">
        <div class="search">
            <el-input v-model="searchInfo" placeholder="请输入字典类型、字段名称"/>
            <el-button type="primary" icon="el-icon-search" @click="queryDictList">搜索el-button>
        div>
        <div class="op-btn">
            <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="editVisible = true, rowData = {}" >新增el-button>
            <el-dropdown @command="hanldeEffective">
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item 
                        icon="el-icon-success" 
                        command="1" 
                        :disabled="multipleSelection.length > 0 ? false : true">批量启用el-dropdown-item>
                    <el-dropdown-item 
                        icon="el-icon-error" 
                        command="2" 
                        :disabled="multipleSelection.length > 0 ? false : true" 
                        divided >批量禁用el-dropdown-item>
                    <el-dropdown-item
                        @click.native="handleDelete"
                        icon="el-icon-remove" 
                        :disabled="multipleSelection.length > 0 ? false : true" 
                        divided>批量删除el-dropdown-item>
                el-dropdown-menu>
                <el-button type="primary" size="small">
                    批量操作<i class="el-icon-arrow-down el-icon--right">i>
                el-button>
            el-dropdown>
        div>
        <my-table :data="dictData" 
            :columns="columns" 
            height="580px" 
            :selection="true" 
            tooltipEffect="dark"
            :highlightCurrentRow="true"
            @selectionChange="handleSelectionChange"
        >
            
            <template slot="effective" slot-scope="{scope}">
                <el-tag
                    :type="scope.row.effective === '1' ? 'success' : 'danger'"
                    disable-transitions>{{$store.getters.getDictLabelByType('EFFECTIVE', scope.row.effective)}}el-tag>
            template>
            
            <template slot="operate" slot-scope="{scope}">
                <el-button type="text" size="small" @click="fnEdit(scope.row)">编辑el-button>
                <el-dropdown>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hanldeEffective('1', scope.row)" >启用el-dropdown-item>
                        <el-dropdown-item @click.native="hanldeEffective('2', scope.row)" divided >禁用el-dropdown-item>
                        <el-dropdown-item @click.native="handleDelete(scope.row)" divided>删除el-dropdown-item>
                    el-dropdown-menu>
                    <span class="el-dropdown-link">
                        更多<i class="el-icon-arrow-down el-icon--right">i>
                    span>
                el-dropdown>
            template>
        my-table>
        <el-pagination
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100]"
				:current-page="pageNum"
				:page-size="pageSize"
				:total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
		el-pagination>

        
        <edit-dict :visible="editVisible" :rowData="rowData" @close="editVisible = false" @queryDictList="queryDictList">edit-dict>
    div>
template>
<script>
    import $api from './api/index'
    import editDict from './part/editDict'

    const columns = [
        {label: '字典类型', prop: 'type', align: 'center'},
        {label: '码值名称', prop: 'label', align: 'center'},
        {label: '码值', prop: 'code', align: 'center'},
        {label: '有效状态', prop: 'effective', align: 'center', slot: 'effective'},
        {label: '操作', prop: 'operate', align: 'center', slot: 'operate'}
    ]
    export default{
        name: 'dictManagement',
        components: {editDict},
        data() {
            return{
                editVisible: false,
                multipleSelection: [], // 多选
                columns,
                pageNum: 1, // 页码
                pageSize: 10, // 每页条数
                total: 0,  // 总条数
                searchInfo: '',
                dictData: [],
                rowData: {}
            }
        },
        mounted() {
            this.queryDictList()
        },
        methods: {
            // 编辑
            fnEdit(row){
                this.editVisible = true
                this.rowData = row
            },
            // 页码变化方法
            handleCurrentChange(current){
                this.pageNum = current
                this.queryDictList()
            },
            // pageSize 每页条数改变方法
            handleSizeChange(size){
                this.pageSize = size
                this.queryDictList()
            },
            // 填充表格数据
            queryDictList(){
                let param = {
                    searchInfo: this.searchInfo,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                $api.queryDictList(param).then(res => {
                    if (res.data.code == 200){
                        var data = res.data.data
                        this.pageNum = data.pageNum
                        this.pageSize = data.pageSize
                        this.total = data.total
                        this.dictData = data.list
                    }
                })

            },
            // type 1：批量启用 2：批量禁用
            hanldeEffective(type, row){
                let dictIds = []
                // 判断是否批量操作
                if (row.dictId){
                    if (type == "1"){
                        if (row.effective == "1"){
                            this.$message({
                                showClose: true,
                                message: '该记录已启用，请勿重复操作.',
                                type: 'error',
                            })
                            return
                        }
                    }else {
                        if (row.effective != "1"){
                            this.$message({
                                showClose: true,
                                message: '该记录已禁用，请勿重复操作.',
                                type: 'error',
                            })
                            return
                        }
                    }
                    dictIds.push(row.dictId)
                }else {
                    this.multipleSelection.forEach(e => {
                        dictIds.push(e.dictId)
                    })
                }
                $api.updateEffective({type: type, dictIds: dictIds.join(",")}).then(res => {
                    if (res.data.code == 200){
                        this.queryDictList()
                        this.multipleSelection = []
                        this.$message({
                            showClose: true,
                            message: type == '1' ? '启用成功.' : '禁用成功.',
                            type: 'success',
                        })
                    }
                })
            },
            // 多选
            handleSelectionChange(val){
                this.multipleSelection = val
            },
            // 删除
            handleDelete(row){
                let dictIds = []
                if (row.dictId){
                    dictIds.push(row.dictId)
                }else {
                    this.multipleSelection.forEach(e => {
                        dictIds.push(e.dictId)
                    })
                }
                this.$confirm('确认删除该记录?',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $api.deleteDictByDictIds({dictIds: dictIds.join(',')}).then(res => {
                        this.queryDictList()
                        this.multipleSelection = []
                        this.$message({
                            showClose: true,
                            message: '删除成功.',
                            type: 'success',
                        })
                    })
                })
            }
        }
    }

script>
<style lang="less" scoped>
    .search {
        text-align: center; 
        margin-bottom: 40px;
        .el-input{
            width: 300px;
        }
    }
    .op-btn{
        float: right;
        margin-right: 20px;
        margin-bottom: 5px;
    }
    .el-button{
        margin-right: 10px;
    }
    .el-pagination {
		float: right;
        margin: 10px;
	}
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
style>

    4、编辑字典editDict.vue页面

    <template>
    <el-drawer
        :title="rowData.dictId ? '编辑字典' : '新增字典'"
        :visible="visible"
        size="25%"
        :before-close="closeDrawer"
        :destroy-on-close="true"
    >
        <el-form ref="formData" :rules="formRules" :model="formData" class="drawer__content" label-width="120px">
            <el-form-item label="字典类型" prop="type">
                <el-input v-model.trim="formData.type" autocomplete="off">el-input>
            el-form-item>
            <el-form-item label="码值名称" prop="label">
                <el-input v-model.trim="formData.label" autocomplete="off">el-input>
            el-form-item>
            <el-form-item label="码值code" prop="code">
                <el-input v-model.trim="formData.code" autocomplete="off">el-input>
            el-form-item>
            <el-form-item label="有效状态" prop="effective" >
                <el-switch  v-model="formData.effective">el-switch>
            el-form-item>
        el-form>
        <div class="drawer__footer">
            <el-button @click="resetForm('formData')">重 置el-button>
            <el-button type="primary" @click="submitForm('formData')">确 定el-button>
        div>
    el-drawer>
template>

<script>
import $api from '../api/index'

export default {
    name: 'editDict',
    props: ['visible', 'rowData'],
    data(){
        return {
            drawer: false,
            formData: {},
            formRules: {
                type: [
                    { required: true, message: '请输入字典类型', trigger: 'blur'}
                ],
                label: [
                    { required: true, message: '请输入码值名称', trigger: 'blur'}
                ],
                code: [
                    { required: true, message: '请输入码值code', trigger: 'blur'}
                ]
            }

        }
    },
    watch: {
        visible(val){
            if (val){
                this.setFormValue()
            }
        }
    },
    methods: {
        // 表单数据
        setFormValue(){
            const {dictId, type, label, code, effective} = this.rowData
            if(dictId == undefined){
                this.formData = {
                    effective: true
                }
            }else {
                this.formData = {
                    dictId: dictId,
                    type: type,
                    label: label,
                    code: code,
                    effective: effective == '1' ? true : false
                }
            }
        },
        // 编辑/新增保存
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid){
                    this.formData.effective = this.formData.effective ? '1' : '0'
                    // 新增
                    if(this.formData.dictId == undefined){
                        $api.addDict(this.formData).then(res => {
                            if (res.data.code == 200){
                                this.closeDrawer()
                                this.$emit('queryDictList')
                                this.$message({
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success',
                                })
                            }
                        })
                    }else { // 编辑
                        $api.editDict(this.formData).then(res => {
                            if (res.data.code == 200){
                                this.$emit('queryDictList')
                                this.closeDrawer()
                                this.$message({
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success',
                                })
                            }
                        })
                    }
                }
            })
        },
        // 重置表单
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        // 关闭
        closeDrawer(){
            this.formData = {}
            this.resetForm('formData')
            this.$emit('close')
        }
    }
    
}
script>
<style lang="less" scoped>
    /deep/ .el-drawer__header{
        padding: 20px;
        border-bottom: 1px solid rgba(0,21,41,0.08);
    }
    .drawer__content {
        width: 90%;
    }
    .drawer__footer{
        position: absolute;
        bottom: 20px;
        left: 25px;
        .el-button{
            width: 150px;
            margin-right: 15px;
        }
    }
style>

    5、调用js请求后台方法

    import request from '@/axios/request';

const api = {
    // 新增
    addDict(data){
        return request.post("dict/addDict", data, true)
    },

    // 编辑
    editDict(data){
        return request.post("dict/editDict", data, true)
    },

    // 查询字典存缓存
    queryDictCache(data){
        return request.post("/dict/queryDictCache", data)
    },
   
    // 查询字典列表
    queryDictList(data){
        return request.post("/dict/queryDictList", data, true)
    },

    // 删除
    deleteDictByDictIds(data){
        return request.post("/dict/deleteDictByDictIds", data, true)
    },

    // 批量禁用启用
    updateEffective(data){
        return request.post('/dict/updateEffective', data, true)
    }
}

export default api

    6、后台实现前端调用方法

    controller

    package com.longzy.component.dict.controller;

import com.github.pagehelper.PageInfo;
import com.longzy.component.dict.entity.SysDictVo;
import com.longzy.component.dict.service.read.SysDictReadService;
import com.longzy.component.dict.service.write.SysDictWriteService;
import com.longzy.error.BusinessException;
import com.longzy.common.page.PageParam;
import com.longzy.common.response.CommonReturnType;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
import java.util.List;

/**
 * @Desc: 字典
 * @Packge: com.longzy.component.dict.controller
 * @Author: longzy
 * @Date: 2022/9/16 10:03
 */
@Api(tags = "字典模块")
@RestController
@RequestMapping("dict")
public class SysDictController {

    @Autowired
    private SysDictReadService sysDictReadService;

    @Autowired
    private SysDictWriteService sysDictWriteService;

    /**
     * 查询字典列表
     * @param searchInfo 类型或名称
     * @param pageParam 分页参数
     * @return
     */
    @ApiOperation(value = "查询字典列表", notes = "根据类型或名称查询")
    @PostMapping("queryDictList")
    public CommonReturnType queryDictList(String searchInfo, @Validated PageParam pageParam){
        PageInfo<SysDictVo> page = sysDictReadService.queryDictList(searchInfo, pageParam);
        return CommonReturnType.success("操作成功", page);
    }

    @ApiOperation(value = "新增字典")
    @PostMapping("addDict")
    public CommonReturnType addDict(SysDictVo dictVo) {
        int count = sysDictWriteService.addDict(dictVo);
        if (count < 1){
            throw new BusinessException("新增字典失败.");
        }
        return CommonReturnType.success("新增字典成功.");
    }

    @ApiOperation(value = "编辑字典")
    @PostMapping("editDict")
    public CommonReturnType editDict(SysDictVo dictVo) {
        int count = sysDictWriteService.editDict(dictVo);
        if (count < 1){
            throw new BusinessException("编辑字典失败.");
        }
        return CommonReturnType.success("编辑字典成功.");
    }

    @ApiOperation(value = "删除字典", notes = "根据id删除")
    @PostMapping("deleteDictByDictIds")
    public CommonReturnType deleteDictByDictIds(String dictIds) {
        sysDictWriteService.deleteDictByDictIds(dictIds);
        return CommonReturnType.success("删除成功.");
    }

    /**
     * 批量处理状态
     * @param type 1启用 2禁用
     * @param dictIds id列表
     * @return
     */
    @ApiOperation(value = "修改字段状态", notes = "根据type判断启用还是禁用")
    @PostMapping("updateEffective")
    public CommonReturnType updateEffective(String type, String dictIds){
        sysDictWriteService.updateEffective(type, dictIds);
        return CommonReturnType.success("操作成功.");
    }

}

    service

    @Override
    public PageInfo<SysDictVo> queryDictList(String searchInfo, PageParam pageParam) {
        PageHelper.startPage(pageParam.getPageNum(), pageParam.getPageSize());
        List<SysDictVo> dictList = sysDictReadMapper.queryDictList(searchInfo);
        return new PageInfo<>(dictList);
    }

@Override
    public int addDict(SysDictVo dictVo) {
        // 去重
        if (checkDictExist(dictVo)){
            throw new BusinessException("字典类型和码值已存在，请重新输入.");
        }
        SysDictPo dictPo = ConvertUtils.convert(dictVo, new SysDictPo());
        if (!StringUtils.isEmpty(dictPo.getType())){
            dictPo.setType(dictPo.getType().toUpperCase());
        }
        return sysDictWriteMapper.addDict(dictPo);
    }

    @Override
    public int editDict(SysDictVo dictVo) {
        // 去重
        if (checkDictExist(dictVo)){
            throw new BusinessException("字典类型和码值已存在，请重新输入.");
        }
        SysDictPo dictPo = ConvertUtils.convert(dictVo, new SysDictPo());
        if (!StringUtils.isEmpty(dictPo.getType())){
            dictPo.setType(dictPo.getType().toUpperCase());
        }
        return sysDictWriteMapper.editDict(dictPo);
    }

    @Override
    public void deleteDictByDictIds(String dictIds) {
        int count = sysDictWriteMapper.deleteDictByDictIds(ConvertUtils.integerToList(dictIds));
        if (count < 1){
            throw new BusinessException("删除字典失败.");
        }
    }

    @Override
    public void updateEffective(String type, String dictIds) {
        String effective = null;
        if ("1".equals(type)){
            effective = "1";
        }else {
            effective = "0";
        }
        int count = sysDictWriteMapper.updateEffective(ConvertUtils.integerToList(dictIds), effective);
        if (count < 1){
            throw new BusinessException(type== "1" ? "改记录启用失败." : "改记录禁用失败.");
        }
    }

    private boolean checkDictExist(SysDictVo dictVo){
        return sysDictReadMapper.queryDictByTypeAndLabel(dictVo.getDictId(), dictVo.getType(), dictVo.getCode()) > 0;
    }

    mapper

    /**
     * 字典查询列表
     * @param searchInfo 条件
     * @return
     */
    List<SysDictVo> queryDictList(@Param("searchInfo") String searchInfo);

    /**
     * 统计
     * @param dictId id
     * @param type 类型
     * @param code 码值
     * @return
     */
    int queryDictByTypeAndLabel(@Param("dictId") Integer dictId, @Param("type") String type, @Param("code") String code);
/**
     * 新增字典
     * @param dictPo
     * @return
     */
    int addDict(SysDictPo dictPo);

    /**
     * 编辑字典
     * @param dictPo
     * @return
     */
    int editDict(SysDictPo dictPo);

    /**
     * 删除字典
     * @param dictIds 字典id列表
     * @return
     */
    int deleteDictByDictIds(@Param("dictIds") List<Integer> dictIds);

    int updateEffective(@Param("dictIds") List<Integer> dictIds, @Param("effective") String effective);

    sql

    <sql id="Base_Column_List">
        dictid,
        type,
        code,
        label,
        effective
    </sql>

    <select id="queryDictList" resultType="com.longzy.component.dict.entity.SysDictVo">
        SELECT <include refid="Base_Column_List" />
        FROM sys_dict
        <where>
            <if test="searchInfo != '' and searchInfo != null">
                type = #{searchInfo,jdbcType=VARCHAR}
                or
                label like  concat('%', #{searchInfo,jdbcType=VARCHAR}, '%')
            </if>
        </where>
    </select>

    <select id="queryDictByTypeAndLabel" resultType="int">
        SELECT count(1)
        FROM sys_dict
        WHERE type = #{type,jdbcType=VARCHAR}
        AND code = #{code,jdbcType=VARCHAR}
        <if test="dictId != '' and dictId != null">
            AND dictid != #{dictId,jdbcType=INTEGER}
        </if>
    </select>
    
	<insert id="addDict" parameterType="com.longzy.component.dict.entity.SysDictPo">
        INSERT INTO sys_dict
            (`type`, code, label, effective)
        VALUES(#{type,jdbcType=VARCHAR},
               #{code,jdbcType=VARCHAR},
               #{label,jdbcType=VARCHAR},
               #{effective,jdbcType=VARCHAR})
    </insert>

    <update id="editDict" parameterType="com.longzy.component.dict.entity.SysDictPo">
        UPDATE sys_dict
        <set>
            <if test="type != '' and type != null">
                type = #{type,jdbcType=VARCHAR},
            </if>
            <if test="code != '' and code != null">
                code = #{code,jdbcType=VARCHAR},
            </if>
            <if test="label != '' and label != null">
                label = #{label,jdbcType=VARCHAR},
            </if>
            <if test="effective != '' and effective != null">
                effective = #{effective,jdbcType=VARCHAR}
            </if>
        </set>
        WHERE dictid = #{dictId,jdbcType=INTEGER}
    </update>

    <delete id="deleteDictByDictIds">
        DELETE FROM sys_dict where dictid in
        <foreach collection="dictIds" item="dictId" separator="," open="(" close=")">
            #{dictId}
        </foreach>
    </delete>

    <update id="updateEffective" parameterType="com.longzy.component.dict.entity.SysDictPo">
        UPDATE sys_dict set effective = #{effective,jdbcType=VARCHAR}
        WHERE dictid in
        <foreach collection="dictIds" item="dictId" separator="," open="(" close=")">
            #{dictId}
        </foreach>
    </update>

    三、字典配置

    1、获取字典缓存

    在用户登录成功后将字典获取存于缓存中，防止重复调用数据库而降低效率，在router路由中获取，如：

    router.beforeEach((to, from, next) => {
  let dict = sessionStorage.getItem('dict')

  if (token){
    // 已登录
    if (to.path == '/login') {
      next({path: '/'})
    }else{
      // 字典缓存赋值
      if (dict == null){
        store.dispatch('queryDictCache')
      }else {
        store.state.dict.dict = JSON.parse(dict)
      }
    } 
  }else {
    // 未登录跳转登录页
    if (to.path == '/login') {
      next()
    } else if (!token) {
      next({path: '/login'})
    }  
  }
  
	next()
})

    2、将数据存于store中

    import Vue from 'vue'
import Vuex from 'vuex'
import dictJs from '@/views/project/dict/api/index'

Vue.use(Vuex)

export default {
  state: {
    dict: [],
  },
  getters: {
    // 根据类型获取码值列表
    getDictList(state, getters){
      return function(type){
        return state.dict.filter(e => e.type == type)
      }
    },
    // 根据类型和code获取码值列表
    getDictLabelByType(state, getters){
      return function(type, code){
        let dictList = []
        let label = ''
        dictList = state.dict.filter(e => e.type == type)
        if (dictList.length > 0){
          dictList.forEach(e => {
            if (e.code == code){
              label = e.label
            }
          });
        }
        return label
      }
    }
  },
  mutations: {
    // 将字典存入session会话中
    SET_DICT(state, dict){
        state.dict = dict
        sessionStorage.setItem("dict", JSON.stringify(dict))
    }
  },
  actions: {
    queryDictCache({ commit, state }){
      return new Promise((resolve, reject) => {
        dictJs.queryDictCache().then(res => {
          commit('SET_DICT', res.data.data)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })

    }
  }
}

    3、字典的调用

    （1）、通过类型获取字典集合

    一般用户在编辑表单中使用，如：
    在这里插入图片描述
    通过调用store中getters中方法，如：$store.getters.xxx（）
    在这里插入图片描述

    <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="formData.menuType">
                    <el-radio
                        v-for="item in $store.getters.getDictList('MENUTYPE')"
                        :key="item.code" 
                        :label="item.code">
                    {{item.label}}
                    el-radio>
                el-radio-group>
            el-form-item>
    （2）、通过类型和值获取名称

    一般用户表格数据展示，如：
    在这里插入图片描述
    通过调用store中getters中方法，如：$store.getters.xxx（）
    在这里插入图片描述

     
            <template slot="effective" slot-scope="{scope}">
                <el-tag
                    :type="scope.row.effective === '1' ? 'success' : 'danger'"
                    disable-transitions>{{$store.getters.getDictLabelByType('EFFECTIVE', scope.row.effective)}}el-tag>
            template>

    代码地址：

    后端： https://gitee.com/longzyl/longzy-admin
    前端： https://gitee.com/longzyl/longzy-vue2

  • 相关阅读:
    如何保证Redis与数据库的数据一致性
    [MyBatisPlus]DQL编程控制②(查询投影、查询条件)
    【已解决】记录Vue2.x中npm install下载依赖报错：python2 Error: not found: python2问题（具体操作步骤）
    skywalking中gateway的拓扑图没有出现
    【深入Java原子类：高性能并发编程的技巧与实践】
    C语言项目Tinyhttp的学习笔记
    ​苹果应用高版本出现：“无法安装此app，因为无法验证其完整性”是怎么回事?竟然是错误的?
    香港裸机云多IP服务器都有哪些配置?
    linux 网络 sk_buff结构
    等级保护定级之备案！
  • 原文地址：https://blog.csdn.net/longzhengyong1314/article/details/127090325