固定酒店查询统计

src/components/Hotel/HotelQueryList.vue

@@ -74,57 +74,53 @@
 
     <div style="width: 100%;min-height:200px;  overflow-x: auto;padding-bottom: 10px; " class="HotelQueryList"
       v-loading="loading">
-      <div class="hotelProductManage2_tableBox">
+      <div class="hotelProductManage2_tableBox" style="margin-bottom:20px;">
         <span style="color:#000000;background-color: #ff3737;padding:2px 4px;border-radius:5px">红日</span>
         <span style="color:#000000;background-color: #ff99cc;padding:2px 4px;border-radius:5px">旺季</span>
         <span style="color:#000000;background-color: #bcd6ee;padding:2px 4px;border-radius:5px">平季</span>
         <span style="color:#000000;background-color: #DDDDDD;padding:2px 4px;border-radius:5px">淡季</span>
         <span style="color:#000000;background-color: #02F78E;padding:2px 4px;border-radius:5px">特别价</span>
       </div>
-      <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList" v-if="isShow">
-        <tr>
-          <th width="300">酒店名称</th>
-          <th width="80">价格&库存</th>
-          <template v-if="dataList.length>0">
-            <th v-for="item in dataList[0].subList">
-              {{getDateList(item.DateStr)}}<br/>
-              {{getWeek(item.DateStr)}}
-            </th>
-          </template>
-        </tr>
-        <tr v-for="item in dataList">
-          <td>
-            <div style="min-width:140px; text-align:left;padding-left:5px;cursor:pointer;" >
-               <span title="点击跳转到酒店查询页面" @click="GotoHotel(item.HotelId)" style="text-decoration: underline;min-width:140px; ">{{item.HotelName}}</span>
-              <br/>（总库存:{{item.TotalInventory}}）</div>
-          </td>
-          <td>
-            <div class="Hotel_kong">价格</div>
-            <div class="Hotel_kong" style="min-width:60px;">总/用/剩</div>
-            <div class="Hotel_kong">超定</div>
-          </td>
-          <td v-for="(subItem,subIndex) in item.subList">
-            <div class="Hotel_kong Com_hoteldiv" >
-              <template v-if="subItem.PriceList&&subItem.PriceList.length>0">
-                <template v-for="childItem in subItem.PriceList">
-                   <div :class="getClass(1,childItem.InventoryType)" style="height:100%;float:left;" 
-                   :style="{width:(98/subItem.PriceList.length)+'%'}">{{childItem.CostPrice}}</div>
-                </template>
+      <template v-if="isShow">
+          <el-table :data="dataList" style="width:100%" border v-loading='loading' height="500">
+            <el-table-column fixed label="酒店名称" min-width="180">
+              <template slot-scope="scope">
+                  <div style="text-decoration: underline;cursor:pointer" @click="GotoHotel(scope.row.HotelId)">{{scope.row.HotelName}}</div>
+                  <div>{{scope.row.TotalInventory}}</div>
               </template>
-              <template v-else>
-                <div :class="getClass(0,0)" style="width:100%;height:100%">&nbsp;</div>
+            </el-table-column>
+            <el-table-column label="价格&库存" min-width="120">
+              <template slot-scope="scope">
+                  <div class="Hotel_kong">价格</div>
+                  <div class="Hotel_kong" style="min-width:60px;">总/用/剩</div>
+                  <div class="Hotel_kong">超定</div>
               </template>
-            </div>
-            <div class="Hotel_kong Com_hoteldiv Hq_duoge" @click="GotoUrl(item,subIndex,subItem.UseInventory)">
-              {{subItem.Inventory}}/{{subItem.UseInventory}}/{{subItem.RemainingInventory}}</div>
-            <div class="Hotel_kong Com_hoteldiv">
-              <span v-if="subItem.UseInventory-subItem.Inventory>0" style="color:red;">
-                {{subItem.UseInventory-subItem.Inventory}}
-              </span>
-            </div>
-          </td>
-        </tr>
-      </table>
+            </el-table-column>
+           <el-table-column v-for='(item,index) in dataList[0].subList' :label="getDateList(item.DateStr)" :key='index' min-width="120">
+              <template slot-scope="scope">
+                <div class="Hotel_kong Com_hoteldiv">
+                    <template v-if="scope.row.subList[index].PriceList.length>0">
+                      <template v-for="childItem in scope.row.subList[index].PriceList">
+                        <div :class="getClass(1,childItem.InventoryType)" style="height:100%;float:left;width:100%" 
+                        :style="{width:(100/scope.row.subList[index].PriceList.length)+'%'}">{{childItem.CostPrice}}</div>
+                      </template>
+                    </template>
+                    <template v-else>
+                      <div :class="getClass(0,0)" style="width:100%;height:100%">&nbsp;</div>
+                    </template>
+                </div>
+                <div class="Hotel_kong Com_hoteldiv Hq_duoge" @click="GotoUrl(scope.row,index,scope.row.subList[index].UseInventory)">
+                  {{scope.row.subList[index].Inventory}}/{{scope.row.subList[index].UseInventory}}/{{scope.row.subList[index].RemainingInventory}}</div>
+                <div class="Hotel_kong Com_hoteldiv">
+                  <span v-if="scope.row.subList[index].UseInventory-scope.row.subList[index].Inventory>0" style="color:red;">
+                    {{scope.row.subList[index].UseInventory-scope.row.subList[index].Inventory}}
+                  </span>
+                </div>
+              </template>				
+            </el-table-column>
+          </el-table>
+      </template>
+
     </div>
 
     <div class="combottomDiv HqCom_bottom" v-if="showNotice">
@@ -159,11 +155,11 @@
       <div>
         <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:97%;">
           <tr>
-            <th>编号</th>
+            <th width="50">编号</th>
             <th>内容</th>
-            <th>操作人</th>
-            <th>操作时间</th>
-            <th>操作</th>
+            <th width="70">操作人</th>
+            <th width="150">操作时间</th>
+            <th width="80">操作</th>
           </tr>
           <template v-if="queryMsg.total>0">
             <tr v-for="(item,index) in HotelTipList">
@@ -194,15 +190,15 @@
       <el-form>
         <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:100%;">
           <tr>
-            <th>编号</th>
+            <th width="50">编号</th>
             <th>内容</th>
-            <th>操作人</th>
-            <th>操作时间</th>
+            <th width="70">操作人</th>
+            <th width="140">操作时间</th>
           </tr>
           <template v-if="queryMsg.total>0">
             <tr v-for="(item,index) in HotelTipList">
               <td>{{item.Id}}</td>
-              <td><p style="text-align:left;padding-left:5px;" v-html="item.TipContent"></p></td>
+              <td><p style="text-align:left;padding:0 5px;" v-html="item.TipContent"></p></td>
               <td>{{item.CreateByName}}</td>
               <td>{{item.CreateTimeStr}}</td>
             </tr>
@@ -289,7 +285,7 @@
                 ['blockquote', 'code-block','align']
               ]
           }
-      },
+        },
       };
     },
     methods: {
@@ -365,7 +361,10 @@
       //格式化返回显示日期
       getDateList(dateStr) {
         var str = dateStr.split('-');
-        return str[1] + '/' + str[2];
+        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
+        var myDate = new Date(Date.parse(dateStr));
+
+        return str[1] + '/' + str[2] + "（"+weekDay[myDate.getDay()]+"）";
       },
       //获取星期几
       getWeek(dateStr) {
@@ -514,7 +513,7 @@
       this.GetHotelList();
       this.getList();
       this.GetHotelTipList();
-    }
+    },
   };
 
 </script>
@@ -567,6 +566,7 @@
   .Hotel_kong {
     width: 100%;
     height: 35px;
+    text-align: center;
     line-height: 35px;
     border-bottom: 1px solid #d1d1d1;
   }
@@ -623,4 +623,16 @@
   .HQ_miaoshu:first-child{
     margin-top:10px;
   }
+  .HotelQueryList .has-gutter tr th, .el-table th.is-leaf{
+      background: #EAEAEA!important;
+  }
+  .HotelQueryList .el-table td, .el-table th.is-leaf{
+    border-bottom:1px solid #ebeef5;
+  }
+  .HotelQueryList .el-table .cell{
+    padding:0;
+  }
+  .HotelQueryList .el-table td{
+    padding:0;
+  }
 </style>