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
Hide 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>
<div class="appointmentBoard">
<div class="content">
<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 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.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>
</div>
</div>
......@@ -92,24 +19,61 @@
<th style="width:100px;">服务</th>
<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">
<tr v-for="(item,index) in dataList.allTime" :key="index">
<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">
<template v-for="(sItem,sIndex) in childItem.OrderList">
<el-popover :key="sIndex" popper-class="Order_Popover" placement="top-start" title="" width="200"
trigger="click">
<div class="orderTips_top">
<span class="order_dian"></span>{{tipsInfo.StoreName}}
</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 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 class="order_ListInfo">
<div class="Order_StoreTitle">服务人员</div>
<div class="Order_Store_Address">{{tipsInfo.Name}}</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>{{sItem.Name}}</span>
<img :src="sItem.UserPhoto" class="UserPhote" alt="" />
<span style="margin-left:5px;">{{sItem.UserName}}</span>
</div>
<div>
{{sItem.GoodsName}}<span v-if="sItem.GoodServiceTime>0">{{getHours(sItem.GoodServiceTime)}}小时</span>
<div style="margin-left:35px;">
{{sItem.GoodsName}}<span v-if="sItem.GoodServiceTime>0"> |
{{getHours(sItem.GoodServiceTime)}}小时</span>
</div>
</div>
</template>
</td>
</tr>
</el-popover>
</template>
</td>
</tr>
</table>
</div>
</div>
......@@ -121,9 +85,11 @@
dataList: [],
msg: {
StoreId: 0, //门店名
WorkDate: '' //日期
WorkDate: '2020-11-03' //日期
},
StoreList: [], //门店下拉
scheduleData: {},
tipsInfo: {}, //提示信息
};
},
created() {
......@@ -134,8 +100,7 @@
getList() {
this.apipost("/api/Reserve/GetStoreOrderInfo", this.msg, res => {
if (res.data.resultCode == 1) {
console.log(res,'数据来了');
this.dataList=res.data.data;
this.dataList = res.data.data;
} else {
this.Error(res.data.message);
}
......@@ -158,39 +123,46 @@
})
},
//获取小时
getHours(time){
return time*2;
getHours(time) {
return time * 2;
},
//获取跨行
getRow(data1,data2){
var count=0;
getRow(data1, data2) {
var count = 0;
data2.OrderList.forEach(x => {
if(x.ServiceTime==data1){
if (x.ServiceTime == data1) {
count++;
}
}
});
console.log(count,'count');
if(count>0){
if (count > 0) {
return count;
}
},
getItem(time,data){
data.forEach(x=>{
if(x.OrderList.length>0){
if(time==x.OrderList[0].ServiceTime){
getItem(time, data) {
data.forEach(x => {
if (x.OrderList.length > 0) {
if (time == x.OrderList[0].ServiceTime) {
return true
}else{
} else {
return false
}
}
})
},
//点击获取
getStoreInfo(item,kanbanItem) {
console.log(item, '数据');
this.tipsInfo = item;
this.tipsInfo.StoreAddress = kanbanItem.StoreAddress;
this.tipsInfo.StoreName = kanbanItem.StoreName;
}
},
mounted() {
this.getStoreList();
this.getList();
}
};
</script>
<style>
.appointmentBoard .content {
......@@ -199,17 +171,143 @@
padding: 20px;
box-sizing: border-box;
}
.appointmentBoard .appointUser{
text-align: left;
line-height: 33px;
.appointmentBoard .appointUser {
display: flex;
align-items: center;
}
.appointmentBoard .UserPhote{
width:30px;
height:30px;
.appointmentBoard .UserPhote {
width: 30px;
height: 30px;
border-radius: 50%;
}
.appointmentBoard .OrderDiv_Main{
width:100px;
.appointmentBoard .OrderDiv_Main {
width: 200px;
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>
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