增加日期筛选

src/components/Hotel/SupplierView.vue

@@ -495,6 +495,21 @@
     .hotel-inner li:last-child{
         border-bottom: 0;
     }
+    .Sp_PsureBtn{
+        width: 80px;
+        height: 30px;
+        background-color: #EE4454;
+        color: #fff;
+        font-size: 16px;
+        font-weight: 400;
+        outline: none;
+        border: none;
+        cursor: pointer;
+        border-radius: 4px;
+        position: absolute;
+        top:1px;
+        margin-left:20px;
+    }
 </style>
 
 <template>
@@ -561,11 +576,32 @@
             </div>  
         </div>
         <div class="HD_btnContent" style="margin-top:0;">
+            <div style="margin:15px 0;padding-left:20px;position:relative;">
+                <span style="font-size:14px;">入住日期：</span>
+                <el-date-picker class="HD_date_input" style="width:190px;" clear-icon=""
+                    size="small"
+                    value-format="yyyy-MM-dd"
+                    :picker-options="beforeCheck"
+                    v-model="msg.CheckInTime"
+                    type="date" 
+                    placeholder="">
+                </el-date-picker>
+                <span style="font-size:14px;margin-left:20px;">退房日期：</span>
+                <el-date-picker class="HD_date_input" style="width:190px;" clear-icon=""
+                    size="small"
+                    value-format="yyyy-MM-dd"
+                    v-model="msg.CheckOutTime"
+                    :picker-options="afterCheck"
+                    type="date" 
+                    placeholder="">
+                </el-date-picker>
+                <input type="button" value="查询" @click="getList()" class="Sp_PsureBtn"/>
+            </div>
             <div class="HD_fuhe">
                 <img src="../../assets/img/hotel/fuhe.png" alt="">
                 符合条件的房型
             </div>
-            <table class="HD_fangxing" v-for="(item,index) in dataList" :key="index">
+            <table class="HD_fangxing" v-for="(item,index) in dataList" :key="index" v-loading="loading">
                 <tr>
                     <td class="HD_letfTD">
                         <div class="HD_LeftRoomInfo">
@@ -590,7 +626,7 @@
                                     <div style="margin-left:20px;">楼层：{{item.Floor}}</div>
                                 </li>
                                 <li style="width:180px;" class="HD_OneLi">
-                                    <div>面积：{{item.Area}}㎡</div>
+                                    <div>面积：{{item.Area}}</div>
                                     <div style="margin-left:20px;">窗型：{{item.WindoWCut}}</div>
                                 </li>
                                 <li class="HD_FreeWifi" style="width:256px;">
@@ -692,6 +728,7 @@
     </div>
 </template>
 <script>
+import moment from "moment";
 export default {
   data() {
     return {
@@ -705,10 +742,19 @@ export default {
       msg:{
           pageIndex:1,
           pageSize:5,
-          RoomName:'',
+        //   RoomName:'',
+        //   HotelId:'',
+        //   RoomType:0,
+        //   RoomStatus:0
           HotelId:'',
           RoomType:0,
-          RoomStatus:0
+          CheckInTime:moment().format("YYYY-MM-DD"),
+          CheckOutTime:moment().add(1,'days').format('YYYY-MM-DD'),
+          RoomNum:1,
+          IsExtraBed:0,
+          IsSmoke:0,
+          Meals:0,
+          BroadBand:0
       },
       roomType:[],
       mealList:[],
@@ -719,15 +765,24 @@ export default {
       HotelId:'',
       beforeCheck: {
         disabledDate: time => {
+            if (this.msg.CheckOutTime == null) {
+                return false;
+            } else {
+                let endTime = new Date(this.msg.CheckOutTime);
+                return endTime.getTime() < time.getTime();
+            }
         }
       },
       afterCheck: {
         disabledDate: time => {
+            let startTime = new Date(this.msg.CheckInTime);
+            return startTime.getTime() >= time.getTime();
         }
       },
       tempData:{},
       //餐食数组
       mealType:[],
+      loading:false
     };
   },
   mounted() {
@@ -754,7 +809,9 @@ export default {
     },
     //获取数据
     getList(){
-        this.apipost("scm_get_GetSCMHotelRoomPageList",this.msg,res => {
+        this.loading=true;
+        this.apipost("scm_get_GetB2BSCMHotelRoomPageList",this.msg,res => {
+            this.loading=false;
             if (res.data.resultCode == 1) {
                 this.isShow=true;
                 this.dataList=res.data.data.pageData;