机位统计修改

src/components/Ticketing/seatStatistics.vue

@@ -75,14 +75,6 @@
     text-align: center;
   }
 
-  .seatStatistics .days li:nth-child(7n-1) p {
-    color: #e95252 !important;
-  }
-
-  .seatStatistics .days li:nth-child(7n) p {
-    color: #e95252 !important;
-  }
-
   .seatStatistics .days {
     width: 100%;
     padding: 0;
@@ -93,39 +85,7 @@
     justify-content: space-around;
   }
 
-  .seatStatistics .days>li {
-    list-style-type: none;
-    width: 14.2857%;
-    height: 140px;
-    text-align: center;
-    position: relative;
-    font-size: 12px;
-    float: left;
-    color: #000;
-    box-sizing: border-box;
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-  }
 
-  .seatStatistics .days li>div {
-    height: 112px;
-    width: 100%;
-    overflow-y: auto;
-    text-align: left;
-  }
-
-  .seatStatistics .days li>div>p {
-    border-bottom: 1px dashed #ccc;
-    height: 28px;
-    line-height: 28px;
-    width: 100%;
-    text-indent: 10px;
-    background: #fff;
-  }
-
-  .seatStatistics .days li>div>p:nth-child(2n) {
-    background: #f5f5f5;
-  }
 
   .seatStatistics .currentInput {
     width: 120px;
@@ -216,6 +176,56 @@
     margin: 20px 0;
   }
 
+  .seatStatistics .flightTab {
+    border-collapse: collapse;
+    border: 1px solid #ddd
+  }
+
+
+  .seatStatistics .flightTab tr td,
+  .seatStatistics .flightTab tr th {
+    border: 1px solid #ddd
+  }
+
+
+  .seatStatistics .flightTab tr th {
+    margin: 0;
+    padding: 3px 0;
+    background-color: #3fa783;
+    width: 100%;
+    flex-wrap: wrap;
+    color: #fff;
+  }
+
+
+  .seatStatistics .flightTab tr td>div>p {
+    width: 100%;
+    padding-left: 3px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  .seatStatistics .flightTab tr td>div>p {
+    border-bottom: 1px dashed #ccc;
+    height: 28px;
+    line-height: 28px;
+    width: 100%;
+    text-indent: 10px;
+    background: #fff;
+  }
+
+  .seatStatistics .flightTab tr td>div>p:nth-child(2n) {
+    background: #f5f5f5;
+  }
+
+  .seatStatistics .flightTab tr td:nth-child(7n-6) p {
+    color: #e95252 !important;
+  }
+
+  .seatStatistics .flightTab tr td:nth-child(7n) p {
+    color: #e95252 !important;
+  }
+
   /* 日期样式结束*/
 
 </style>
@@ -292,32 +302,63 @@
         </li>
       </ul>
     </div>
-
-    <ul class="weekdays">
-      <li>{{$t('hotel.hotel_Monday')}}</li>
-      <li>{{$t('hotel.hotel_Tuesday')}}</li>
-      <li>{{$t('hotel.hotel_Wednesday')}}</li>
-      <li>{{$t('hotel.hotel_Thursday')}}</li>
-      <li>{{$t('hotel.hotel_Friday')}}</li>
-      <li class="weekendDay">{{$t('hotel.hotel_Saturday')}}</li>
-      <li class="weekendDay">{{$t('hotel.hotel_Sunday')}}</li>
-    </ul>
-    <ul class="days clearfix" v-loading="loading">
-      <li v-for="(dayobject,index) in days" :key="dayobject.index">
-        <p class="ckStyle" :class="{ckStyleOther:dayobject.day.getMonth()+1 != currentMonth}">
-          {{dayobject.day.getDate()}} ({{dayobject.TotalCount}})</p>
-        <div class="ownScrollbarStyle">
-          <p class="over_ellipsis" v-for="item in dayobject.listArr" @click="goUrl('TicketManager',item,'票务管理')">
-            {{item.AirLineTicketId}}
-            {{item.DepartureName}}
-            -
-            {{item.AlCode}}
-            -
-            {{item.InOut}}
-          </p>
-        </div>
-      </li>
-    </ul>
+    <table class="flightTab" style="table-layout: fixed; width: 100%;" v-loading="loading">
+      <tr>
+        <th width="15%">
+          {{$t('hotel.hotel_Sunday')}}
+        </th>
+        <th width="14%">
+          {{$t('hotel.hotel_Monday')}}
+        </th>
+        <th width="14%">
+          {{$t('hotel.hotel_Tuesday')}}
+        </th>
+        <th width="14%">
+          {{$t('hotel.hotel_Wednesday')}}
+        </th>
+        <th width="14%">
+          {{$t('hotel.hotel_Thursday')}}
+        </th>
+        <th width="14%">
+          {{$t('hotel.hotel_Friday')}}
+        </th>
+        <th width="15%">
+          {{$t('hotel.hotel_Saturday')}}
+        </th>
+      </tr>
+      <tbody v-for="(rItem,rIndex) in totalRows" :key="`d_`+rIndex">
+        <tr>
+          <template v-for="(cItem,cIndex) in ColCount">
+            <td style="vertical-align:top;" :key="`d_`+rIndex+`C_`+cIndex">
+              <template v-if="getDataObj(rIndex,cIndex)">
+                <p class="ckStyle" :class="{ckStyleOther:getDataObj(rIndex,cIndex).day.getMonth()+1 != currentMonth}">
+                  {{getDataObj(rIndex,cIndex).day.getDate()}}
+                  <template v-if="getDataObj(rIndex,cIndex)&&getDataObj(rIndex,cIndex).TotalCount">
+                    ({{getDataObj(rIndex,cIndex).TotalCount}})
+                  </template>
+                </p>
+                <div class="ownScrollbarStyle">
+                  <p class="over_ellipsis" v-for="(item,index) in getDataObj(rIndex,cIndex).listArr"
+                    :key="`d_`+rIndex+`C_`+cIndex+`I_`+index" @click="goUrl('TravelticketManager',item,'票务管理')">
+                    {{item.AirLineTicketId}}
+                    {{item.DepartureName}}
+                    -
+                    {{item.AlCode}}
+                    -
+                    {{item.InOut}}
+                    <template v-if="item.OutBranchName&&item.OutBranchName!=''">
+                      [{{ item.OutBranchName}}]
+                    </template>
+                  </p>
+                </div>
+              </template>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+    <br />
+    <br />
   </div>
 </template>
 <script>
@@ -355,9 +396,19 @@
         loading: false,
         //航空公司
         AirlineList: [],
+        totalRows: 0, //总行数
+        ColCount: 7, //列数
       };
     },
     methods: {
+      getDataObj(rowIndex, colIndex) {
+        var obj = {};
+        var newIndex = rowIndex * 7 + colIndex;
+        if (this.days && this.days.length > 0) {
+          obj = this.days[newIndex];
+        }
+        return obj;
+      },
       //获取航空公司
       getAirlineList() {
         this.apipost(
@@ -402,7 +453,7 @@
         this.GetHoltelInventory();
       },
       initCalendar: function (cur) {
-        var newDays = this.$calendarUtils.createCalendar(cur);
+        var newDays = this.$calendarUtils.createCalendar_V2(cur);
         this.currentDay = newDays.CurrentDay;
         this.currentYear = newDays.CurrentYear;
         this.currentMonth = newDays.CurrentMonth;
@@ -415,6 +466,11 @@
           dayobject.day = d;
           this.days.push(dayobject);
         }
+        if (this.days.length % 7 == 0) {
+          this.totalRows = this.days.length / 7
+        } else {
+          this.totalRows = parseInt(this.days.length / 7) + 1;
+        }
       },
       //点击左箭头切换年月
       pickPre: function (year, month) {
@@ -508,7 +564,6 @@
           res => {
             this.loading = false;
           });
-
       },
     },
     mounted() {

src/components/TravelManager/Ticket/TravelticketManager.vue

@@ -687,7 +687,8 @@
         <li>
           <span>
             <em>{{$t('op.Procurement')}}</em>
-            <el-select class="w150" v-model="Query.PurchaseCreateBy" filterable :placeholder="$t('pub.pleaseSel')" clearable>
+            <el-select class="w150" v-model="Query.PurchaseCreateBy" filterable :placeholder="$t('pub.pleaseSel')"
+              clearable>
               <el-option :label="$t('pub.unlimitedSel')" :value="0">
               </el-option>
               <el-option v-for="(item, index) in AllEmployeeList" :label="item.EmName" :value="item.EmployeeId"
@@ -1189,6 +1190,11 @@
     created() {
       this.getCompanyList();
       this.getAllEmployeeList();
+      if (this.$route.query) {
+        if (this.$route.query.id) {
+          this.Query.ID = this.$route.query.id
+        }
+      }
     },
     mounted() {
       this.Query.QFlightDateStart = this.getBeforeDate(0, new Date().Format("yyyy-MM-dd"));