效果图:
代码
<template>
<div>
<div style="padding: 20px 0;">
<div style="margin-left: 10px; border-left: 5px solid #0079fe; font-size: 22px; font-weight: 600; padding-left: 10px">工作计划</div>
<div style="margin-left: 50px; padding-right: 50px; margin-right: 50px">
<div style="display:flex; justify-content: center; margin-top: 5vh; margin-bottom: 5vh; align-items: center">
<div style="cursor: pointer; background-color: #39b54a; padding: 10px 50px 11px; border-radius: 20px; color: #fff; margin-right: 15px" @click="getPreviousWeekDates">上一周</div>
<div style=" cursor: pointer; background-color: #0081ff; padding: 11px 50px 10px; border-radius: 20px; color: #fff" @click="getNextWeekDates">下一周</div>
</div>
<div>
<table id="myTable">
<tr>
<th style="width: 70px; position: relative">
<div class="ss"></div>
</th>
<th v-for="item in nowDate" :key="item.nyr">
<div style="font-size: 18px">{{ item.nyr }}</div>
<div style="font-size: 16px">{{item.xq }}</div>
</th>
</tr>
<tbody>
<tr>
<td rowspan="8" style="background-color: #d7d7d7; width: 50px;">账号姓名</td>
<td rowspan="8" v-for="item in nowDate" :key="item.nyr">
<el-input
type="textarea"
:rows="17"
@blur="fsqq"
placeholder="请输入内容"
v-model="item.content">
</el-input>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
nowDate: [],
i: 0,
y: 0,
syz: [],
xyz: []
}
},
mounted() {
this.getWeekDates();
let width= window.innerWidth;
console.log(width)
},
methods: {
fsqq() {
},
getWeekDates() {
let date = new Date()
let day = date.getDay()
let diff = date.getDate() - day + (day === 0 ? -6 : 1) // 获取所在周的第一天
let weekStart = new Date(date.setDate(diff))
let weekDates = []
for (let i = 0; i < 7; i++) {
let currentDate = new Date(weekStart)
currentDate.setDate(weekStart.getDate() + i)
weekDates.push(currentDate)
}
weekDates.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
})
},
getPreviousWeekDates() {
this.nowDate = [];
this.syz = []
if (this.y > 0) {
this.y = this.y - 1
}
this.i = this.i + 1
let weeksAgo = this.i
let today = new Date()
if (this.xyz.length > 0) {
today = new Date(this.xyz[0].nyr)
}
let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天
let startingDate = new Date(today.setDate(firstDayOfWeek))
let weekDates = []
for (let i = 0; i < weeksAgo; i++) {
startingDate.setDate(startingDate.getDate() - 7) // 递减起始日期
for (let j = 0; j < 7; j++) {
let currentDate = new Date(startingDate)
currentDate.setDate(startingDate.getDate() + j)
weekDates.push(currentDate)
}
}
let remaining = []
if (this.i > 1) {
remaining = weekDates.slice((this.i - 1) * 7)
} else {
remaining = weekDates
}
remaining.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
this.syz.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
// console.log(this.syz)
})
return weekDates
},
getNextWeekDates() {
this.xyz = [];
this.nowDate = [];
if (this.i > 0) {
this.i = this.i - 1
}
this.y = this.y + 1 // 将 this.i 的值加 1
let weeksAgo = this.y
let today = new Date()
if (this.syz.length > 0) {
today = new Date(this.syz[6].nyr)
}
let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天
let startingDate = new Date(today.setDate(firstDayOfWeek))
let weekDates = []
for (let i = 0; i < weeksAgo; i++) {
startingDate.setDate(startingDate.getDate() + 7) // 递增起始日期
for (let j = 0; j < 7; j++) {
let currentDate = new Date(startingDate)
currentDate.setDate(startingDate.getDate() + j)
weekDates.push(currentDate)
}
}
let remaining = []
if (this.y > 1) {
remaining = weekDates.slice((this.y - 1) * 7) // 获取下一周的日期
} else {
remaining = weekDates
}
remaining.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
this.xyz.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
// console.log(this.xyz)
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
})
return weekDates
}
}
}
</script>
<style scoped>
.ss {
content: "";
position: absolute;
width: 1px;
height:164px; 需要手调 ,线的长度
top: 1px; 需要手调 ,线的位置
left: -5px;
background-color: white;
display: block;
transform: rotate(-57deg);
transform-origin: top;
}
table {
width: 80vw;
border-collapse: collapse;
border: 2px #797979 solid;
}
th, td {
padding: 10px;
width: 100px;
border: 2px #797979 solid;
text-align: center;
}
th {
height: 10vh;
background-color: #d7d7d7;
}
td {
height: 40vh;
}
#operButton {
position: absolute;
left: 600px;
top: 100px;
}
#operButton button {
width: 100px;
height: 50px;
}
</style>