在 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")
}
属性
属性 | 类型 | 说明 |
---|---|---|
serve | String 或 Function | 请求地址或请求方法或枚举类型,请求方法可以是api中的,必须是Function: () => Promise格式 |
id | String | 请求后的数据列表字段,用于匹配那一条数据 |
label | String | 请求后的数据列表字段,用于自动格式化字段 |
method | String | 请求方式,默认get |
dataField | String | 请求后的data字段,默认data |
isEnum | Boolean | 是否枚举,开启将请求后端枚举 |
isDict | Boolean | 是否字典,开启将请求后端字典 |
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 项目中添加字典翻译工具(二)
封装字段翻译组件,可以格式化字典、枚举、字段 优点: 使用简单,一次配置多次使用,缓存降低后端请求次数,扩展性强 没有缓存时造成单页面多次请求解决方法:axios添加缓存请求,防止多次请求&#…...

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

this关键字
作用:出现在成员方法,构造器中代表当前对象的地址,用于访问当前对象的成员变量、成员方法。this出现在 有参数构造器 中的用法 (this.成员变量 局部变量)this出现在 成员方法 中的用法 (this…...

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

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

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

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

网络安全(黑客技术)自学内容
前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防…...
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++实现
一.在骰子游戏中,我们会有猜点数的问题。我们该如何用算法来描述呢? 加入我们当前只有一个骰子,我们该如何算概率呢? 我们现在开始推导一下吧: 首先是一个骰子的情况,我们可以简单的知道n个骰子一共可以掷出…...

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

企业专线成本高?贝锐蒲公英轻松实现财务系统远程访问
在办公及信息系统领域,许多企业纷纷采用金蝶等财务管理软件来提升运营效率。以某食品制造企业为例,该企业总部位于广州,并拥有湖北仙桃工厂、广州从化工厂和湖南平江工厂三大生产基地。为提高管理效率,该企业在广州总部局域网内部…...

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

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站听了袁老师的开发课,做了一点笔记。 01-项目环境搭建_哔哩哔哩_bilibili 基于springboot框架的电脑商城项目(一)_springboot商城项目_失重外太空.的博客-CSDN博客 项目环境搭建 1.项目分析 1.项目功能:登录、注册、热销…...

互联网医院|互联网医院系统引领医疗科技新风潮
互联网的迅速发展已经改变了人们的生活方式,而医疗领域也不例外。近年来,互联网医院应运而生,为患者和医生提供了更便捷、高效的医疗服务。本文将深入探讨互联网医院的系统特点、功能以及未来的发展方向,为您展现医疗行业的新时代…...
Mock安装及应用
1、安装 npm install mockjs 2、Mock.Random属性 该属性是一个工具类,用于生成各种随机数据。它提供的方法如下: Basic: boolean,natural,integer,float,character,string,range,date,time,datetime,now; Image: image,dataImage; Color: color; Text: p…...
一起来看看UI设计流程详解吧!通俗易懂
UI设计2023 通俗易懂的UI设计流程详解 首先,大家要明确一下范围:一般分为新产品的从0-1和已有产品上新的模块或功能的从0-1,这两个方向的环节和产出物会有比较大的区别。其实在UI设计师介入之前,我们是需要去了解一些大的方向和…...

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

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,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; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 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"…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...

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