用vue计算请假天数,假如上班时间为8:45,下班时间为17:30,中午休息时间为11:45-13:30,请假开始时间为2023-05-31 7:30:00结束时间为2023-06-02 15:30:00的代码
时间: 2024-02-24 22:57:43 浏览: 128
好的,以下是用 Vue 计算请假天数的代码。
首先,在 Vue 的 `<template>` 标签中,我们可以创建一个表单来输入请假开始时间和结束时间,以及一个按钮来触发计算请假天数的方法。
```html
<template>
<div>
<div>
<label>请假开始时间:</label>
<input type="datetime-local" v-model="startDateTime" />
</div>
<div>
<label>请假结束时间:</label>
<input type="datetime-local" v-model="endDateTime" />
</div>
<button @click="calculateLeaveDays">计算请假天数</button>
<div v-if="leaveDays !== null">请假天数:{{ leaveDays }}天</div>
</div>
</template>
```
然后,在 Vue 的 `<script>` 标签中,我们可以定义一个 `calculateLeaveDays` 方法来计算请假天数。我们可以使用 Moment.js 库来处理日期时间的计算和格式化。
```html
<script>
import moment from "moment";
export default {
data() {
return {
startDateTime: "",
endDateTime: "",
leaveDays: null,
workStartTime: moment("8:45", "HH:mm"),
workEndTime: moment("17:30", "HH:mm"),
lunchStartTime: moment("11:45", "HH:mm"),
lunchEndTime: moment("13:30", "HH:mm")
};
},
methods: {
calculateLeaveDays() {
const startDateTime = moment(this.startDateTime);
const endDateTime = moment(this.endDateTime);
const totalDays = endDateTime.diff(startDateTime, "days") + 1;
let leaveDays = 0;
for (let i = 0; i < totalDays; i++) {
const currentDateTime = startDateTime.clone().add(i, "days");
if (
currentDateTime.isBetween(
moment(this.workStartTime),
moment(this.lunchStartTime),
"minute",
"[)"
)
) {
leaveDays += 0.5;
} else if (
currentDateTime.isBetween(
moment(this.lunchEndTime),
moment(this.workEndTime),
"minute",
"(]"
)
) {
leaveDays += 0.5;
} else if (currentDateTime.isoWeekday() >= 6) {
leaveDays += 0;
} else {
leaveDays += 1;
}
}
this.leaveDays = leaveDays;
}
}
};
</script>
```
在 `calculateLeaveDays` 方法中,我们首先使用 Moment.js 将输入的日期时间转换为 Moment 对象,并计算出请假总天数。然后,我们通过循环每一天的时间来判断该天是否需要计算请假天数。最后,将计算出的请假天数赋值给 `leaveDays` 变量,并在模板中显示出来。
需要注意的是,这段代码假设周六周日是双休日,不需要计算请假天数。如果你的公司的双休日不是周六周日,需要对代码进行相应的修改。
阅读全文