当前位置: 首页 > 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;…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...