修改组件

src/components/commonPage/comCheckHotel.vue

@@ -4,16 +4,10 @@
         border-bottom:1px solid #d1d1d1;
     }
     .comCheckHotel>div{
-        float:left;
-        width:120px;
-        border-right:1px solid #d1d1d1;
+        width:100%;
         height:200px;
         overflow: auto
     }
-    .comCheckHotel>div:last-child{
-        width:230px;
-        border:none;
-    }
     .comCk_list{
         cursor: pointer;
         padding:0 20px;
@@ -42,21 +36,24 @@
 
 <template>
     <div>
-        <div class="cm_hotelTitle">酒店信息</div>
-        <div class="clearfix comCheckHotel">
-            <div>
-                <div class="comCk_list" v-for="(item,index) in dataList" :class="{'ckedList':ckindexOne==index}" @click="getCityList(item),ckindexOne=index">
-                    {{item.ProvinceName}}
-                </div>
+        <div class="cm_hotelTitle">
+            <el-select filterable v-model="selHotelId" @change="getChangeHotel(selHotelId)" :placeholder="$t('pub.pleaseSel')">
+              <el-option label="不限" :value='0'></el-option>
+              <el-option v-for="item in ProvinceList" :label='item.Name' :value='item.ID'
+                :key='item.ID'>
+              </el-option>
+            </el-select>         
+            酒店信息
         </div>
         <div>
-                <div class="comCk_list" v-for="(item,index) in cityList" :class="{'ckedList':ckindexTwo==index}" @click="getHotelList(item),ckindexTwo=index">
-                    {{item.CityName}}
-                </div>
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                <el-tab-pane :label="item.ProvinceName" v-for="item in dataList"></el-tab-pane>
+            </el-tabs>
         </div>
+        <div class="clearfix comCheckHotel">
             <div>
-                <div class="comCk_list" v-for="item in HotelList">
-                    <input type="checkbox" v-model="item.isChecked" @click="getCheck(item)" style=""/>
+                <div class="comCk_list" v-for="(item,index) in HotelList">
+                    <input type="checkbox" v-model="item.isChecked" @click="getCheck(item,index)" style=""/>
                     {{item.Name}}<span class="cm_Inventory">{{item.Inventory}}</span>
                 </div>
             </div>
@@ -66,21 +63,22 @@
 </template>
 <script>
 export default {
-//   props:["sDate"],
   data() {
     return {
         dataList:[],
-        cityList:[],
         HotelList:[],
         ckindexOne:-1,
         ckindexTwo:-1,  
         ID:0,
-        HotelName:''      
+        HotelName:'',
+        ProvinceList:[],
+        selHotelId:0,
+        activeName:'',
+        
     };
   },
   methods: {
       getCheckHotel(sDate){
-        this.$forceUpdate();
         this.apipost('hotel_post_GetHasStockHotelList_V2', {
           //1-只查询有库存的酒店
           IsMoreThanZero: 0,
@@ -91,49 +89,83 @@ export default {
            if (res.data.resultCode == 1) {
               this.dataList = res.data.data;
               this.dataList.forEach(x=>{
-                  x.cityList.forEach(y=>{
-                      y.HotelList.forEach(z=>{
-                          z.isChecked=false;
+                x.HotelList.forEach(y=>{
+                    y.isChecked=false;
                 })
             })
-              })
-              console.log(this.dataList,'子组件');
+            console.log(this.dataList,'datalist');
           } else {
               this.Error(res.data.message)
           }
         }, err => {})
       },
-      getCityList(item){
-          this.cityList = item.cityList;
-          this.HotelList = [];
-      },
-      getHotelList(item){
-          this.HotelList = item.HotelList;
-      },
-      getCheck(item){
-          this.HotelList.forEach(x=>{
+      getCheck(item,index){
+          this.HotelList.forEach((x,subIndex)=>{
+              if(index==subIndex){
+                x.isChecked = !x.isChecked;
+              }else{
                 x.isChecked = false;
+              }
           })
-          item.isChecked = !item.isChecked;
           this.$forceUpdate();
       },
       //向父组件传递选中酒店
       sendCkedHotel(){
-          console.log(this.dataList,'重选');
-        this.dataList.forEach(x=>{
-            x.cityList.forEach(y=>{
-                y.HotelList.forEach(z=>{
-                    if(z.isChecked){
-                        this.ID = z.ID;
-                        this.HotelName = z.Name;
+        var ckHotelObj = {};
+        this.HotelList.forEach((x,index)=>{
+            if(x.isChecked){
+                ckHotelObj.ID = x.ID;
+                ckHotelObj.Address = x.Address;
+                ckHotelObj.Inventory = x.Inventory;
+                ckHotelObj.Name = x.Name;
+                ckHotelObj.PayStyle = x.PayStyle;
+                ckHotelObj.Tel = x.Tel;
             }
         })
+        this.$emit("childHotel", ckHotelObj);
+      },
+      //获取日本下面的市->下拉框用
+      getProvinceList(){
+        let msg = {
+          Id:651
+        };
+        this.apipost("dict_post_Destination_GetChildList", msg,res => {
+            if(res.data.resultCode == 1){
+                this.ProvinceList = res.data.data;
+            }else{
+                this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      getChangeHotel(id){
+        let msg = {
+            Province:id
+        }
+        this.apipost(
+          "hotel_post_GetHasStockHotelList_V2",msg,res => {
+              if(res.data.resultCode==1){
+                this.dataList = res.data.data;
+                this.HotelList = [];
+                this.dataList.forEach(x=>{
+                    x.HotelList.forEach(y=>{
+                        y.isChecked=false;
                     })
                 })
-        this.$emit("childHotel", this.ID,this.HotelName);
+                console.log(this.dataList,'dataList');
+              }else{
+                  this.Error(res.data.message);
+              }
+          },
+          err => {}
+        );
+      },
+      handleClick() {
+        this.HotelList = this.dataList[this.activeName].HotelList;
       }
   },
-  mounted(){
+  mounted() {
 
   }
 };