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

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()