207 lines
5.9 KiB
Vue
207 lines
5.9 KiB
Vue
<template>
|
||
<view class="pad-x120">
|
||
<!-- 头部 -->
|
||
<status-nav navBarTitle="打卡记录"></status-nav>
|
||
<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
|
||
<!-- 筛选 -->
|
||
<view class="screen-box screen-box-other">
|
||
<view class="item">
|
||
<picker class="font24" mode="selector" :range="worksiteList" @change="bindWorksiteChange" :value="worksiteIndex" :range-key="'name'">
|
||
<view class="name">
|
||
<text class="clips1" :class="worksiteIndex==-1?'color-99':''">{{worksiteIndex!==-1?worksiteList[worksiteIndex].name:'请选择工地'}}</text>
|
||
<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="item font26 color-blue" @tap="showCard=true">
|
||
<view class="name" style="justify-content: center;">补卡操作</view>
|
||
</view>
|
||
</view>
|
||
<!-- 打卡日历 -->
|
||
<view class="sign-calendar">
|
||
<sign-calendar></sign-calendar>
|
||
</view>
|
||
<!-- 时间 -->
|
||
<view class="sign-record-date font26">2022年12月08日 打卡情况</view>
|
||
<!-- 打卡记录 -->
|
||
<view class="sign-record sign-record-other bg-white">
|
||
<view class="item font26" v-for="(item,index) in signList" :key="index">
|
||
<view class="info">
|
||
<text>{{item.type_text}}打卡：{{item.created_at.substr(item.created_at.length-8)}}</text>
|
||
<text>打卡工地：{{item.worksite_name}}</text>
|
||
</view>
|
||
<view class="state color-red" v-if="item.status==-1">{{item.status_text}}</view>
|
||
<view class="state color-blue" v-if="item.status==0">{{item.status_text}}</view>
|
||
<view class="state" v-if="item.status==1">{{item.status_text}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加载更多 -->
|
||
<view class="more-tips font24">{{signList.length==total?'没有更多数据了':'下滑获取更多'}}</view>
|
||
</view>
|
||
<!-- 补卡弹窗 -->
|
||
<view class="pop-up-bg" v-if="showCard">
|
||
<view class="sign-cate bg-white">
|
||
<view class="title font34">请选择补卡时间</view>
|
||
<view class="txt font28">
|
||
<view class="radio-item" @tap="changeSignType(index)" v-for="(item,index) in radioList" :key="index">
|
||
<view :class="radioIndex==index?'checked':''"></view>
|
||
<view>{{item.title}}打卡</view>
|
||
</view>
|
||
</view>
|
||
<!-- 审核按钮 -->
|
||
<view class="sign-cate-btns color-white font30">
|
||
<view class="btn" @tap="showCard=false,radioIndex=0">取消</view>
|
||
<view class="btn" @tap="submitEv">确认</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<tabbar :userType="userType" current="2"></tabbar>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import signCalendar from '@/components/sign-calendar/sign-calendar';
|
||
import tabbar from '@/components/tabbar/tabbar';
|
||
function getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
if (type === 'start') {
|
||
year = year - 10;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
export default {
|
||
components:{
|
||
signCalendar,
|
||
tabbar
|
||
},
|
||
data() {
|
||
return {
|
||
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
||
userType:'worker', //账户类型 工人：worker 负责人：director
|
||
signList:[], //打卡列表
|
||
radioList:[
|
||
{title:'上午上班',type:'in'},
|
||
{title:'上午下班',type:'out'},
|
||
{title:'下午上班',type:'in'},
|
||
{title:'下午下班',type:'out'}
|
||
],//打卡类型
|
||
radioIndex:0, //当前选择
|
||
page:1,
|
||
size:10,
|
||
total:0,
|
||
worksiteList:[], //工地列表
|
||
worksiteIndex:-1, //当前选择
|
||
date: getDate({format: true}),
|
||
startDate: getDate('start'),
|
||
beginDate:'', //开始日期
|
||
endDate:'', //结束日期
|
||
showCard:false, //是否显示补卡
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 获取工地列表
|
||
this.getWorksiteList();
|
||
},
|
||
onShow() {
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
},
|
||
onReachBottom() {
|
||
if(this.signList.length<this.total){
|
||
this.page++;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
// 关闭下拉刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
onShareAppMessage(res) {
|
||
let shareObj = {
|
||
title:'工地打卡',
|
||
path: '/pages/pagehome/pagehome',
|
||
imageUrl:'/static/share-logo.jpg',
|
||
}
|
||
// 返回shareObj
|
||
return shareObj;
|
||
},
|
||
methods: {
|
||
// 获取工地列表
|
||
getWorksiteList(){
|
||
this.$requst.get('/api/v1/common/worksite-list').then(res=>{
|
||
if(res.code==0){
|
||
this.worksiteList = res.data.list;
|
||
this.isLoding = true;
|
||
}
|
||
})
|
||
},
|
||
|
||
// 改变上下班打卡
|
||
changeSignType(index){
|
||
if(this.radioIndex !== index){
|
||
this.radioIndex = index;
|
||
}
|
||
},
|
||
|
||
// 确认补卡
|
||
submitEv(){
|
||
this.showCard = false;
|
||
},
|
||
|
||
// 获取打卡列表
|
||
getSignList(){
|
||
let params = {
|
||
page:this.page,
|
||
size:this.size,
|
||
worksite_id:this.worksiteIndex==-1?'':this.worksiteList[this.worksiteIndex].id,
|
||
begin_at:this.beginDate,
|
||
end_at:this.endDate
|
||
}
|
||
if(this.page==1) this.signList = [];
|
||
this.$requst.post('/api/v1/worker/clock-list',params).then(res=>{
|
||
if(res.code==0){
|
||
console.log(res,'打卡记录');
|
||
this.total = res.data.total;
|
||
this.signList = this.signList.concat(res.data.list);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 选择工地
|
||
bindWorksiteChange(e) {
|
||
this.worksiteIndex = e.detail.value;
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
},
|
||
|
||
// 选择开始日期
|
||
beginDateChange(e) {
|
||
this.beginDate = e.detail.value;
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
},
|
||
|
||
// 选择结束日期
|
||
endDateChange(e) {
|
||
this.endDate = e.detail.value;
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style> |