|
@@ -1,195 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="box">
|
|
|
- <div class="week">
|
|
|
- <div class="w_pre" v-for="(pre,idx) in weekList" :key="idx">{{pre}}</div>
|
|
|
- </div>
|
|
|
- <div class="date">
|
|
|
- <div class="d_pre" v-for="(pre,idx) in calendarList" :key="idx" @tap="selectDay(pre,idx)">
|
|
|
- <div class="day" :class="{'dq':pre.iscurrentday,'select':pre.select,'wd':pre.isweekday}">{{pre.day}}</div>
|
|
|
- <div class="status" :class="{'zc':pre.status===0,'yc':pre.status===1}" v-if="pre.status<2"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data(){
|
|
|
- return {
|
|
|
- weekList:['一','二','三','四','五','六','日'],
|
|
|
- year:new Date().getFullYear(),
|
|
|
- month:new Date().getMonth()+1,
|
|
|
- calendarList:[],
|
|
|
- clockList:[]
|
|
|
- }
|
|
|
- },
|
|
|
- // created() {
|
|
|
- // this.getDataByMonth(this.year,this.month);
|
|
|
- // },
|
|
|
- methods:{
|
|
|
- getDataByMonth(year,month){
|
|
|
- const daysInMonth = new Date(year, month, 0).getDate();
|
|
|
- let calendar = [];
|
|
|
- for (let day = 1; day <= daysInMonth; day++) {
|
|
|
- let date = new Date(year, month - 1, day); // 注意月份从0开始
|
|
|
- let nyr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
|
|
- calendar.push({
|
|
|
- nyr,
|
|
|
- year,
|
|
|
- month,
|
|
|
- day,
|
|
|
- week: date.getDay()||7,
|
|
|
- isweekday:(date.getDay()||7)<6,
|
|
|
- iscurrentday:nyr==new Date().Format('yyyy-MM-dd')
|
|
|
- });
|
|
|
- }
|
|
|
- let qlist = this.insertDays(year,month,calendar);
|
|
|
- let hlist = this.appendDays(year,month,calendar);
|
|
|
- let list = qlist.concat(calendar).concat(hlist);
|
|
|
- this.calendarList = JSON.parse(JSON.stringify(list));
|
|
|
- this.calendarList.forEach((c,i)=>{
|
|
|
- this.$set(this.calendarList[i],'select',false);
|
|
|
- let t = this.clockList.find(l=>l.attendanceDate==c.nyr);
|
|
|
- if(t&&c.month==month){
|
|
|
- this.$set(this.calendarList[i],'status',t?.isLeave===0?0:1);
|
|
|
- this.$set(this.calendarList[i],'id',t?.id);
|
|
|
- }
|
|
|
- else this.$set(this.calendarList[i],'status',2);
|
|
|
- })
|
|
|
- },
|
|
|
- insertDays(year,month,calendar){
|
|
|
- let week = calendar[0].week;
|
|
|
- if(week==1) return []
|
|
|
- let qyear = month==1?(year-1):year;
|
|
|
- let qmonth = month==1?12:month-1;
|
|
|
- let daysInMonth = new Date(qyear, qmonth, 0).getDate();
|
|
|
- let list = [];
|
|
|
- for (let day = daysInMonth-week+2; day <= daysInMonth; day++) {
|
|
|
- let date = new Date(qyear, qmonth - 1, day);
|
|
|
- list.push({
|
|
|
- nyr: `${qyear}-${String(qmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
|
|
|
- year:qyear,
|
|
|
- month:qmonth,
|
|
|
- day,
|
|
|
- week: date.getDay()||7
|
|
|
- });
|
|
|
- }
|
|
|
- return list
|
|
|
- },
|
|
|
- appendDays(year,month,calendar){
|
|
|
- let week = calendar[calendar.length-1].week;
|
|
|
- if(week==7) return []
|
|
|
- let hyear = month==12?(year+1):year;
|
|
|
- let hmonth = month==12?1:month+1;
|
|
|
- let daysInMonth = new Date(hyear, hmonth, 0).getDate();
|
|
|
- let list = [];
|
|
|
- for (let day = 1; day <= 7-week; day++) {
|
|
|
- let date = new Date(hyear, hmonth - 1, day);
|
|
|
- list.push({
|
|
|
- nyr: `${hyear}-${String(hmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
|
|
|
- year:hyear,
|
|
|
- month:hmonth,
|
|
|
- day,
|
|
|
- week: date.getDay()||7
|
|
|
- });
|
|
|
- }
|
|
|
- return list
|
|
|
- },
|
|
|
- async selectDay(pre,idx){
|
|
|
- let info = {
|
|
|
- iswd:pre.isweekday,
|
|
|
- clockTimes:0,
|
|
|
- workHours:0,
|
|
|
- sbTime:'',
|
|
|
- xbTime:'',
|
|
|
- status:0
|
|
|
- }
|
|
|
- if(pre.id){
|
|
|
- let res = await this.$api.get('/wms/outsourced/attendance/'+pre?.id||'');
|
|
|
- if(res.data.code!==0) return this.$showToast(res.data.msg)
|
|
|
- let d = res.data.data;
|
|
|
- info.clockTimes = d.isLeave===0?2:((d.isLeave===1||d.isLeave===2)?1:0);
|
|
|
- info.workHours = d.workingHours;
|
|
|
- info.sbTime = (d.isLeave===0||d.isLeave===2)?d.checkInTime:'';
|
|
|
- info.xbTime = (d.isLeave===0||d.isLeave===1)?d.clockOutTime:'';
|
|
|
- info.status = 1;
|
|
|
- }
|
|
|
- this.$emit('selectInfo',info);
|
|
|
-
|
|
|
- if(pre?.month==this.month){
|
|
|
- this.calendarList.forEach((c,i)=>{
|
|
|
- this.$set(this.calendarList[i],'select',i===idx);
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.$emit('selectDay',pre);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
- .box{
|
|
|
- .week{
|
|
|
- display: flex;
|
|
|
- .w_pre{
|
|
|
- width: calc(100% / 7);
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #9D9D9D;
|
|
|
- line-height: 72rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .date{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .d_pre{
|
|
|
- width: calc(100% / 7);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 15rpx 0;
|
|
|
- .day{
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #9D9D9D;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- &.wd{
|
|
|
- color: #1D2129;
|
|
|
- }
|
|
|
- &.dq{
|
|
|
- color: #2E69EB;
|
|
|
- font-weight: bold;
|
|
|
- background: rgba(46,105,235,0.1);
|
|
|
- }
|
|
|
- &.select{
|
|
|
- color: #FFFFFF;
|
|
|
- font-weight: bold;
|
|
|
- background: #2E69EB;
|
|
|
- }
|
|
|
- }
|
|
|
- .status{
|
|
|
- width: 10rpx;
|
|
|
- height: 10rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-top: 5rpx;
|
|
|
- &.zc{
|
|
|
- background: #2E69EB;
|
|
|
- }
|
|
|
- &.yc{
|
|
|
- background: #FEA400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|