323 lines
9.4 KiB
Vue
323 lines
9.4 KiB
Vue
<template>
|
|
<view class="period_warp">
|
|
<view class="" v-for="(item,index) in timeArr" :key="index">
|
|
<view class="title">上下班时段{{index+1}}</view>
|
|
<view class="box_list">
|
|
<view class="box_li">
|
|
<view class="b_time">
|
|
<view class="b_label">上班</view>
|
|
<picker @change="(e)=>{changeGoto(e,index)}" mode="time" :value="item.start_time" >
|
|
<view class="b_v_box">
|
|
<view class="b_value"> <text v-if="item.start_next == 1">次日</text> {{item.start_time}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="b_time">
|
|
<view class="b_label">需要打卡</view>
|
|
<view class="b_v_box">
|
|
<switch color="#008EFF" :checked="item.start_status == 0" @change="(e)=>{changeStart(e,index)}" />
|
|
</view>
|
|
</view>
|
|
<view class="b_time">
|
|
<view class="b_label">可打卡时间</view>
|
|
<view class="b_v_box">
|
|
<picker @change="(e)=>{changeGotoStart(e,index)}" mode="time" :value="item.ustart_time" :start="index <= 0 ? '' : timeArr[index-1].end_time" :end="item.end_time">
|
|
<view class="minbox"> <text v-if="item.start_next == 1">次日</text> {{item.ustart_time}}</view>
|
|
</picker>
|
|
至
|
|
<picker @change="(e)=>{changeGotoEnd(e,index)}" mode="time" :value="item.uend_time" :start="item.ustart_time" :end="item.start_next == 1 ?'':item.end_time">
|
|
<view class="minbox"> <text v-if="item.start_next == 1">次日</text> {{item.uend_time}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box_li">
|
|
<view class="b_time">
|
|
<view class="b_label">下班</view>
|
|
<picker @change="(e)=>{changeGoOff(e,index)}" mode="time" :value="item.end_time">
|
|
<view class="b_v_box">
|
|
<view class="b_value"><text v-if="item.end_next == 1">次日</text> {{item.end_time}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="b_time">
|
|
<view class="b_label">需要打卡</view>
|
|
<view class="b_v_box">
|
|
<switch color="#008EFF" :checked="item.end_status == 0" @change="(e)=>{changeEnd(e,index)}" />
|
|
</view>
|
|
</view>
|
|
<view class="b_time">
|
|
<view class="b_label">可打卡时间</view>
|
|
<view class="b_v_box">
|
|
<picker @change="(e)=>{changeGoOffStart(e,index)}" mode="time" :value="item.dstart_time" :start="item.end_next == 1 ? '' : item.end_time">
|
|
<view class="minbox"> <text v-if="item.end_next == 1">次日</text> {{item.dstart_time}}</view>
|
|
</picker>
|
|
至
|
|
<picker @change="(e)=>{changeGoOffEnd(e,index)}" mode="time" :value="item.dend_time">
|
|
<view class="minbox"> <text v-if="item.end_next == 1">次日</text> {{item.dend_time}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(toSave)">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default{
|
|
data() {
|
|
return{
|
|
noClick: true, //防止 重复点击
|
|
timeArr:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.timeArr = uni.getStorageSync('timeArr')
|
|
console.log(this.timeArr,'====')
|
|
},
|
|
methods:{
|
|
//选择上班时间
|
|
changeGoto(e,index) {
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.start_time = time
|
|
if (obj.end_next != 1) {
|
|
let a = obj.start_time.split(":")
|
|
let b = obj.end_time.split(":")
|
|
let date = new Date();
|
|
if (date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])) {
|
|
uni.showToast({
|
|
title: '上班时间应该早于下班时间',
|
|
icon: 'none'
|
|
})
|
|
this.isProblem = true
|
|
this.problemTit = '上班时间应该早于下班时间'
|
|
} else {
|
|
this.isProblem = false
|
|
this.problemTit = ''
|
|
}
|
|
if (index != 0) {
|
|
let preObj = this.timeArr[index - 1]
|
|
if (time < preObj.end_time) {
|
|
obj.start_next = 1
|
|
obj.end_next = 1
|
|
}
|
|
}
|
|
} else if(obj.end_next == 1){
|
|
if (index > 0) {
|
|
let preObj = this.timeArr[index - 1]
|
|
let a = obj.start_time.split(":")
|
|
let b = preObj.end_time.split(":")
|
|
let date_1 = new Date();
|
|
if (date_1.setHours(a[0], a[1]) < date_1.setHours(b[0], b[1])) {
|
|
uni.showToast({
|
|
title: '上班时间应该大于上一段的下班时间',
|
|
icon: 'none'
|
|
})
|
|
this.isProblem = true
|
|
this.problemTit = '上班时间应该大于上一段的下班时间'
|
|
} else{
|
|
obj.start_next = 0
|
|
this.isProblem = true
|
|
this.problemTit = ''
|
|
}
|
|
}
|
|
}
|
|
this.$set(this.timeArr, index, obj)
|
|
},
|
|
//选择上班时间的开始打卡时间
|
|
changeGotoStart(e,index) {
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.ustart_time = time
|
|
this.$set(this.timeArr,index,obj)
|
|
},
|
|
//选择上班时间的结束打卡时间
|
|
changeGotoEnd(e,index) {
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.uend_time = time
|
|
this.$set(this.timeArr,index,obj)
|
|
},
|
|
//选择上班时间 是否 需要打卡
|
|
changeStart(e,index) {
|
|
console.log(e,'=====')
|
|
let num = e.detail.value ? 0 : 1
|
|
let obj = this.timeArr[index]
|
|
obj.start_status = num
|
|
this.$set(this.timeArr,index,obj)
|
|
},
|
|
//选择下班时间
|
|
changeGoOff(e,index){
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.end_time = time
|
|
let a = obj.start_time.split(":")
|
|
let b = obj.end_time.split(":")
|
|
let date = new Date();
|
|
//判断是否次日
|
|
if(obj.start_next == 0 && obj.end_next == 0 && date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])){
|
|
obj.end_next = 1
|
|
}
|
|
//判断上班时间 和 下班时间
|
|
if((obj.start_next == 1 && obj.end_next == 1) || (obj.start_next == 0 && obj.end_next == 0)){
|
|
if (date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])) {
|
|
uni.showToast({
|
|
title: '上班时间应该早于下班时间',
|
|
icon: 'none'
|
|
})
|
|
this.isProblem = true
|
|
this.problemTit = '上班时间应该早于下班时间'
|
|
} else {
|
|
this.isProblem = false
|
|
this.problemTit = ''
|
|
}
|
|
}
|
|
//判断所有时间段是否在24小时之内
|
|
if (obj.end_next == 1 && this.timeArr[0].start_next == 0) {
|
|
let sTime = this.timeArr[0].start_time
|
|
let nTime = time
|
|
if(!this.handleSameday(sTime,nTime)){
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'最早上班时间与最晚下班时间跨度不能超过24小时',
|
|
showCancel:false,
|
|
complete:(res)=>{
|
|
if(res.confirm){
|
|
this.isProblem = true
|
|
this.problemTit = '最早上班时间与最晚下班时间跨度不能超过24小时'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
this.$set(this.timeArr, index, obj)
|
|
},
|
|
//计算当天 和 次日 两个时间段的 时间差是否在24小时之内
|
|
handleSameday(startTime, endTime) {
|
|
if (!(startTime && endTime)) return "";
|
|
let start1 = startTime.split(":");
|
|
let startAll = parseInt(start1[0] * 60) + parseInt(start1[1]);
|
|
let end1 = endTime.split(":");
|
|
let endAll = parseInt(end1[0] * 60) + parseInt(end1[1]);
|
|
let total = 24*60
|
|
let sum = total - startAll + endAll
|
|
if(sum > total){
|
|
return false
|
|
}else{
|
|
return true
|
|
}
|
|
},
|
|
//选择下班时间的 开始打卡时间
|
|
changeGoOffStart(e,index) {
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.dstart_time = time
|
|
this.$set(this.timeArr,index,obj)
|
|
},
|
|
//选择下班时间的 结束打卡时间
|
|
changeGoOffEnd(e,index) {
|
|
let time = e.detail.value
|
|
let obj = this.timeArr[index]
|
|
obj.dend_time = time
|
|
this.$set(this.timeArr,index,obj)
|
|
if(obj.end_next == 1 && this.timeArr[0].start_next == 0){
|
|
if(!this.handleSameday(this.timeArr[0].ustart_time,time)){
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'上班打卡时间和下班打卡时间须在24小时之内',
|
|
complete:(res)=>{
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
//选择下班时间 是否需要打卡
|
|
changeEnd(e,index) {
|
|
let num = e.detail.value ? 0 : 1
|
|
let obj = this.timeArr[index]
|
|
obj.end_status = num
|
|
this.$set(this.timeArr,index,obj)
|
|
},
|
|
toSave() {
|
|
uni.setStorageSync('timeArr',this.timeArr)
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.period_warp{
|
|
padding:24rpx 30rpx;
|
|
}
|
|
.title{
|
|
font-size:24rpx;
|
|
color:#999;
|
|
margin-bottom:10rpx;
|
|
}
|
|
.box_list{
|
|
.box_li{
|
|
width:690rpx;
|
|
border-radius: 10rpx;
|
|
background:#fff;
|
|
margin-bottom:15rpx;
|
|
padding:0 24rpx;
|
|
.b_time{
|
|
padding:24rpx 0;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
&:last-child{
|
|
border-bottom: 0;
|
|
}
|
|
.b_label{
|
|
font-size:28rpx;
|
|
color:#333;
|
|
flex-shrink: 0;
|
|
}
|
|
.b_v_box{
|
|
width:300rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.b_value{
|
|
font-size:24rpx;
|
|
color:#666;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
switch{
|
|
transform: scale(0.6);
|
|
}
|
|
.minbox{
|
|
width:140rpx;
|
|
height:60rpx;
|
|
border-radius: 8rpx;
|
|
background:#f5f5f5;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
margin-right:15rpx;
|
|
margin-left:15rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |