358 lines
9.6 KiB
Vue
358 lines
9.6 KiB
Vue
<template>
|
||
<view class="" style="background: #f5f5f5;">
|
||
<!-- <view class="tab_list">
|
||
<view class="tabli" :class="typeIndex == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">团队统计</view>
|
||
<view class="tabli" :class="typeIndex == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">我的统计</view>
|
||
</view> -->
|
||
<zzx-calendar ref="calendarChild" @selected-change="datechange" @lookMonth="lookMonth" :defaultDate="date"></zzx-calendar>
|
||
<!-- 打卡上下班 -->
|
||
<view class="lx_warp">
|
||
<view class="top">
|
||
<view class="top_left">
|
||
<view class="tit">上下班打卡</view>
|
||
<!-- <view class="tip">打卡规则:青东时代</view> -->
|
||
</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
<view class="time_warp" v-for="(item,index) in normalList" :key="index" >
|
||
<view class="time_li">
|
||
<view class="s_time">{{item.start_time}}</view>
|
||
<view class="time_right" v-if="item.clock_in">
|
||
<view class="ri_top">上班·{{item.late_time > 0 ? '异常' : '正常'}}</view>
|
||
<view class="ri_text">
|
||
{{item.late_time > 0 ? '迟到打卡' : '正常'}}
|
||
({{item.clock_in.substring(item.clock_in.length-8,item.clock_in.length-2)}})
|
||
·
|
||
<view style="color:red" v-if="item.clock_in_status == 5">已补卡</view>
|
||
<view style="color:red" v-if="item.clock_in_status == 6">已请假</view>
|
||
<view class="ri_text" v-if="item.clock_in_status != 6 && item.clock_in_status != 5">
|
||
<text style="color:red" v-if="item.late_time > 0" @click="toSubmitColck(item,1)">处理异常</text>
|
||
·
|
||
<text style="color:red" v-if="item.late_time > 0" @click="toLeave">假勤申请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-else>
|
||
<view class="time_right" v-if="item.mis_sCard">
|
||
<view class="ri_text">
|
||
缺卡 ·
|
||
<text class="" style="color:red" v-if="item.clock_in_status == 5">已补卡</text>
|
||
<text style="color:red" v-if="item.clock_in_status == 6">已请假</text>
|
||
<view class="ri_text" v-if="item.clock_in_status != 6 && item.clock_in_status != 5">
|
||
<text style="color:red" @click="toSubmitColck(item,1)">处理异常</text>
|
||
· <text style="color:red" @click="toLeave">假勤申请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="time_right" v-else>
|
||
上班
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="time_li">
|
||
<view class="s_time">{{item.end_time}}</view>
|
||
<view class="time_right" v-if="item.clock_out">
|
||
<view class="ri_top">下班·{{item.leaver_time > 0 ? '异常' : '正常'}}</view>
|
||
<view class="ri_text">
|
||
{{item.leaver_time > 0 ? '早退打卡' : '正常'}}
|
||
({{item.clock_out.substring(item.clock_out.length-8,item.clock_out.length-2)}})
|
||
·
|
||
<text class="" style="color:red" v-if="item.clock_out_status == 5">已补卡</text>
|
||
<text style="color:red" v-if="item.clock_out_status == 6">已请假</text>
|
||
<view class="ri_text" v-if="item.clock_out_status != 6 && item.clock_out_status != 5">
|
||
<text style="color:red" v-if="item.leaver_time > 0" @click="toSubmitColck(item,2)">处理异常</text>
|
||
·
|
||
<text style="color:red" v-if="item.leaver_time > 0" @click="toLeave">假勤申请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-else>
|
||
<view class="time_right" v-if="item.mis_eCard">
|
||
<view class="ri_text">
|
||
缺卡 ·
|
||
<text class="" style="color:red" v-if="item.clock_out_status == 5">已补卡</text>
|
||
<text style="color:red" v-if="item.clock_out_status == 6">已请假</text>
|
||
<view class="ri_text" v-if="item.clock_out_status != 6 && item.clock_out_status != 5">
|
||
<text style="color:red" @click="toSubmitColck(item,2)">处理异常</text>
|
||
· <text style="color:red" @click="toLeave">假勤申请</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="time_right" v-else>
|
||
下班
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 外勤打卡 -->
|
||
<view class="out_warp">
|
||
<view class="title">外出记录</view>
|
||
<view class="out_info" v-for="(item,index) in fieldpersonList" :key="index" @click="toOutDetail(item)">
|
||
<view class="out_time">{{item.time.substring(item.time.length-8,item.time.length-2)}}</view>
|
||
<view class="out_right">
|
||
{{item.address}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width:750rpx;height:130rpx;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import zzxCalendar from "@/components/zzx-calendar/zzx-calendar.vue"
|
||
import { netClockStatis } from '@/api/index'
|
||
|
||
export default{
|
||
components: {
|
||
zzxCalendar
|
||
},
|
||
data() {
|
||
return{
|
||
typeIndex:0,
|
||
date:'', //时间
|
||
normalList:[], //正常打卡统计
|
||
fieldpersonList:[], //外勤打卡统计
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if(options.time){
|
||
this.date = options.time
|
||
this.$refs.calendarChild.init(this.date)
|
||
//获取打卡记录
|
||
this.getRecord()
|
||
}else{
|
||
//获取当前时间
|
||
this.getNowTime()
|
||
}
|
||
},
|
||
methods:{
|
||
getNowTime() {
|
||
let date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth()+1
|
||
let day = date.getDate()
|
||
this.date = year+'-'+this.handleTime(month)+'-'+this.handleTime(day)
|
||
this.$refs.calendarChild.init(this.date)
|
||
//获取打卡记录
|
||
this.getRecord()
|
||
},
|
||
handleTime(num) {
|
||
if(num >= 10) {
|
||
return num
|
||
}else{
|
||
return '0'+num
|
||
}
|
||
},
|
||
getRecord() {
|
||
netClockStatis({date:this.date}).then(res=>{
|
||
res = res.data
|
||
//处理正常打卡的数据
|
||
this.handleData(res.statisc)
|
||
|
||
this.fieldpersonList = res.other
|
||
})
|
||
},
|
||
handleData(data) {
|
||
let now = Date.now() //当前时间戳
|
||
data.forEach(ele=>{
|
||
//上班打卡结束时间
|
||
let a = this.date+' '+ele.uend_time
|
||
let aTime = new Date(a).getTime()
|
||
if(!ele.clock_in && aTime < now){
|
||
ele.mis_sCard = true
|
||
}else{
|
||
ele.mis_sCard = false
|
||
}
|
||
//下班打卡结束时间
|
||
let b = this.date+' '+ele.dend_time
|
||
let bTime = new Date(b).getTime()
|
||
if(!ele.clock_out && bTime < now){
|
||
ele.mis_eCard = true
|
||
}else{
|
||
ele.mis_eCard = false
|
||
}
|
||
})
|
||
this.normalList = data
|
||
},
|
||
datechange(obj) {
|
||
this.date = obj.fullDate
|
||
this.getRecord()
|
||
},
|
||
changeFirTab(type){
|
||
this.typeIndex = type
|
||
},
|
||
//查看月统计
|
||
lookMonth(){
|
||
let year = this.date.substring(0,4)
|
||
uni.navigateTo({
|
||
url:'/pagesA/punchclock/punchstatis/monthStatis?year='+year
|
||
})
|
||
},
|
||
// 提交补卡申请
|
||
toSubmitColck(item,status) {
|
||
console.log(item,'=====')
|
||
let type; //0:补卡 1：早退 2：迟到
|
||
if(status == 1){
|
||
//上班
|
||
if(item.clock_in && item.late_time > 0){
|
||
//迟到
|
||
type = 2
|
||
}else if(item.mis_sCard){
|
||
type = 0
|
||
}
|
||
}else if(status == 2) {
|
||
//下班
|
||
if(item.clock_out && item.leaver_time > 0){
|
||
//早退
|
||
type = 1
|
||
}else if(item.mis_eCard){
|
||
type = 0
|
||
}
|
||
}
|
||
let time = type == 1 ? item.clock_out : type == 2 ? item.clock_in : ''
|
||
uni.navigateTo({
|
||
url:'/pagesA/punchclock/punchstatis/supplementaryCard?id='+item.id+'&type='+type+'&time='+time
|
||
})
|
||
},
|
||
//假勤申请
|
||
toLeave() {
|
||
uni.navigateTo({
|
||
url:'/pagesA/punchclock/punchstatis/leave'
|
||
})
|
||
},
|
||
//外勤详情
|
||
toOutDetail(item) {
|
||
uni.navigateTo({
|
||
url:'/pagesA/punchclock/punchstatis/clockOutDetail?id='+item.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tab_list{
|
||
width:750rpx;
|
||
height:80rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
background:#fff;
|
||
.tabli{
|
||
font-size:24rpx;
|
||
color:#333;
|
||
line-height: 75rpx;
|
||
text-align: center;
|
||
border-bottom:4rpx solid #fff;
|
||
}
|
||
.tabliactive{
|
||
border-bottom:4rpx solid $uni-text-color;
|
||
}
|
||
}
|
||
.lx_warp{
|
||
width:690rpx;
|
||
border-radius: 10rpx;
|
||
background:#fff;
|
||
margin:35rpx auto;
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding:24rpx;
|
||
padding-bottom:24rpx;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
.top_left{
|
||
.tit{
|
||
font-size:30rpx;
|
||
color:#333;
|
||
margin-bottom:10rpx;
|
||
}
|
||
.tip{
|
||
font-size:24rpx;
|
||
}
|
||
}
|
||
}
|
||
.time_warp{
|
||
padding:0 24rpx;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
.time_li{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
&:last-child{
|
||
.time_right{
|
||
border-bottom:0;
|
||
}
|
||
}
|
||
.s_time{
|
||
font-size:32rpx;
|
||
color:#333;
|
||
flex-shrink: 0;
|
||
}
|
||
.time_right{
|
||
flex:1;
|
||
margin-left:15rpx;
|
||
padding:24rpx 0;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
.ri_top{
|
||
font-size:28rpx;
|
||
color:#333;
|
||
margin-bottom:8rpx;
|
||
}
|
||
.ri_text{
|
||
font-size:24rpx;
|
||
color:#666;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
text{
|
||
color:$uni-text-color;
|
||
margin-left:10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.work_time{
|
||
padding:24rpx;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
}
|
||
}
|
||
.out_warp{
|
||
width:690rpx;
|
||
border-radius: 10rpx;
|
||
background:#fff;
|
||
padding:24rpx;
|
||
margin:35rpx auto;
|
||
.title{
|
||
font-size:30rpx;
|
||
color:#333;
|
||
margin-bottom:24rpx;
|
||
padding-bottom:24rpx;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
}
|
||
.out_info{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding:24rpx 0;
|
||
border-bottom:1rpx solid #f5f5f5;
|
||
&:last-child{
|
||
border-bottom:0;
|
||
}
|
||
.out_time{
|
||
font-size:28rpx;
|
||
margin-right:15rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.out_right{
|
||
font-size:26rpx;
|
||
color:#666;
|
||
flex:1;
|
||
}
|
||
}
|
||
}
|
||
</style> |