美年旅游_自由行_编辑自由行

功能分为两个部分来做
1：编辑自由行（ID查询，回显）
2：编辑自由行（更新保存，执行update）

1：前台代码
（1）：点击编辑按钮，绑定单击事件
（2）：弹出编辑窗口回显数据
（3）：发送ajax请求，更改数据保存
2：后台代码
（1）TravelItemController.java
• 跳转到自由行编辑页面
• 编辑保存
（2）TravelItemService.java（服务接口）
（3）TravelItemServiceImpl.java（服务实现类）
（4）TravelItemDao.java（Dao接口）
（5）TravelItemDao.xml（Mapper映射文件）

前台代码

用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。

绑定单击事件

需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

处理事件：handleUpdate();

// 弹出编辑窗口
handleUpdate(row) {
   
    alert(row.id);
},

弹出编辑窗口回显数据

当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送ajax请求查询当前自由行数据用于回显

// 弹出编辑窗口
handleUpdate(row) {
   
    // alert(row.id);
    //发送请求获取自由行信息
    axios.get("/travelItem/findById.do?id=" + row.id).then((res)=>{
   
        if(res.data.flag){
   
            //设置编辑窗口属性，dialogFormVisible4Edit为true表示显示
            this.dialogFormVisible4Edit = true;
            //为模型数据设置值，基于VUE双向数据绑定回显到页面
            this.formData = res.data.data;
        }else{
   
            this.$message.error("获取数据失败，请刷新当前页面");
        }
    });
},

发送请求更改数据

在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit

<div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
    <el-button type="primary" @click="handleEdit()">确定</el-button>
</div>

handleEdit()方法

//编辑
handleEdit() {
   
    //表单校验
    this.$refs['dataEditForm']