位置: IT常识 - 正文

若依(ruoyi)字典管理插件实现思路探究(若依名字的含义是什么意思)

编辑:rootadmin
若依(ruoyi)字典管理插件实现思路探究

推荐整理分享若依(ruoyi)字典管理插件实现思路探究(若依名字的含义是什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:若依是什么意思,若依名字的含义是什么意思,若依是啥,若依是什么意思和含义,若依出处,若依这个名字的含义是什么,若依是啥,若依是啥,内容如对您有帮助,希望把文章链接给更多的朋友!

 一个UI表单的构成,避免不了下拉框,多选框等标签,在开发这些标签时,通常会请求后台接口获取字典值进行动态渲染。定制化开发虽然实现简单,但会产生大量重复工作,解决这类问题的思路有哪些?文章对若依字典管理插件实现思路进行了探究,以此来开阔思路。

探究过程如下:

界面设计数据库设计开发用例源码分析一、界面设计

访问若依管理系统-系统管理-字典管理

界面截图如下:

 

功能提供了字典类型及字典键值的管理

二、数据库设计

SYS_DICT_TYPE

SYS_DICT_DATA

使用到SYS_DICT_TYPE,SYS_DICT_DATA两张表,定义了字典类型,及对应字典键值,两者是一对多的关系,通过dict_type关联。

三、开发用例

以用户性别为例,

功能配置:

字典名称:用户性别字典类型:sys_user_sex若依(ruoyi)字典管理插件实现思路探究(若依名字的含义是什么意思)

字典数据

页面开发:

引入字典类型export default { name: "User", dicts: ['sys_normal_disable', 'sys_user_sex'], components: { Treeselect }, ......}标签使用字典值 <el-col :span="12"> <el-form-item label="用户性别"> <el-select v-model="form.sex" placeholder="请选择性别"> <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> </el-select> </el-form-item> </el-col>

实现效果:

 可以发现,通过灵活的功能配置,vue页面只要引入对应的字典类型,就可以使用字典数据,完成标签的动态渲染,接下来对源码进行分析,探究其实现过程。

四、源码分析

在开发用例中,发现vue自定义属性:dicts: ['sys_user_sex'],申明了vue实例需要引入的字典类型,那问题来了,vue实例是怎么通过这个自定义属性获取对应字典信息呢?

为了回答这个问题,需要先了解一下main.js的使用,参考文章vue项目中main.js使用方法详解,

文中提到“main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件”,根据提示在main.js中找到与字典插件相关的所有代码段:

import { getDicts } from "@/api/system/dict/data";// 字典标签组件import DictTag from '@/components/DictTag'// 字典数据组件import DictData from '@/components/DictData'// 全局方法挂载Vue.prototype.getDicts = getDicts// 全局组件挂载Vue.component('DictTag', DictTag)DictData.install()

按照这些插件加载的先后顺序进行分析

import { getDicts } from "@/api/system/dict/data":一个接口方法,根据字典类型查询字典数据信息。// 根据字典类型查询字典数据信息export function getDicts(dictType) {return request({url: '/system/dict/data/type/' + dictType,method: 'get'})}import DictTag from '@/components/DictTag':字典标签组件,根据传入标签值,回显其对应的标签中文名,常用于数据列表中,返回的是标签值,通过DictTag组件可以回显对应的中文描述。<template><div><template v-for="(item, index) in options"><template v-if="values.includes(item.value)"><spanv-if="item.raw.listClass == 'default' || item.raw.listClass == ''":key="item.value":index="index":class="item.raw.cssClass">{{ item.label }}</span><el-tagv-else:disable-transitions="true":key="item.value":index="index":type="item.raw.listClass == 'primary' ? '' : item.raw.listClass":class="item.raw.cssClass">{{ item.label }}</el-tag></template></template></div></template><script>export default {name: "DictTag",props: {options: {type: Array,default: null,},value: [Number, String, Array],},computed: {values() {if (this.value !== null && typeof this.value !== 'undefined') {return Array.isArray(this.value) ? this.value : [String(this.value)];} else {return [];}},},};</script><style scoped>.el-tag + .el-tag {margin-left: 10px;}</style>import DictData from '@/components/DictData':提供了字典数据组件安装方法。import Vue from 'vue'import DataDict from '@/utils/dict'import { getDicts as getDicts } from '@/api/system/dict/data'function install() { Vue.use(DataDict, { metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, }, }, })}export default { install,}

其中 import DataDict from '@/utils/dict'  引入了字典数据组件,是整个实现的核心,是这次分析的重点,涉及以下插件:

其中index.js 是入口程序,实现逻辑如下:

引入了Dict,DictOptions 插件import Dict from './Dict'import { mergeOptions } from './DictOptions'合并配置参数mergeOptions(options),将DictData的metas 与 DictOptions的metas配置信息进行合并metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, },}metas: { '*': { /** * 字典请求,方法签名为function(dictMeta: DictMeta): Promise */ request: (dictMeta) => { console.log(`load dict ${dictMeta.type}`) return Promise.resolve([]) }, /** * 字典响应数据转换器,方法签名为function(response: Object, dictMeta: DictMeta): DictData */ responseConverter, labelField: 'label', valueField: 'value', },},通过mixin创建混入对象,将Dict组件 “混合”到各个使用组件本身的选项中。

什么是mixin?可查看博文对vue中mixin的理解。

其中data()方法 “const dict = new Dict()” 负责Dict组件创建,created() 方法中“this.dict.init(this.$options.dicts)”,将vue页面上定义的dicts数组传进去,组装数据,请求后端,获取对应字典数据。

import Dict from './Dict'import { mergeOptions } from './DictOptions'export default function(Vue, options) { mergeOptions(options) Vue.mixin({ data() { if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) { return {} } const dict = new Dict() dict.owner = this return { dict } }, created() { if (!(this.dict instanceof Dict)) { return } // options 如果配置onCreated ,则执行options.onCreated options.onCreated && options.onCreated(this.dict) this.dict.init(this.$options.dicts).then(() => { //options 如果配置onReady ,则执行options.onReady方法 options.onReady && options.onReady(this.dict) this.$nextTick(() => { this.$emit('dictReady', this.dict) if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) { this.$options.methods.onDictReady.call(this, this.dict) } }) }) }, })}

对this.dict.init(this.$options.dicts)代码进行分析:其根据传入的options配置信息,生成字典元数据配置信息dictMeta,然后创建回调方法执行数组const ps = [],根据dictMeta加入对应字典类型的loadDict方法,通过Promise.all(ps)发送多个请求并根据请求顺序获取和使用字典数据。

import Vue from 'vue'import { mergeRecursive } from "@/utils/ruoyi";import DictMeta from './DictMeta'import DictData from './DictData'const DEFAULT_DICT_OPTIONS = { types: [],}/** * @classdesc 字典 * @property {Object} label 标签对象,内部属性名为字典类型名称 * @property {Object} dict 字段数组,内部属性名为字典类型名称 * @property {Array.<DictMeta>} _dictMetas 字典元数据数组 */export default class Dict { constructor() { this.owner = null this.label = {} this.type = {} } init(options) { if (options instanceof Array) { options = { types: options } } const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options) if (opts.types === undefined) { throw new Error('need dict types') } const ps = [] this._dictMetas = opts.types.map(t => DictMeta.parse(t)) this._dictMetas.forEach(dictMeta => { const type = dictMeta.type Vue.set(this.label, type, {}) Vue.set(this.type, type, []) if (dictMeta.lazy) { return } ps.push(loadDict(this, dictMeta)) }) return Promise.all(ps) } /** * 重新加载字典 * @param {String} type 字典类型 */ reloadDict(type) { const dictMeta = this._dictMetas.find(e => e.type === type) if (dictMeta === undefined) { return Promise.reject(`the dict meta of ${type} was not found`) } return loadDict(this, dictMeta) }}/** * 加载字典 * @param {Dict} dict 字典 * @param {DictMeta} dictMeta 字典元数据 * @returns {Promise} */function loadDict(dict, dictMeta) { return dictMeta.request(dictMeta) .then(response => { const type = dictMeta.type let dicts = dictMeta.responseConverter(response, dictMeta) if (!(dicts instanceof Array)) { console.error('the return of responseConverter must be Array.<DictData>') dicts = [] } else if (dicts.filter(d => d instanceof DictData).length !== dicts.length) { console.error('the type of elements in dicts must be DictData') dicts = [] } dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts) dicts.forEach(d => { Vue.set(dict.label[type], d.value, d.label) }) return dicts })}

这样字典管理插件实现思路就基本清楚了,希望对你有所帮助。

本文链接地址:https://www.jiuchutong.com/zhishi/287111.html 转载请保留说明!

上一篇:B/S架构(b/s架构的正确解释方式)

下一篇:STP详解

  • 苹果13打电话怎么显示卡1卡2(苹果13打电话怎么录音通话录音)

    苹果13打电话怎么显示卡1卡2(苹果13打电话怎么录音通话录音)

  • 优酷的自动续费怎么取消(怎么取消掉优酷的自动续费)

    优酷的自动续费怎么取消(怎么取消掉优酷的自动续费)

  • 抖音怎么批量删除失效视频(抖音怎么批量删除自己视频)

    抖音怎么批量删除失效视频(抖音怎么批量删除自己视频)

  • 戴尔预装office是永久吗(dell预装正版office激活后如何安装)

    戴尔预装office是永久吗(dell预装正版office激活后如何安装)

  • 抖音注销后是什么样子(抖音注销后是什么头像)

    抖音注销后是什么样子(抖音注销后是什么头像)

  • 电脑自动关机(电脑自动关机设置和取消)

    电脑自动关机(电脑自动关机设置和取消)

  • 什么样的电池可以充电(什么样的电池可以托运)

    什么样的电池可以充电(什么样的电池可以托运)

  • oppo手机时间显示秒(oppo手机时间显示怎么调大)

    oppo手机时间显示秒(oppo手机时间显示怎么调大)

  • 快手为什么一个关注都没有还显示2个(快手为什么一个人有十多个号怎么做到的)

    快手为什么一个关注都没有还显示2个(快手为什么一个人有十多个号怎么做到的)

  • 苹果手机可以下载万能钥匙吗(苹果手机可以下载万能wifi钥匙吗)

    苹果手机可以下载万能钥匙吗(苹果手机可以下载万能wifi钥匙吗)

  • 怎么下载电影到手机上看(怎么下载电影到U盘)

    怎么下载电影到手机上看(怎么下载电影到U盘)

  • 微软和windows的关系(微软和windows10的关系)

    微软和windows的关系(微软和windows10的关系)

  • iPhoneXs和iPhoneXsMax和iPhoneXR的区别(iphonexs和iphonexsmax摄像头区别)

    iPhoneXs和iPhoneXsMax和iPhoneXR的区别(iphonexs和iphonexsmax摄像头区别)

  • 5sa1533是什么版本(iphone5sa1530是什么版本)

    5sa1533是什么版本(iphone5sa1530是什么版本)

  • 蜂助手是干什么用的(蜂助手工作怎么样)

    蜂助手是干什么用的(蜂助手工作怎么样)

  • 三星旗舰机是什么系列(三星旗舰机什么时候发布)

    三星旗舰机是什么系列(三星旗舰机什么时候发布)

  • 手机号欠费了不知道手机号怎么办(手机号欠费了不知道号码怎么交费)

    手机号欠费了不知道手机号怎么办(手机号欠费了不知道号码怎么交费)

  • 闲鱼退款申请怎么处理(闲鱼退款申请怎么申请)

    闲鱼退款申请怎么处理(闲鱼退款申请怎么申请)

  • 如何在头像上加上国旗(怎么在头像加字)

    如何在头像上加上国旗(怎么在头像加字)

  • 苹果11代怎么激活(苹果11激活怎么激)

    苹果11代怎么激活(苹果11激活怎么激)

  • xsmax美版是双卡吗(xsmax美版是单卡)

    xsmax美版是双卡吗(xsmax美版是单卡)

  • linux查找文件命令(linux文件查找命令)

    linux查找文件命令(linux文件查找命令)

  • 无法完成触控id设置请返回并重试(无法完成触控id设置)

    无法完成触控id设置请返回并重试(无法完成触控id设置)

  • qq输入法如何打符号(qq输入法如何打生僻字)

    qq输入法如何打符号(qq输入法如何打生僻字)

  • 已抵扣的进项税发票怎么查询明细
  • 跨年度的租金收入如何入账
  • 企业的税务风险研究怎么写
  • 公司账户短期理财收益要交税吗
  • 利润表利息费用和利息收入
  • 人工费用的核算例题
  • 低值易耗品包括哪些东西和产品
  • 其他应付款计入资本公积
  • 房产证印花税如何计算
  • 固定资产公允价值减去处置费用后的净额
  • 补贴给客户的支出怎样做会计分录?
  • 收到销售折让的红字怎么做账
  • 应征进口关税的公式
  • 工程项目立项前包括哪几个过程
  • 公司前期没有收入开支怎么记账
  • 金税盘开票时间不对怎么办
  • 土地增值税计算题及答案解析
  • 京挑客怎么赚钱
  • 信汇凭证是转账凭证吗
  • 收到别公司利息怎么记账
  • 如何使用腾讯电子签维护自己的权益
  • 金蝶核算项目明细表
  • 华为下载鸿蒙应用
  • 财产租赁所得个人所得税怎么申报
  • 本月计提增值税的金额是怎么得来的
  • centos停止发布
  • 华硕笔记本装win8
  • 换购商品分录怎么做
  • 留底的进项税额记哪儿?
  • 支付境外设计费合同备案流程
  • win7旗舰版系统鼠标不能动了
  • 其他业务收入产品包括
  • 出口退税科目 月底如何结转
  • 股东分红个人所得税怎么算
  • 增值税发票半年能开吗
  • php获取get
  • 波白克岛的小尖塔岩石,英格兰多塞特 (© James Osmond/Alamy)
  • Diffusion-GAN: Training GANs with Diffusion 解读
  • php发送邮箱
  • ubuntu搭建web服务器流程
  • mac配置flutter环境变量
  • 逆算法怎么算
  • 所得税季度申报弥补以前年度亏损
  • 分公司能给总公司担保吗
  • 罚款可以直接在12123
  • 公司之间往来款需要交税吗
  • sql server 2008简介
  • 资产处置收益项目有哪些
  • 出口退税帐务处理
  • 税控盘买了怎么用
  • 企业收取的丢失物品
  • 融资租赁业务的账务及涉税处理
  • 研发费用加计扣除政策指引2.0
  • 管理人员工资属于酌量性固定成本
  • 为什么当月增加的无形资产当月摊销
  • 扣缴个人所得税申报表模板
  • 减免及返还增值税怎么算
  • 联营扣点业务会亏钱吗
  • 折旧计入主营业务成本的情况
  • 应付职工薪酬包括福利费吗
  • linux实现mysql数据库每天自动备份定时备份
  • win8更新win8.1
  • CentOS里/etc/sysconfig/clock内容解读
  • centos怎么修改文件权限
  • centos 查看文件夹
  • win8为什么
  • schost.exe - schost是什么进程 有什么用
  • win8远程桌面连接设置
  • windows10mobile壁纸
  • Win10桌面图标没有了
  • 不需要远程传输的文件
  • 安卓属性
  • jquery常用api
  • androidstudiosdk
  • iframe隐藏页面内容
  • 简单的智能家居
  • android获取系统弹窗,自动点击
  • python搭建平台
  • 车船税每年都是300怎么变成600
  • 所得税汇算清缴退税税务局要来查账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设