美年旅游跟团游新增报团游

1：前台代码
（1）弹出新增窗口
（2）新增窗口中，动态展示自由行列表
（3）提交请求，执行保存
2：后台代码
• 保存报团游数据
• 保存报团游和自由行中间表数据
（1）TravelGroupController.java（Controller）
（2）TravelGroupService.java（服务接口）
（3）TravelGroupServiceImpl.java（服务实现类）
（4）TravelGroupDao.java（Dao接口）
（5）TravelGroupDao.xml（Mapper映射文件）

前台代码

跟团游管理页面对应的是 travelgroup.html 页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。

弹出新增窗口

页面中已经提供了新增窗口，只是出于隐藏状态。只需要将控制展示状态的属性 dialogFormVisible 改为true 即可显示出新增窗口。点击新建按钮时绑定的方法为 handleCreate，所以在 handleCreate 方法中修改dialogFormVisible 属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。
由于新增跟团游时还需要选择此跟团游包含的自由行，所以新增跟团游窗口分为两部分信息：基本信息和自由行信息，如下图：

（1）新建按钮绑定单击事件，对应的处理函数为handleCreate

<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

（2）handleCreate()方法

// 重置表单
resetForm() {
    
    
    this.formData = {
    
    };
},
// 弹出添加窗口
handleCreate() {
    
    
    this.resetForm();
    this.dialogFormVisible = true;
    // 每次在新增窗口，都看到的都是第一个选项卡内容
    this.activeName="first";
},

新增窗口中，动态展示自由行列表

现在虽然已经完成了新增窗口的弹出，但是在自由行信息标签页中需要动态展示所有的自由行信息列表数据，并且可以进行勾选。具体操作步骤如下：
（1）定义模型数据

tableData:[],//新增和编辑表单中对应的自由行列表数据
travelItemIds:[],//新增和编辑表单中自由行对应的复选框，基于双向绑定可以进行回显和数据提交，传递自由行id

（2）动态展示自由行列表数据，数据来源于上面定义的 tableData 模型数据

<el-tab-pane label="自由行信息" name="second">
<div class="checkScrol">
        <table class="datatable">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>项目编码</th>
                    <th>项目名称</th>
                    <th>项目说明</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="c in tableData">
                   <td>
                       <input :id="c.id" v-model="travelItemIds" type="checkbox" :value="c.id">
                   </td>
                   <td><label :for="c.id">{
    
    {
    
    c.code}}</label></td>
                   <td><label :for="c.id">{
    
    {
    
    c.name}}</label></td>
                   <td><label :for="c.id">{
    
    {
    
    c.remark}}</label></td>
               </tr>
           </tbody>
      </table>
</div>
</el-tab-pane>

（3）完善 handleCreate 方法，发送 ajax 请求查询所有自由行数据并将结果赋值给 tableData 模型数据用于页面表格展示

// 弹出添加窗口
handleCreate() {
    
    
    this.resetForm();
    this.dialogFormVisible = true;
    //默认切换到第一个标签页（基本信息）
    this.activeName='first';
    //重置
    this.travelItemIds = [];
    //发送ajax请求查询所有自由行信息
    axios.get("/travelItem/findAll.do").then((res)=> {
    
    
        if(res.data.flag){
    
    
            //将自由行列表数据赋值给模型数据用于页面表格展示
            this.tableData = res.data.data;
        }else{
    
    
            this.$message.error(res.data.message);
        }
    });
},

（4）分别在 TravelItemController 、TravelItemService 、TravelItemServiceImpl 、TravelItemDao、TravelItemDao.xml 中扩展方法查询所有自由行数据

【1】：TravelItemController ：

package com.atguigu.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.PageResult;
import com.atguigu.entity.QueryPageBean;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RequestMapping("/travelItem")
@RestController
public class TravelItemController {
    
    

    @Reference
    private TravelItemService travelItemService;

    @RequestMapping("/findAll")
    public Result findAll(){
    
    
        List<TravelItem> lists =  travelItemService.findAll();
        return new Result(true, MessageConstant.QUERY_TRAVELGROUP_SUCCESS,lists);
    }

【2】：TravelItemService：

package com.atguigu.service;

import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
import java.util.List;

public interface TravelItemService {
    
    
    List<TravelItem> findAll();

【3】：TravelItemServiceImpl：

package com.atguigu.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelItemDao;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;

@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements TravelItemService {
    
    

    @Autowired
    private TravelItemDao travelItemDao;

    @Override
    public List<TravelItem> findAll() {
    
    
        return travelItemDao.findAll();
    }

【4】：TravelItemDao：

package com.atguigu.dao;

import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;
import java.util.List;

public interface TravelItemDao {
    
    
    List<TravelItem> findAll();

【5】：TravelItemDao.xml：

<select id="findAll" resultType="travelItem">
     select * from t_travelitem
</select>

提交请求，执行保存

当用户点击新增窗口中的确定按钮时发送ajax请求将数据提交到后台进行数据库操作。提交到后台的数据分为两部分：跟团游基本信息（对应的模型数据为formData）和自由行id数组（对应的模型数据为travelItemIds）。
（1）为确定按钮绑定单击事件，对应的处理函数为handleAdd

<el-button type="primary" @click="handleAdd()">确定</el-button>

（2）完善handleAdd方法

//添加
handleAdd () {
    
    
    //发送ajax请求将模型数据提交到后台处理
    axios.post("/travelgroup/add.do?travelItemIds=" + this.travelItemIds,this.formData).then((response)=> {
    
    
        //关闭新增窗口
        this.dialogFormVisible = false;
        if(response.data.flag){
    
    
            //新增成功，弹出成功提示
            this.$message({
    
    
                message: response.data.message,
                type: 'success'
            });
        }else{
    
    
            //新增失败，弹出错误提示
            this.$message.error(response.data.message);
        }
    }).finally(()=> {
    
    
        // 刷新首页列表数据
        this.findPage();
    });
},

后台代码

Controller

在 meinian_web 工程中创建 TravelGroupController

package com.atguigu.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelGroupService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RequestMapping("/travelgroup")
@RestController
public class TravelGroupController {
    
    

    @Reference
    private TravelGroupService travelGroupService;

    @RequestMapping("/add")
    //接受两部分数据 谁先谁后无所谓 如果是请求体来的加上@RequestBody 路径来的就不用了
    public Result add(@RequestBody TravelGroup travelGroup,Integer[] travelItemIds){
    
    
    //两张表单要提交 一张是跟团游 还有一张是跟团游与自由行的中间表要插入数据
        travelGroupService.add(travelGroup,travelItemIds);
        return new Result(true, MessageConstant.ADD_TRAVELGROUP_SUCCESS);
    }
}

服务接口

在 meinian_interface 工程中创建 TravelGroupService 接口

package com.atguigu.service;

import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import java.util.List;

public interface TravelGroupService {
    
    
    void add(TravelGroup travelGroup, Integer[] travelItemIds);
}

服务实现类

在 meinian_service工程中创建 TravelGroupServiceImpl 实现类

package com.atguigu.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelGroupDao;
import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelGroupService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service(interfaceClass = TravelGroupService.class)
@Transactional
public class TravelGroupServiceImpl implements TravelGroupService {
    
    

    @Autowired
    private TravelGroupDao travelGroupDao;


    @Override
    public void add(TravelGroup travelGroup, Integer[] travelItemIds) {
    
    
        // 1 新增跟团游，想t_travelgroup中添加数据，新增后返回新增的id
        travelGroupDao.add(travelGroup);
        // 2 新增跟团游和自由行中间表t_travelgroup_travelitem新增数据(新增几条，由travelItemIds决定)
        setTravelGroupAndTravelItem(travelGroup.getId(),travelItemIds);
    }

    private void setTravelGroupAndTravelItem(Integer travelGroupId, Integer[] travelItemIds) {
    
    
        // 新增几条数据，由travelItemIds的长度决定
        if (travelItemIds!=null && travelItemIds.length>0){
    
    
            for (Integer travelItemId : travelItemIds) {
    
    
                // 如果有多个参数使用map
                Map<String, Integer> map = new HashMap<>();
                map.put("travelGroup",travelGroupId);
                map.put("travelItem",travelItemId);
                travelGroupDao.setTravelGroupAndTravelItem(map);
            }
        }
    }
}

Dao接口

在 meinian_dao工程中创建 TravelGroupDao 接口

package com.atguigu.dao;

import com.atguigu.pojo.TravelGroup;
import com.atguigu.pojo.TravelItem;
import java.util.List;
import java.util.Map;

public interface TravelGroupDao {
    
    
    void add(TravelGroup travelGroup);
    void setTravelGroupAndTravelItem(Map<String, Integer> map);
}

Mapper映射文件

在 meinian_dao 工程中创建 TravelGroupDao.xml 映射文件，需要和 TravelGroupDao 接口在同一目录下

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.atguigu.dao.TravelGroupDao">

    <insert id="add" parameterType="travelGroup">
        <!--在新增SQL语句之后执行select last_insert_id(), 返回int类型的值，封装到travelGroup中的id属性中
            或者
            在insert标签上增加 useGeneratedKeys="true" keyProperty="id",将生成的主键值封装到travelGroup中的id属性中
-->
        <selectKey keyProperty="id" resultType="int" order="AFTER">
            select last_insert_id()
        </selectKey>
        insert into t_travelgroup(code,name,helpCode,sex,remark,attention) values (#{code},#{name},#{helpCode},#{sex},#{remark},#{attention})
    </insert>

    <insert id="setTravelGroupAndTravelItem" parameterType="map">
        insert into t_travelgroup_travelitem(travelgroup_id,travelitem_id) values (#{travelGroup},#{travelItem})
    </insert>

</mapper>