vue2+springboot实现表单弹窗的跳转并回显数据

最新推荐文章于 2024-04-19 19:08:55 发布
最新推荐文章于 2024-04-19 19:08:55 发布
阅读量2.5k 收藏 10
点赞数 3
文章标签： javascript css vue.js html ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53952829/article/details/131126656
版权

运行效果如下

本篇内容仅展示前端代码

点击此图标跳转表单弹窗，该页面实现代码：vue2+springboot实现el-tree的分页查询、模糊查询_weixin_53952829的博客-CSDN博客

表单弹窗

html代码

el-dialog对话框嵌套表单

 

 <!--修改成员信息弹窗 start-->
        <el-dialog title="修改成员信息" :visible.sync="dialogVisible3" :before-close="handleClose3">
            <el-form
                class="d-ruleForm3"
                :model="ruleForm3"
                :rules="rules3"
                ref="ruleForm3"
                label-width="130px"
                size="mini"
            >
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="ruleForm3.realname"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm3.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm3.phone"></el-input>
                </el-form-item>
                <el-form-item label="部门名" prop="deptName">
                    <el-select
                        v-model="ruleForm3.deptName"
                        placeholder="请选择部门"
                        @change="selectChanged"
                    >
                        <el-option
                            v-for="item in dn"
                            :value="item.id"
                            :key="item.id"
                            :label="item.deptName"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位名" prop="positionName">
                    <el-select
                        v-model="ruleForm3.positionName"
                        placeholder="请选择职位"
                        @change="selectChanged1"
                    >
                        <el-option
                            v-for="item in pn"
                            :value="item.id"
                            :key="item.id"
                            :label="item.positionName"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="ruleForm3.gender" placeholder="请选择性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="就职状态" prop="status">
                    <el-select v-model="ruleForm3.status" placeholder="请选择状态">
                        <el-option label="在职" value="1"></el-option>
                        <el-option label="离职" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号状态" prop="accountStatus">
                    <el-select v-model="ruleForm3.accountStatus" placeholder="请选择账号状态">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="注销" value="0"></el-option>
                        <el-option label="冻结" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职时间" prop="entryTime">
                    <el-date-picker
                        v-model="ruleForm3.entryTime"
                        type="datetime"
                        placeholder="选择日期时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="离职时间" prop="leaveTime">
                    <el-date-picker
                        v-model="ruleForm3.leaveTime"
                        type="datetime"
                        placeholder="选择日期时间"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose3">取 消</el-button>
                <el-button type="primary" @click="confirmClick3('ruleForm3')">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改成员信息弹窗 end-->

JS代码 

回显数据的实现在checkMemberDialog(data)方法里

获取下拉列表选择的值使用change事件实现

    data() {
        const data = [];
        return {
            dialogVisible3: false, //修改成员信息弹窗
            //修改成员信息表单数据
            ruleForm3: {
                realname: '',
                email: '',
                phone: '',
                deptName: '',
                positionName: '',
                gender: '',
                status: '',
                accountStatus: '',
                entryTime: '',
                leaveTime: '',
            },
            //修改成员信息表单校验规则
            rules3: {},
            data: JSON.parse(JSON.stringify(data)),
            parentId: '',
            deptId: '',
            dept1: '', //成员弹窗获取部门名的deptId
            dept2: '', //成员弹窗获取部门名的deptName
            position1: '', //成员弹窗获取部门名的positionId
            position2: '', //成员弹窗获取部门名的positionName
            userId: '', //修改成员弹窗时获取userId
            id: '',
            dn: [], //列表数据，将后台获取到的部门名信息数据渲染到添加成员弹窗的部门名框
            pn: [], //列表数据，将后台获取到的职位名信息数据渲染到添加成员弹窗的部门名框
        };
    },
    methods: {
        //获取部门名列表
        getDeptNameList() {
            common.getDeptName().then((res) => {
                // console.log('res', res.data.data);
                if (res.code === 200) {
                    this.dn = res.data.data;
                }
            });
        },
        //change事件选中获取整个deptName对象
        selectChanged(val) {
            //选中的数据和options进行匹配
            var obj = {};
            obj = this.dn.find(function (i) {
                return i.id === val;
            }); //在change中获取到整条对象数据
            // console.log(obj.id);
            // console.log(obj.deptName);
            this.dept1 = obj.id;
            this.dept2 = obj.deptName;
        },
        //获取职位名列表
        getPositionNameList() {
            common.getPositionName().then((res) => {
                // console.log('res', res.data.data);
                if (res.code === 200) {
                    this.pn = res.data.data;
                }
            });
        },
        //change事件选中获取整个positionName对象
        selectChanged1(val) {
            //选中的数据和options进行匹配
            var obj1 = {};
            obj1 = this.pn.find(function (j) {
                return j.id === val;
            }); //在change中获取到整条对象数据
            // console.log(obj1.id);
            // console.log(obj1.positionName);
            this.position1 = obj1.id;
            this.position2 = obj1.positionName;
        },
        //修改成员信息弹窗
        checkMemberDialog(data) {
            this.dialogVisible3 = true;
            // console.log('c', data.userId);
            this.userId = data.userId;
            this.getDeptNameList();
            this.getPositionNameList();
            const params = {
                userId: data.userId,
            };
            common.getStaffInfo(params).then((res) => {  //调用后端回显数据接口
                //由于后端传过来的值为value，而回显数据需要显示label
                //因此需要以下判断
                // console.log('de', res.data.data);
                if (res.data.data.accountStatus == '0') {
                    res.data.data.accountStatus = '0';
                } else if (res.data.data.accountStatus == '1') {
                    res.data.data.accountStatus = '1';
                } else if (res.data.data.accountStatus === '2') {
                    res.data.data.accountStatus = '2';
                }
                if (res.data.data.gender == '0') {
                    res.data.data.gender = '0';
                } else if (res.data.data.gender == '1') {
                    res.data.data.gender = '1';
                }
                if (res.data.data.status == '0') {
                    res.data.data.status = '0';
                } else if (res.data.data.status == '1') {
                    res.data.data.status = '1';
                }
                // console.log('acc',res.data.data.deptName);
                let staffList = {
                    accountStatus: res.data.data.accountStatus,
                    deptName: res.data.data.deptName,
                    email: res.data.data.email,
                    entryTime: res.data.data.entryTime,
                    gender: res.data.data.gender,
                    leaveTime: res.data.data.leaveTime,
                    phone: res.data.data.phone,
                    positionName: res.data.data.positionName,
                    realname: res.data.data.realname,
                    status: res.data.data.status,
                };
                // console.log('awa', staffList);
                // console.log('awa', staffList.deptName);
                this.ruleForm3 = staffList;
            });
        },
        //关闭修改成员信息表单
        handleClose3() {
            this.ruleForm3.accountStatus = '';
            this.ruleForm3.deptName = '';
            this.ruleForm3.email = '';
            this.ruleForm3.entryTime = '';
            this.ruleForm3.gender = '';
            this.ruleForm3.leaveTime = '';
            this.ruleForm3.phone = '';
            this.ruleForm3.positionName = '';
            this.ruleForm3.realname = '';
            this.ruleForm3.status = '';
            this.userId = '';
            this.dialogVisible3 = false;
        },
        //检验并提交修改成员信息表单
        confirmClick3(formName) {
            const accountStatus = this.ruleForm3.accountStatus;
            const deptId = this.dept1;
            const deptName = this.dept2;
            const email = this.ruleForm3.email;
            const entryTime = this.ruleForm3.entryTime;
            const gender = this.ruleForm3.gender;
            const leaveTime = this.ruleForm3.leaveTime;
            const phone = this.ruleForm3.phone;
            const positionId = this.position1;
            const positionName = this.position2;
            const realname = this.ruleForm3.realname;
            const status = this.ruleForm3.status;
            const userId = this.userId;
            const staff = {
                accountStatus,
                deptId,
                deptName,
                email,
                entryTime,
                gender,
                leaveTime,
                phone,
                positionId,
                positionName,
                realname,
                status,
                userId,
            };
            // console.log('11', this.ruleForm1.deptName);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit');
                    // let deFlag = 1;
                    common.updateEmployee(staff).then((_) => {
                        this.handleClose3();
                        this.getDeptList();
                        if (res.code === 200) {
                            this.handleNodeClick();
                            this.$message.success('修改成功，请刷新查看');
                        } else {
                            this.$message.error('修改失败');
                        }
                    });
                } else {
                    console.log('error');
                    return false;
                }
            });
        },
    }

css代码

b {
    font-size: 1.5em;
}
.left {
    width: 18%;
    float: left;
}
.right {
    width: 82%;
    float: left;
}
.top {
    float: right;
}
.el-input__inner {
    height: 30px;
}
.t {
    height: 35px;
}
.i {
    float: right;
}
.el-tree-node {
    border-bottom: 1px solid rgb(103, 100, 100);
    height: 30px;
}
.el-button--text {
    color: #0f9eca;
}
.el-input {
    width: 200px;
}

.el-form-item {
    margin-bottom: 5px;
}
.el-dialog__body {
    padding: 0px 0px;
}
.el-dialog {
    width: 520px;
    height: 480px;
}

weixin_53952829
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
前端充电宝
04-28 814
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
解决新增编辑页面数据回显不正确的问题——三种 vue 组件强制刷新方法
Girasol_YRR的博客
02-03 4218
解决table 列表的新增编辑页面，功能复杂时，封装子组件导致数据回显不正确问题，目前想到比较好的方法是组件强制刷新。vue 组件强制刷新有三种方式：$forceUpdate、v-if、key属性，这里推荐使用 key 属性。
vue组件表单数据回显验证及提交的实例代码
10-18
今天小编就为大家分享一篇vue组件表单数据回显验证及提交的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2+springboot前后台整合框架.
10-09
vue2+springboot前后端框架整合，包括Vue2前端表单验证，mybatis后台分页，springboot多数据源配置等等
vue+springboot+redis+kaptcha实现登录验证码
04-10
vue+springboot+redis+kaptcha实现登录页验证码
电脑弹窗消息=springboot瘦包+PC消息提醒
靓仔！——没错！我叫你呢！
12-13 565
自定义PC弹窗助手
SpringBoot集成javafx在TableView使用Pagination分页及自定义分页，表格行编辑及弹窗编辑，全选/反选，删除与批量删除
l244112311的博客
05-26 2768
springboot管理javafx，实现TableView的分页查询，编辑以及删除(批量删除)，查询使用mybatis，分页使用PageHelper，这里只是为了结合分页插件以及自定义分页查询使用(可自行更换为其他orm组件，比如mybatis-plus，jpa等方式)，该demo仅仅只是个人学习使用，如需参考还请自行验证测试，如有建议或发现错误，欢迎转载留言及指正
【VUE-编辑回显】
weixin_47416539的博客
06-24 3781
编辑回显vue
Vue（五）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 编辑修改弹窗与数据回显处理
Benjamin CSDN博客
12-07 963
Vue（五）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 编辑修改弹窗与数据回显处理 基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 编辑修改弹窗与数据回显处理，快速带入已选择目标行所包含信息方便数据查看并修改操作，修改完成后调用修改接口后前端同步回显已修改内容。
Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框
热门推荐
m0_70807708的博客
08-17 2万+
实现给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭的功能
黑马程序员新版JavaWeb基础教程，（前端）用Vue实现同一对话框中，增加或修改（修改包含数据回显）的操作
qq_49178513的博客
11-24 1985
Vue实现同一对话框 修改(包含数据回显)，增加
Vue+SpringBoot+SpreadJS 实现的在线文档功能.docx
07-12
Vue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+...
阿里云k8s 部署vue2+nginx+springboot2.5+nacos2.0.3
01-10
阿里云k8s 部署vue2+nginx+springboot2.5+nacos2.0.3
简单的图书管理系统，vue+springboot实现，增删改查.zip
04-13
简单的图书管理系统，vue+springboot实现，增删改查.zip
使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
最新发布
2401_84048542的博客
04-19 729
SpringBoot是目前非常主流的后端框架，简化新spring应用的初始搭建以及开发过程，搭建快，省去了编写大量配置文件的过程《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！
springboot做桌面弹框运行报错
w820896059的专栏
12-13 520
springboot桌面弹框报错问题解决
jsp弹窗修改信息_Thymeleaf+SpringBoot+Mybatis实现的齐贤易游网旅游信息管理系统
weixin_39584405的博客
12-03 420
项目简介项目来源于：https://github.com/liuyongfei-1998/root本系统是基于Thymeleaf+SpringBoot+Mybatis。是非常标准的SSM三大框架（ SpringBoot就是一个大框架，里面包含了许多的东西，其中Spring就是最核心的内容，其中也包含Spring MVC）实现的齐贤易游网旅游信息管理系统。难度等级：中等技术栈编辑器IntelliJ ...
springboot整合webSocket和定时器，实现消息主动定时提醒，页面右下角弹窗提示
duochirou的博客
08-28 3527
一、webSocket的基本配置 ①、maven依赖部分 <!-- webSocket --> <
vue - 简单实现数据回显
m0_55969466的博客
01-11 1万+
简单记录自己写的数据回显，比较复杂如果有更好的方法请指正 我是用判断来显示通过值来判断可否点击 //这块是判断是否显示 哪一个输入框 <template v-if="isInput"> <van-field v-model="repeatauthInfo.repeatbankNo" label="本人实名银行卡" name="本人实名银行卡2"
vue+springboot+ffmpeg实现视频上传以及回显
05-05
实现视频上传和回显，需要涉及前端页面、后端接口以及视频处理等多方面的技术。下面我将从这些方面一步一步介绍具体实现方法。 1. 前端页面 前端页面需要有一个上传视频的功能，可以使用`<input type="file">`标签实现。在上传时，可以通过`FormData`对象将视频文件和一些其他参数一起发送到后端接口。示例代码如下： ```html <template> <div> <input type="file" @change="handleFileUpload"> <button @click="uploadVideo">上传</button> <video v-if="videoUrl" :src="videoUrl" controls></video> </div> </template> <script> export default { data() { return { videoUrl: '' } }, methods: { handleFileUpload(event) { this.videoFile = event.target.files[0] }, async uploadVideo() { const formData = new FormData() formData.append('file', this.videoFile) formData.append('name', 'video') const response = await fetch('/api/upload', { method: 'POST', body: formData }) const data = await response.json() if (data.success) { this.videoUrl = data.videoUrl } } } } </script> ``` 2. 后端接口 后端接口使用SpringBoot框架，需要使用`@RestController`和`@PostMapping`注解来实现视频上传接口。接收到视频文件后，可以使用FFmpeg库来处理视频文件，将视频转换为指定格式或者提取视频的缩略图等。 ```java @RestController public class VideoController { @PostMapping("/api/upload") public ApiResponse uploadVideo(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ApiResponse.error("上传文件不能为空"); } try { // 保存视频文件并返回视频的URL String videoUrl = saveVideo(file); return ApiResponse.success(videoUrl); } catch (Exception e) { e.printStackTrace(); return ApiResponse.error("上传失败"); } } private String saveVideo(MultipartFile file) throws Exception { String fileName = UUID.randomUUID().toString() + ".mp4"; File dest = new File("uploads/" + fileName); file.transferTo(dest); return "http://localhost:8080/uploads/" + fileName; } } ``` 3. 视频处理 视频处理需要使用FFmpeg库来实现。在SpringBoot项目中，可以使用`ProcessBuilder`来执行FFmpeg命令。下面是一个实现视频转换为MP4格式的示例代码： ```java private void convertToMp4(String inputPath, String outputPath) throws Exception { String command = String.format("ffmpeg -i %s -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k -movflags faststart -f mp4 %s", inputPath, outputPath); Process process = new ProcessBuilder(command.split(" ")).redirectErrorStream(true).start(); InputStream inputStream = process.getInputStream(); BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream)); String line; while ((line = reader.readLine()) != null) { System.out.println(line); } process.waitFor(); reader.close(); inputStream.close(); } ``` 以上是实现视频上传和回显的基本步骤，具体实现还需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_53952829

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值