1.vform的使用与传值

使用动态表单,把当前的用户名传值进动态表单,另外动态表单的上传组件成功后传值会父组件。
在父组件的加载函数中增加:

mounted(){this.$refs.vFormRef.addEC("getuploadfile",this);},

该方法为给表单加载外部组件。如下:
现在我们到表单设置的页面中
在这里插入图片描述

在这里插入图片描述

const getatt=this.getFormRef().getEC("getuploadfile");
const info=getatt.getuserinfo();
this.getWidgetRef("name",showError=true).setValue(info)

该语句的含义为,先获取外部组件,然后调用外部组件的方法。

this.getWidgetRef(“name”,showError=true).setValue(info)中的name是组件的名,见图。
在这里插入图片描述
然后,再看上传组件的方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

this.getWidgetRef("table_id",showError=true).setValue(result.msg)
const getatt=this.getFormRef().getEC("getuploadfile");
getatt.getattlist(result.msg)

在这里插入图片描述

含义为上传文件成功为调用父组件的getattlist()方法

getattlist(param){this.tableId=paramthis.attqueryParams.tableId=paramlistAttendance(this.attqueryParams).then(res => {res.rows.forEach(item=>item.savebtn=1);this.attendanceList = res.rows;this.total = res.total;});},

通过this.$refs.vFormRef.addEC(“name”,this);方法给父组件定义一个名称;
表单内部使用this.getFormRef().getEC(“name”)可以获取到这个父组件。进而可以调用父组件的所有方法。

2.el-table中的行动态改变样式

查询资料使用 :row-class-name="函数"这个方法来动态改变样式。
代码片段如下:

<el-table  :data="attendanceList"  :row-class-name="rowStyle" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave" ><el-table-column type="selection" width="55" align="center"  />

在组件的方法中定义rowStyle

rowStyle({row, rowIndex}){const date=new Date();date.setDate(date.getDate()-15)if(new Date(row.entryTime)>date){return 'success__class';}else if(new Date(row.leaveDate)>date){return 'error__class';}if(row.remark !=''){}return '';},

避坑

需要定义success__class和error__class的样式

.el-table .success__class{color:white;background-color:red;}.el-table .error__class{text-decoration: line-through;background-color:grey}

本来写到了使用el-table的父组件中的样式表中,结果样式不发生变化,从浏览器里面调试查看 table tr 的class中已经根据条件出现了success__class和error__class,但样式没有变化!!
几经排查发现,主要是因为父组件中的

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css

我们把success__class和error__class的样式写到/assets/styles/index.scss中,保存即可生效。

3.静态资料下载

想法把系统说明书放到前端中,直接使用URL下载,
在这里插入图片描述
前端页面代码如:

<p><i class="el-icon-shopping-bag-2"></i> 生产运营流程帮助文档下载:<a style="color: #365be4" href="/static/doc/用户手册-生产运营.docx" target="_blank">点我下载</a></p>

避坑

尝试把《用户手册-生产运营.docx》放到ruoyi-ui/src/assets/doc/中,doc文件夹是新建,结果测试无法下载,查询资料,需要把《用户手册-生产运营.docx》放到ruoyi-ui/public/static/doc/中,测试成功。
打包之后/public/static/doc目录一样存在。部署测试下载说明书成功!!
特此记录上述三点。

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

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

相关文章

Apifox 8 月更新|新增测试用例、支持自定义请求示例代码、提升导入/导出 OpenAPI/Swagger 数据的兼容性

Apifox 作为全能 API 工具&#xff0c;正以迅猛之势革新开发者的工作方式&#xff01;想象一下&#xff0c;您正为测试用例编写头疼&#xff0c;或因 OpenAPI 文件导入失败而延误项目&#xff0c;而 Apifox 8 月更新却带来“救命稻草”&#xff1a;新增测试用例功能、自定义请求…

多机多卡微调流程

多机多卡&#xff08;Distributed Training&#xff09;微调大模型是一项复杂但非常高效的任务。它允许你利用多台机器的计算资源来训练一个模型&#xff0c;从而显著缩短训练时间。 多机多卡微调核心流程 整个流程可以概括为以下几个核心步骤&#xff1a; 环境准备与硬件配置 …

Redis(23) RDB和AOF有什么区别?

Redis 的 RDB&#xff08;Redis Database&#xff09;和 AOF&#xff08;Append-Only File&#xff09;是两种主要的持久化机制。每种机制都有其独特的工作方式、优缺点和适用场景。以下是两者的详细比较&#xff0c;并结合代码示例进行解释。 RDB&#xff08;Redis Database&a…

在WSL2 Ubuntu中部署FastDFS服务的完整指南

在WSL2 Ubuntu中部署FastDFS服务的完整指南&#x1f4d6; 前言&#x1f6e0;️ 环境准备1. 系统要求2. Ubuntu应用&#x1f680; 安装服务1. 更新系统2. 安装编译依赖3. 下载源码4. 编译安装&#x1f527; 配置服务1. 设置配置文件2. 创建数据目录3. 配置Tracker服务4. 配置Sto…

新手向:网络编程完全指南

1. 引言&#xff1a;什么是网络编程&#xff1f;网络编程&#xff08;Network Programming&#xff09;是指利用计算机网络实现程序间通信的技术。它构建在计算机网络协议基础上&#xff0c;通过编程实现不同设备间的数据交换与资源共享。从底层协议实现到高层应用开发&#xf…

阿里云——云存储与数据库服务

云存储与数据库服务 数据是数字时代的新石油&#xff0c;而存储与数据库服务就是保存和提炼这些石油的“油库与炼油厂”。阿里云提供了从对象、块、文件存储到关系型、NoSQL、数据仓库的全方位数据服务。本章将帮你构建一套清晰的数据存储选型框架&#xff0c;并掌握核心服务的…

浏览器网页路径扫描器(脚本)

使用网页路径扫描器可以扫描网页的路径&#xff0c;一些工具如ffuf为在命令行上操作&#xff0c;比较不便&#xff0c;而其他资源不好找到 Website path scanner(Script-tampermonkey) 脚本发布在GitHub&#xff0c;本文章也关联文件资源 GitHub:Website path scanner(Script-…

实战原型模式案例

作者&#xff1a;小凯 分享、让自己和他人都能有所收获&#xff01;&#x1f604; 一、前言 老板你加钱我的代码能飞 程序员这份工作里有两种人&#xff1b;一类是热爱喜欢的、一类是仅当成工作的。而喜欢代码编程的这部分人会极其主动学习去丰富自己的羽翼&#xff0c;也非常喜…

微信小程序餐饮扫码点餐小程序堂食外卖桌台自助下单源码

功能说明&#xff1a;商家助手APP、接单更方便前端页面模版随意挑选&#xff0c;可diy精装设计线下买单餐桌点餐快速下单会员管理订单管理优惠券核销叫号取餐排队叫号商品管理桌位管理数据统计售后订单配送设置推广码硬件设备一、技术架构&#xff1a;PHPUniApp构建高性价比系统…

Linux应用软件编程---网络编程(TCP并发服务器构建:[ 多进程、多线程、select ])

TCP并发服务器构建一、服务器单循环服务器&#xff1a;服务端同一时刻只能处理一个客户端的任务&#xff08;TCP&#xff09;并发服务器&#xff1a;服务端同一时刻可以处理多个客户端的任务&#xff08;UDP&#xff09;二、TCP服务端并发模型1、多进程进程资源开销大&#xff…

重构审计体验!批量生成报表项目底稿的凭证检查表

在审计工作中&#xff0c;我们通过序时账或其他审计软件筛选导出的凭证列表&#xff0c;要如何快速分发给各个报表项目底稿的凭证检查表呢&#xff1f; “TB工具箱2025”正式上线“批量生成凭证表”的功能&#xff0c;通过一些巧妙的设计&#xff0c;使其具备高度的通用性&…

【c++进阶系列】:万字详解二叉搜索树(附源码实现)

&#x1f525; 本文专栏&#xff1a;c &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 你可以走得慢&#xff0c;但别回头 1.概念 二叉搜索树&#xff0c;从其名字我们就能知道该数据结构是一个特殊的二叉树&#xff0c;而二…

通过web服务做横向移动

环境配置边缘主机(win10)&#xff1a;192.168.237.140 10.10.90.128内网主机(win7)&#xff1a;10.10.90.129 web服务 -- upload-labs攻击机&#xff1a;vps&#xff08;120.26.114.196&#xff09;windows10windows7假设已经拿下边缘主机win10&#xff0c;vshell上线ipconfig查…

把CentOS 7默认yum源改成腾讯云镜像

步骤计划&#xff1a; 备份原有CentOS-Base.repo文件&#xff0c;防止配置出错可恢复 下载腾讯云提供的CentOS 7镜像源配置文件&#xff08;对应CentOS-Base.repo&#xff09; 清理并生成yum缓存&#xff0c;使新源生效 具体命令 # 备份原有源 sudo mv /etc/yum.repos.d/C…

欧盟《人工智能法案》生效一年主要实施进展概览(二)

文章目录前言三、《关于禁止的人工智能实践指南》1. 整体适用2. 禁止的人工智能系统具体介绍&#xff08;1&#xff09;有害操纵和欺骗类及对脆弱性的有害利用类&#xff08;2&#xff09;社会评分类&#xff08;3&#xff09;个人刑事犯罪风险评估和预测类&#xff08;4&#…

私域电商新范式:开源AI智能名片链动2+1模式S2B2C商城小程序赋能传统行业流量转化

摘要&#xff1a;本文聚焦私域电商领域&#xff0c;指出其并非仅局限于快消品等传统电商行业&#xff0c;多数传统行业同样面临私域流量利用难题。传统行业手握私域流量或优质流量入口&#xff0c;却不知如何有效转化&#xff0c;陷入流量焦虑。在此背景下&#xff0c;开源AI智…

Axios 整理常用形式及涉及的参数

一、axios get请求 //形如 axios.get(url[, config]).then(response > {// 处理响应}).catch(error > {// 处理错误}); //无 config 的情况下&#xff0c; axios.get(https://api.example.com/data).then(response > {// 处理响应}) .catch(error > {// 处理错误})…

深度学习---卷积神经网络CNN

卷积神经网络CNN&#xff08;Convolutional Neural Networks&#xff09;一、图像原理图像在计算机中是一堆按顺序排列的数字&#xff0c;数值为0到255。0表示最暗&#xff0c;255表示最亮。上图是只有黑白颜色的灰度图&#xff0c;而更普遍的图片表达方式是RGB颜色模型&#x…

日志输出触发的死锁问题排查记录

现象描述 错误日志&#xff1a; Found one Java-level deadlock:"http-nio-8083-exec-106":waiting for ownable synchronizer 0x00000005cbfa6b90, (a java.util.concurrent.locks.ReentrantLock$NonfairSync),which is held by "http-nio-8083-exec-10" …

UNIX网络编程笔记:高级套接字编程20-25

广播通信&#xff1a;局域网内的高效信息传播 在局域网通信场景中&#xff0c;广播是一种高效的一对多信息传播方式 。它无需为每个接收者单独建立连接&#xff0c;能一次性将消息送达网段内所有目标&#xff0c;广泛应用于服务发现、网络通知等场景。以下从基础原理到实践应用…