|
@@ -1,21 +1,26 @@
|
|
|
<template>
|
|
<template>
|
|
|
<main-layout :showHome="true" :showBack="true">
|
|
<main-layout :showHome="true" :showBack="true">
|
|
|
<uni-calendar
|
|
<uni-calendar
|
|
|
- :start-date="punchInData.calendar.startDate"
|
|
|
|
|
- :end-date="punchInData.calendar.endDate"
|
|
|
|
|
- :selected="punchInData.selected"
|
|
|
|
|
- @change="calendarChange"
|
|
|
|
|
|
|
+ :start-date="punchInData.startDate"
|
|
|
|
|
+ :end-date="punchInData.endDate"
|
|
|
|
|
+ :selected="punchInData.calendarSelected"
|
|
|
@monthSwitch="calendarMonthSwitchChange"/>
|
|
@monthSwitch="calendarMonthSwitchChange"/>
|
|
|
<viwe class="info-box">
|
|
<viwe class="info-box">
|
|
|
- <view class="left">打卡:{{punchInData.statistics.punchInTimes}}次</view>
|
|
|
|
|
- <view class="right">全勤率:{{punchInData.statistics.punchInRate}}80%</view>
|
|
|
|
|
|
|
+ <view class="left">打卡:{{punchInData.punchInNum}}次</view>
|
|
|
|
|
+ <view class="right">全勤率:{{punchInData.punchInRate}}%</view>
|
|
|
</viwe>
|
|
</viwe>
|
|
|
<view class="log-box">
|
|
<view class="log-box">
|
|
|
<uni-section title="打卡记录" type="line">
|
|
<uni-section title="打卡记录" type="line">
|
|
|
<uni-list>
|
|
<uni-list>
|
|
|
- <uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
|
|
|
|
|
- <uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
|
|
|
|
|
- <uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
|
|
|
|
|
|
|
+ <uni-list-item v-for="record in punchInData.punchInRecords" :key="record.punchInDate">
|
|
|
|
|
+ <template v-slot:body>
|
|
|
|
|
+ {{record.punchInDate}}
|
|
|
|
|
+ <span v-if="record.punchInStatus == 1 || record.punchInStatus == 3"> 完成打卡</span>
|
|
|
|
|
+ <span v-else> 未完成打卡</span>
|
|
|
|
|
+ <span v-if="record.settleCategory == 1">,打卡{{record.countTrack}}次</span>
|
|
|
|
|
+ <span v-if="record.settleCategory == 2">,打卡时长{{record.timeTrack}}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </uni-list-item>
|
|
|
</uni-list>
|
|
</uni-list>
|
|
|
</uni-section>
|
|
</uni-section>
|
|
|
</view>
|
|
</view>
|
|
@@ -51,9 +56,9 @@
|
|
|
@confirm="remakeFormConfirm"
|
|
@confirm="remakeFormConfirm"
|
|
|
@close="remakeFormClose">
|
|
@close="remakeFormClose">
|
|
|
<view style="width: 100%;">
|
|
<view style="width: 100%;">
|
|
|
- <uni-forms ref="timeTrackForm" :modelValue="remakeFormData" :rules="remakeFormRules" label-position="top" :label-width="150">
|
|
|
|
|
|
|
+ <uni-forms ref="remakeForm" :modelValue="remakeFormData" :rules="remakeFormRules" label-position="top" :label-width="150">
|
|
|
<uni-forms-item name="punchInDate">
|
|
<uni-forms-item name="punchInDate">
|
|
|
- <picker mode="date" :value="remakeFormData.punchInDate" @change="remakePunchInChange">
|
|
|
|
|
|
|
+ <picker mode="date" :value="remakeFormData.punchInDate" @change="remakePunchInDateChange">
|
|
|
<view class="pick-box">{{remakeFormData.punchInDate}}</view>
|
|
<view class="pick-box">{{remakeFormData.punchInDate}}</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</uni-forms-item>
|
|
</uni-forms-item>
|
|
@@ -67,9 +72,10 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
- import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
|
|
|
+ import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
|
|
|
import router from '@/common/constants/router';
|
|
import router from '@/common/constants/router';
|
|
|
import { punchInApi } from '@/service/apis.js';
|
|
import { punchInApi } from '@/service/apis.js';
|
|
|
|
|
+ import dateUtils from '@/utils/date';
|
|
|
|
|
|
|
|
// 组件
|
|
// 组件
|
|
|
const fabBtn = ref(null);
|
|
const fabBtn = ref(null);
|
|
@@ -170,20 +176,21 @@
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 查询条件
|
|
|
|
|
+ */
|
|
|
|
|
+ const queryData = ref(null);
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* 打卡日历数据
|
|
* 打卡日历数据
|
|
|
*/
|
|
*/
|
|
|
const punchInData = ref({
|
|
const punchInData = ref({
|
|
|
- calendar: {
|
|
|
|
|
- startDate: '2024-12-01',
|
|
|
|
|
- endDate: '2024-12-31',
|
|
|
|
|
- selectd: []
|
|
|
|
|
- },
|
|
|
|
|
- statistics: {
|
|
|
|
|
- punchInTimes: 0,
|
|
|
|
|
- punchInRate: 0
|
|
|
|
|
- },
|
|
|
|
|
- selected: [{date: '2024-12-13', info: '签到', data: { custom: '自定义信息', name: '自定义消息头', id: 12123 }}]
|
|
|
|
|
|
|
+ startDate: '2024-12-01',
|
|
|
|
|
+ endDate: '2024-12-31',
|
|
|
|
|
+ punchInNum: 0,
|
|
|
|
|
+ punchInRate: 0,
|
|
|
|
|
+ calendarSelected: [],
|
|
|
|
|
+ punchInRecords: []
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 方法
|
|
// 方法
|
|
@@ -201,19 +208,10 @@
|
|
|
revokeDialog.value.open();
|
|
revokeDialog.value.open();
|
|
|
}
|
|
}
|
|
|
if (e.item.func == 'remake') {
|
|
if (e.item.func == 'remake') {
|
|
|
- // 将日期减去1天,得到昨天的日期
|
|
|
|
|
- const yesterday = new Date();
|
|
|
|
|
- yesterday.setDate(yesterday.getDate() - 1);
|
|
|
|
|
-
|
|
|
|
|
- // 获取年、月、日
|
|
|
|
|
- const year = yesterday.getFullYear();
|
|
|
|
|
- const month = (yesterday.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的,所以加1
|
|
|
|
|
- const day = yesterday.getDate().toString().padStart(2, '0'); // 日期格式化为两位数
|
|
|
|
|
-
|
|
|
|
|
// 初始化上一轮的数据
|
|
// 初始化上一轮的数据
|
|
|
remakeFormData.value = {
|
|
remakeFormData.value = {
|
|
|
punchInId: punchInId.value,
|
|
punchInId: punchInId.value,
|
|
|
- punchInDate: `${year}-${month}-${day}`
|
|
|
|
|
|
|
+ punchInDate: dateUtils.getYesterday()
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
remakeInputDialog.value.open();
|
|
remakeInputDialog.value.open();
|
|
@@ -288,20 +286,25 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- *补卡表单提交
|
|
|
|
|
|
|
+ * 补卡时间选择监听
|
|
|
|
|
+ */
|
|
|
|
|
+ const remakePunchInDateChange = (e) => {
|
|
|
|
|
+ remakeFormData.value.punchInDate = e.detail.value;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 补卡表单提交
|
|
|
*/
|
|
*/
|
|
|
const remakeFormConfirm = async () => {
|
|
const remakeFormConfirm = async () => {
|
|
|
remakeForm.value.validate(['punchInId']).then(data => {
|
|
remakeForm.value.validate(['punchInId']).then(data => {
|
|
|
- return punchInApi.revokePunchIn(data);
|
|
|
|
|
|
|
+ return punchInApi.remakePunchIn(data);
|
|
|
}).then(e => {
|
|
}).then(e => {
|
|
|
remakeInputDialog.value.close();
|
|
remakeInputDialog.value.close();
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '补卡成功',
|
|
title: '补卡成功',
|
|
|
icon: 'success'
|
|
icon: 'success'
|
|
|
});
|
|
});
|
|
|
- setTimeout(() => {
|
|
|
|
|
- // TODO 这里要刷新页面数据
|
|
|
|
|
- }, 1000);
|
|
|
|
|
|
|
+ loadData();
|
|
|
}).catch(err => {
|
|
}).catch(err => {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '补卡失败',
|
|
title: '补卡失败',
|
|
@@ -328,7 +331,7 @@
|
|
|
title: '撤销成功',
|
|
title: '撤销成功',
|
|
|
icon: 'success'
|
|
icon: 'success'
|
|
|
});
|
|
});
|
|
|
- // TODO 这里要重新加载任务
|
|
|
|
|
|
|
+ loadData();
|
|
|
})
|
|
})
|
|
|
.catch(err => {
|
|
.catch(err => {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
@@ -345,19 +348,47 @@
|
|
|
revokeDialog.value.close();
|
|
revokeDialog.value.close();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- const calendarChange = (e) => {
|
|
|
|
|
- console.log(e);
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 日历月份切换
|
|
|
|
|
+ */
|
|
|
|
|
+ const calendarMonthSwitchChange = (e) => {
|
|
|
|
|
+ queryData.value = e;
|
|
|
|
|
+ loadData();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- const calendarMonthSwitchChange = (e) => {
|
|
|
|
|
- console.log(e);
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 加载数据
|
|
|
|
|
+ */
|
|
|
|
|
+ const loadData = () => {
|
|
|
|
|
+ punchInApi.queryPunchInData({
|
|
|
|
|
+ id: punchInId.value,
|
|
|
|
|
+ year: queryData.value.year,
|
|
|
|
|
+ month: queryData.value.month,
|
|
|
|
|
+ }).then(data => {
|
|
|
|
|
+ punchInData.value = data;
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '加载失败',
|
|
|
|
|
+ icon: 'error'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onLoad(async (e) => {
|
|
onLoad(async (e) => {
|
|
|
if (e.id) {
|
|
if (e.id) {
|
|
|
punchInId.value = e.id;
|
|
punchInId.value = e.id;
|
|
|
|
|
+ // 初始化查询条件
|
|
|
|
|
+ queryData.value = dateUtils.getTodayYearMonthObj();
|
|
|
|
|
+
|
|
|
|
|
+ // 加载数据
|
|
|
|
|
+ loadData();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ onPullDownRefresh(() => {
|
|
|
|
|
+ loadData();
|
|
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
|
|
+ });
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -377,4 +408,22 @@
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .pick-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ height: 35px;
|
|
|
|
|
+ padding-left: 10px;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|