增加酒店产品管理

src/components/Supplier/HotelManagement.vue

@@ -326,7 +326,7 @@
         </div>
         <div class="btnList">
           <button @click="goSubInfo('HotelInfo2',item.ID)" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
-          <button @click="goUrl('HotelProductManage2',item)" class="hotelBtn">报价与库存</button>
+          <button @click="goUrl('HotelProductManage3',item)" class="hotelBtn">报价与库存</button>
         </div>
       </div>
     </div>

src/components/Supplier/HotelProductCalendar.vue

+<template>
+  <div class="hotelProductCalendar">
+    <div class="hotelProductCalendar_month">
+      <div onselectstart="return false;">
+        <span>{{calendar.data.date&&calendar.data.date.split('-')[0]}}年</span>
+        <span>{{calendar.data.date&&calendar.data.date.split('-')[1]}}月</span>
+      </div>
+      <div>
+        <span>酒店库存表</span>
+      </div>
+      <div>
+        <i class="iconfont icon-cha" @click="calendarHide()"></i>
+      </div>
+    </div>
+    <div class="hotelProductCalendar_week">
+      <div>{{$t('hotel.hotel_Monday')}}</div>
+      <div>{{$t('hotel.hotel_Tuesday')}}</div>
+      <div>{{$t('hotel.hotel_Wednesday')}}</div>
+      <div>{{$t('hotel.hotel_Thursday')}}</div>
+      <div>{{$t('hotel.hotel_Friday')}}</div>
+      <div>{{$t('hotel.hotel_Saturday')}}</div>
+      <div>{{$t('hotel.hotel_Sunday')}}</div>
+    </div>
+    <div class="hotelProductCalendar_day">
+      <div v-for="(item, index) in calendar.data.days" :key="index">
+        <div :class="item.month===calendar.data.date?'nowMonth':'otherMonth'">
+          <span>{{item.date.getMonth()+1}}-{{item.date.getDate()}}</span>
+        </div>
+        <div v-if="item.data&&item.month===calendar.data.date" :class="stockColor(item.data.SubList[0].InventoryType)">
+          <template v-for="(childItem,childIndex) in item.data.SubList">
+            <p>
+                <span title="点击修改价格和库存信息">
+                  价格：<span @click="goUrlA('2', item,childItem.BatchNumber)" class="text_underLine">{{childItem.CostPrice}}（{{childItem.CurrencyName}}）</span>
+                </span><br/>
+                <span title="点击跳转到总库存看板">
+                  总库存：<span  class="text_underLine" @click="goUrlB(item)">{{childItem.Inventory}}（间）</span>
+                </span><br/>
+                <span title="点击跳转到酒店查询">
+                  剩余库存：<span class="text_underLine" @click="goUrlHotelTeam(item)">{{childItem.RemainingInventory}}（间）</span>
+                </span>
+            </p>
+          </template>
+        </div>
+        <div class="noStock" v-if="!item.data&&item.month===calendar.data.date">
+          <p><span>暂无数据</span></p>
+          <p><span @click="goUrlA('1', item,1)">立即新增</span></p>
+        </div>
+        <div class="hasStock" v-if="item.month!==calendar.data.date">
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      'calendar': {
+        type: Object,
+        default: function () {
+          return {
+            show: false,
+            data: {}
+          }
+        }
+      }
+    },
+    methods: {
+      stockColor: function (type) {
+        if (type === 1) {
+          return 'hasStock hasStock_1'
+        } else if (type === 2) {
+          return 'hasStock hasStock_2'
+        } else if (type === 3) {
+          return 'hasStock hasStock_3'
+        } else if (type === 4) {
+          return 'hasStock hasStock_4'
+        } else if (type === 5) {
+          return 'hasStock hasStock_5'
+        }
+      },
+      calendarHide: function () {
+        this.calendar.show = false
+        this.calendar.data = {}
+      },
+      goUrlA: function (type, item,BatchNumber) {
+        this.$emit('goEdit', type, item.day,BatchNumber)
+      },
+      goUrlHotelTeam: function (item) {
+        this.$router.push({
+          name: 'HotelsTeam',
+          query: {
+            HotelId: item.data.HotelId,
+            StartDate: item.data.DayStr,
+            blank: 'y',
+            tab: '酒店相关团'
+          }
+        });
+      },
+      goUrlB: function (item) {
+        this.$router.push({
+          name: 'HotelTotalStock',
+          query: {
+            HotelId: this.hotelId,
+            blank: 'y',
+            tab: '总库存看板'
+          }
+        });
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+  .hotelProductCalendar {
+    width: 100%;
+    font-size: 0px;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
+  }
+
+  .hotelProductCalendar_month {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background: #e95252;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .hotelProductCalendar_month>div {
+    display: inline-block;
+    height: 50px;
+    line-height: 50px;
+    vertical-align: top;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(1)>i {
+    display: inline-block;
+    font-size: 22px;
+    color: #ff7e7e;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(1)>input {
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+    border-radius: 17px;
+    outline: none;
+    border: none;
+    color: #fff;
+    background: transparent;
+    font-size: 18px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(1)>span {
+    display: inline-block;
+    padding: 0 5px;
+    font-size: 18px;
+    color: #fff;
+    vertical-align: middle;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(2)>span {
+    display: inline-block;
+    padding: 0 20px;
+    font-size: 18px;
+    color: #fff;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(3) {
+    position: absolute;
+    z-index: 1;
+    right: 0px;
+    top: 0px;
+    width: 50px;
+    text-align: center;
+  }
+
+  .hotelProductCalendar_month>div:nth-child(3)>i {
+    font-size: 12px;
+    color: #ffffff;
+    cursor: pointer;
+  }
+
+  .hotelProductCalendar_week {
+    width: 100%;
+    height: 28px;
+    background-color: #3fa783;
+  }
+
+  .hotelProductCalendar_week>div {
+    display: inline-block;
+    width: 14.2857%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  .hotelProductCalendar_day {
+    width: 100%;
+    border-left: 1px solid #dddddd;
+  }
+
+  .hotelProductCalendar_day>div {
+    display: inline-block;
+    width: 14.2857%;
+    height: 148px;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    vertical-align: top;
+  }
+
+  .hotelProductCalendar_day>div>div:nth-child(1) {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+  }
+
+  .hotelProductCalendar_day>div>div:nth-child(1)>span {
+    font-size: 14px;
+  }
+
+  .hotelProductCalendar_day>div>.nowMonth {
+    background-color: #CCCCCC;
+  }
+
+  .hotelProductCalendar_day>div>.nowMonth>span {
+    color: #000000;
+  }
+
+  .hotelProductCalendar_day>div:nth-child(7n-1)>.nowMonth>span {
+    color: #e95252;
+  }
+
+  .hotelProductCalendar_day>div:nth-child(7n)>.nowMonth>span {
+    color: #e95252;
+  }
+
+  .hotelProductCalendar_day>div>.otherMonth {
+    background-color: #DDDDDD;
+  }
+
+  .hotelProductCalendar_day>div>.otherMonth>span {
+    color: #999999;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock {
+    width: 100%;
+    height: 120px;
+    overflow-y: auto;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock>p {
+    width: 100%;
+    min-height: 20px;
+    padding: 0 10px;
+    line-height: 19px;
+    font-size: 12px;
+    border-bottom: 1px dashed #ccc;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock_1 {
+    color: #FFFFFF;
+    background-color: #ff3737;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock_2 {
+    background-color: #ff99cc;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock_3 {
+    background-color: #bcd6ee;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock_4 {
+    background-color: #ffffff;
+  }
+
+  .hotelProductCalendar_day>div>.hasStock_5 {
+    background-color: #02F78E;
+  }
+
+  .hotelProductCalendar_day>div>.noStock {
+    padding: 30px 0 0 0;
+    width: 100%;
+    height: 120px;
+  }
+
+  .hotelProductCalendar_day>div>.noStock>p:nth-child(1) {
+    width: 100%;
+    font-size: 16px;
+    color: #999999;
+    text-align: center;
+  }
+
+  .hotelProductCalendar_day>div>.noStock>p:nth-child(2) {
+    margin: 10px 0 0 0;
+    width: 100%;
+    font-size: 12px;
+    color: #00C6FF;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text_underLine {
+    cursor: pointer;
+    text-decoration: underline
+  }
+
+</style>