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

VUE3-form表单保存附件与基本信息

element-ui代码

<el-dialog :title="上传附件" v-model="dialogAdds.visible" width="500px" append-to-body>

                <el-form-item label="唯一标识">

                    <dict-tag v-if="form.groupId" :options="unique_identification" :value="form.identification" />

                    <el-input v-else v-model="form.identification" disabled style="width:260px;" />

                </el-form-item>

                <el-form-item label="设备" prop="file">

                    <template #default>

                        <div>

                            <div>

                                <label for="fileUpload">

                                    <div class="lBut"><span>选择文件</span></div>

                                </label>

                                <div class="el-upload__tip text-red">允许上传.xls .xlsx</div>

                                <input id="fileUpload" type="file" style="display: none;" accept=".xls,.xlsx" @change="handleFileChange" />

                                <div class="el-upload__tip text-red" v-if="uploadFileName">{{ uploadFileName }}</div>

                            </div>

                        </div>

                    </template>

                </el-form-item>

            </el-form>

            <template #footer>

                <div class="dialog-footer">

                    <el-button :loading="buttonLoading" type="primary" @click="submitFormMul">确 定</el-button>

                    <el-button @click="cancelAdds">取 消</el-button>

                </div>

            </template>

        </el-dialog>

js代码

<script setup lang="ts">

import axios from 'axios';

const dialogAdds = reactive<DialogOption>({

    visible: false,

    title: ''

});

// 文件上传

const handleFileChange = (event:any) => {

    if(event.target.files[0].size > 1024*1024*40){

        return proxy?.$modal.msgSuccess("上传文件不能大于40M");

    }

    // 附件名称

    uploadFileName.value=event.target.files[0].name;

    form.value.file= event.target.files[0];

}

// 保存操作

const submitFormMul = ()=>{

    deviceFormRef.value?.validate(async (valid: boolean) => {

        if (valid) {

            buttonLoading.value = true;

            const result=await axios.post(import.meta.env.VITE_APP_BASE_API+'/device/device/deviceImportByExcel', form.value, {

                headers: {

                    'Content-Type': 'multipart/form-data',

                },

            });

            if(result.data.code==601){

                proxy?.$modal.alertErrorTitle(result.data.data,"导入错误提示");

            }

            // 重置

            uploadFileName.value='';

            dialogAdds.visible = false;

            buttonLoading.value = false;

        }

    });

}

</script>

style样式

<style>

.lBut{

        width: 87px;

        height: 32px;

        font-size: 14px;

        line-height: 1.15;

        display: flex;

        justify-content: center;

        align-items: center;

        border-radius: 4px;

        padding: 8px 10px;

        margin-left: 2px;

        transition: all 0.5s;

        white-space: nowrap;

        background-color: #409eff;

        color: white;

        border: 1px solid #409eff;

    }

</style>

结果展示

相关文章:

VUE3-form表单保存附件与基本信息

element-ui代码 <el-dialog :title"上传附件" v-model"dialogAdds.visible" width"500px" append-to-body> <el-form-item label"唯一标识"> <dict-tag v-if"form.groupId" :options"unique_identifica…...

无线网络安全技术基础

无线网络安全技术基础 无线网络安全风险和隐患 随着无线网络技术广泛应用,其安全性越来越引起关注.无线网络的安全主要有访问控制和数据加密,访问控制保证机密数据只能由授权用户访问,而数据加密则要求发送的数据只能被授权用户所接受和使用。 无线网络在数据传输时以微波进…...

sheng的学习笔记-docker部署Greenplum

目录 docker安装gp数据库 mac版本 搭建gp数据库 连接数据库 windows版本 搭建gp数据库 连接数据库 docker安装gp数据库 mac版本 搭建gp数据库 打开终端&#xff0c;输入代码&#xff0c;查看版本 ocker search greenplum docker pull projectairws/greenplum docker…...

【投稿资讯】区块链会议CCF A -- SP 2025 截止6.6、11.14 附录用率

会议名称&#xff1a;46th IEEE Symposium on Security and Privacy( S&P&#xff09; CCF等级&#xff1a;CCF A类学术会议 类别&#xff1a;网络与信息安全 录用率&#xff1a;2023年 195/1147&#xff0c;2024年录用了17篇和区块链相关的论文 Topics of interest inc…...

C++哪些函数不能被声明为虚函数

在C中&#xff0c;某些函数不能被声明为虚函数。下面详细解释哪些函数不能被声明为虚函数&#xff0c;并通过代码示例进行说明。 C哪些函数不能被声明为虚函数 不能声明为虚函数的函数示例代码及解释一、构造函数不能是虚函数二、静态成员函数不能是虚函数三、友元函数不能是虚…...

vue中数据已经改变了,但是table里面内容没更新渲染!

解决方案&#xff1a; 给table或者el-table标签上添加一个动态key值&#xff0c;只要数据发生改变&#xff0c;key值变动一下即可 标签上&#xff1a; :key“timeStamp” 初始data&#xff1a;timeStamp:0, 更新数据&#xff1a;this.timeStamp 这样每次更新数据&#xff…...

头歌实践教学平台:Junit实训入门篇

第2关&#xff1a;Junit注解 任务描述 给出一个带有注解的Junit代码及其代码打印输出&#xff0c;要求学员修改注解位置&#xff0c;让输出结果变为逆序。 相关知识 Junit注解 Java注解&#xff08;(Annotation&#xff09;的使用方法是" 注解名" 。借助注解&a…...

matlab使用教程(80)—修改图形对象的透明度

1.更改图像、填充或曲面的透明度 此示例说明如何修改图像、填充或曲面的透明度。 1.1坐标区框中所有对象的透明度 透明度值称为 alpha 值。使用 alpha 函数设置当前坐标区范围内所有图像、填充或曲面对象的透明度。指定一个介于 0&#xff08;完全透明&#xff09;和 1&#x…...

mysql bin 日志转成sql

首先确定mysql binlog 服务开启 SHOW VARIABLES LIKE log_bin; 找到binlog日志 find / -name mysql-bin.* -type f 下载下来 本地找到mysql安装位置的bin目录 在窗口路径处直接输入cmd 执行 mysqlbinlog --no-defaults --base64-outputdecode-rows -v --start-datetime&…...

河南道路与桥梁乙级资质申请:注册证书与职称证书准备

在河南道路与桥梁乙级资质申请中&#xff0c;注册证书与职称证书的准备是不可或缺的环节。以下是关于如何准备这些证书的一些关键步骤和要点&#xff1a; 明确所需证书类型&#xff1a; 注册证书&#xff1a;这通常指的是相关专业的注册工程师证书&#xff0c;如注册土木工程师…...

3D工业视觉

前言 本文主要介绍3D视觉技术、工业领域的应用、市场格局等&#xff0c;主要技术包括激光三角测量、结构光、ToF、立体视觉。 一、核心内容 3D视觉技术满足工业领域更高精度、更高速度、更柔性化的需求&#xff0c;扩大工业自动化的场景。 2D视觉技术基于物体平面轮廓&#…...

使用auth_basic模块进行基础认证

在建立和维护Web服务器时&#xff0c;身份认证是一个至关重要的环节。Nginx作为一个高性能的Web服务器&#xff0c;支持许多认证方法&#xff0c;其中较为简单和常用的一种即是基础身份认证&#xff08;Basic Authentication&#xff09;&#xff0c;这需要借助auth_basic模块实…...

深度解析物联网平台:优化数据点位管理的实战策略

策略管理 策略&#xff0c;作为在物联网平台数据点位创建过程中可设定的规则&#xff0c;涵盖了多个重要方面&#xff0c;策略是在创建点位的时候&#xff0c;可以设置的规则&#xff0c;包括存储策略、告警策略、通知策略以及联动策略。这些策略都是通过专门的列表页面进行集…...

Spring常见问题

如何理解spring属于低侵入式设计&#xff1f; 在代码中不需要写明具体依赖对象&#xff0c;在运行时进行自动注入&#xff0c;降低了组件的耦合依赖的是接口&#xff0c;而接口的实现类具有拓展性 Spring IOC 实现了什么功能&#xff0c;谈谈你对IOC的理解。 负责创建对象&…...

MiniMax Golang2轮面试,期望薪资25K

一面 1、自我介绍 2、简单介绍一下你们成立了这个finance的财务中台之后&#xff0c;整体的服务架构是怎么样的吗&#xff1f; 3、就你提到的预算池项目&#xff0c;展开说说背景&#xff0c;以及解决了怎么样的问题&#xff1f; 4、为什么采用针对T-1订单的异步计算方案&a…...

MyBatis系统学习篇 - MyBatis的缓存

MyBatis的缓存实现原理主要基于三级缓存机制&#xff0c;包括一级缓存&#xff08;本地缓存&#xff09;、二级缓存&#xff08;全局缓存&#xff09;和三级缓存&#xff08;跨会话缓存&#xff09;。这个缓存在我们实际开发中可以避免我们查询重复的数据&#xff0c;在一定程度…...

K-means聚类模型

目录 1.定义 2.K-means聚类模型的优点 3.K-means聚类模型的缺点 4.K-means聚类模型的应用场景 5.对K-means聚类模型未来的展望 6.小结 1.定义 什么是 K-means 聚类模型&#xff1f;K-means 聚类模型是一种无监督学习算法&#xff0c;用于将数据划分为不同的组或簇&#…...

免费分享一套微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端) Java毕业设计…...

Matlab 2023b学习笔记1——界面认识

下载安装好Matlab后&#xff0c;可以看到如下界面&#xff1a; 可以看到&#xff0c;这时只有命令行窗口。我们在上方工具栏中选择“布局”—— “默认”&#xff0c;即可看到左右两边多出来了“当前文件夹”与“工作区”两栏。 一、当前文件夹界面 这个界面显示的是当前目录下…...

C++ sort排序的总和应用题

第1题 sort排序1 时限&#xff1a;1s 空间&#xff1a;256m 输入n个数&#xff0c;将这n个数从小到大排序&#xff0c;输出。 输入格式 第1行&#xff0c;一个正整数n&#xff08;n<100&#xff09; 第2行&#xff0c;n个正整数&#xff0c;小于100 输出格式 n个整…...

保姆级教程:用Python+OpenCV搞定汽车360全景拼接(附C++移植思路)

从零构建汽车360全景系统&#xff1a;PythonOpenCV实战与C工程化指南 当你第一次坐上驾驶座&#xff0c;启动车辆时&#xff0c;中控屏上突然展现出车辆周围无死角的鸟瞰视图——这就是现代汽车360全景系统带来的神奇体验。作为提升驾驶安全性和便利性的关键技术&#xff0c;它…...

网页资源下载革新工具:ResourcesSaverExt高效使用指南

网页资源下载革新工具&#xff1a;ResourcesSaverExt高效使用指南 【免费下载链接】ResourcesSaverExt Chrome Extension for one click downloading all resources files and keeping folder structures. 项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt …...

KityMinder:可视化思维的协作引擎 | 高效工作者必备工具

KityMinder&#xff1a;可视化思维的协作引擎 | 高效工作者必备工具 【免费下载链接】kityminder 百度脑图 项目地址: https://gitcode.com/gh_mirrors/ki/kityminder 在信息爆炸的时代&#xff0c;如何将零散的想法系统化、复杂的项目结构化&#xff1f;作为一款开源免…...

Matlab_Simulink与Carsim的联合仿 擅长基于群智能算法优化的LQR、PID控制算法,能清晰讲解其中要点哦。对于基于群智能算法的一般路径规划

Matlab/Simulink与Carsim的联合仿 擅长基于群智能算法优化的LQR、PID控制算法&#xff0c;能清晰讲解其中要点哦。对于基于群智能算法的一般路径规划 稍长智能车轨迹跟踪控制方向 熟悉Matlab/Simulink和Carsim的联合仿真呢。这是一个非常专业且热门的研究方向&#xff08;群智能…...

Zotero Actions Tags:自动化文献管理,告别手动标签整理

Zotero Actions & Tags&#xff1a;自动化文献管理&#xff0c;告别手动标签整理 【免费下载链接】zotero-actions-tags Customize your Zotero workflow. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-actions-tags 你是否还在为Zotero文献库中杂乱无章的标…...

Windows上Rust报错找不到link.exe?别急着装VS,试试这几种更轻量的解决方案

Windows上Rust报错找不到link.exe&#xff1f;别急着装VS&#xff0c;试试这几种更轻量的解决方案 刚接触Rust的Windows开发者经常会遇到一个经典问题&#xff1a;运行cargo build时出现link.exe not found报错。传统解决方案是安装庞大的Visual Studio&#xff0c;但这对于只…...

从SENet到KAN卷积:一文搞懂注意力机制如何从‘加权’进化到‘学习’(附演进路线图)

注意力机制的进化图谱&#xff1a;从SENet到KAN卷积的技术跃迁 在计算机视觉领域&#xff0c;注意力机制已成为提升模型性能的关键技术。本文将带您深入探索注意力机制从早期通道注意力到最新动态结构学习的完整演进历程&#xff0c;揭示这一技术如何从简单的特征重标定发展为能…...

惊艳展示:MedGemma医学影像分析系统,自然语言提问生成专业报告

惊艳展示&#xff1a;MedGemma医学影像分析系统&#xff0c;自然语言提问生成专业报告 1. 引言&#xff1a;当AI能“看懂”医学影像&#xff0c;并“说”出专业见解 想象一下&#xff0c;你手里有一张肺部X光片&#xff0c;但你不是放射科医生。你看着那些黑白影像和复杂的结…...

MySQL(4):事务+视图+触发器+索引+三大范式+数据库优化+数据的导入导出

文章目录一、事务二、视图三、触发器四、索引五、关系型数据库三大范式六、Mysql数据库的优化七、数据的导入和导出一、事务 1.什么是事物&#xff1f; 将一组增删改查看成一个执行单元&#xff0c;要么全成功&#xff0c;要么有一个失败&#xff0c;数据库就会回滚&#xff…...

魔兽地图跨版本转换与优化全指南:从兼容性处理到地图性能提升

魔兽地图跨版本转换与优化全指南&#xff1a;从兼容性处理到地图性能提升 【免费下载链接】w3x2lni 魔兽地图格式转换工具 项目地址: https://gitcode.com/gh_mirrors/w3/w3x2lni 在魔兽争霸III的地图开发领域&#xff0c;版本兼容性始终是开发者面临的核心挑战。不同游…...