景点页面修改

src/components/scenicSpot/admissionStatistics.vue

@@ -30,29 +30,28 @@
     <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
       <table border="0" cellspacing="1" cellpadding="0" class="admissionStatisticsTalbe" v-loading='loading'>
         <tr>
-          <th width="50">序号</th>
-          <th width="80">出发地</th>
-          <th width="80">航班时间</th>
-          <th width="80">公司团号</th>
+          <th width="120">序号</th>
+          <th width="100">出发地</th>
+          <th width="120">航班时间</th>
+          <th width="140">公司团号</th>
           <th width="120">机位总数/(Y/E/F)</th>
-          <th v-for='item in thLengthTitle'>{{item}}</th>
-          <th>备注</th>
-          <th class="w80">操作</th>
+          <th width="120">日期</th>
+          <th width="250">景点</th>
+          <th width="100">操作</th>
         </tr>
-        <tbody v-for="(outItem,outindex) in list" :class="{admissionStatisticsSplitTrCss:outindex%2!=0}">
+        <template v-for="(outItem,outindex) in DataList">
+          <tbody :class="{admissionStatisticsSplitTrCss:outindex%2!=0}">
             <template v-for="(item,index) in outItem.StaticsReportList">
+              <template v-for="(subItem,subIndex) in item.CommonReport.ScenicList">
+                <template v-for="(thirdItem,thirdIndex) in subItem.ScenicStatisticsList">
                   <tr>
-              <td :rowspan="2*outItem.StaticsReportList.length" v-if='index==0'>
-                <div style="max-width: 100px; min-width: 50px; ">{{outindex+1}}</div>
-                <div v-if='outItem.StaticsReportList.length>0' class="w100">{{outItem.NewCombinationNum}}</div>
+                    <td :rowspan="outItem.rootRowspan" v-if='index==0&&subIndex==0&&thirdIndex==0'>
+                      {{outItem.NewCombinationNum}}
                     </td>
-              <td>
-                <div class="w80">
+                    <td :rowspan="item.itemRowSpan" v-if='subIndex==0&&thirdIndex==0'>
                       {{item.StartCityNames}}
-                </div>
                     </td>
-              <td>
-                <div class="w80">
+                    <td :rowspan="item.itemRowSpan" v-if='subIndex==0&&thirdIndex==0'>
                       {{item.FlightDate}}
                       <el-popover popper-class="admissionStatistics_tripDetails" width="550" trigger="click">
                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
@@ -86,35 +85,29 @@
                           </tr>
                         </table>
                         <el-button slot="reference" class="normalBtn mt5"
-                      style='height:24px; padding: 0 10px; background: #2AAEF2; border-color: #2AAEF2;'>详情</el-button>
+                          style='height:24px; padding: 0 10px; background: #2AAEF2; border-color: #2AAEF2;'>详情
+                        </el-button>
                       </el-popover>
-                </div>
                     </td>
-              <td>
+                    <td :rowspan="item.itemRowSpan" v-if='subIndex==0&&thirdIndex==0'>
                       <div class="w120 link">
-                  <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.TCNUMS}}</p>
+                        <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.TCNUMS}}({{item.TCID}})</p>
                       </div>
                     </td>
-              <td>
+                    <td :rowspan="item.itemRowSpan" v-if='subIndex==0&&thirdIndex==0'>
                       <div class="w120 link">
                         <p @click="goUrlT('RegistrationList',item.TCIDS,'报名清单')">
                           {{item.TotalSeat}}/{{item.CommonReport.HouseStatistics.RealityYSeatNum}}/{{item.CommonReport.HouseStatistics.RealityESeatNum}}/{{item.CommonReport.HouseStatistics.RealityFSeatNum}}
                         </p>
                       </div>
                     </td>
-              <td v-for="x in item.CommonReport.ScenicList" style="vertical-align: top;">
-                <div style="width: 100%;">
-                  <p class="pDateStyle" v-if="x.UseTimeStr">{{x.UseTimeStr}}</p>
-                  <p @click="goUrlR('scenicSpotList',s.ID,'景区列表')" class="pMsgStyle phoverStype"
-                    v-for="s in x.ScenicStatisticsList">{{s.ScenicName}}</p>
-                </div>
+                    <td :rowspan="subItem.ScenicStatisticsList.length" v-if='thirdIndex==0'>
+                      {{thirdItem.UseTimeStr}}
                     </td>
-              <td>
-                <div class="w200">
-                  {{item.Remarks}}
-                </div>
+                    <td style="text-align:left;padding-left:3px;">
+                      {{thirdItem.ScenicName}}
                     </td>
-              <td>
+                    <td :rowspan="item.itemRowSpan" v-if='subIndex==0&&thirdIndex==0'>
                       <div class="link">
                         <div class="w80">
                           <p @click="goUrl('admissionStatisticsDetails',item,outItem,'门票详情')">详情</p>
@@ -122,8 +115,9 @@
                       </div>
                     </td>
                   </tr>
-            <tr>
-              <td :colspan="colspanTotal" style="text-align: left!important;padding-left: 20px;">
+                  <tr
+                    v-if="subIndex== item.CommonReport.ScenicList.length-1 && thirdIndex==subItem.ScenicStatisticsList.length-1">
+                    <td colspan="7" style="text-align:left; padding-left:5px">
                       <div class="link">
                         <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.Titles}}</p>
                         <div v-show="outItem.StaticsReportList[0].DMCRemark!=''" class="colorE95252">
@@ -132,14 +126,16 @@
                     </td>
                   </tr>
                 </template>
+              </template>
+            </template>
           </tbody>
+        </template>
       </table>
     </div>
     <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
       layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total></el-pagination>
   </div>
 </template>
-
 <script>
   export default {
     data() {
@@ -158,15 +154,10 @@
         },
         LineList: [],
         LineTeamList: [],
-        thLengthTitle: [],
-        list: [],
-        colspanTotal: 0,
+        DataList: [],
       }
     },
     methods: {
-      stringToArr(str) {
-        return str.split(',')
-      },
       getLineList() {
         this.apipost("line_post_GetAllList", {}, res => {
           if (res.data.resultCode == 1) {
@@ -192,16 +183,6 @@
           }
         );
       },
-      goUrlR(path, obj, title) {
-        this.$router.push({
-          name: path,
-          query: {
-            "ID": obj,
-            blank: 'y',
-            tab: title
-          }
-        })
-      },
       goUrlT(path, obj, title) {
         this.$router.push({
           name: path,
@@ -212,7 +193,7 @@
           }
         })
       },
-      goUrl(path, obj,outItem, title) {
+      goUrl(path, obj, outItem, title) {
         this.$router.push({
           name: path,
           query: {
@@ -235,31 +216,28 @@
         this.currentPage = 1;
       },
       getList() {
-        this.loading = true
+        this.loading = true;
         this.apipost('dmcstatistics_post_GetUniteCombinationNumService', this.msg, res => {
-          this.loading = false
+          this.loading = false;
           if (res.data.resultCode == 1) {
-            this.total = res.data.data.count
-						this.list = res.data.data.pageData.data;
-            this.thLengthTitle = []
-            this.colspanTotal = res.data.data.pageData.columnsCount + 6
-            for (let i = 1; i <= res.data.data.pageData.columnsCount; i++) {
-              this.thLengthTitle.push('第' + i + '天')
-            }
-            this.list.forEach(outItem => {
+            this.total = res.data.data.count;
+            var tempData = res.data.data.pageData.data;
+            tempData.forEach(outItem => {
+              var rootRowspan = 0; //合团跨行
               outItem.StaticsReportList.forEach(item => {
-                if (item.CommonReport.ScenicList.length < res.data.data.pageData.columnsCount) {
-                  let _cha = res.data.data.pageData.columnsCount - item.CommonReport.ScenicList.length
-                  let _chaArr = new Array()
-                  for (let i = 0; i < _cha; i++) {
-                    _chaArr.push({
-                      'HotelName': ''
-                    })
-                  }
-                  item.CommonReport.ScenicList = item.CommonReport.ScenicList.concat(_chaArr)
-                }
-              })
-            })
+                var itemRowSpan = 0; //景点跨行
+                item.CommonReport.ScenicList.forEach(thirdItem => {
+                  thirdItem.ScenicStatisticsList.forEach(lastItem => {
+                    rootRowspan++;
+                    itemRowSpan++;
+                  });
+                });
+                item.itemRowSpan = itemRowSpan;
+              });
+              rootRowspan += outItem.StaticsReportList.length;
+              outItem.rootRowspan = rootRowspan;
+            });
+            this.DataList = tempData;
           } else {
             this.$message.error(res.data.message)
           }
@@ -278,6 +256,7 @@
       this.getList()
     },
   }
+
 </script>
 
 <style>
@@ -305,39 +284,10 @@
   .admissionStatisticsTalbe tr td {
     font-size: 12px;
   }
-
-  .admissionStatisticsTalbe tr td .pHouseStyle {
-    border-bottom: 1px solid #ccc;
-    height: 20px;
-    line-height: 20px;
-  }
-
-  .admissionStatisticsTalbe tr td .pHouseStyle:last-child {
-    border-bottom: none;
-  }
-
-  .admissionStatisticsTalbe tr td .pDateStyle {
-    border-bottom: 1px solid #ccc;
-    height: 20px;
-    line-height: 20px;
-    margin-top: 0;
-  }
-
-  .admissionStatisticsTalbe tr td .pMsgStyle {
-    padding: 0 10px;
-    line-height: 20px;
-  }
-
   .admissionStatisticsTalbe tr td .link p:hover {
     text-decoration: underline;
     cursor: pointer;
   }
-
-  .admissionStatisticsTalbe tr td .phoverStype:hover {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
   .admissionStatistics_tripDetails {
     padding: 0;
     box-shadow: 0px 1px 3px 0px #dedede;