Skip to content

E
ElectricitySheep
Commit b0e9e6fe authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huangyuanyuan/electricitysheep

parents 07ea211f 79794bcc
Show whitespace changes
Inline Side-by-side
Showing with 213 additions and 115 deletions
src/components/offlineService/appointmentBoard.vue
View file @ b0e9e6fe
<style>
.appointTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
table-layout: fixed
}
.appointTable tr th {
height: 50px;
font-size: 14px;
color: #111111;
font-weight: bold;
border: 1px solid #E6E6E6
}
.appointTable tr {
background: #fff;
text-align: center;
height: 40px;
}
.appointTable tr td {
font-size: 12px;
height: 60px;
color: #333333;
border: 1px solid #E5E5E5;
}
.appointmentBoard .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
display: inline-block;
}
.appointmentBoard .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.appointmentBoard .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
}
.posi {
position: relative;
}
.abso {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #409EFF;
}
.abso2 {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #67C23A;
}
</style>
<template> <template>
<div class="appointmentBoard"> <div class="appointmentBoard">
<div class="content"> <div class="content">
<div> <div>
<el-select class="w200" style="margin-right: 10px;" v-model="msg.StoreId" @change="getList" size="small" placeholder="请选择"> <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 :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 v-for="item in StoreList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option> </el-option>
</el-select> </el-select>
<div style="display:inline-block;"> <div style="display:inline-block;">
<el-date-picker v-model="msg.WorkDate" @change="getList" value-format="yyyy-MM-dd" 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> </el-date-picker>
</div> </div>
</div> </div>
...@@ -93,20 +20,57 @@ ...@@ -93,20 +20,57 @@
<th v-for="(subItem,subIndex) in dataList.KanBanList" :key="subIndex">{{subItem.Name}}</th> <th v-for="(subItem,subIndex) in dataList.KanBanList" :key="subIndex">{{subItem.Name}}</th>
</tr> </tr>
<tr v-for="(item,index) in dataList.allTime" :key="index"> <tr v-for="(item,index) in dataList.allTime" :key="index">
<td>{{item}} {{index}}</td> <td>{{item}}</td>
<td class="posi" v-for="(childItem,childIndex) in dataList.KanBanList" :key="childIndex" :rowspan="getRow(item,childItem)"> <!-- <td class="posi" v-for="(childItem,childIndex) in dataList.KanBanList" :key="childIndex"
<!-- <div v-if="childItem."></div> :rowspan="getRow(item,childItem)"> -->
<div class="abso"></div> -->{{childIndex}} <td class="posi" v-for="(childItem,childIndex) in dataList.KanBanList" :key="childIndex">
<template v-for="(sItem,sIndex) in childItem.OrderList"> <template v-for="(sItem,sIndex) in childItem.OrderList">
<div v-if="sItem.ServiceTime==item" :key="sIndex" class="OrderDiv_Main"> <el-popover :key="sIndex" popper-class="Order_Popover" placement="top-start" title="" width="200"
<div class="appointUser"> trigger="click">
<img :src="sItem.UserPhoto" class="UserPhote" alt=""/> <div class="orderTips_top">
<span>{{sItem.Name}}</span> <span class="order_dian"></span>{{tipsInfo.StoreName}}
</div> </div>
<div class="OrderList_info">
<div style="margin:0 20px;border-bottom:1px solid #E2E2E2;">
<div class="OrderList_top">
<img style="width:36px;height:36px;border-radius:50%;margin-right:10px;" :src="tipsInfo.UserPhoto" alt="" />
<div> <div>
{{sItem.GoodsName}}<span v-if="sItem.GoodServiceTime>0">{{getHours(sItem.GoodServiceTime)}}小时</span> <div class="orderList_Name">{{tipsInfo.UserName}}</div>
<div style="color:#777777;font-size:12px;margin-top:3px;">
{{tipsInfo.GoodsName}}<span v-if="tipsInfo.GoodServiceTime>0"> |
{{getHours(tipsInfo.GoodServiceTime)}}小时</span>
</div>
</div>
</div>
<div class="order_ListInfo">
<div class="Order_StoreTitle">门店地址</div>
<div class="Order_Store_Address">{{tipsInfo.StoreAddress}}</div>
</div> </div>
<div class="order_ListInfo">
<div class="Order_StoreTitle">服务人员</div>
<div class="Order_Store_Address">{{tipsInfo.Name}}</div>
</div> </div>
<div class="order_ListInfo">
<div class="Order_StoreTitle">到店信息</div>
<div class="Order_Store_Address">{{tipsInfo.Number}}人 | {{tipsInfo.Mobile}}</div>
</div>
<div class="order_ListInfo">
<div class="Order_StoreTitle">备注信息</div>
<div class="Order_Store_Address">{{tipsInfo.BuyerMessage}}</div>
</div>
</div>
</div>
<div v-if="sItem.ServiceTime==item" slot="reference" @click="getStoreInfo(sItem,childItem)" class="OrderDiv_Main">
<div class="appointUser">
<img :src="sItem.UserPhoto" class="UserPhote" alt="" />
<span style="margin-left:5px;">{{sItem.UserName}}</span>
</div>
<div style="margin-left:35px;">
{{sItem.GoodsName}}<span v-if="sItem.GoodServiceTime>0"> |
{{getHours(sItem.GoodServiceTime)}}小时</span>
</div>
</div>
</el-popover>
</template> </template>
</td> </td>
</tr> </tr>
...@@ -121,9 +85,11 @@ ...@@ -121,9 +85,11 @@
dataList: [], dataList: [],
msg: { msg: {
StoreId: 0, //门店名 StoreId: 0, //门店名
WorkDate: '' //日期 WorkDate: '2020-11-03' //日期
}, },
StoreList: [], //门店下拉 StoreList: [], //门店下拉
scheduleData: {},
tipsInfo: {}, //提示信息
}; };
}, },
created() { created() {
...@@ -134,8 +100,7 @@ ...@@ -134,8 +100,7 @@
getList() { getList() {
this.apipost("/api/Reserve/GetStoreOrderInfo", this.msg, res => { this.apipost("/api/Reserve/GetStoreOrderInfo", this.msg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
console.log(res,'数据来了'); this.dataList = res.data.data;
this.dataList=res.data.data;
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
...@@ -158,39 +123,46 @@ ...@@ -158,39 +123,46 @@
}) })
}, },
//获取小时 //获取小时
getHours(time){ getHours(time) {
return time*2; return time * 2;
}, },
//获取跨行 //获取跨行
getRow(data1,data2){ getRow(data1, data2) {
var count=0; var count = 0;
data2.OrderList.forEach(x => { data2.OrderList.forEach(x => {
if(x.ServiceTime==data1){ if (x.ServiceTime == data1) {
count++; count++;
} }
}); });
console.log(count,'count'); if (count > 0) {
if(count>0){
return count; return count;
} }
}, },
getItem(time,data){ getItem(time, data) {
data.forEach(x=>{ data.forEach(x => {
if(x.OrderList.length>0){ if (x.OrderList.length > 0) {
if(time==x.OrderList[0].ServiceTime){ if (time == x.OrderList[0].ServiceTime) {
return true return true
}else{ } else {
return false return false
} }
} }
}) })
}, },
//点击获取
getStoreInfo(item,kanbanItem) {
console.log(item, '数据');
this.tipsInfo = item;
this.tipsInfo.StoreAddress = kanbanItem.StoreAddress;
this.tipsInfo.StoreName = kanbanItem.StoreName;
}
}, },
mounted() { mounted() {
this.getStoreList(); this.getStoreList();
this.getList(); this.getList();
} }
}; };
</script> </script>
<style> <style>
.appointmentBoard .content { .appointmentBoard .content {
...@@ -199,17 +171,143 @@ ...@@ -199,17 +171,143 @@
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.appointmentBoard .appointUser{
text-align: left; .appointmentBoard .appointUser {
line-height: 33px; display: flex;
align-items: center;
} }
.appointmentBoard .UserPhote{
width:30px; .appointmentBoard .UserPhote {
height:30px; width: 30px;
height: 30px;
border-radius: 50%; border-radius: 50%;
} }
.appointmentBoard .OrderDiv_Main{
width:100px; .appointmentBoard .OrderDiv_Main {
width: 200px;
text-align: left; text-align: left;
margin: 10px;
cursor: pointer;
}
.Order_Popover .OrderList_info {
background-color: #F8FAFB;
}
.Order_Popover .OrderList_top {
display: flex;
align-items: center;
padding:15px 0;
}
.Order_Popover {
padding: 0;
width:300px!important;
}
.Order_Popover .orderTips_top {
font-size: 12px;
color: #111111;
font-weight: bold;
margin: 15px;
}
.Order_Popover .order_dian {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #089BAB;
margin-right:10px;
position: relative;
top:-1px;
}
.Order_Popover .orderList_Name{
color:#111111;
}
.Order_Popover .order_ListInfo{
display:flex;
margin-bottom:10px;
}
.Order_Popover .Order_StoreTitle{
color:#333333;
font-size:12px;
width:60px;
}
.Order_Popover .Order_Store_Address{
font-size:12px;
color:#A3A3A3;
}
.appointmentBoard .appointTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
table-layout: fixed
}
.appointmentBoard .appointTable tr th {
height: 50px;
font-size: 14px;
color: #111111;
font-weight: bold;
border: 1px solid #E6E6E6
}
.appointmentBoard .appointTable tr {
background: #fff;
text-align: center;
height: 40px;
}
.appointmentBoard .appointTable tr td {
font-size: 12px;
height: 60px;
color: #333333;
border: 1px solid #E5E5E5;
}
.appointmentBoard .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
display: inline-block;
}
.appointmentBoard .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
} }
.appointmentBoard .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
}
.appointmentBoard .posi {
position: relative;
}
.appointmentBoard .abso {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #409EFF;
}
.appointmentBoard .abso2 {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: #67C23A;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment