xiaoy
/
sishitongtang-crm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

7.8 pages

Browse Source
master
271556543@qq.com 3 years ago
parent 9775e3bb3a
commit 159ea27ea8
1 changed files with 310 additions and 24 deletions
Show Stats Download Patch File Download Diff File

334
src/views/order/schedulingManage.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div style="padding: 0px 20px">
<div style="padding: 0px 20px;">
<div>
<div ref="lxHeader">
<lx-header icon="md-apps" text="排班管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
@ -8,10 +8,12 @@
</div>
</div>
<el-card :style="{height : cardHeight + 'px'}">
<div class="content">
<div class="content-left">
<Button type="primary" style="min-width: 140px;margin-top: 10px;">添加排班</Button>
<Button type="primary" style="min-width: 140px;margin-top: 10px;" @click="isShowDialog = true">添加排班</Button>
<div style="color: #b9b9c3;padding: 10px 0;">筛选</div>
@ -24,27 +26,136 @@
</div>
<div class="content-right">
<el-calendar>
<div class="type-select">
<div class="type-select-item" @click="typeSelect = 'Month'" :class="{selectActive:typeSelect == 'Month'}">Month</div>
<div class="type-select-item" @click="typeSelect = 'Week'" :class="{selectActive:typeSelect == 'Week'}">Week</div>
<div class="type-select-item" @click="typeSelect = 'Day'" :class="{selectActive:typeSelect == 'Day'}">Day</div>
<div class="type-select-item" @click="typeSelect = 'List'" :class="{selectActive:typeSelect == 'List'}">List</div>
</div>
<el-calendar v-if="typeSelect == 'Month'">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<div :class="data.isSelected ? 'is-selected' : ''" @click="dateClick(data)" style="height: 100%;width: 100%;position: relative;">
{{ data.day.split('-')[2].replace(/^(0+)/g,"") }}日 {{ data.isSelected ? '✔️' : ''}}
<div v-if="data.day == '2022-07-08'" class="range" :style="{width:dateWidth*3 - 16 + 'px'}">牛大爷</div>
<div v-if="data.day == '2022-07-08'" class="range" :style="{width:dateWidth*3 - 16 + 'px'}" @click="isShowDialog = true">牛大爷</div>
</div>
</template>
</el-calendar>
<div v-if="typeSelect == 'Week'" class="week">
<div class="week-title">
<div>
<Icon size="24" type="ios-arrow-back" />
<Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
</div>
<div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.weekStart}}-{{nowDate.weekEnd}}</div>
</div>
<table>
<tr style="border: 1px #ebe9f1 solid;">
<th></th>
<th v-for="item in weeks"><div>{{dateFormat(item)}}</div></th>
</tr>
<tr>
<td style="width: 50px;text-align: center;color: #b9b9c3;"><div>all-day</div></td>
<td v-for="td in 7"><div></div></td>
</tr>
<tr v-for="(tr,index) in 48">
<td style="width: 50px;text-align: center;"><div>{{ index%2 === 0 ? `${index/2}时` : ' '}}</div></td>
<td v-for="td in 7"><div></div></td>
</tr>
</table>
</div>
<div v-if="typeSelect == 'Day'" class="week">
<div class="week-title">
<div>
<Icon size="24" type="ios-arrow-back" />
<Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
</div>
<div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.month}}月{{nowDate.day}}日</div>
</div>
<table>
<tr style="border: 1px #ebe9f1 solid;">
<th></th>
<th><div>{{dateFormat(new Date().getTime())}}</div></th>
</tr>
<tr>
<td style="width: 50px;text-align: center;color: #b9b9c3;"><div>all-day</div></td>
<td><div></div></td>
</tr>
<tr v-for="(tr,index) in 48">
<td style="width: 50px;text-align: center;"><div>{{ index%2 === 0 ? `${index/2}时` : ' '}}</div></td>
<td><div></div></td>
</tr>
</table>
</div>
<div v-if="typeSelect == 'List'" class="list">
<div class="list-title">
<div>
<Icon size="24" type="ios-arrow-back" />
<Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
</div>
<div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.month}}月</div>
</div>
<div class="list-content">
<div v-for="i in 3">
<div class="list-content-title">
<div>2022年7月8日</div>
<div>星期五</div>
</div>
<div class="list-content-item">
<div class="list-content-item-time">14:10 - 0:00</div>
<div class="list-content-item-icon"></div>
<div class="list-content-item-name">张大爷</div>
</div>
</div>
<div>
<div class="list-content-title">
<div>2022年7月8日</div>
<div>星期五</div>
</div>
<div class="list-content-item" v-for="i in 15">
<div class="list-content-item-time">14:10 - 0:00</div>
<div class="list-content-item-icon"></div>
<div class="list-content-item-name">张大爷</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
<my-dialog :dialog-visible.sync="isShowDialog" title="排班"></my-dialog>
</div>
</template>
<script>
import ResizeObserver from "resize-observer-polyfill";
export default {
data() {
return {
isShowDialog:false,
nowDate:{
year:new Date().getFullYear(),
month:new Date().getMonth()+1,
day:new Date().getDate(),
date:new Date(),
weekStart:null,
weekEnd:null
},
typeSelect:'Month',
weeks:[],//表格题目
dateWidth:0,
cardHeight: 0,
select:{
@ -61,11 +172,11 @@ export default {
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let that = this;
let clientHeight = document.documentElement.clientHeight
let lxHeader_height = 96.5; //查询 头部
let paginationHeight = 37; //分页的高度
let topHeight = 50; //页面 头部
let cardHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.cardHeight = cardHeight;
},
@ -76,6 +187,36 @@ export default {
},
dateClick(day){
console.log(day)
},
getWeeks(date = new Date()){
let one_day = 86400000;
let day = date.getDay();
// 设置时间为当天的0点
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
let week_start_time = date.getTime() - (day - 1) * one_day;
let week_end_time = date.getTime() + (7 - day) * one_day;
let last = week_start_time - 2*24*60*60*1000;
let next = week_end_time + 24*60*60*1000;
let month1 = new Date(week_start_time).getMonth()+1;
let month2 = new Date(week_end_time).getMonth()+1;
let day1 = new Date(week_start_time).getDate();
let day2 = new Date(week_end_time).getDate();
this.nowDate.weekStart = `${month1}月${day1}日`
this.nowDate.weekEnd = `${month2}月${day2}日`
for(let i = 0;i<7;i++){
this.weeks.push(new Date(`${this.nowDate.year}/${month1}/${day1}`).getTime() + (i*24*60*60*1000))
}
}
},
computed:{
dateFormat(){
return function (date){
let word = ['日','一','二','三','四','五','六',]
return `${new Date(date).getMonth()+1}/${new Date(date).getDate()}周${word[new Date(date).getDay()]}`
}
}
},
created() {
@ -83,18 +224,22 @@ export default {
},
mounted() {
this.dateWidth = document.querySelector(".current").offsetWidth
window.addEventListener('resize',()=>{
if(this.dateWidth){
this.dateWidth = document.querySelector(".current").offsetWidth
}
})
this.getWeeks()
let resizeOb = new ResizeObserver((entries)=>{
let copy = this.dateWidth
this.dateWidth = document.querySelector(".current")?.offsetWidth ?? copy
})
resizeOb.observe(document.querySelector('.el-card__body'))
}
}
</script>
<style scoped lang="scss">
.content{
width: 100%;
height: 100%;
display: flex;
&-left{
flex: 0;
@ -103,7 +248,19 @@ export default {
padding: 0 10px;
}
&-right{
flex: 1;
min-width: 420px;
overflow: scroll;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #ddd;
}
position: relative;
}
}
.range{
@ -113,24 +270,146 @@ export default {
border-radius: 4px;
border: 0.5px solid #7367F0;
background: #EEEDFD;
z-index: 10;
position: absolute;
bottom: 0;
left: 0;
&:hover{
animation: hover-range 400ms forwards;
}
@keyframes hover-range {
from{}
to{
color: #EEEDFD;
background: #7367F0;
}
}
}
.type-select{
display: flex;
border-radius: 4px;
border:1px solid #b3241d;
color: #B3241D;
font-size: 12px;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 8px;
right: 26px;
&-item{
border-right: 1px solid #b3241d;
padding: 7px 15px;
&:hover{
animation: hover 400ms forwards;
}
@keyframes hover {
from{}
to{
background: rgba(179,36,29,0.4);
}
}
}
&:nth-child(1){
border-right: none;
}
}
.selectActive{
background: rgba(179,36,29,0.4);
box-shadow: 0 0 5px 3px rgba(179,36,29,0.2);
}
@media screen and (max-width: 800px){
.type-select{
animation: disappear 600ms forwards;
}
@keyframes disappear {
from{
}
to{
opacity: 0;
}
}
}
.week{
padding: 12px 20px 35px 20px;
i{
cursor: pointer;
}
&-title{
font-size: 16px;
color: #6E6B7B;
font-weight: 600;
letter-spacing: 1px;
display: flex;
align-items: center;
padding-bottom: 20px;
}
&>table{
color: #6E6B7B;
border-collapse:collapse;
width: 100%;
&>tr{
&>td{
height: 60px;
border: 1px #ebe9f1 solid;
margin: 0;
&:nth-child(2n){
border: 1px #ebe9f1 dashed;
}
}
}
}
}
.list{
@extend .week;
&-title{
@extend .week-title;
}
&-content{
border-collapse: collapse;
&-title{
color: #6E6B7B;
font-weight: 600;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
border: solid 1px #d0d0d0;
padding: 8px 14px;
}
&-item{
display: flex;
align-items: center;
border: solid 1px #d0d0d0;
padding: 8px 14px;
&-time{
padding-right: 14px;
}
&-icon{
width: 10px;
height: 10px;
border-radius: 100%;
background: radial-gradient(#fff 0,#7367f0 26%) no-repeat;
margin-right: 14px;
}
&-name{
flex: 1;
}
}
}
}
</style>
<style scoped lang="scss">
::v-deep .el-card__body{
height: 100% !important;
min-width: 300px ;
overflow: scroll;
}
::v-deep .el-card__body::-webkit-scrollbar {
width: 4px !important;
height: 10px !important;
}
::v-deep .el-card__body::-webkit-scrollbar-thumb {
border-radius: 6px !important;
background: #ddd !important;
min-width: 400px ;
}
::v-deep .ivu-checkbox-wrapper{
font-size: 13.5px;
@ -149,4 +428,11 @@ export default {
::v-deep .el-calendar-day{
height: 70px;
}
::v-deep .el-calendar__header{
justify-content: flex-start;
align-items: center;
}
::v-deep .el-calendar__button-group{
margin-left: 20px;
}
</style>

Write Preview
Loading…
Cancel
Save