新增供应商下子页面

src/components/Supplier/HotelManagement.vue

+<style>
+  .hotelmanagement .hotelResource {
+  width: 100%;
+  min-height: 500px;
+  margin-top: 20px;
+}
+
+.hotelmanagement .resourceList {
+  width: 215px;
+  height: 320px;
+  background-color: #fff;
+  border: 1px dashed #ededed;
+  border-radius: 4px;
+  margin: 0 20px 20px 0;
+  font-size: 12px;
+  color: #333333;
+  float: left;
+}
+
+.hotelmanagement .resourceList:hover {
+  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+  transition: all linear 0.5s;
+}
+
+.hotelmanagement .reTopInfo {
+  width: 100%;
+  height: 123px;
+  position: relative;
+}
+
+.hotelmanagement .reTopInfo img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.hotelmanagement .resTypeList {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.hotelmanagement .resTypeList span {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 10px;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.hotelmanagement .L1 {
+  background-color: #e95252;
+}
+
+.hotelmanagement .L2 {
+  background-color: #47bf8c;
+}
+
+.hotelmanagement .L3 {
+  background-color: #2aaef2;
+}
+.hotelmanagement .L4 {
+  background-color: #9cf;
+}
+.hotelmanagement .L5 {
+  background-color: #00c6ff;
+  margin-top:5px;
+}
+.hotelmanagement .starSu {
+  position: absolute;
+  bottom: 8px;
+  right: 10px;
+}
+
+.hotelmanagement .sushe {
+  background-color: #ffc800;
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 10px;
+  color: #fff;
+}
+
+.hotelmanagement .hotelTitle {
+  margin: 22px 16px 0 16px;
+  font-size: 14px;
+  color: #333333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hotelmanagement .brandList {
+  margin: 10px 16px;
+}
+
+.hotelmanagement .brandList i {
+  position: relative;
+  top: 2px;
+}
+
+.hotelmanagement .brand {
+  float: left;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hotelmanagement .dayNum {
+  float: right;
+}
+
+.hotelmanagement .Address {
+  margin: 0 16px;
+  height: 17px;
+  overflow: hidden;
+}
+
+.hotelmanagement .Address i {
+  color: #bbbbbb;
+}
+
+.hotelmanagement .iconfont {
+  margin-right: 5px;
+  position: relative;
+  top: -4px;
+}
+
+.hotelmanagement .icon-star1 {
+  color: #ffc800;
+}
+
+.hotelmanagement .star i {
+  margin-right: 3px;
+  font-size: 12px;
+}
+
+.hotelmanagement .honor {
+  color: #ff793e;
+}
+
+.hotelmanagement .dieline {
+  color: #2aaef2;
+  font-size: 14px;
+  top: 1px !important;
+}
+
+.hotelmanagement .AddressInner {
+  float: right;
+  width: 160px;
+  height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.hotelmanagement .btnList {
+  margin-top: 16px;
+  text-align: center;
+}
+
+.hotelmanagement .hotelBtn {
+  width: 80px;
+  height: 28px;
+  border-radius: 14px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #f76f6f;
+}
+
+.hotelmanagement .hotelBtn:first-child {
+  margin-right: 19px;
+}
+
+.hotelmanagement .w150 .el-input {
+  width: 150px;
+}
+
+.hotelmanagement .RemainingInventory {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 50%;
+  margin: auto;
+  top: 30px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  font-weight: bold;
+  line-height: 60px;
+  left: 50%;
+  margin-left: -30px;
+}
+
+.hotelmanagement .delScien {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: none;
+}
+
+.hotelmanagement .delScien:hover {
+  color: #f76f6f;
+  cursor: pointer;
+}
+
+.hotelmanagement .resourceList:hover .delScien {
+  display: block;
+}
+
+.hotelmanagement .comCursorUrl {
+  cursor: pointer;
+}
+</style>
+<template>
+  <div class="flexOne hotelmanagement">
+    <div class="query-box">
+      <ul>
+        <li>
+          <span class="hotel_name">
+            <em>{{$t('hotel.hotel_name')}}</em>
+            <el-input maxlength="50" @keyup.native.enter="resetPageIndex(),selectResource()" v-model="msg.Name"></el-input>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.QCountry" clearable class="w150" filterable @change="getProvinceList(msg.QCountry,1)"
+              :placeholder="$t('hotel.hotel_country')">
+              <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.QProvince" class="w150" filterable @change="getProvinceList(msg.QProvince,2)"
+              :placeholder="$t('hotel.hotel_province')">
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.QCity" class="w150" filterable @change="getProvinceList(msg.QCity,3)" :placeholder="$t('hotel.hotel_city')">
+              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.QDistrict" class="w150" filterable :placeholder="$t('hotel.hotel_area')">
+              <el-option v-for="item in district" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>{{$t('hotel.hotel_status')}}</em>
+            <el-select v-model="msg.Status" class="w210" :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
+              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>酒店类型</em>
+            <el-select v-model="msg.HotelType" class="w210" :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
+              <el-option v-for="item in HotelTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>价格</em>
+            <el-select v-model="msg.HotelPirceType" class="w210" :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
+              <el-option v-for="item in HotelPirceTypeList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <button class="hollowFixedBtn" type="button" @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
+          <button class="normalBtn" type="button" @click="goSubInfo('HotelInfo')">{{$t('pub.addBtn')}}</button>
+        </li>
+      </ul>
+    </div>
+    <div class="hotelResource clearfix" v-loading="loading">
+      <div class="resourceList" v-for="(item,index) in tableData" :key="index">
+        <div class="reTopInfo" :class="{'comCursorUrl':item.URL}" @click="OpenNewUrl(item.URL)">
+          <img v-if="!item.PicPath" src="../../assets/img/bg_c3@3x.png">
+          <img v-else :src='compressImg(item.PicPath, "filt", 213, "")' :onerror="defaultImg">
+          <!-- <div class="RemainingInventory">{{item.RemainingInventory}}</div> -->
+          <div class="resTypeList">
+            <span v-for="(items,index) in item.OpenPlatformList" :key="index" :class="{'L1':items.ID==1,'L2':items.ID==2,'L3':items.ID==3,'L4':items.ID==4,'L5':items.ID==5}">{{items.Name}}</span>
+          </div>
+          <div class="delScien" @click.stop="isdelete(item.ID)">
+            <i class="iconfont icon-xingzhuang"></i>
+          </div>
+          <div class="starSu">
+            <div class="star" v-if="item.Star<8">
+              <i v-for="(items,index) in item.starArr" class="iconfont icon-star1" :key="index"></i>
+            </div>
+            <span v-if="item.Star==8" class="sushe">{{$t('restaurant.res_homeFacility')}}</span>
+            <span v-if="item.Star==9" class="sushe">{{$t('restaurant.res_SpringHotel')}}</span>
+          </div>
+        </div>
+        <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start"  popper-class="max-w250">
+          <div class="hotelTitle">{{item.Name}}</div>
+        </el-tooltip>
+         <el-tooltip class="item" effect="dark" :content="item.HotelRealName" placement="top-start" popper-class="max-w250">
+            <div class="hotelTitle fz12">真实名称: {{item.HotelRealName}}</div>
+         </el-tooltip>
+        <div class="brandList clearfix">
+          <div class="brand">
+            <i class="iconfont honor icon-img_biaozhi"></i>
+            {{item.ChainBrand}}
+          </div>
+          <div class="dayNum">
+            <i class="iconfont dieline icon-img_shijian"></i>
+            {{item.DieLine}}{{$t('hotel.hotel_day')}}
+          </div>
+        </div>
+        <div class="Address">
+          <div v-show="item.Address">
+            <i class="iconfont icon-img_dz"></i>
+            <el-tooltip class="item" effect="dark" :content="item.Address" placement="top-start">
+              <div class="AddressInner">{{item.Address}}</div>
+            </el-tooltip>
+          </div>
+        </div>
+        <div class="btnList">
+          <button @click="goSubInfo('HotelInfo',item.ID)" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
+          <button @click="goUrl('HotelProductManage2',item)" class="hotelBtn">报价与库存</button>
+        </div>
+      </div>
+    </div>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage" :page-size="this.msg.pageSize"
+      layout="total,prev, pager, next, jumper" :total="msg.total"></el-pagination>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        countryList: "",
+        provinceList: "",
+        cityList: "",
+        district: "",
+        tableData: [],
+        //酒店类型
+        HotelTypeList: [],
+        //酒店价格
+        HotelPirceTypeList: [],
+        status: [{
+            value: "0",
+            label: "正常"
+          },
+          {
+            value: "1",
+            label: "删除"
+          }
+        ],
+        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
+        loading: true,
+        msg: {
+          pageIndex: 1,
+          pageSize: 14,
+          Name: "",
+          QCountry: "",
+          QProvince: "",
+          QCity: "",
+          Status: "0",
+          HotelPirceType: "-1",
+          HotelType: "-1",
+          QDistrict: "",
+          total: 0,
+          currentPage: 1,
+          ID: 0
+        }
+      };
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.selectResource();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.msg.currentPage = 1;
+      },
+      isdelete(ID) {
+        var that = this;
+        that.Confirm("是否删除?", function () {
+          var msg = {
+            hotelID: ID
+          };
+          that.apipost(
+            "hotel_post_Remove",
+            msg,
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.selectResource();
+              }
+            },
+            null
+          );
+        });
+      },
+      getProvinceList(ID, type) {
+        //根据省份获取城市
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.QProvince = "";
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 2) {
+          this.msg.QCity = "";
+          this.msg.QDistrict = "";
+        } else if (type == 3) {
+          this.msg.QDistrict = "";
+        }
+        if (this.msg.Country !== "") {
+          this.apipost(
+            "dict_post_Destination_GetChildList",
+            msg,
+            res => {
+              if (type == 1) {
+                this.provinceList = res.data.data;
+              } else if (type == 2) {
+                this.cityList = res.data.data;
+              } else if (type == 3) {
+                this.district = res.data.data;
+              }
+            },
+            err => {}
+          );
+        }
+      },
+      //获取国家
+      getCountryList() {
+        this.apipost(
+          "dict_post_Destination_GetCountry", {},
+          res => {
+            this.countryList = res.data.data;
+          },
+          err => {}
+        );
+      },
+      selectResource() {
+        this.loading = true;
+        if (this.msg.Status == "") {
+          this.msg.Status = "-1";
+        }
+        this.apipost(
+          "hotel_post_GetPageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.tableData = res.data.data.pageData;
+              this.msg.total = res.data.data.count;
+              let starArr;
+              this.tableData.forEach(x => {
+                x.starArr = new Array(x.Star);
+              });
+            }
+          },
+          null
+        );
+      },
+      //调整到产品列表
+      goUrl(path, item) {
+        this.$router.push({
+          path: path,
+          query: {
+            id: item.ID,
+            Country: item.Country,
+            IsSelfBook: item.IsSelfBook,
+            blank: 'y',
+            tab: '报价详情'
+          }
+        });
+      },
+      goSubInfo(path, id) {
+        this.$store.commit("pageConditionUpdate", this.msg);
+        this.$router.push({
+          path: path,
+          query: {
+            id: id
+          }
+        });
+      },
+      //获取酒店类型列表
+      GetHotelTypeList() {
+        this.apipost(
+          "dmc_post_Get_GetHotelType", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelTypeList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      GetHotelPirceTypeList() {
+        this.apipost(
+          "dmc_post_Get_GetHotelPriceType", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelPirceTypeList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      }
+    },
+    mounted() {
+      this.getCountryList();
+      this.GetHotelTypeList();
+      this.GetHotelPirceTypeList();
+    },
+    created() {
+      if (this.$route.query.hasOwnProperty("cache")) {
+        if (this.$store.state.pageCondition != null) {
+          this.msg = this.$store.state.pageCondition;
+        }
+      }
+      var id = this.$route.query.ID;
+      if (id) {
+        this.msg.ID = id;
+      }
+      this.selectResource();
+    }
+  };
+
+</script>

src/components/Supplier/HotelQueryList.vue

+<template>
+  <div>
+    <div class="query-box" style="border-bottom: none;">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
+              :placeholder="$t('hotel.hotel_province')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span><em>{{$t('admin.admin_company')}}</em>
+            <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
+              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>星级</em>
+            <el-select v-model="msg.Star" :placeholder="$t('pub.pleaseSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+              <el-option label="3星或商务" :value='3'></el-option>
+              <el-option label="4星" :value='4'></el-option>
+              <el-option label="5星" :value='5'></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>价格区间</em>
+            <el-select v-model="msg.PriceLevel" :placeholder="$t('pub.pleaseSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+              <el-option label="5000以下" :value='1'></el-option>
+              <el-option label="5000~6000" :value='2'></el-option>
+              <el-option label="6000~7000" :value='3'></el-option>
+              <el-option label="7000~8000" :value='4'></el-option>
+              <el-option label="8000~9000" :value='5'></el-option>
+              <el-option label="9000~10000" :value='6'></el-option>
+              <el-option label="10000以上" :value='7'></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li><span><em>日期</em>
+            <el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
+            </el-date-picker>
+            <el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
+            </el-date-picker>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>酒店</em>
+            <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
+              filterable multiple :multiple-limit="3">
+              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <input type="button" class="normalBtn" value="温馨提示"
+            @click="showNotice=true,resetPageIndex(),GetHotelTipList()" />
+          <input type="button" class="normalBtn" value="查询" @click="getList()" />
+          <input type="button" class="normalBtn" value="下载" @click="DownLoadHotelQuery()" />
+        </li>
+      </ul>
+    </div>
+
+    <div style="width: 100%;min-height:200px;  overflow-x: auto;padding-bottom: 10px; " class="HotelQueryList"
+      v-loading="loading">
+      <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>
+      <template v-if="isShow">
+        <el-table v-if="dataList.length>0" :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>
+          </el-table-column>
+          <el-table-column label="价格&库存" fixed 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>
+          </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>
+        <div class="noDataNotice" v-else>
+          <i class="iconfont icon-kong"></i>
+          <p>{{$t("active.ld_noData")}}</p>
+        </div>
+      </template>
+
+    </div>
+
+    <div class="combottomDiv HqCom_bottom" v-if="showNotice">
+      <el-form label-width="80px">
+        <el-row>
+          <el-col :span="20">
+            <el-form-item label="日期">
+              <el-date-picker class="w150" type="date" v-model="queryMsg.QStartDate"
+                :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
+              <el-date-picker class="w150" type="date" v-model="queryMsg.QEndDate"
+                :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <input type="button" class="normalBtn" value="查询" @click="resetPageIndex(),GetHotelTipList()" />
+            <input type="button" class="normalBtn" value="关闭" @click="showNotice=false" />
+          </el-col>
+        </el-row>
+        <div class="Hq_addDetail">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="说明">
+                <quill-editor class="w595" :options="editorOption" v-model="postMsg.TipContent"></quill-editor>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <input type="button" class="normalBtn" value="保存" @click="SaveHotelTip()" />
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+      <div>
+        <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:97%;">
+          <tr>
+            <th width="50">编号</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">
+              <td>{{item.Id}}</td>
+              <td>
+                <p style="text-align:left;padding-left:5px;" v-html="item.TipContent"></p>
+              </td>
+              <td>{{item.CreateByName}}</td>
+              <td>{{item.CreateTimeStr}}</td>
+              <td>
+                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+                  <el-button type="primary" icon="el-icon-edit" circle @click="GetHotelTip(item.Id)"></el-button>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                  <el-button type="danger" icon="el-icon-delete" circle @click="RemoveHotelTip(item.Id)"></el-button>
+                </el-tooltip>
+              </td>
+            </tr>
+          </template>
+          <tr v-else>
+            <td colspan="5">暂无数据...</td>
+          </tr>
+        </table>
+        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
+          :page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog custom-class="w800" title="信息" :visible.sync="showHQinfo" center>
+      <el-form>
+        <table border="0" cellspacing="1" cellpadding="0" class="HouseTypeList Hq_addTable" style="width:100%;">
+          <tr>
+            <th width="50">编号</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:0 5px;" v-html="item.TipContent"></p>
+              </td>
+              <td>{{item.CreateByName}}</td>
+              <td>{{item.CreateTimeStr}}</td>
+            </tr>
+          </template>
+          <tr v-else>
+            <td colspan="5">暂无数据...</td>
+          </tr>
+        </table>
+        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
+          :page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
+        </el-pagination>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <button class="hollowFixedBtn" @click="showHQinfo = false">关闭</button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          //酒店选择数组
+          HotelChooseArray: [],
+          StartDate: new Date().Format("yyyy-MM-dd"),
+          EndDate: this.setEdate(),
+          //只查询日本
+          Country: "651",
+          Province: 0,
+          City: 0,
+          OutBranchId: -1,
+          //星级
+          Star: 0,
+          //价格等级
+          PriceLevel: 0,
+        },
+        beforeCheck: {
+          disabledDate: time => {
+            if (this.msg.StartDate) {
+              let endTime = new Date(this.msg.EndDate);
+              return time && endTime.getTime() < time.getTime();
+            } else {
+              return false;
+            }
+          }
+        },
+        afterCheck: {
+          disabledDate: time => {
+            if (this.msg.StartDate) {
+              let startTime = new Date(this.msg.StartDate);
+              //可以选择当天
+              return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
+            } else {
+              return false;
+            }
+          }
+        },
+        //分公司列表
+        companyList: [],
+        defaultSelectValue: 0,
+        //国家 省市 区
+        provinceList: [],
+        cityList: [],
+        district: [],
+        queryMsg: {
+          QStartDate: '',
+          QEndDate: '',
+          pageIndex: 1,
+          pageSize: 5,
+          currentPage: 1,
+          total: 0
+        },
+        postMsg: {
+          Id: 0,
+          TipContent: ''
+        },
+        //默认显示弹窗信息
+        showHQinfo: true,
+        //酒店温馨提示列表
+        HotelTipList: [],
+        HotelList: [],
+        dataList: [],
+        isShow: false,
+        loading: false,
+        showNotice: false,
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            let endTime = new Date(this.queryMsg.QStartDate)
+            return endTime.getTime() < time.getTime()
+          }
+        },
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.queryMsg.QEndDate)
+            return startTime.getTime() >= time.getTime()
+          }
+        },
+        editorOption: {
+          placeholder: '请输入内容',
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+              ['blockquote', 'code-block', 'align']
+            ]
+          }
+        },
+      };
+    },
+    methods: {
+      GotoHotel(HotelId) {
+        this.$router.push({
+          path: "HotelManagement",
+          query: {
+            ID: HotelId,
+            tab: "酒店查询",
+            blank: 'y',
+          }
+        });
+      },
+      GotoUrl(item, subIndex, UseInventory) {
+        if (UseInventory > 0) {
+          this.$router.push({
+            path: "TravelControlList",
+            query: {
+              HotelId: item.HotelId,
+              HotelUseTime: item.subList[subIndex].DateStr,
+              blank: 'y',
+              tab: "团控查询",
+            }
+          });
+        }
+      },
+      getList() {
+        this.loading = true;
+        if (this.msg.StartDate == null) {
+          this.msg.StartDate = new Date().Format("yyyy-MM-dd");
+        }
+        if (this.msg.EndDate == null) {
+          this.msg.EndDate = this.setEdate();
+        }
+        this.apipost("dict_post_HotelOffer_GetHotelStatics", this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.dataList = res.data.data;
+              this.isShow = true;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //获取酒店列表
+      GetHotelList() {
+        this.apipost(
+          "hotel_post_GetHasStockHotelList", {
+            Country: 651,
+            IsMoreThanZero: 1
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      setEdate() {
+        return this.addMoth(new Date().Format("yyyy-MM-dd"), 1)
+      },
+      addMoth(d, m) {
+        let ds = d.split('-'),
+          _d = ds[2] - 0;
+        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
+        let max = nextM.getDate();
+        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
+        return d.toLocaleDateString().match(/\d+/g).join('-')
+      },
+      //格式化返回显示日期
+      getDateList(dateStr) {
+        var str = dateStr.split('-');
+        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
+        var myDate = new Date(Date.parse(dateStr));
+
+        return str[1] + '/' + str[2] + "（" + weekDay[myDate.getDay()] + "）";
+      },
+      //获取星期几
+      getWeek(dateStr) {
+        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
+        var myDate = new Date(Date.parse(dateStr));
+        return weekDay[myDate.getDay()]
+      },
+      //获取颜色状态
+      getClass(Status, InventoryType) {
+        var classStr = "";
+        if (Status == 0) {
+          classStr = 'noKucun';
+        }
+        switch (InventoryType) {
+          case 1:
+            classStr = "classHong";
+            break;
+          case 2:
+            classStr = "classWang";
+            break;
+          case 3:
+            classStr = "classPing";
+            break;
+          case 4:
+            classStr = "classDan";
+            break;
+          case 5:
+            classStr = "classTe";
+            break;
+        }
+        return classStr;
+      },
+      handleCurrentChange(val) {
+        this.queryMsg.pageIndex = val;
+        this.GetHotelTipList();
+      },
+      resetPageIndex() {
+        this.queryMsg.pageIndex = 1;
+        this.queryMsg.currentPage = 1;
+      },
+      //获取酒店列表
+      GetHotelTipList() {
+        this.apipost(
+          "hoteltip_get_GetPageList", this.queryMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelTipList = res.data.data.pageData;
+              this.queryMsg.total = res.data.data.count;
+            }
+          },
+          err => {}
+        );
+      },
+      SaveHotelTip() {
+        this.apipost(
+          "hoteltip_post_SetHotelTip", this.postMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.Success("保存成功!");
+              this.postMsg.Id = 0;
+              this.postMsg.TipContent = "";
+              this.GetHotelTipList();
+            } else {
+              this.Error("保存失败!");
+            }
+          },
+          err => {}
+        );
+      },
+      RemoveHotelTip(Id) {
+        var that = this;
+        this.Confirm('是否要删除此数据?', function () {
+          that.apipost(
+            "hoteltip_post_RemoveHotelTip", {
+              ID: Id
+            },
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success("删除成功!");
+                that.GetHotelTipList();
+              } else {
+                that.Error("删除失败!");
+              }
+            },
+            err => {}
+          );
+        })
+      },
+      GetHotelTip(Id) {
+        this.apipost(
+          "hoteltip_get_GetHotelTip", {
+            ID: Id
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.postMsg.Id = res.data.data.Id;
+              this.postMsg.TipContent = res.data.data.TipContent;
+            } else {
+              this.Error("获取数据失败!");
+            }
+          },
+          err => {}
+        );
+      },
+      getProvinceList(ID, type) {
+        //根据省份获取城市
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.Province = 0;
+          this.msg.City = 0;
+          this.provinceList = [];
+          this.cityList = [];
+        } else if (type == 2) {
+          this.msg.City = 0;
+          this.cityList = [];
+        }
+        this.apipost(
+          "dict_post_Destination_GetChildList",
+          msg,
+          res => {
+            if (type == 1) {
+              this.provinceList = res.data.data;
+            } else if (type == 2) {
+              this.cityList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      getBranchList() {
+        this.apipost('admin_get_BranchGetList', {
+          RB_Group_Id: '2',
+          Status: 0,
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.companyList = res.data.data;
+          }
+        }, err => {})
+      },
+      //Excel下载
+      DownLoadHotelQuery() {
+        this.loading = true;
+        let qMsg = {
+          queryMsg: this.msg,
+          uid: this.getLocalStorage().EmployeeId
+        };
+        let fileName = "酒店查询统计" + this.$commonUtils.getCurrentDate() + ".xls";
+        this.GetLocalFile("hotel_get_downloadHotelQuery", qMsg, fileName,
+          res => {
+            this.loading = false;
+          });
+      },
+    },
+    mounted() {
+      this.getBranchList();
+      this.getProvinceList(651, 1);
+      this.GetHotelList();
+      this.getList();
+      this.GetHotelTipList();
+    },
+  };
+
+</script>
+
+<style>
+  .Hq_duoge {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .HqCom_bottom .ql-container {
+    min-height: 100px;
+  }
+
+  .classHong {
+    background-color: rgb(255, 55, 55);
+  }
+
+  .classWang {
+    background-color: rgb(255, 153, 204);
+  }
+
+  .classPing {
+    background-color: rgb(188, 214, 238);
+  }
+
+  .classDan {
+    background-color: rgb(221, 221, 221);
+  }
+
+  .classTe {
+    background-color: rgb(2, 247, 142);
+  }
+
+  .HouseTypeList {
+    background: #ccc;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .Com_hoteldiv {
+    min-width: 70px;
+    white-space: nowrap;
+  }
+
+  .noKucun {
+    background-color: black !important;
+  }
+
+  .Hotel_kong {
+    width: 100%;
+    height: 35px;
+    text-align: center;
+    line-height: 35px;
+    border-bottom: 1px solid #d1d1d1;
+  }
+
+  .Hotel_kong:last-child {
+    border: 0;
+  }
+
+  .HouseTypeList tr th {
+    background: #e6e6e6;
+    height: 35px;
+    font-size: 12px;
+    color: #333;
+  }
+
+  .HouseTypeList tr {
+    background: #fff;
+    text-align: center;
+    height: 35px;
+  }
+
+  .HouseTypeList tr td {
+    font-size: 12px;
+  }
+
+  .hotelProductManage2_tableBox span {
+    margin: 0 10px 10px 0;
+  }
+
+  .Hq_addDetail {
+    margin-top: 20px;
+  }
+
+  .Hq_addDetail .el-textarea__inner {
+    resize: none;
+  }
+
+  .Hq_addTable .el-button.is-circle {
+    padding: 5px;
+  }
+
+  .HqCom_bottom .el-form-item {
+    margin-bottom: 0
+  }
+
+  .HqCom_bottom {
+    height: 350px;
+    padding-top: 35px;
+  }
+
+  .HQ_miaoshu {
+    color: #E95252;
+    font-size: 12px;
+  }
+
+  .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>

src/components/Supplier/HotelSalesBoard.vue

+<style>
+  /* 日期样式开始 */
+  .hotelSalesBoard .month ul {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    background: #e95252;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  .hotelSalesBoard .year-month {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .hotelSalesBoard .year-month>input {
+    width: 100px;
+    float: left;
+  }
+
+  .hotelSalesBoard .arrow {
+    padding: 10px;
+    font-style: normal;
+    cursor: pointer;
+  }
+
+  .hotelSalesBoard .monthminus {
+    position: absolute;
+    left: 0px;
+    top: 15px;
+  }
+
+  .hotelSalesBoard .monthadd {
+    position: absolute;
+    right: 21px;
+    top: 15px;
+  }
+
+  .hotelSalesBoard .month ul li {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    display: inline-block;
+    letter-spacing: 3px;
+  }
+
+  .hotelSalesBoard .month ul li i {
+    font-size: 22px;
+    color: #ff7e7e;
+    cursor: pointer;
+  }
+
+  .hotelSalesBoard .month ul li>input {
+    text-align: center;
+  }
+
+  .hotelSalesBoard .weekdays {
+    margin: 0;
+    padding: 3px 0;
+    background-color: #3fa783;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    color: #fff;
+    justify-content: space-around;
+  }
+
+  .hotelSalesBoard .weekdays li {
+    display: inline-block;
+    width: 14.2857%;
+    text-align: center;
+  }
+
+  .hotelSalesBoard .days {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-left: 1px solid #dddddd;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    justify-content: space-around;
+  }
+
+  .hotelSalesBoard .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;
+  }
+
+  .hotelSalesBoard .days li>div {
+    height: 112px;
+    width: 100%;
+    overflow-y: auto;
+    text-align: left;
+  }
+
+  .hotelSalesBoard .days li>div>p {
+    border-bottom: 1px dashed #ccc;
+    min-height: 28px;
+    line-height: 28px;
+    width: 100%;
+    text-indent: 10px;
+  }
+
+  .hotelSalesBoard .currentInput {
+    width: 120px;
+    height: 30px;
+    border-radius: 17px;
+    outline: none;
+    border: none;
+    color: #fff;
+    background: transparent;
+    font-size: 18px;
+  }
+
+  .hotelSalesBoard .days li .other-month {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 17px;
+    font-size: 12px;
+    line-height: 17px;
+    background-color: #cccccc;
+    color: #fff;
+  }
+
+  .hotelSalesBoard .ckStyle {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    background: #ccc;
+    color: #000;
+  }
+
+  .hotelSalesBoard .ckStyleOther {
+    background: #dddddd !important;
+    font-weight: normal !important;
+    color: #999;
+  }
+
+  .hotelSalesBoard .Owe_Room {
+    color: #e95252;
+  }
+
+  .hotelSalesBoard .Used_room {
+    color: #13b0ae;
+  }
+
+  .hotelSalesBoard .otherMoth {
+    background: #f2f2f2;
+  }
+
+  .hotelSalesBoard .title {
+    height: 14px;
+    line-height: 14px;
+    border-left: 3px solid #e95252;
+    font-size: 16px;
+    color: #333;
+    text-indent: 10px;
+    margin: 20px 0;
+  }
+
+  .hotelSalesBoard .hasStock_1 {
+    color: #FFFFFF;
+    background-color: #ff3737;
+  }
+
+  .hotelSalesBoard .hasStock_2 {
+    background-color: #ff99cc;
+  }
+
+  .hotelSalesBoard .hasStock_3 {
+    background-color: #bcd6ee;
+
+  }
+
+  .hotelSalesBoard .hasStock_4 {
+    background-color: #DDDDDD;
+  }
+
+  .hotelSalesBoard .hasStock_5 {
+    background-color: #02F78E;
+  }
+
+  .hotelSalesBoard .stock1 {
+    color: red;
+  }
+
+  .hotelSalesBoard .stock2 {
+    color: white;
+  }
+
+  /* 日期样式结束*/
+
+</style>
+<template>
+  <div class="flexOne hotelSalesBoard">
+    <div class="query-box Plan_Query">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
+              :placeholder="$t('hotel.hotel_province')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span><em>{{$t('admin.admin_company')}}</em>
+            <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
+              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>酒店</em>
+            <el-select v-model="msg.HotelId" :placeholder="$t('pub.pleaseSel')" filterable>
+              <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
+              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>供应商</em>
+            <el-select v-model="msg.Supplier" placeholder="请选择">
+              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+              <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li style="margin-right:50px;">
+          <button class="normalBtn" type="button" @click="GetHoltelInventory()">{{$t('pub.searchBtn')}}</button>
+          <input type="button" class="normalBtn" value="下载" @click="DownLoadHotelSalesBoard()" />
+        </li>
+      </ul>
+    </div>
+    <div class="title">
+      酒店统计 共
+      <span class="Owe_Room">{{TotalInventory}}</span> 间, 使用
+      <span class="Owe_Room">{{UseInventory}}</span>间
+      &nbsp;&nbsp;
+      <span class="hasStock_1" style="padding:2px 4px;border-radius:5px">红日</span>
+      <span class="hasStock_2" style="padding:2px 4px;border-radius:5px">旺季</span>
+      <span class="hasStock_3" style="padding:2px 4px;border-radius:5px">平季</span>
+      <span class="hasStock_4" style="padding:2px 4px;border-radius:5px">淡季</span>
+      <span class="hasStock_5" style="padding:2px 4px;border-radius:5px">特别价</span>
+    </div>
+    <div class="month">
+      <ul>
+        <li>
+          <i class="el-icon-caret-left monthminus" @click="currentYear-=1,getDateString(),initCalendar(dateString)"></i>
+          <input type="text" disabled="disabled" v-model="currentYear" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">年
+          <i class="el-icon-caret-right monthadd" @click="currentYear+=1,getDateString(),initCalendar(dateString)"></i>
+        </li>
+        <li>
+          <i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
+          <input type="text" disabled="disabled" v-model="currentMonth" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">月
+          <i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
+        </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>{{$t('hotel.hotel_Saturday')}}</li>
+      <li>{{$t('hotel.hotel_Sunday')}}</li>
+    </ul>
+    <ul class="days clearfix" v-loading="msg.loading">
+      <li v-for="(dayItem,index) in days" :key="dayItem.index">
+        <p class="ckStyle" :class="{ckStyleOther:dayItem.day.getMonth()+1 != currentMonth}">{{dayItem.day.getDate()}}
+        </p>
+        <div v-if="dayItem.dayValue">
+          <p style="word-break:breakall;" :class="stockColor(subItem.InventoryType)"
+            v-for="subItem in dayItem.dayValue">{{subItem.HotelName}}
+            (总: {{subItem.Inventory}} &nbsp;&nbsp;
+            <a title="点击跳转到订房管理" v-if="subItem.UseInventory>0"
+              @click="goUrl('roomReservations',subItem,dayItem.DayStr,'订房管理')"
+              style="cursor:pointer;text-decoration:underline;"
+              :class="subItem.InventoryType==4 ? 'stock1' : 'stock2'">已用:{{subItem.UseInventory}}</a>
+            <span v-else>已用:{{subItem.UseInventory}}</span>
+            )
+          </p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          Year: 0,
+          Month: 0,
+          HotelId: 0,
+          //只查询日本
+          Country: "651",
+          Province: 0,
+          City: 0,
+          loading: false,
+          OutBranchId: -1,
+          //供应商编号
+          Supplier:0,
+        },
+        //分公司列表
+        companyList: [],
+        //酒店列表
+        HotelList: [],
+        defaultSelectValue: 0,
+        currentDay: 1,
+        currentMonth: 1,
+        currentYear: 1970,
+        currentWeek: 1,
+        days: [],
+        //每天的机位库存
+        DayData: [],
+        //总库存
+        TotalInventory: 0,
+        //使用库存
+        UseInventory: 0,
+        //国家 省市 区
+        provinceList: [],
+        cityList: [],
+        district: [],
+        //供应商列表
+        SupplierList:[]
+      };
+    },
+    methods: {
+      getBranchList() {
+        this.apipost('admin_get_BranchGetList', {
+          RB_Group_Id: '2',
+          Status: 0,
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.companyList = res.data.data;
+          }
+        }, err => {})
+      },
+      stockColor: function (type) {
+        //红日
+        if (type === 1) {
+          return 'hasStock_1'
+        }
+        //旺季
+        else if (type === 2) {
+          return 'hasStock_2'
+        }
+        //平季
+        else if (type === 3) {
+          return 'hasStock_3'
+        } //淡季 
+        else if (type === 4) {
+          return 'hasStock_4'
+        }
+        //特别价
+        else if (type === 5) {
+          return 'hasStock_5'
+        }
+      },
+      //调整到订房管理
+      goUrl(path, obj, dateStr, name) {
+        this.$router.push({
+          path: path,
+          query: {
+            hotelId: obj.HotelId,
+            dateStr: dateStr,
+            blank: "y",
+            tab: name
+          }
+        });
+      },
+      //格式化日期
+      getDateString: function () {
+        this.dateString = this.$calendarUtils.formatDate(
+          this.currentYear,
+          this.currentMonth,
+          1
+        );
+        this.GetHoltelInventory();
+      },
+      initCalendar: function (cur) {
+        var newDays = this.$calendarUtils.createCalendar(cur);
+        this.currentDay = newDays.CurrentDay;
+        this.currentYear = newDays.CurrentYear;
+        this.currentMonth = newDays.CurrentMonth;
+        this.currentWeek = newDays.CurrentWeek;
+        this.days.length = 0;
+        var dateArray = newDays.DayArray;
+        for (var i = 0; i < dateArray.length; i++) {
+          var d = dateArray[i].day;
+          var dayobject = {};
+          dayobject.day = d;
+          this.days.push(dayobject);
+        }
+      },
+      //点击左箭头切换年月
+      pickPre: function (year, month) {
+        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
+        d.setDate(0);
+        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
+        this.initCalendar(
+          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
+        );
+        this.GetHoltelInventory();
+      },
+      //点击右箭头切换年月
+      pickNext: function (year, month) {
+        var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
+        d.setDate(35);
+        this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
+        this.initCalendar(
+          this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
+        );
+        this.GetHoltelInventory();
+      },
+      //点击获取酒店库存数据
+      GetHoltelInventory() {
+        this.msg.loading = true;
+        this.msg.Year = this.currentYear;
+        this.msg.Month = this.currentMonth;
+        this.DayData = [];
+        this.apipost(
+          "hotelreport_get_GetHotelPriceMonthStatisticsExt",
+          this.msg,
+          res => {
+            this.msg.loading = false;
+            this.DayData = res.data.data;
+            this.UseInventory = 0;
+            this.TotalInventory = 0;
+            this.days.forEach(dayItem => {
+              let d = dayItem.day;
+              dayItem.dayValue = [];
+              let myDate = this.$calendarUtils.formatDate(
+                d.getFullYear(),
+                d.getMonth() + 1,
+                d.getDate()
+              );
+              for (var j = 0; j < this.DayData.length; j++) {
+                if (this.DayData[j].DayStr == myDate) {
+                  dayItem.dayValue = this.DayData[j].SubList;
+                  dayItem.DayStr = this.DayData[j].DayStr;
+                  this.DayData[j].SubList.forEach(subItem => {
+                    this.TotalInventory = parseFloat(this.TotalInventory) + parseFloat(subItem.Inventory);
+                    this.UseInventory = parseFloat(this.UseInventory) + parseFloat(subItem.UseInventory);
+                  });
+                }
+              }
+            });
+            this.$forceUpdate();
+          },
+          err => {}
+        );
+      },
+      //获取酒店列表
+      GetHotelList() {
+        this.apipost(
+          "hotel_post_GetHasStockHotelList", {
+            Country: 651,
+            IsMoreThanZero: 1
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      getProvinceList(ID, type) {
+        //根据省份获取城市
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.Province = 0;
+          this.msg.City = 0;
+          this.provinceList = [];
+          this.cityList = [];
+        } else if (type == 2) {
+          this.msg.City = 0;
+          this.cityList = [];
+        }
+        this.apipost(
+          "dict_post_Destination_GetChildList",
+          msg,
+          res => {
+            if (type == 1) {
+              this.provinceList = res.data.data;
+            } else if (type == 2) {
+              this.cityList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //Excel下载
+      DownLoadHotelSalesBoard() {
+        if (this.msg.HotelId > 0) {
+          this.msg.loading = true;
+          let qMsg = {
+            queryMsg: this.msg,
+            uid: this.getLocalStorage().EmployeeId
+          };
+          let fileName = "酒店统计" + this.$commonUtils.getCurrentDate() + ".xls";
+          this.GetLocalFile("hotel_get_downloadHotelSalesBoard", qMsg, fileName,
+            res => {
+              this.msg.loading = false;
+            });
+        } else {
+          this.Info("请选择要下载的酒店!");
+        }
+      },
+          // 获取供应商
+      initSupplier() {
+        this.apipost("supplier_post_GetAllList", {
+          Type: 1
+        }, res => {
+          if (res.data.resultCode === 1) {
+            this.SupplierList = res.data.data;
+          }
+        }, err => {});
+      },
+    },
+    mounted() {
+      //初始化日历
+      var id = this.$route.query.id;
+      if (id) {
+        this.msg.HotelId = parseInt(id);
+      }
+      let myDate = new Date();
+      this.currentYear = myDate.getFullYear();
+      this.currentMonth = myDate.getMonth() + 1;
+      this.msg.Year = this.currentYear;
+      this.msg.Month = this.currentDay;
+      this.initSupplier();
+      this.getBranchList();
+      this.GetHotelList();
+      this.initCalendar();
+      this.GetHoltelInventory();
+      this.getProvinceList(651, 1);
+    }
+  };
+
+</script>

src/components/Supplier/HotelTotalStock.vue

+<style>
+  .hotelTS .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 150px
+  }
+
+  .hotelTS .hotelTS_item {
+    width: 250px;
+    height: 291px;
+    border-radius: 4px;
+    padding: 15px 16px;
+    margin-right: 30px;
+    background: rgba(255, 255, 255, 1);
+    cursor: pointer;
+  }
+
+  .hotelTS .hotelTS_box>ul {
+    padding: 30px 30px 30px 0;
+    min-height: 500px
+  }
+
+  .hotelTS .hotelTS_box ul li {
+    float: left;
+    margin-bottom: 10px;
+  }
+
+  .hotelTS .hotelTS_item:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  .hotelTS .hotelTS_item>img {
+    width: 100%;
+    height: 145px;
+    border-radius: 4px;
+  }
+
+  .hotelTS .hotelTS_item>p {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 14px;
+    padding-top: 7px;
+  }
+
+  .hotelTS .hotelTS_item>div {
+    border-top: 1px dashed #DCDFE6;
+    margin-top: 10px;
+    width: 100%;
+    height: 90px;
+    padding: 15px 0 10px 0
+  }
+
+  .hotelTS .hotelTS_item>div .left {
+    width: 70%;
+    float: left;
+  }
+
+  .hotelTS .hotelTS_item>div .left ul li {
+    color: #666666;
+    font-size: 12px;
+    width: 50%;
+    margin-bottom: 10px;
+    cursor: pointer
+  }
+
+  .hotelTS .hotelTS_item>div .left .radius {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 50%;
+    border: solid 1px #DCDFE6;
+    color: #666666
+  }
+
+  .hotelTS .hotelTS_item>div .left .num {
+    display: inline-block;
+    padding-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .hotelTS .hotelTS_item>div .left .spot {
+    line-height: 15px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .hotelTS .hotelTS_item>div .left .radius.warning {
+    background-color: red
+  }
+
+  .hotelTS .hotelTS_item>div .right {
+    width: 30%;
+    float: left;
+    height: 100%;
+    padding-bottom: 5px;
+    border-radius: 4px;
+    background-color: #47BF8C;
+    color: white
+  }
+
+  .hotelTS .hotelTS_item>div .right p {
+    text-align: center
+  }
+
+  .hotelTS .hotelTS_item>div .right .num {
+    font-size: 20px;
+    font-weight: 600;
+    padding-left: 5px;
+    padding-top: 10px;
+  }
+
+  .hotelTS .hotelTS_item>div .right .room {
+    font-size: 12px;
+  }
+
+  .hotelTS .date .el-input__icon {
+    line-height: 16px;
+  }
+
+  .hotelTS .time .el-input--prefix .el-input__inner {
+    padding-left: 30px
+  }
+
+  .hotelTS .query-box li label {
+    display: inline-block;
+    min-width: 80px;
+    text-align: right;
+    font-style: normal;
+    margin: 0 20px 0 0;
+  }
+
+  /* 日期样式开始 */
+  .hotelTS #calendar {
+    width: 639px;
+    height: 345px;
+    margin: 0 auto;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+
+  .hotelTS .month ul {
+    border-radius: 4px 4px 0 0;
+    width: 932px;
+    height: 50px;
+    line-height: 50px;
+    background: #e95252;
+    margin: 0;
+    padding: 0;
+    justify-content: space-between;
+  }
+
+  .hotelTS .year-month {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .hotelTS .year-month>input {
+    width: 100px;
+    float: left;
+  }
+
+  .hotelTS .arrow {
+    padding: 10px;
+    font-style: normal;
+    cursor: pointer;
+  }
+
+  .hotelTS .monthminus {
+    position: absolute;
+    left: 0px;
+    top: 15px;
+  }
+
+  .hotelTS .monthadd {
+    position: absolute;
+    right: 21px;
+    top: 15px;
+  }
+
+  .hotelTS .month ul li:first-child {
+    margin-left: 310px;
+  }
+
+  .hotelTS .month ul li {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    text-transform: uppercase;
+    float: left;
+    letter-spacing: 3px;
+  }
+
+  .hotelTS .month ul li i {
+    font-size: 22px;
+    color: #ff7e7e;
+    cursor: pointer;
+  }
+
+  .hotelTS .month ul li>input {
+    text-align: center;
+  }
+
+  .hotelTS .weekdays {
+    margin: 0;
+    padding: 3px 0;
+    background-color: #13b0ae;
+    display: flex;
+    width: 932px;
+    flex-wrap: wrap;
+    color: #fff;
+    justify-content: space-around;
+  }
+
+  .hotelTS .weekdays li {
+    display: inline-block;
+    width: 133px;
+    text-align: center;
+  }
+
+  .hotelTS .days {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-left: 1px solid #dddddd;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    justify-content: space-around;
+  }
+
+  .hotelTS .days li {
+    list-style-type: none;
+    width: 133px;
+    height: 110px;
+    text-align: center;
+    position: relative;
+    font-size: 12px;
+    float: left;
+    cursor: pointer;
+    font-size: 1rem;
+    color: #000;
+    box-sizing: border-box;
+    border-right: 1px solid #dddddd;
+    border-bottom: 1px solid #dddddd;
+  }
+
+  .hotelTS .currentInput {
+    width: 120px;
+    height: 30px;
+    border-radius: 17px;
+    outline: none;
+    border: none;
+    color: #fff;
+    background: transparent;
+    font-size: 18px;
+  }
+
+  .hotelTS .days li .other-month {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 17px;
+    font-size: 12px;
+    line-height: 17px;
+    background-color: #cccccc;
+    color: #fff;
+  }
+
+  .hotelTS .addCompany {
+    width: 700px;
+  }
+
+  .hotelTS .ckStyle {
+    position: absolute;
+    font-size: 12px;
+    top: 8px;
+    right: 8px;
+    color: #808080;
+  }
+
+  .hotelTS .el-dialog--center .el-dialog__body {
+    padding-top: 0;
+  }
+
+  .hotelTS .HB_Inventor {
+    display: block;
+    text-align: left;
+    padding-top: 8px;
+  }
+
+  .hotelTS .HB_Inventor>span {
+    display: block;
+    padding-left: 10px;
+    font-size: 12px;
+    height: 18px;
+    margin-bottom: 3px;
+  }
+
+  .hotelTS .Owe_Room {
+    color: #e95252;
+  }
+
+  .hotelTS .Used_room {
+    color: #13b0ae;
+  }
+
+  .hotelTS .otherMoth {
+    background: #f2f2f2;
+  }
+
+  .HT_nowInventory {
+    font-size: 14px;
+    color: green;
+  }
+
+  .Remain_num {
+    color: #9cf;
+    font-size: 24px;
+    margin-left: 10px;
+    font-weight: bold;
+  }
+
+  /* 日期样式结束*/
+
+</style>
+<template>
+  <div class="flexOne hotelTS">
+    <div class="query-box">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
+              :placeholder="$t('hotel.hotel_province')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+            <el-select v-model="msg.City" filterable :placeholder="$t('hotel.hotel_city')">
+              <el-option :key="0" :value="0" label="请选择"></el-option>
+              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>酒店</em>
+            <el-select v-model="msg.HotelId" :placeholder="$t('pub.pleaseSel')" filterable>
+              <el-option :label="$t('pub.unlimitedSel')" :value="DefaultSelectValue"></el-option>
+              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>供应商</em>
+            <el-select v-model="msg.Supplier" placeholder="请选择">
+              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+              <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID">
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+
+        <li class='time'>
+          <div class="block date">
+            <label class="demonstration">{{$t('pub.date')}}</label>
+            <el-date-picker v-model="msg.sDate" type="date" :placeholder="$t('admin.admin_choDate')"
+              value-format="yyyy-MM-dd" :picker-options="pickerOptions1">
+            </el-date-picker>
+            <el-date-picker v-model="msg.eDate" type="date" :placeholder="$t('admin.admin_choDate')"
+              value-format="yyyy-MM-dd" :picker-options="pickerOptions2">
+            </el-date-picker>
+          </div>
+        </li>
+        <li>
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
+        </li>
+      </ul>
+    </div>
+    <div class="hotelTS_box">
+      <div class="noData" v-show="noData">
+        {{$t('system.content_noData')}}
+      </div>
+      <ul class='clearfix' v-loading="loading">
+        <li v-for="(item,index) in DataList">
+          <div class="hotelTS_item" @click="goUrlHotel('HotelSalesBoard',item.ID)">
+            <img v-if="!item.PicPath" src="../../assets/img/bg_c3@3x.png">
+            <img v-else :src="item.PicPath" :onerror='defaultImg'>
+            <el-tooltip effect="dark" :content="item.Name" placement="top-start">
+              <p>{{item.Name}}</p>
+            </el-tooltip>
+            <p><span class="HT_nowInventory">目前库存</span><span class='Remain_num'>{{item.RemainingInventory}}</span>/间
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        DefaultSelectValue: 0,
+        //酒店列表
+        HotelList: [],
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          HotelId: 0,
+          sDate: new Date().Format("yyyy-MM-dd"),
+          eDate: this.setEdate(),
+          total: 0,
+          currentPage: 1,
+          //只查询日本
+          Country: "651",
+          Province: 0,
+          City: 0,
+          //供应商编号
+          Supplier: 0,
+        },
+        DataList: [],
+        loading: true,
+        noData: false,
+        defaultImg: 'this.src="' + require('../../assets/img/bg_z1@2x.png') + '"',
+        pickerOptions1: {
+          disabledDate: (time) => {
+            let endTime = new Date(this.msg.eDate);
+            return endTime.getTime() < time.getTime() || time.getTime() < Date.now() - 100000000;
+          }
+        },
+        pickerOptions2: {
+          disabledDate: (time) => {
+            let startTime = new Date(this.msg.sDate);
+            return startTime.getTime() >= time.getTime()
+          }
+        },
+        //国家 省市 区
+        provinceList: [],
+        cityList: [],
+        district: [],
+        //供应商列表
+        SupplierList: []
+      }
+    },
+    methods: {
+      goUrlHotel(path, id) {
+        this.$router.push({
+          name: path,
+          query: {
+            "id": id,
+            blank: 'y',
+            tab: '酒店统计'
+          }
+        })
+      },
+      getList() {
+        this.loading = true;
+        if (this.msg.sDate == null) {
+          this.msg.sDate = new Date().Format("yyyy-MM-dd")
+        }
+        if (this.msg.eDate == null) {
+          this.msg.eDate = this.setEdate()
+        }
+        this.apipost('hotel_post_GetStockPageList', this.msg, res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.msg.total = res.data.data.count;
+            this.DataList = res.data.data.pageData;
+            this.noData = !this.msg.total > 0;
+          }
+        }, err => {})
+      },
+      handleCurrentChange(val) { //翻页功能按钮
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      resetPageIndex() { //查询初始化页码
+        this.msg.pageIndex = 1;
+        this.msg.currentPage = 1
+      },
+      setEdate() { //默认查询三个月时间            
+        return this.addMoth(new Date().Format("yyyy-MM-dd"), 3)
+      },
+      //获取酒店列表
+      GetHotelList() {
+        this.apipost(
+          "hotel_post_GetHasStockHotelList", {
+            Country: 651,
+            IsMoreThanZero: 1
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      addMoth(d, m) {
+        let ds = d.split('-'),
+          _d = ds[2] - 0;
+        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
+        let max = nextM.getDate();
+        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
+        return d.toLocaleDateString().match(/\d+/g).join('-')
+      },
+      getProvinceList(ID, type) {
+        //根据省份获取城市
+        let msg = {
+          Id: ID
+        };
+        if (type == 1) {
+          this.msg.Province = 0;
+          this.msg.City = 0;
+          this.provinceList = [];
+          this.cityList = [];
+        } else if (type == 2) {
+          this.msg.City = 0;
+          this.cityList = [];
+        }
+        this.apipost(
+          "dict_post_Destination_GetChildList",
+          msg,
+          res => {
+            if (type == 1) {
+              this.provinceList = res.data.data;
+            } else if (type == 2) {
+              this.cityList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      // 获取供应商
+      initSupplier() {
+        this.apipost("supplier_post_GetAllList", {
+          Type: 1
+        }, res => {
+          if (res.data.resultCode === 1) {
+            this.SupplierList = res.data.data;
+          }
+        }, err => {});
+      },
+    },
+
+    mounted() {
+      this.msg.HotelId = this.$route.query.HotelId === undefined ? 0 : this.$route.query.HotelId;
+      this.initSupplier();
+      this.GetHotelList();
+      this.getProvinceList(651, 1);
+      this.getList();
+    },
+  }
+
+</script>

src/components/Supplier/roomQuery.vue

+<template>
+  <div>
+    <div class="query-box" style="border-bottom: none;">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('Operation.Op_Country')}}/{{$t('system.query_dest')}}</em>
+            <el-select v-model="msg.PlaceID" filterable :placeholder="$t('pub.pleaseSel')" @change="getLineTeamList()">
+              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
+              <el-option v-for="item in queryCommonData.PlaceList" :label="item.PlaceName" :value="item.PlaceID"
+                :key="item.LtID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>系列</em>
+            <el-select v-model="msg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
+              <el-option label="不限" :value='0'></el-option>
+              <el-option v-for="item in queryCommonData.LineTeamList" :label='item.LtName' :value='item.LtID'
+                :key='item.LtID'>
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>团号</em>
+            <el-input v-model='msg.TCNUM'></el-input>
+          </span>
+        </li>
+        <li><span><em>日期</em>
+            <el-date-picker v-model='msg.StartDate' class='w135' value-format="yyyy-MM-dd" type="date"
+              :picker-options="pickerBeginDateBefore"></el-date-picker>
+            -
+            <el-date-picker v-model='msg.EndDate' class='w135' value-format="yyyy-MM-dd" type="date"
+              :picker-options="pickerBeginDateAfter"></el-date-picker>
+          </span>
+        </li>
+        <li><span>
+            <em>状态</em>
+            <el-select v-model='msg.PriceStatus'>
+              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
+              <el-option v-for="team in $tripUtils.TeamStatesList.TeamStates" :label="team.Name" :key="team.Id"
+                :value="team.Id" v-if="team.Id==1 || team.Id==3"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>航空公司</em>
+            <el-select v-model="msg.AirLineId" filterable :placeholder="$t('system.ph_buxian')">
+              <el-option :label="$t('system.ph_buxian')" :value="0">
+              </el-option>
+              <el-option v-for="item in queryCommonData.AirlineList" :key="item.AirLineId" :label="item.AlName"
+                :value="item.AirLineId"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>OP</em>
+            <el-select v-model="msg.CreateBy" filterable :placeholder="$t('pub.pleaseSel')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="0">
+              </el-option>
+              <el-option v-for="item in queryCommonData.EmployeeList" :label="item.EmName" :value="item.EmployeeId"
+                :key="item.EmployeeId"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>地接团号</em>
+            <el-input v-model='msg.CombinationNum'></el-input>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>出团公司</em>
+            <el-select v-model="msg.OutBranchIds" filterable multiple class="multiple_input"
+              :placeholder="$t('pub.pleaseSel')">
+              <el-option v-for="item in queryCommonData.BranchList" :label='item.BName' :value='item.Id' :key='item.Id'>
+              </el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>酒店</em>
+            <el-select v-model="msg.HotelId" :placeholder="$t('pub.pleaseSel')" filterable>
+              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
+              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        <li>
+          <input type="button" class="normalBtn" value="查询" @click="getList();resetPageIndex()" />
+          <input type="button" class="normalBtn" value="下载" @click="DownLoadHotel()" />
+        </li>
+      </ul>
+    </div>
+    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
+      <div style="font-size:12px;padding:2px 4px 3px 4px; color:red">注意事项:每次导出数据最好不要超过一个月。</div>
+      <table border="0" cellspacing="1" cellpadding="0" class="roomQueryTalbe" v-loading='loading'>
+        <tr>
+          <th width="w100">序号</th>
+          <th width="120">出发地</th>
+          <th width="80">公司团号</th>
+          <th width="100">系列</th>
+          <th width="120">机位总数<br />(Y/E/F)</th>
+          <th>使用时间&酒店情况</th>
+        </tr>
+        <tr v-if="dataList.length==0">
+          <td colspan="10">暂无数据</td>
+        </tr>
+        <tbody v-for="(outItem,outindex) in dataList" :class="{roomQuerySplitTrCss:outindex%2!=0}">
+          <template v-for="(item,index) in outItem.StaticsReportList">
+            <tr>
+              <td :rowspan="outItem.StaticsReportList.length" v-if='index==0'>
+                <div style="max-width: 100px; min-width: 50px;margin:auto;">{{outindex+1}}</div>
+                <div v-if='outItem.StaticsReportList.length>0' class="w150">{{outItem.NewCombinationNum}}</div>
+              </td>
+              <td>
+                <div class="w80">
+                  {{item.StartCityNames}}
+                </div>
+              </td>
+              <td>
+                <div class="w120 link">
+                  <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.TCNUMS}}</p>
+                </div>
+              </td>
+              <td>
+                <div class="w120 link">
+                  {{item.LineteamIdNames}}
+                </div>
+              </td>
+              <td>
+                <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 style="vertical-align: top;">
+                <div :style="{width:150*item.CommonReport.newHotel.length+'px'}">
+                  <div class="w150" v-for="childItem in item.CommonReport.newHotel"
+                    style="float:left;border-right:1px solid #d1d1d1;">
+                    <p class="pDateStyle">{{childItem.CheckInDateStr}}</p>
+                    <p @click="goUrlR('HotelManagement',childItem.HotelId,'酒店管理')"
+                      class="pDateStyle phoverStype ownScrollbarStyle" style="height: 50px!important; overflow:auto;">
+                      {{childItem.NewHotelName}}<span
+                        class="colorE95252">（{{childItem.HotelOrderState==1?"OK":"暂定"}}）</span>
+                    </p>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </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() {
+      return {
+        loading: false,
+        currentPage: 1,
+        total: 0,
+        msg: {
+          pageIndex: 1,
+          pageSize: 5,
+          SelectType: 1,
+          StartDate: '',
+          EndDate: '',
+          //酒店编号
+          HotelId: 0,
+          //日期
+          DateStr: "",
+
+          //出团公司
+          OutBranchIds: [],
+          LineId: 14,
+          PlaceID: 0,
+          LineteamId: 0,
+          //航空公司
+          AirLineId: 0,
+          CreateBy: 0,
+          TCNUM: '',
+          PriceStatus: 0,
+          CombinationNum: ''
+
+        },
+        //分公司类表
+        companyList: [],
+        //酒店类表
+        HotelList: [],
+        LineList: [],
+        LineTeamList: [],
+        thLengthTitle: [],
+        dataList: [],
+        queryCommonData: {
+          //公司数据
+          BranchList: [],
+          //国家
+          PlaceList: [],
+          LineList: [],
+          LineTeamList: [],
+          AirlineList: [],
+          EmployeeList: [],
+        },
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            if (this.msg.EndDate == null) {
+              return false;
+            } else {
+              let endTime = new Date(this.msg.EndDate)
+              return endTime.getTime() < time.getTime()
+            }
+          }
+        },
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.msg.StartDate)
+            return startTime.getTime() >= time.getTime()
+          }
+        }
+      }
+    },
+    methods: {
+      getLineList() {
+        this.apipost("line_post_GetAllList", {}, res => {
+          if (res.data.resultCode == 1) {
+            this.LineList = res.data.data;
+          }
+        });
+      },
+      //获取系列列表
+      getLineTeamList(lineId) {
+        this.LineTeamList = [];
+        this.apipost(
+          "team_post_GetList", {
+            lineID: 14,
+            isTOOP: 1
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.msg.LineteamId = "-1";
+              this.LineTeamList = res.data.data;
+            }
+          }
+        );
+      },
+      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,
+          query: {
+            "id": obj,
+            blank: 'y',
+            tab: title
+          }
+        })
+      },
+      goUrl(path, obj, outItem, title) {
+        this.$router.push({
+          name: path,
+          query: {
+            "id": obj.TCIDS,
+            'TCNUM': obj.TCNUMS,
+            'flightTotal': obj.TotalSeat,
+            'GuestNum': obj.CommonReport.HouseStatistics.RealityNum,
+            'NewCombinationNum': outItem.NewCombinationNum,
+            blank: 'y',
+            tab: title
+          }
+        })
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      getList() {
+        this.loading = true;
+        this.apipost('dmcstatistics_post_GetUniteCombinationNumService', this.msg, res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.total = res.data.data.count;
+            this.dataList = res.data.data.pageData.data;
+            this.thLengthTitle = [];
+            for (let i = 1; i <= res.data.data.pageData.columnsCount; i++) {
+              this.thLengthTitle.push('第' + i + '晚')
+            }
+            this.dataList.forEach(x => {
+              x.StaticsReportList.forEach(y => {
+                y.CommonReport.newHotel = [];
+                if (y.CommonReport.HotelOrderListReport != null && y.CommonReport.HotelOrderListReport
+                  .length > 0) {
+                  y.CommonReport.HotelOrderListReport.forEach(z => {
+                    z.HotelOrderList.forEach(q => {
+                      y.CommonReport.newHotel.push(q);
+                    })
+                  })
+                }
+                y.colNum = 9 + y.CommonReport.newHotel.length;
+              })
+            })
+          } else {
+            this.$message.error(res.data.message)
+          }
+        }, err => {})
+      },
+      //获取酒店列表
+      GetHotelList() {
+        this.apipost(
+          "hotel_post_GetHasStockHotelList", {
+            Country: 651,
+            IsMoreThanZero: 1
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.HotelList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //下载Excel
+      DownLoadHotel() {
+        this.loading = true;
+        let qMsg = {
+          queryMsg: this.msg,
+          uid: this.getLocalStorage().EmployeeId
+        };
+        let fileName = "订房查询" + this.$commonUtils.getCurrentDate() + ".xls";
+        this.GetLocalFile("hotel_get_downloadHotel", qMsg, fileName,
+          res => {
+            this.loading = false;
+          });
+      },
+      //获取目的地列表
+      getLinePlaceList() {
+        this.msg.PlaceID = 0;
+        this.msg.LineteamId = 0;
+        let msg = {
+          lineID: this.msg.LineId,
+        }
+        this.apipost('team_post_GetLinePlace', msg, res => {
+          if (res.data.resultCode == 1) {
+            this.queryCommonData.PlaceList = res.data.data
+            this.queryCommonData.LineTeamList = []
+          }
+        })
+      },
+      //获取系列列表
+      getLineTeamList() {
+        this.msg.LineteamId = 0
+        let msg = {
+          lineID: this.msg.LineId,
+          placeID: this.msg.PlaceID,
+          isTOOP: 1
+        }
+        this.apipost('team_post_GetList', msg, res => {
+          if (res.data.resultCode == 1) {
+            this.queryCommonData.LineTeamList = res.data.data
+          }
+        })
+      },
+      //获取航空公司
+      getAirlineList() {
+        this.apipost(
+          'airline_post_GetList', {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.queryCommonData.AirlineList = res.data.data
+            }
+          },
+          err => {}
+        )
+      },
+      //根据当前员工所在部门获取该部门及子部门员工信息
+      getEmployeeList() {
+        let userInfo = this.getLocalStorage()
+        let msg = {
+          GroupId: userInfo.RB_Group_id,
+          BranchId: '-1',
+          DepartmentId: '-1',
+          PostId: '-1',
+          IsLeave: '0'
+        }
+        this.apipost(
+          'admin_get_EmployeeGetList', {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.queryCommonData.EmployeeList = res.data.data
+            }
+          },
+          err => {}
+        )
+      },
+      //初始化公司
+      getCompanyList() {
+        let userInfo = this.getLocalStorage()
+        var RB_Group_id = userInfo.RB_Group_id
+        let msg = {
+          Status: 0,
+          is_show: 0,
+          RB_Group_Id: RB_Group_id
+        }
+        this.apipost(
+          'admin_get_BranchGetList',
+          msg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.queryCommonData.BranchList = res.data.data;
+            }
+          },
+          err => {}
+        )
+      },
+    },
+    mounted() {
+      let myDate = new Date();
+      let nowDate =
+        myDate.getFullYear() +
+        "-" +
+        parseInt(myDate.getMonth() + 1) +
+        "-" +
+        myDate.getDate();
+      if (this.$route.query.hotelId) {
+        this.msg.HotelId = this.$route.query.hotelId;
+      }
+      if (this.$route.query.dateStr) {
+        this.msg.DateStr = this.$route.query.dateStr;
+      }
+      if (this.$route.query.hotelId || this.$route.query.dateStr) {
+        this.msg.StartDate = "";
+      } else {
+        this.msg.StartDate = nowDate;
+      }
+      this.getLinePlaceList();
+      this.getAirlineList();
+      this.getEmployeeList();
+      this.getCompanyList();
+      this.GetHotelList();
+      this.getList();
+    },
+  }
+
+</script>
+<style>
+  .roomQuerySplitTrCss td {
+    background: #eee !important;
+  }
+
+  .roomQueryTalbe {
+    background: #ccc;
+  }
+
+  .roomQueryTalbe tr th {
+    background: #E6E6E6;
+    height: 40px;
+    font-size: 12px;
+    color: #333;
+  }
+
+  .roomQueryTalbe tr {
+    background: #fff;
+    text-align: center;
+    height: 40px;
+  }
+
+  .roomQueryTalbe tr td {
+    font-size: 12px;
+  }
+
+  .roomQueryTalbe tr td .pDateStyle {
+    border-bottom: 1px solid #ccc;
+    min-height: 24px;
+    line-height: 24px;
+    margin-top: 0;
+    box-sizing: content-box;
+  }
+
+  .roomQueryTalbe tr td .pDateStyle:last-child {
+    border-bottom: none;
+  }
+
+  .roomQueryTalbe tr td .pDateStyle>span:after {
+    content: '/';
+  }
+
+  .roomQueryTalbe tr td .pDateStyle>span:last-child:after {
+    content: ''
+  }
+
+  .roomQueryTalbe tr td .link p:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .roomQueryTalbe tr td .phoverStype:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .roomQuery_tripDetails {
+    padding: 0;
+    box-shadow: 0px 1px 3px 0px #dedede;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .roomQuery_tripDetails .popper__arrow::after {
+    border-bottom-color: #ededed !important;
+  }
+
+  .roomQuery_tripDetails table {
+    padding: 10px 0 0 20px;
+    background-color: #ededed;
+    border-collapse: collapse;
+    border: 1px solid #d2d2d2;
+    font-size: 12px;
+  }
+
+  .roomQuery_tripDetails table th {
+    background-color: #ededed;
+    padding: 5px;
+  }
+
+  .roomQuery_tripDetails table td {
+    background-color: #ffffff;
+    padding: 9px 15px;
+    color: #333333;
+    border: 1px solid #d2d2d2;
+  }
+
+  .roomQuery_tripDetails table td._d_name {
+    background-color: #ededed;
+  }
+
+  .roomQuery_tripDetails table ._color_666 {
+    color: #666666;
+  }
+
+  .roomQuery_tripDetails table tr._color_666 th {
+    padding: 9px 15px;
+  }
+
+</style>

src/components/temp/Supplier.vue

+
+<style  lang="less" scoped>
+   @import "../../assets/css/main.less";
+   @import "../../assets/css/cssReset.css";
+</style>
+
+<template>
+  <div>
+  	 	 <leftNav></leftNav>
+  </div>
+</template>
+
+<script>
+    import leftNav from '../public/leftNav.vue'		
+	export default {
+		data (){
+			return{
+				
+			}
+		},
+		components:{
+			leftNav
+		},
+		mounted(){
+			
+		},
+		methods:{
+			
+		}	
+	}
+
+
+
+		
+</script>
\ No newline at end of file

src/router/config.js

@@ -696,6 +696,46 @@ export default {
                                 title: '酒店查询统计'
                             },
                         },
+                        {
+                            path: '/HotelManagement2',    //供应商->酒店管理
+                            name: 'HotelManagement2',
+                            component: resolve => require(['@/components/Supplier/HotelManagement'], resolve),
+                            meta: {
+                                title: '酒店管理'
+                            },
+                        },
+                        {
+                            path: '/HotelSalesBoard2',    //供应商->酒店统计
+                            name: 'HotelSalesBoard2',
+                            component: resolve => require(['@/components/Supplier/HotelSalesBoard'], resolve),
+                            meta: {
+                                title: '酒店统计'
+                            },
+                        },
+                        {
+                            path: '/HotelTotalStock2',    //供应商->总库存看板
+                            name: 'HotelTotalStock2',
+                            component: resolve => require(['@/components/Supplier/HotelTotalStock'], resolve),
+                            meta: {
+                                title: '总库存看板'
+                            },
+                        },
+                        {
+                            path: '/roomQuery2',    //供应商->定房查询
+                            name: 'roomQuery2',
+                            component: resolve => require(['@/components/Supplier/roomQuery'], resolve),
+                            meta: {
+                                title: '定房查询'
+                            },
+                        },
+                        {
+                            path: '/HotelQueryList2',    //供应商->酒店查询
+                            name: 'HotelQueryList2',
+                            component: resolve => require(['@/components/Supplier/HotelQueryList'], resolve),
+                            meta: {
+                                title: '酒店查询'
+                            },
+                        },
                         {
                             path: '/RestauranOrder', //餐厅订单信息
                             name: 'RestauranOrder',
@@ -3318,7 +3358,14 @@ export default {
                     name: 'PermissionManage',
                     component: resolve => require(['@/components/PermissionManage'], resolve),
                 },
-
+                {
+                    path: '/Supplier',  //供应商一级页面
+                    name: 'Supplier',
+                    component: resolve => require(['@/components/temp/Supplier'], resolve),
+                    meta: {
+                        title: '供应商'
+                    }
+                }
             ]
         },
         {