224 lines
7.0 KiB
Vue
224 lines
7.0 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" v-if="ifShow">
|
||
<view class="item" :class="userType=='director'?'width-all':''">
|
||
<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 ref="signCalendar" @getDate="getDate" :daysIndex="daysIndex"></sign-calendar>
|
||
</view>
|
||
<!-- 时间 -->
|
||
<view class="sign-record-date font26">{{curDate.substr(0,4)+'年'+curDate.substr(5,2)+'月'+curDate.substr(8,2)+'日'}} 打卡情况</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.is_replenish==1?'补打卡':item.created_at.substr(item.created_at.length-8)}}</text>
|
||
<text v-if="item.role!==0">打卡工地：{{item.worksite_name}}</text>
|
||
</view>
|
||
<view class="state" v-if="item.role!==0&&item.status==1">{{item.status_text}}</view>
|
||
<view class="state color-blue" v-if="item.role!==0&&item.status==0">{{item.status_text}}</view>
|
||
<view class="state color-red" v-if="item.role!==0&&item.status==-1">{{item.status_text}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加载更多 -->
|
||
<view class="more-tips font24" v-if="signList.length==0">当日没有打卡记录</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';
|
||
export default {
|
||
components:{
|
||
signCalendar,
|
||
tabbar
|
||
},
|
||
data() {
|
||
return {
|
||
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
||
userType:'', //账户类型 工人：worker 负责人：director
|
||
signList:[], //打卡列表
|
||
radioList:[
|
||
{title:'上午上班',type:'morning_on'},
|
||
{title:'上午下班',type:'morning_off'},
|
||
{title:'下午上班',type:'afternoon_on'},
|
||
{title:'下午下班',type:'afternoon_off'}
|
||
],//打卡类型
|
||
radioIndex:0, //当前选择
|
||
curDate:'', //当前日期
|
||
page:1,
|
||
size:10,
|
||
total:0,
|
||
worksiteList:[], //工地列表
|
||
worksiteIndex:-1, //当前选择
|
||
showCard:false, //是否显示补卡
|
||
ifShow:uni.getStorageSync('worker_role')==1?true:false,
|
||
daysIndex:new Date().getDate(),
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if(op.userType){
|
||
this.userType = op.userType;
|
||
}
|
||
if(op.date){
|
||
// 获取选择日期
|
||
this.curDate = op.date;
|
||
this.daysIndex = parseInt(op.date.substr(op.date.length-2));
|
||
}else{
|
||
let year = new Date().getFullYear();
|
||
let month = new Date().getMonth() + 1;
|
||
let day = new Date().getDate();
|
||
this.curDate = `${year}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`;
|
||
}
|
||
// 获取工地列表
|
||
this.getWorksiteList();
|
||
setTimeout(()=>{
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
},200)
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onReachBottom() {
|
||
if(this.signList.length<this.total){
|
||
this.page++;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
// 关闭下拉刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
// 获取工地列表
|
||
getWorksiteList(){
|
||
this.$requst.get('/api/v1/common/worksite-list').then(res=>{
|
||
if(res.code==0){
|
||
this.worksiteList = res.data.list;
|
||
if(uni.getStorageSync('worksite_id')){
|
||
this.worksiteIndex = this.worksiteList.findIndex(item=> item.id === uni.getStorageSync('worksite_id'));
|
||
}else if(uni.getStorageSync('baseWorksiteId')!==0){
|
||
this.worksiteIndex = this.worksiteList.findIndex(item=> item.id === uni.getStorageSync('baseWorksiteId'));
|
||
}else{
|
||
this.worksiteIndex = -1;
|
||
}
|
||
this.isLoding = true;
|
||
}
|
||
})
|
||
},
|
||
|
||
// 改变上下班打卡
|
||
changeSignType(index){
|
||
if(this.radioIndex !== index){
|
||
this.radioIndex = index;
|
||
}
|
||
},
|
||
|
||
// 获取选择时间
|
||
getDate(date){
|
||
if(date!==this.curDate){
|
||
this.curDate = date;
|
||
this.daysIndex = parseInt(date.substr(date.length-2));
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
}
|
||
},
|
||
|
||
// 确认补卡
|
||
submitEv(){
|
||
let params = {
|
||
day:this.curDate,
|
||
worksite_id:this.worksiteIndex!==-1?this.worksiteList[this.worksiteIndex].id:0,
|
||
type:this.radioList[this.radioIndex].type
|
||
}
|
||
this.$requst.post('/api/v1/user/replenish',params).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('补卡成功');
|
||
this.showCard = false;
|
||
// 获取状态列表
|
||
this.$refs.signCalendar.getStatusObj(this.worksiteList[this.worksiteIndex].id);
|
||
}else{
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取打卡列表
|
||
getSignList(){
|
||
let params = {};
|
||
if(uni.getStorageSync('worker_role')==0){
|
||
params = {
|
||
day:this.curDate,
|
||
worksite_id:0
|
||
}
|
||
}else{
|
||
params = {
|
||
day:this.curDate,
|
||
worksite_id:this.worksiteIndex!==-1?this.worksiteList[this.worksiteIndex].id:0
|
||
}
|
||
}
|
||
this.$requst.get('/api/v1/user/sign-today',params).then(res=>{
|
||
if(res.code == 0){
|
||
console.log(res,'打卡记录');
|
||
// 获取打卡状态
|
||
this.buttonColor = res.data.buttonColor;
|
||
// 获取打卡记录列表
|
||
this.signList = res.data.list;
|
||
}
|
||
})
|
||
},
|
||
|
||
// 选择工地
|
||
bindWorksiteChange(e) {
|
||
this.worksiteIndex = e.detail.value;
|
||
this.page = 1;
|
||
// 获取打卡列表
|
||
this.getSignList();
|
||
// 获取状态列表
|
||
this.$refs.signCalendar.getStatusObj(this.worksiteList[this.worksiteIndex].id);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style> |