在 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>
默认插槽

用以自定义追加数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/90058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

泛函分析(一)

目录 1.数学基本概念 2.泛函概念和应用 2.1常用知识点 2.2泛函数解决的问题 2.3核函数 3.应用 参考文献 1.数学基本概念 2.泛函概念和应用 2.1常用知识点 算子&#xff1a;无限维空间到无限维空间的变换称为。泛函数&#xff1a;就是函数的函数&#xff0c;即一般函数自…

掌握Go的运行时:从编译到执行

目录 一、Go运行编译简介Go语言的目标和设计哲学运行时环境编译过程小结 二、执行环境操作系统与硬件层系统调用&#xff08;Syscalls&#xff09;虚拟内存 Go运行时&#xff08;Runtime&#xff09;Goroutine调度器内存管理和垃圾收集网络I/O代码示例&#xff1a;Go运行时调度…

【Git】轻松学会 Git(一):掌握 Git 的基本操作

文章目录 前言一、创建 Git 本地仓库1.1 什么是仓库1.2 创建本地仓库1.3 .git 目录结构 二、配置 Git三、认识 Git 的工作区、暂存区和版本库3.1 什么是 Git 的工作区、暂存区和版本库3.2 工作区、暂存区和版本库之间的关系 四、添加文件4.1 添加文件到暂存区和版本库中的命令4…

PHP 变动:用于创建常量数组的 define() 与 const

文章目录 参考环境常量数组不可变性版本限制 constdefine()构造大小写不敏感的常量$case_insensitive 参数PHP7.3PHP8 若 define() 在不支持常量数组的版本中运行 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTPHP 手册PHP Man…

VS2022创建控制台应用程序后没有Main了,如何显示Main?

文章目录 问题描述原因解决方案简单的顶级语句试用计算器 其他文章 问题描述 用VS2022创建一个控制台应用后&#xff0c;没有名称空间和Main函数了&#xff0c;只有一个WriteLine&#xff0c;如下所示。 // See https://aka.ms/new-console-template for more information Co…

使用cpolar端口映射的方法轻松实现在Linux环境下SVN服务器的搭建与公网访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

家居服务小程序发展指南

随着互联网的快速发展&#xff0c;越来越多的企业开始关注并投资于线上平台的建设&#xff0c;以满足用户的多样化需求。家居服务行业也不例外&#xff0c;通过打造小程序平台&#xff0c;可以更好地服务用户&#xff0c;提供更便捷的家居服务体验。 首先&#xff0c;我们可以选…

部署和使用dinky问题总结

flink1.16 dinky&#xff08;dlink&#xff09;0.7.4 官方部署文档&#xff1a;http://www.dlink.top/docs/0.7/deploy_guide/build/ github部署文档&#xff1a;https://github.com/DataLinkDC/dinky/blob/v0.7.4/docs/docs/deploy_guide/deploy.md github issues&#xff1a;…

基于SpringBoot+Bootstrap的旅游管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 登录模块的实现 景点信息管理界面 订票信息管理界面 用户评价管理界面 用户管理界面 景点资讯界面 系统主界面 用户注册界面 景点信息详情界面 订票信息界面 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言…

【pytest】 allure 生成报告

1. 下载地址 官方文档; Allure Framework 参考文档&#xff1a; 最全的PytestAllure使用教程&#xff0c;建议收藏 - 知乎 https://github.com/allure-framework 1.2安装Python依赖 windows&#xff1a;pip install allure-pytest 2. 脚本 用例 import pytest class …

Socks5代理、IP代理与其在爬虫开发中的应用

在当今数字化时代&#xff0c;网络安全和数据获取变得愈发重要。代理服务器作为一种关键的技术手段&#xff0c;为网络工程师和爬虫开发人员提供了有力的工具。本文将深入探讨Socks5代理、IP代理以及它们在网络安全和爬虫应用中的角色与意义。 1. 代理服务器简介 代理服务器是…

PHP开发框架及特点

PHP有许多开发框架&#xff0c;每个框架都有其独特的特点和用途。以下是一些常见的PHP开发框架以及它们的特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Laravel Laravel是一个流行的PHP框架…

XML文件反序列化读取

原始XML文件 <?xml version"1.0" encoding"utf-8" ?> <School headmaster"王校长"><Grade grade"12" teacher"张老师"><Student name"小米" age"18"/><Student name&quo…

【Spatial-Temporal Action Localization(六)】论文阅读2021年

文章目录 1. MultiSports: A Multi-Person Video Dataset of Spatio-Temporally Localized Sports Actions摘要和结论引言&#xff1a;针对痛点和贡献数据特点 2. Actor-Context-Actor Relation Network for Spatio-Temporal Action Localization摘要和结论引言&#xff1a;针对…

视频监控平台客户端开发记录

效果图 所用到的核心技术 QT信号槽机制;布局器;QStylesheet;QStackedWidget;QTreeView;QTableView;QNetworkAccessManager;Tr();QT信号槽机制 信号槽机制是QT的精华,主要解决UI界面中事件与事件响应的关联关系。QT将界面的操作(如点击按钮、拖动窗口等)定义为信号,…

语音助手开发小记(2023.9.25)

通道问题 在使用函数swr_alloc_set_opts给SwrContext传递输入输出的音频参数时&#xff0c;需要设置通道&#xff0c;这里通道为2&#xff0c;但是通道布局不能传递2.比如AV_CH_LAYOUT_STEREO 实际值为3 如果要计算通道布局的通道数使用函数av_get_channel_layout_nb_channels…

如何管理好公司的公海客户呢?

销售周期比较长&#xff0c;线索处理比较繁琐&#xff0c;想知道用哪些系统可解决这一问题&#xff1f; 很简单&#xff0c;针对客户管理繁杂&#xff0c;线索复杂的问题&#xff0c;crm系统中的公海池就可以轻松解决。 接下来我将以简道云为例为大家进行详细的公海池介绍 ht…

深度学习-Python调用ONNX模型

目录 ONNX模型使用流程 获取ONNX模型方法 使用ONNX模型 手动编写ONNX模型 Python调用ONNX模型 常见错误 错误raise ValueError...&#xff1a; 错误&#xff1a;Load model model.onnx failed 错误&#xff1a;CUDAExecutionProvider is not in available provider 错…

TouchGFX界面开发 | 项目代码结构分析

项目代码结构分析 本文介绍TouchGFX项目中TouchGFX Designer自动生成的代码&#xff0c;以及需要用户编写的扩展代码。 一、生成的代码和用户代码 TouchGFX Designer生成的代码将与用户编写的代码完全分离。 事实上&#xff0c;自动生成的代码位于generated/gui_generated文…