餐厅操作页面优化

src/components/Restaurant/bookDinnerStatisticsDetails.vue

@@ -76,11 +76,23 @@
                 </table>
               </td>
               <td v-if="childIndex==0" :rowspan="3">
-                <el-select class='w160 sel' v-model='subItem.NewDiningID' filterable :placeholder="$t('pub.pleaseSel')"
-                  @visible-change='getDingList(item)' @change='sendValue(subItem,item)'>
+                <el-select style="display:none;" class='w160 sel' v-model='subItem.NewDiningID' filterable
+                  :placeholder="$t('pub.pleaseSel')" @visible-change='getDingList(item)'
+                  @change='sendValue(subItem,item)'>
                   <el-option v-for='itemHotel in item.DinnerList' :label='itemHotel.RealName' :value='itemHotel.ID'
                     :key='itemHotel.ID'></el-option>
                 </el-select>
+                <span style="color:green">{{subItem.NewDiningName}}</span><br/>
+                <el-popover placement="right" width="540" trigger="click" v-model="subItem.isShowPop">
+                  <comCheckDinner :ref="'comCheckDinner'+index+subIndex+''" :UseDate="item.UseTimeStr"
+                    v-on:childDinner="childDinnerList">
+                  </comCheckDinner>
+                  <el-button size="small" type="danger" :data-index="'comCheckDinner'+index+subIndex+''"
+                    slot="reference" style="cursor:pointer;"
+                    @click="getChildDinner(index,subIndex),subItem.isShowPop=true">
+                    餐厅选择
+                  </el-button>
+                </el-popover>
               </td>
               <td v-if="childIndex==0" :rowspan="3">
                 {{subItem.UseDinnerTypeStr}}
@@ -209,6 +221,7 @@
   </div>
 </template>
 <script>
+  import comCheckDinner from "../commonPage/comCheckDinner.vue";
   export default {
     data() {
       return {
@@ -225,9 +238,35 @@
         //是否禁用按钮
         IsDisabled: false,
         allCurrencyList: [],
+        findex: 0,
+        childIndex: 0,
       };
     },
+    components: {
+      comCheckDinner,
+    },
     methods: {
+      getChildDinner(index, subIndex) {
+        this.findex = index;
+        this.childIndex = subIndex;
+        let str = `comCheckDinner${index}${subIndex}`
+        this.$refs[str][0].getCheckDinner();
+      },
+      //选中赋值
+      childDinnerList(obj) {
+        var oldData = this.list[this.findex].DiningSummaryList[this.childIndex];
+        oldData.Address = obj.Address;
+        oldData.Tel = obj.Tel;
+        oldData.PayStyle = obj.PayStyle;
+        oldData.PayStyleExt = obj.PayStyle;
+        oldData.NewDiningID = obj.ID;
+        oldData.NewDiningName = obj.Name;
+        this.list.forEach(x => {
+          x.DiningSummaryList.forEach(y => {
+            y.isShowPop = false;
+          })
+        });
+      },
       //页面跳转[大写]
       goUrlR(path, obj, title) {
         this.$router.push({
@@ -277,11 +316,12 @@
           res => {
             this.loading = false;
             if (res.data.resultCode == 1) {
-              this.list = res.data.data.DiningList;
+              var resultArray = res.data.data.DiningList;
               this.IsOperation = res.data.data.IsOperation;
-              this.list.forEach(item => {
+              resultArray.forEach(item => {
                 item.DinnerList = [];
                 item.DiningSummaryList.forEach(x => {
+                  x.isShowPop = false;
                   x.DiningReserveType = x.DiningReserveType.toString();
                   this.calculationPrice(x);
                   var str = x.NewDiningName;
@@ -297,6 +337,7 @@
                   }
                 })
               });
+              this.list=resultArray;
             } else {
               this.Error(res.data.message);
             }

src/components/commonPage/comCheckDinner.vue

+<style>
+
+  .comCheckDinner .comCheckDinner {
+    width: 100%;
+    height: 150px;
+    overflow: auto
+  }
+
+  .comCheckDinner .comCk_list {
+    padding: 0 20px;
+    margin: 0 15px 5px 0;
+  }
+
+  .comCheckDinner .cm_Inventory {
+    margin-left: 20px;
+    color: red;
+    display: inline-block;
+  }
+
+  .comCheckDinner .cm_hotelTitle {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #d1d1d1;
+    padding: 0 20px 10px 20px;
+  }
+
+  .comCheckDinner .com_SaveBtn {
+    margin: 10px 20px 0 45%;
+  }
+
+  .comCheckDinner .ckedList {
+    background-color: #E95252;
+    color: #fff;
+  }
+  .comCheckDinner .Ck_hotelInfo{
+    width:100%;
+    height:40px;
+    background-color: #F6F8FB;
+    text-align: center;
+    line-height: 40px;
+    margin-bottom:10px;
+  }
+  .comCheckDinner .ck_goUrl{
+      color:blue;
+      cursor: pointer;
+      margin-left:10px;
+  }
+</style>
+
+<template>
+  <div class="comCheckDinner">
+    <div class="Ck_hotelInfo">
+      <span style="color:red">{{UseDate}}</span> 餐厅信息
+    </div>
+    <div class="cm_hotelTitle clearfix">
+      <div style="float:left;">
+        地区:
+        <el-select filterable v-model="qMsg.ProvinceId" class="w120" :placeholder="$t('pub.pleaseSel')">
+          <el-option label="不限" :value='0'></el-option>
+          <el-option v-for="item in ProvinceList" :label='item.Name' :value='item.ID' :key='item.ID'>
+          </el-option>
+        </el-select>
+      </div>
+      <div style="float:left;margin-left:10px;">
+        餐厅名称/电话:
+        <el-input type="text" v-model="qMsg.Name" class="w120" @keyup.native.enter="getCheckDinner()" placeholder="餐厅名称或电话"></el-input>
+        <input type="button" class="normalBtn" value="查询" @click="getCheckDinner()" />
+      </div>
+    </div>
+    <div>
+      <el-tabs type="border-card" v-loading="loading" v-if="IsShow" >
+        <el-tab-pane :label="item.ProvinceName" v-for="(item,index) in dataList" :key="item.subCode">
+          <div class="clearfix comCheckDinner">
+              <div class="comCk_list" v-for="(subItem,subIndex) in item.DinnerList">
+                <input :id="'H'+index+'_'+subIndex" type="checkbox" v-model="subItem.isChecked" @click="getDinner(item.DinnerList,subIndex)"/>
+                <label :for="'H'+index+'_'+subIndex" style="cursor: pointer">{{subItem.Name}}</label>
+              </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <input type="button" class="normalBtn com_SaveBtn" @click="sendCkedHotel()" value="保存" />
+  </div>
+</template>
+<script>
+  export default {
+    props: ["UseDate"],
+    data() {
+      return {
+        loading:false,
+        dataList: [],
+        ProvinceList: [],
+        qMsg:{
+           ProvinceId: 0, //选择个省份编号
+           Name:"",//酒店名称
+        },
+        IsShow:false,
+        ckedDinner:{}
+      };
+    },
+    methods: {
+      getCheckDinner() {
+        this.loading=true;
+        this.IsShow=false;
+        this.dataList = [];
+        this.apipost('dining_post_GetDinnerList_V2Service', {
+          //1-只查询有库存的酒店
+          Country: "651",
+          Province: this.qMsg.ProvinceId,
+          Name:this.qMsg.Name,
+          sDate: this.UseDate
+        }, res => {
+          this.loading=false;
+          this.IsShow=true;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data;
+            this.dataList.forEach(x => {
+              x.DinnerList.forEach(y => {
+                y.isChecked = false;
+              })
+            })
+          } else {
+            this.Error(res.data.message)
+          }
+        }, err => {})
+      },
+      getDinner(DinnerList, index) {
+        DinnerList.forEach((x, subIndex) => {
+          if (index == subIndex) {
+            x.isChecked = !x.isChecked;
+            this.ckedDinner = x;
+          } else {
+            x.isChecked = false;
+          }
+        })
+        this.$forceUpdate();
+      },
+      //向父组件传递选中酒店
+      sendCkedHotel() {
+        var ckDinnerObj = {};
+        if(this.ckedDinner){
+            ckDinnerObj.ID = this.ckedDinner.ID;
+            ckDinnerObj.Address = this.ckedDinner.Address;
+            ckDinnerObj.Name = this.ckedDinner.Name;
+            ckDinnerObj.PayStyle = this.ckedDinner.PayStyle;
+            ckDinnerObj.Tel = this.ckedDinner.Tel;
+            ckDinnerObj.RebateRatio=this.ckedDinner.RebateRatio;
+            ckDinnerObj.RebateCount=this.ckedDinner.RebateCount;
+        }
+        this.$emit("childDinner", ckDinnerObj);
+      },
+      //获取日本下面的市->下拉框用
+      getProvinceList() {
+        let msg = {
+          Id: 651
+        };
+        this.apipost("dict_post_Destination_GetChildList", msg, res => {
+            if (res.data.resultCode == 1) {
+              this.ProvinceList = res.data.data;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+    },
+    mounted() {
+      this.getProvinceList();
+    }
+  };
+
+</script>