当前位置: 首页 > news >正文

在 Vue 项目中添加字典翻译工具(二)

封装字段翻译组件,可以格式化字典、枚举、字段
优点: 使用简单,一次配置多次使用,缓存降低后端请求次数,扩展性强

没有缓存时造成单页面多次请求解决方法:axios添加缓存请求,防止多次请求,单页面多个同一组件造成多次请求解决方案

store 的 fieldFormat.js(这里用的store的modules)

export default {namespaced: true,state: {types: {}},mutations: {ADD_TYPE: (state, params) => {state.types[params.type] = params.value;}}
}

Dict.js

/*** 字典,用以匹配后端字典*/
export default class Dict {constructor(serve) {this.serve = serve;this.id = "dictValue";this.label = "dictLabel";this.isDict = true;}
}

Enum.js

/*** 枚举,用以匹配后端枚举*/
export default class Enum {constructor(serve) {this.id = "code";this.label = "name";this.isEnum = true;this.serve = serve;}
}

Field.js

/*** 字段,用以匹配后端字段*/
export default class Field {constructor(serve, id, label, method, dataField) {this.serve = serve;this.id = id;this.label = label;if (method) {this.method = method;}if (dataField) {this.dataField = dataField;}}
}

formatOptions.js

import * as vehicleTypeService from "@/api/bayonet/vehicleType";
import Enum from "./Enum";
import Dict from "./Dict";
import Field from "./Field";/*** 字段格式化组件参数** @param serve 请求地址或请求方法或枚举类型,请求方法可以是api中的,必须是Function: () => Promise格式* @param id 请求后的数据列表字段,用于匹配那一条数据* @param label 请求后的数据列表字段,用于自动格式化字段* @param method 请求方式,默认get* @param dataField 请求后的data字段,默认data* @param isEnum 是否枚举,开启将请求后端枚举* @param isDict 是否字典,开启将请求后端字典*/
export default {// 车辆类型vehicleType: new Field(vehicleTypeService.getList, "vehicleTypeId", "name"),// 审批状态approvalStatusEnum: new Enum("com.yunku.project.entryApplication.enums.ApprovalStatus"),// 申请类型applicationTypeEnum: new Enum("com.yunku.project.entryApplication.enums.ApplicationType"),vehicle_enter_status: new Dict("vehicle_enter_status")
}

FieldFormat.vue

<template><div><template v-if="label && data && !hasSlot">{{ data[label] }}</template><slot></slot><slot name="format" :data="data"></slot><slot name="list" :list="list"></slot></div>
</template><script>
import request from '@/utils/request'
import {getDicts as getDicts} from '@/api/system/dict/data';
import formatOptions from "./formatOptions";export default {name: "FieldFormat",props: {value: [String, Number],type: String,params: Object},data() {return {enumUrl: 'common/utility/getEnumList',data: undefined,list: [],serve: undefined,id: undefined,label: undefined,method: 'get',dataField: 'data',isEnum: false,isDict: false}},computed: {fieldFormats() {// 获取vuex中缓存的数据return this.$store.state.fieldFormat.types;},hasSlot() {// 判断有没有插槽(默认插槽除外)return (this.$scopedSlots && (!!this.$scopedSlots.list || !!this.$scopedSlots.format))|| (this.$slots && (!!this.$slots.list || !!this.$slots.format));}},watch: {type: {handler(n) {// 类型改变时重新获取数据if (n) {this.getData();}}},value: {handler(n) {// 值改变时重新解析if (n) {this.format();}}}},methods: {/*** 解析*/format() {// 在列表中查找对应数据const list = this.list;if (list && list.length > 0) {this.data = list.find(datum => String(datum[this.id]) === String(this.value));}},/*** 获取参数* @returns {string|*}*/getOption() {// 根据type获取optionconst option = formatOptions[this.type];// 赋值属性Object.assign(this.$data, option);return option.serve;},/*** 获取数据*/getData() {const method = this.method;const serve = this.getOption();// 如果vuex中有当前类型缓存,则取缓存if (this.fieldFormats[this.type]) {this.list = this.fieldFormats[this.type];this.format();return;}if (serve instanceof Function) {// 如果serve类型为Function,则直接调用取值serve().then(res => {this.relRes(res);});} else {if (this.isDict) {this.relDict();} else if (this.isEnum) {this.relEnum();} else {const query = {url: serve,method: method,}// get请求和post请求的参数不一样query[this.method === 'get' ? 'params' : 'data'] = this.params;// 请求request(query).then(res => {this.relRes(res);});}}},/*** 解析枚举*/relEnum() {request({url: this.enumUrl,method: 'get',params: {enumType: this.serve}}).then(res => {this.relRes(res);})},/*** 解析字典*/relDict() {getDicts(this.serve).then(res => {this.relRes(res);});},/*** 解析结果*/relRes(res) {let list = this.list = res[this.dataField];this.$store.commit("fieldFormat/ADD_TYPE", {type: this.type,value: list});this.format();}},created() {this.getData();}
}
</script>

main.js添加,可全局使用,不需要页面单独引入

import FieldFormat from "@/components/FieldFormat";
Vue.component('FieldFormat', FieldFormat)

下面是使用方法

字段格式化工具(可以格式化字典、枚举、字段)

1. 添加参数

src/components/FieldFormat/formatOptions.js 中,添加格式化参数

你可以直接使用 JSON 格式来添加参数,也可以使用已定义的 class

export default {// 车辆类型vehicleType: {serve: vehicleTypeService.getList,id: "vehicleTypeId",label: "name",method: 'get',dataField: 'data'},// 审批状态approvalStatusEnum: new Enum("com.yunku.project.entryApplication.enums.ApprovalStatus")
}
属性
属性类型说明
serveString 或 Function请求地址或请求方法或枚举类型,请求方法可以是api中的,必须是Function: () => Promise格式
idString请求后的数据列表字段,用于匹配那一条数据
labelString请求后的数据列表字段,用于自动格式化字段
methodString请求方式,默认get
dataFieldString请求后的data字段,默认data
isEnumBoolean是否枚举,开启将请求后端枚举
isDictBoolean是否字典,开启将请求后端字典
class
属性类型说明
Enum枚举用以匹配后端枚举
Dict字典用以匹配后端字典
Field字段用以匹配后端字段
2. 使用
格式化

在需要格式化的地方,使用组件 field-format,value为已知数据值, type 为 formatOptions 中添加的名称,另外还有 params 字段用于请求自定义传参

<field-format :value="form.vehicleType" type="vehicleType"></field-format>
自定义插槽

可以使用插槽实现更多场景的功能,如

<field-format :value="form.vehicleType" type="vehicleType"><template #format="{data}">{{ data.name }}</template>
</field-format>
遍历

或者获取所有列表,用于遍历

<field-format type="vehicleType"><template #list="{list}"><el-select v-model="form.vehicleType"><el-optionv-for="item in list":label="item.name":value="item.vehicleTypeId":key="item.vehicleTypeId"></el-option></el-select></template></field-format>
</el-form-item>
默认插槽

用以自定义追加数据

相关文章:

在 Vue 项目中添加字典翻译工具(二)

封装字段翻译组件&#xff0c;可以格式化字典、枚举、字段 优点&#xff1a; 使用简单&#xff0c;一次配置多次使用&#xff0c;缓存降低后端请求次数&#xff0c;扩展性强 没有缓存时造成单页面多次请求解决方法&#xff1a;axios添加缓存请求&#xff0c;防止多次请求&#…...

RDMA Shared Receive Queue(四)

参考知乎文章《RDMA之Shared Receive Queue》&#xff1a;https://zhuanlan.zhihu.com/p/279904125 SRQ SRQ全称为Shared Receive Queue&#xff0c;即共享接受队列。在QP中&#xff0c;SQ用于下发SEND/WRITE/READ等操作&#xff0c;而RQ只用于下发RECV操作&#xff0c;对于本…...

this关键字

作用&#xff1a;出现在成员方法&#xff0c;构造器中代表当前对象的地址&#xff0c;用于访问当前对象的成员变量、成员方法。this出现在 有参数构造器 中的用法 &#xff08;this.成员变量 局部变量&#xff09;this出现在 成员方法 中的用法 &#xff08;this…...

缓存雪崩、缓存击穿、缓存穿透

缓存雪崩 当缓存中大量的键值对同时过期或者Redis宕机了&#xff0c;大量的请求就会直接打到数据库&#xff0c;这种现象就是缓存雪崩 应对策略 有四种&#xff0c;分别是“均匀设置过期时间”、“互斥锁”、“双key策略”、“设置逻辑过期时间&#xff0c;异步更新缓存” …...

Bigemap如何查看历史影像

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP 很多人都在寻找历史影像图&#xff0c;这块的需求是非常大&#xff0c;历史影像一般可以用于历史地貌的变迁分析&#xff0c;还原以前的生态场景&#xff0c;对范围面积…...

如何离线安装和使用pymysql操作mysql数据库

一、应用背景 在企业内部网络要使用python操作mysql数据库。然而&#xff0c;python未自带访问MySQL数据库的函数库pymysql&#xff0c;需要另外安装。网上有很多安装pymysql都需要互联网支持。本文主要阐述如何离线安装pymysql,并简要介绍pymysql如何进行mysql操作。 pymysq…...

Prometheus-监控Mysql进阶用法(1)(安装配置)

阿丹&#xff1a; 在开发和生产环境中有可能会出现慢mysql等问题&#xff0c;那么这里就需要我们优秀的程序员来进行监控和解决&#xff0c;那么如何借助云原生的监控系统来完成这个操作呢&#xff1f; 环境描述&#xff1a; 使用一台空白的阿里云服务器2核4G。 服务器基本安装…...

网络安全(黑客技术)自学内容

前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防…...

linux centos7 安装mongodb7.0.1 及 mongosh2.0.1

下载数据库并解压 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-7.0.1.tgz tar -zxf mongodb-linux-x86_64-rhel70-7.0.1.tgz #移动到/usr/local/mongo目录 mv mongodb-linux-x86_64-rhel70-7.0.1 /usr/local/mongodbmongosh 命令行下载 #下载命令行…...

c++ | makefile | 编译 | 链接库

简单记一下 看着人家总结的挺好的 点这...

n个骰子掷出m点的概率,C++实现

一.在骰子游戏中&#xff0c;我们会有猜点数的问题。我们该如何用算法来描述呢&#xff1f; 加入我们当前只有一个骰子&#xff0c;我们该如何算概率呢&#xff1f; 我们现在开始推导一下吧&#xff1a; 首先是一个骰子的情况&#xff0c;我们可以简单的知道n个骰子一共可以掷出…...

【JUC系列-08】深入理解CyclicBarrier底层原理和基本使用

JUC系列整体栏目 内容链接地址【一】深入理解JMM内存模型的底层实现原理https://zhenghuisheng.blog.csdn.net/article/details/132400429【二】深入理解CAS底层原理和基本使用https://blog.csdn.net/zhenghuishengq/article/details/132478786【三】熟练掌握Atomic原子系列基本…...

企业专线成本高?贝锐蒲公英轻松实现财务系统远程访问

在办公及信息系统领域&#xff0c;许多企业纷纷采用金蝶等财务管理软件来提升运营效率。以某食品制造企业为例&#xff0c;该企业总部位于广州&#xff0c;并拥有湖北仙桃工厂、广州从化工厂和湖南平江工厂三大生产基地。为提高管理效率&#xff0c;该企业在广州总部局域网内部…...

自学——网络安全——黑客技术

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01;&#xff01;&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队…...

k8s部署gin-vue-admin框架、gitlab-ci、jenkins pipeline 、CICD

测试环境使用的jenkins 正式环境使用的gitlab-ci 测试环境 创建yaml文件 apiVersion: v1 kind: ConfigMap metadata:name: dtk-go-tiktok-admin-configlabels:app.kubernetes.io/name: dtk-go-tiktok-adminapp.kubernetes.io/business: infrastructureapp.kubernetes.io/run…...

【SpringBoot项目】SpringBoot+MyBatis+MySQL电脑商城

在b站听了袁老师的开发课&#xff0c;做了一点笔记。 01-项目环境搭建_哔哩哔哩_bilibili 基于springboot框架的电脑商城项目&#xff08;一&#xff09;_springboot商城项目_失重外太空.的博客-CSDN博客 项目环境搭建 1.项目分析 1.项目功能&#xff1a;登录、注册、热销…...

互联网医院|互联网医院系统引领医疗科技新风潮

互联网的迅速发展已经改变了人们的生活方式&#xff0c;而医疗领域也不例外。近年来&#xff0c;互联网医院应运而生&#xff0c;为患者和医生提供了更便捷、高效的医疗服务。本文将深入探讨互联网医院的系统特点、功能以及未来的发展方向&#xff0c;为您展现医疗行业的新时代…...

Mock安装及应用

1、安装 npm install mockjs 2、Mock.Random属性 该属性是一个工具类&#xff0c;用于生成各种随机数据。它提供的方法如下&#xff1a; Basic: boolean,natural,integer,float,character,string,range,date,time,datetime,now; Image: image,dataImage; Color: color; Text: p…...

一起来看看UI设计流程详解吧!通俗易懂

UI设计2023 通俗易懂的UI设计流程详解 首先&#xff0c;大家要明确一下范围&#xff1a;一般分为新产品的从0-1和已有产品上新的模块或功能的从0-1&#xff0c;这两个方向的环节和产出物会有比较大的区别。其实在UI设计师介入之前&#xff0c;我们是需要去了解一些大的方向和…...

TikTok营销成功秘籍:ROI指标的黄金法则

在当今数字营销领域&#xff0c;TikTok已经崭露头角&#xff0c;成为了品牌和营销者们争相追逐的热门平台。 然而&#xff0c;要在TikTok上取得成功&#xff0c;不仅需要创意和内容&#xff0c;还需要精确的ROI&#xff08;投资回报率&#xff09;指标来衡量和优化你的营销策略…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...