1

src/components/Restaurant/restaurantRankingDetails.vue

+<style>
+  .restaurantList .clearfix:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+  }
+
+  .restaurantList .hotelResource {
+    width: 100%;
+    min-height: 500px;
+    margin-top: 20px;
+  }
+
+  .restaurantList .resourceList {
+    width: 215px;
+    height: 330px;
+    background-color: #fff;
+    border: 1px dashed #ededed;
+    border-radius: 4px;
+    margin: 0 20px 20px 0;
+    font-size: 12px;
+    color: #333333;
+    float: left;
+  }
+
+  .restaurantList .resourceList:hover {
+    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
+    transition: all linear 0.5s;
+  }
+
+  .restaurantList .reTopInfo {
+    width: 100%;
+    height: 123px;
+    position: relative;
+  }
+
+  .restaurantList .reTopInfo img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .restaurantList .resTypeList {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  .restaurantList .resTypeList span {
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+    margin-right: 10px;
+  }
+
+  .restaurantList .L1 {
+    background-color: #e95252;
+  }
+
+  .restaurantList .L2 {
+    background-color: #47bf8c;
+  }
+
+  .restaurantList .L3 {
+    background-color: #2aaef2;
+  }
+
+  .restaurantList .L4 {
+    background-color: #9cf;
+  }
+
+  .restaurantList .L5 {
+    background-color: #00c6ff;
+    margin-top: 5px;
+  }
+
+  .restaurantList .starSu {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+  }
+
+  .restaurantList .sushe {
+    background-color: #ffc800;
+    display: inline-block;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: #fff;
+  }
+
+  .restaurantList .hotelTitle {
+    margin: 10px 16px 0 16px;
+    font-size: 14px;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .restaurantList .brandList {
+    margin: 16px 0;
+  }
+
+  .restaurantList .brandList i {
+    position: relative;
+    top: 2px;
+  }
+
+  .restaurantList .brand {
+    float: left;
+    width: 49%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .restaurantList .dayNum {
+    float: right;
+    text-align: center;
+    width: 50%;
+  }
+
+  .restaurantList .iconfont {
+    margin-right: 5px;
+  }
+
+  .restaurantList .dieline {
+    color: #2aaef2;
+    font-size: 14px;
+    top: 1px !important;
+  }
+
+  .restaurantList .AddressInner {
+    float: right;
+    width: 160px;
+    height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .restaurantList .btnList {
+    text-align: center;
+  }
+
+  .restaurantList .hotelBtn {
+    width: 80px;
+    height: 28px;
+    background: #f76f6f;
+    border-radius: 14px;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .restaurantList .hotelBtn:first-child {
+    margin-right: 19px;
+  }
+
+  .restaurantList .w150 .el-input {
+    width: 150px !important;
+  }
+
+  .restaurantList .SupportCount {
+    color: #4bca81;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 0;
+    display: inline-block;
+  }
+
+  .restaurantList .dayNumber {
+    color: #2aaef2;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 5px 5px 5px;
+    display: inline-block;
+  }
+
+  .restaurantList .line {
+    float: left;
+    width: 1px;
+    height: 35px;
+    background-color: #ededed;
+    margin-top: 6px;
+  }
+
+  .restaurantList .foodList {
+    display: inline-block;
+    padding: 1px 5px;
+    background-color: #ff9c00;
+    color: #fff;
+    margin-right: 6px;
+    border-radius: 2px;
+  }
+
+  .restaurantList .foodList:last-child {
+    margin-right: 0;
+  }
+
+  .restaurantList .delScien {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: none;
+  }
+
+  .restaurantList .delScien:hover {
+    color: #f76f6f;
+    cursor: pointer;
+  }
+
+  .restaurantList .resourceList:hover .delScien {
+    display: block;
+  }
+
+  .restaurantList .comCursorUrl {
+    cursor: pointer;
+  }
+  .restaurantList .el-button{
+    width: 29px;
+}
+  /* 餐厅列表 */
+
+</style>
+<template>
+  <div class="flexOne restaurantList">
+    <!-- <div class="query-box">
+      <ul>
+        <li>
+          <span>
+            <em>{{$t('system.quety_area')}}</em>
+            <el-select v-model="msg.PlaceID" class="w150" filterable 
+              :placeholder="$t('hotel.hotel_province')">
+              <el-option :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
+              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
+            </el-select>
+          </span>
+        </li>
+        
+        <li>
+          <span>
+            <em>使用日期</em>
+            <el-date-picker class="w150" type="date" v-model="msg.QStartDate"
+                :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
+              <el-date-picker class="w150" type="date" v-model="msg.QEndDate"
+                :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>团队类型</em>
+            <el-select class="multiple_input" v-model="msg.TeamType" filterable 
+              placeholder="请选择团队类型">
+              <el-option :label="$t('pub.unlimitedSel')" :value="-1"> </el-option>
+                  <el-option v-for='item in teamList' :key="item.ID" :label="item.Name" :value="item.ID">
+                  </el-option>
+                </el-select>
+          </span>
+        </li>
+        <li>
+          <span>
+            <em>出团公司</em>
+            <el-select class=" multiple_input"  placeholder="请选择团队类型"   v-model="msg.OutBranchId" >
+              <el-option :label="$t('pub.unlimitedSel')" :value="-1"> </el-option>
+              <el-option v-for="item in CompanyList" :key="item.id" :label="item.bName"
+                 :value="item.id"></el-option>
+              </el-select>
+          </span>
+        </li>
+        <li>
+          <button class="hollowFixedBtn" type="button"
+            @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
+        </li>
+      </ul>
+    </div> -->
+    <el-card class="box-card" style="margin-bottom:20px;">
+  
+    <p style="margin-bottom:5px;">餐厅名称：<span style="color:#f56c6c">{{$route.query.NewDinnerName}}</span> </p>
+    <p>餐厅真实名称：<span style="color:#f56c6c">{{$route.query.DinnerRealName}}</span></p>
+ 
+</el-card>
+    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%;min-height:450px;" v-loading="loading" >
+      <el-table-column prop="TCNUM" label="团号">
+        <template slot-scope="scope">
+          {{scope.row.TCNUM}}（ {{scope.row.TCID}}）
+        </template>
+      </el-table-column>
+      <el-table-column prop="TeamTypeStr" label="团队类型">
+      </el-table-column>
+      <el-table-column prop="StartDate" label="出发日期">
+      </el-table-column>
+      <el-table-column prop="UseDate" label="使用日期">
+      </el-table-column>
+      <el-table-column prop="DNum" label="大/中/小人数">
+        <template slot-scope="scope">
+          {{scope.row.DNum}}/   {{scope.row.ZNum}}/   {{scope.row.XNum}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="DUnitPrice" label="大/中/小价格">
+        <template slot-scope="scope">
+          {{scope.row.DUnitPrice}}/   {{scope.row.ZUnitPrice}}/{{scope.row.XUnitPrice}}
+        </template>
+      </el-table-column>
+     
+     
+    </el-table>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      :page-size="msg.pageSize" layout="total,prev, pager, next, jumper" :total="msg.total" v-if="tableData.length>0"></el-pagination>
+    <!-- <div v-if="tableData.length===0">{{$t('system.content_noData')}}</div> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      
+        total: 0,
+        currentPage: 1,
+        provinceList: "",
+        tableData: [],
+        CompanyList: [], //出团公司
+        teamList: [],//团队类型
+        loading: true,
+        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          QStartDate: "",
+          QEndDate: "",
+          OutBranchId: -1,
+          PlaceID: 0,
+          TeamType: -1,
+          DiningId:0,
+        },
+        pickerBeginDateBefore: {
+          disabledDate: time => {
+            if (this.msg.QEndDate == null) {
+              return false;
+            } else {
+              let endTime = new Date(this.msg.QEndDate);
+              return endTime.getTime() < time.getTime();
+            }
+          }
+        },
+        pickerBeginDateAfter: {
+          disabledDate: time => {
+            let startTime = new Date(this.msg.QStartDate);
+            return startTime.getTime() >= time.getTime();
+          }
+        },
+      };
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.selectResource();
+      },
+      resetPageIndex() {
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      getTeamList() {
+        //出团公司
+        this.apipost(
+          "travel_GetTeamTypeEnumList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.teamList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //根据省份获取城市
+      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.QCountry !== "") {
+          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 => {}
+          );
+        // }
+      },
+     
+      //获取餐厅使用排行列表
+      selectResource() {
+        this.loading = true;
+        this.apipost(
+          "order_post_GetPageRankingDetailList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if (res.data.resultCode == 1) {
+              this.total = res.data.data.count;
+              this.tableData = res.data.data.pageData;
+              this.msg.total = res.data.data.count;
+              this.tableData.forEach(x => {
+                if (x.FoodTag != "") {
+                  x.FoodTagArr = x.FoodTag.split(",").slice(0, 3);
+                }
+              });
+            }
+          },
+          null
+        );
+      },
+      goUrl(path, id) {
+        this.$router.push({
+          path: path,
+          query: {
+            id: id,
+            blank: 'y',
+            tab: '套餐查询'
+          }
+        });
+      },
+     
+      getSellorCompany() {
+        //出团公司
+        this.apipost(
+          "sellorder_post_GetBranchList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.CompanyList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+    },
+    created() {
+      let userInfo = this.getLocalStorage();
+      this.EmployeeId = userInfo.EmployeeId;
+      if (this.$route.query.QStartDate) {
+        this.msg.QStartDate = this.$route.query.QStartDate;
+      }
+      if (this.$route.query.QEndDate) {
+        this.msg.QEndDate = this.$route.query.QEndDate;
+      }
+      if (this.$route.query.OutBranchId) {
+        this.msg.OutBranchId = this.$route.query.OutBranchId;
+      }
+      if (this.$route.query.PlaceID) {
+        this.msg.PlaceID = this.$route.query.PlaceID;
+      }
+      if (this.$route.query.TeamType) {
+        this.msg.TeamType = this.$route.query.TeamType;
+      }
+      if (this.$route.query.DiningId) {
+        this.msg.DiningId = this.$route.query.DiningId;
+      }
+     
+      // var myDate = new Date();
+      // var nowDate =  myDate.getFullYear() +  "-" +  parseInt(myDate.getMonth() ) + "-" +  myDate.getDate();
+      // var nowEDate =  myDate.getFullYear() +  "-" +  parseInt(myDate.getMonth() + 1) + "-" +  myDate.getDate();
+      // this.msg.QStartDate = nowDate;
+      // this.msg.QEndDate = nowEDate;
+    },
+    mounted() {
+      // this.getProvinceList(651,1);
+      // this.getTeamList();
+      // this.getSellorCompany();
+      this.selectResource();
+    }
+  };
+
+</script>

src/components/Restaurant/restaurantRankingList.vue

@@ -286,24 +286,24 @@
       </el-table-column>
       <el-table-column prop="DinnerRealName" label="餐厅真实名称">
       </el-table-column>
-      <el-table-column prop="UserNum" label="使用次数">
+      <el-table-column width="150" prop="UserNum" label="使用次数">
       </el-table-column>
-      <el-table-column prop="PriceNormalUseNum" label="常规团使用次数">
+      <el-table-column width="150" prop="PriceNormalUseNum" label="常规团使用次数">
       </el-table-column>
-      <el-table-column prop="PriceNormalPeopleNum" label="常规团使用人数">
+      <el-table-column width="150" prop="PriceNormalPeopleNum" label="常规团使用人数">
       </el-table-column>
-      <el-table-column prop="PriceOneDayTripUseNum" label="小包团使用次数">
+      <el-table-column width="150" prop="PriceOneDayTripUseNum" label="小包团使用次数">
       </el-table-column>
-      <el-table-column prop="PriceOneDayTripPeopleNum" label="小包团使用人数">
+      <el-table-column width="150" prop="PriceOneDayTripPeopleNum" label="小包团使用人数">
       </el-table-column>
-      <el-table-column prop="PricePacketGroupUseNum" label="当地游团使用次数">
+      <el-table-column width="150" prop="PricePacketGroupUseNum" label="当地游团使用次数">
       </el-table-column>
-      <el-table-column prop="PricePacketGroupPeopleNum" label="当地游团使用人数">
+      <el-table-column width="150" prop="PricePacketGroupPeopleNum" label="当地游团使用人数">
       </el-table-column>
-      <el-table-column :label="$t('system.table_operation')" width="150">
+      <el-table-column :label="$t('system.table_operation')" width="80">
         <template slot-scope="scope">
-          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
-            <el-button @click="goSubInfo('demesticRestaurantInfoManage',scope.row.NewDiningID)" type="primary" icon="el-icon-edit" circle>
+          <el-tooltip class="item" effect="dark" content="餐厅使用详情" placement="top">
+            <el-button @click="goUrl('restaurantRankingDetails',scope.row.NewDiningID,scope.row.NewDinnerName,scope.row.DinnerRealName)" type="primary"  icon="iconfont icon-menpiao1" circle>
             </el-button>
           </el-tooltip>
         </template>
@@ -432,13 +432,20 @@
           null
         );
       },
-      goUrl(path, id) {
+      goUrl(path, id,NewDinnerName,DinnerRealName) {
         this.$router.push({
           path: path,
           query: {
-            id: id,
+            NewDinnerName:NewDinnerName,
+            DinnerRealName:DinnerRealName,
+            QStartDate:this.msg.QStartDate,
+            QEndDate: this.msg.QEndDate,
+            OutBranchId: this.msg.OutBranchId,
+            PlaceID: this.msg.PlaceID,
+            TeamType: this.msg.TeamType,
+            DiningId:id,
             blank: 'y',
-            tab: '套餐查询'
+            tab: '餐厅使用详情'
           }
         });
       },

src/router/config.js

@@ -1529,6 +1529,14 @@ export default {
                 title: '餐厅使用排行'
               },
             },
+            {
+              path: '/restaurantRankingDetails', //餐厅使用排行详情
+              name: 'restaurantRankingDetails',
+              component: resolve => require(['@/components/Restaurant/restaurantRankingDetails'], resolve),
+              meta: {
+                title: '餐厅使用排行详情'
+              },
+            },
             {
               path: '/domesticRestaurantList', //餐厅使用排行
               name: 'domesticRestaurantList',