美年旅游_跟团游_编辑跟团游

编辑跟团游

1：前台代码
（1）绑定“编辑”单击事件
（2）弹出编辑窗口回显数据
• 回显跟团游数据
• 查询自由行列表
• 当前跟团游具有的自由行的复选框需要选中
（3）发送请求，编辑保存跟团游
• 编辑跟团游
2：后台代码
• 编辑跟团游保存
• 删除自由行和跟团游中间表数据
• 重新新增自由行和跟团游中间表数据
（1）TravelGroupController.java（Controller）
（2）TravelGroupService.java（服务接口）
（3）TravelGroupServiceImpl.java（服务实现类）
（4）TravelGroupDao.java（Dao接口）
（5）TravelGroupDao.xml（Mapper映射文件）

前台页面

用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。此处进行数据回显的时候，除了需要跟团游基本信息的回显之外，还需要回显当前跟团游包含的自由行（以复选框勾选的形式回显）。

绑定单击事件

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

<el-table-column label="操作" align="center">
    <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
    </template>
</el-table-column>

（2）handleUpdate事件

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

弹出编辑窗口回显数据

当前页面的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送多个ajax请求分别查询当前跟团游数据、所有自由行数据、当前跟团游包含的自由行id用于基本数据回显

// 弹出编辑窗口  三部分都要回显所以三次请求
handleUpdate(row) {
   
    //alert(row.id);
    //1 发送ajax请求根据id查询跟团游信息，用于基本信息回显  
    axios.get("/travelgroup/findById.do?id=" + row.id).then((res)=>{
   
        if(res.data.flag){
   
            //弹出编辑窗口
            this.dialogFormVisible4Edit = true;
            //默认选中第一个标签页
            this.activeName='first';
            //为模型数据赋值，通过VUE数据双向绑定进行信息的回显  表单数据
            this.formData = res.data.data;
            this.$message({
   
                type:"success",
                message: res.data.message
            })
            // 2：如果 第一次回显成功了 就查询自由行列表 发送ajax请求查询所有的自由行信息，用于自由行表格展示  
            axios.get("/travelItem/findAll.do").then((res)=> {
   
                if(res.data.flag){
   
                    //为模型数据赋值，通过VUE数据双向绑定进行信息的回显 新增和编辑表单中对应的自由行列表数据
                    this.tableData = res.data.data;
                    // 3：当前跟团游具有的自由行的复选框需要选中
                    // 使用跟团游id，查询当前跟团游具有的自由行的id集合
                    // this.checkitemIds = [28,29,30];
                    // 如果返回Result(flag,message,data)对应写法：
                    // this.checkitemIds = response.data.data;
                    // 如果返回List<Integer>对应写法：this.checkitemIds = response.data;
                    //查询当前跟团游包含的所有自由行id，用于页面回显
                    //第三个请求  
                    axios.get("/travelgroup/findTravelItemIdByTravelgroupId.do?id=" + row.id).then((res)