xiiugai

src/components/offlineService/appointmentBoard.vue

@@ -3,6 +3,7 @@
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
+    table-layout: fixed
   }
 
   .appointTable tr th {
@@ -21,8 +22,8 @@
 
   .appointTable tr td {
     font-size: 12px;
-    height:60px;
-    color:#333333;
+    height: 60px;
+    color: #333333;
     border: 1px solid #E5E5E5;
   }
 
@@ -47,63 +48,68 @@
     border-spacing: 0;
     width: 250px;
   }
-  .posi{
+
+  .posi {
     position: relative;
   }
-  .abso{
+
+  .abso {
     position: absolute;
-    left:0;
-    top:0;
-    width:3px;
-    height:100%;
+    left: 0;
+    top: 0;
+    width: 3px;
+    height: 100%;
     background: #409EFF;
   }
-  .abso2{
+
+  .abso2 {
     position: absolute;
-    left:0;
-    top:0;
-    width:3px;
-    height:100%;
+    left: 0;
+    top: 0;
+    width: 3px;
+    height: 100%;
     background: #67C23A;
 
   }
+
 </style>
 <template>
   <div class="appointmentBoard">
     <div class="content">
       <div>
-        <div class="searchInput">
-          <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.Name"
-            size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
-          </el-input>
-          <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
-            @click="msg.pageIndex=1,getList()"> </span>
-        </div>
+        <el-select class="w200" style="margin-right: 10px;" v-model="msg.StoreId" @change="getList" size="small" placeholder="请选择">
+          <el-option :key="0" label="不限" :value="0"></el-option>
+          <el-option v-for="item in StoreList" :key="item.Id" :label="item.Name" :value="item.Id">
+          </el-option>
+        </el-select>
         <div style="display:inline-block;">
-          <el-date-picker v-model="msg.date" size="small" type="date" placeholder="选择日期">
+          <el-date-picker v-model="msg.WorkDate" @change="getList" value-format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期">
           </el-date-picker>
         </div>
       </div>
       <table class="appointTable" border="0" cellspacing="0" cellpadding="0">
         <tr>
           <th style="width:100px;">服务</th>
-          <th>高晶晶</th>
-          <th>张三丰</th>
-        </tr>
-        <tr>
-          <td>09:30</td>
-          <td class="posi">
-            <div class="abso"></div>
-          </td>
-          <td rowspan="2" class="posi">
-            <div class="abso2"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>10:00</td>
-          <td></td>
-          <!-- <td></td> -->
+          <th v-for="(subItem,subIndex) in dataList.KanBanList" :key="subIndex">{{subItem.Name}}</th>
         </tr>
+          <tr v-for="(item,index) in dataList.allTime" :key="index">
+            <td>{{item}} {{index}}</td>
+            <td class="posi" v-for="(childItem,childIndex) in dataList.KanBanList" :key="childIndex" :rowspan="getRow(item,childItem)">
+              <!-- <div v-if="childItem."></div>
+              <div class="abso"></div> -->{{childIndex}}
+              <template v-for="(sItem,sIndex) in childItem.OrderList">
+                <div v-if="sItem.ServiceTime==item" :key="sIndex" class="OrderDiv_Main">
+                  <div class="appointUser">
+                    <img :src="sItem.UserPhoto" class="UserPhote" alt=""/>
+                    <span>{{sItem.Name}}</span>
+                  </div>
+                  <div>
+                    {{sItem.GoodsName}}<span v-if="sItem.GoodServiceTime>0">{{getHours(sItem.GoodServiceTime)}}小时</span>
+                  </div>
+                </div>
+              </template>
+            </td>
+          </tr>
       </table>
     </div>
   </div>
@@ -114,20 +120,77 @@
       return {
         dataList: [],
         msg: {
-          Name: '', //门店名
-          date: '' //日期
-        }
+          StoreId: 0, //门店名
+          WorkDate: '' //日期
+        },
+        StoreList: [], //门店下拉
       };
     },
     created() {
 
     },
     methods: {
-
+      //获取数据
+      getList() {
+        this.apipost("/api/Reserve/GetStoreOrderInfo", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            console.log(res,'数据来了');
+            this.dataList=res.data.data;
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+      //获取门店下拉
+      getStoreList() {
+        this.apipost("/api/MContent/GetStoresList", {}, res => {
+          if (res.data.resultCode == 1) {
+            this.StoreList = res.data.data;
+            // if(this.StoreList.length>0){
+            //   this.msg.StoreId = this.StoreList[0].Id
+            //   this.getList();
+            // }else{
+            //   this.getList();
+            // }
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+      //获取小时
+      getHours(time){
+        return time*2;
+      },
+      //获取跨行
+      getRow(data1,data2){
+        var count=0;
+        data2.OrderList.forEach(x => {
+          if(x.ServiceTime==data1){
+            count++;
+          } 
+        });
+        console.log(count,'count');
+        if(count>0){
+          return count;
+        }
+      },
+      getItem(time,data){
+        data.forEach(x=>{
+          if(x.OrderList.length>0){
+            if(time==x.OrderList[0].ServiceTime){
+              return true
+            }else{
+              return false
+            }
+          }
+        })
+      },
     },
-    mounted() {}
+    mounted() {
+      this.getStoreList();
+      this.getList();
+    }
   };
-
 </script>
 <style>
   .appointmentBoard .content {
@@ -136,5 +199,17 @@
     padding: 20px;
     box-sizing: border-box;
   }
-
+  .appointmentBoard .appointUser{
+    text-align: left;
+    line-height: 33px;
+  }
+  .appointmentBoard .UserPhote{
+    width:30px;
+    height:30px;
+    border-radius: 50%;
+  }
+  .appointmentBoard .OrderDiv_Main{
+    width:100px;
+    text-align: left;
+  }
 </style>