<template>
|
<div class="container">
|
<div class="header">
|
<div class="title">{{ nowYear }}年{{ nowMonth }}月</div>
|
<!-- <div class="btns">
|
<button @click="toPrevMonth"> < </button>
|
<button @click="toToday"> 今天 </button>
|
<button @click="toNextMonth"> > </button>
|
</div> -->
|
<div>
|
<el-date-picker
|
v-model="queryParams.monthDays"
|
type="month"
|
placeholder="选择月份"
|
@change="changeDate($event)"
|
/>
|
<el-select
|
clearable
|
v-model="queryParams.applicableFactory"
|
style="width: 160px; margin-left: 20px"
|
placeholder="请输入适用工厂"
|
@change="changePlant($event)"
|
>
|
<el-option
|
v-for="plant in plantList"
|
:key="plant.id"
|
:label="plant.plantName"
|
:value="plant.plantCode"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="calendar">
|
<div class="itemWeeks" v-for="item in weeks" :key="item">
|
{{ "周" + item }}
|
</div>
|
<!-- <div
|
class="item color_grey"
|
v-for="item in prefixView"
|
:key="item"
|
@click="toPrevMonth(item.day)"
|
>
|
{{ item.day.split("-")[2] }} {{ item.typeHoliday }}
|
</div> -->
|
<!-- :class="{
|
today:
|
realDate.year === nowYear &&
|
realDate.month === nowMonth &&
|
realDate.date === item,
|
}" -->
|
<div
|
v-for="item in dateCalendarView"
|
:key="item"
|
class="item"
|
:class="{
|
'bg_success': item.type === '休息日',
|
'bg_primary': item.type === '工作日',
|
'bg_warn': item.type === '节假日',
|
}"
|
>
|
<div
|
class="text_cell"
|
:class="{
|
color_grey:
|
item.date.substring(0, 7) !==
|
dateStr(queryParams.monthDays).substring(0, 7),
|
}"
|
>
|
{{ item.date.split("-")[2] }}
|
</div>
|
<div class="text_cell_right">{{ item.type }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="CalendarView">
|
import { calendarView } from "@/api/basicData/calendar";
|
import { listAll_plant } from "@/api/basicData/plant";
|
const plantList = ref([]);
|
// 今天的年月日
|
const realDate = {
|
year: new Date().getFullYear(),
|
month: (new Date().getMonth() + 1).toString().padStart(2, "0"),
|
date: new Date().getDate(),
|
};
|
const queryParams = ref({
|
monthDays: `${realDate.year}-${realDate.month}`,
|
applicableFactory: "沈阳",
|
applicableFactoryCode: "FORTUNE",
|
});
|
const weeks = ["日", "一", "二", "三", "四", "五", "六"];
|
const now = ref(new Date());
|
const dateCalendarView = ref([]);
|
const formatDateCalendar = (day) => {
|
dateCalendarView.value.map((item) => {
|
console.log(day.day, item.day);
|
if (day.day === item.day) {
|
return {
|
...day,
|
...item,
|
};
|
}
|
});
|
};
|
// 本月1号是周几
|
// const firstDateDay = computed(() => {
|
// return new Date(now.value.getFullYear(), now.value.getMonth(), 1).getDay();
|
// });
|
// // 本月的总天数
|
// const days = computed(() => {
|
// return new Date(
|
// now.value.getFullYear(),
|
// now.value.getMonth() + 1,
|
// 0
|
// ).getDate();
|
// });
|
// 实时计算当前页面显示的年份
|
const nowYear = computed(() => {
|
return dateStr(queryParams.value.monthDays).split("-")[0];
|
});
|
// 实时计算当前页面显示的月份
|
const nowMonth = computed(() => {
|
return dateStr(queryParams.value.monthDays).split("-")[1];
|
});
|
|
const toPrevMonth = (date) => {
|
now.value = date
|
? new Date(date.split("-")[0], parseInt(date.split("-")[1]) - 1, 1)
|
: new Date(now.value.getFullYear(), now.value.getMonth() - 1, 1);
|
};
|
const toNextMonth = (date) => {
|
now.value = date
|
? new Date(date.split("-")[0], parseInt(date.split("-")[1]) - 1, 1)
|
: new Date(now.value.getFullYear(), now.value.getMonth() + 1, 1);
|
};
|
// 回到今天
|
const toToday = () => {
|
now.value = new Date();
|
console.log(now.value, "now.valuenow.value");
|
};
|
function dateStr(dateTimeString) {
|
const dateTime = new Date(dateTimeString);
|
// 提取年份和月份
|
const year = dateTime.getFullYear();
|
const month = String(dateTime.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1，并用padStart补零
|
// 格式化年份和月份为 "yyyy-mm" 格式的字符串
|
return `${year}-${month}-01`;
|
}
|
async function changePlant(plant) {
|
queryParams.value.applicableFactoryCode = plant;
|
const res = await calendarView({
|
effectiveDate: dateStr(queryParams.value.monthDays),
|
applicableFactory: plant,
|
});
|
dateCalendarView.value = res.data;
|
}
|
async function changeDate(e) {
|
const res = await calendarView({
|
effectiveDate: dateStr(queryParams.value.monthDays),
|
applicableFactory: queryParams.value.applicableFactoryCode,
|
});
|
dateCalendarView.value = res.data;
|
}
|
onMounted(async () => {
|
const response = await listAll_plant({});
|
plantList.value = response.data;
|
const res = await calendarView({
|
effectiveDate: `${queryParams.value.monthDays}-01`,
|
applicableFactory: "FORTUNE",
|
});
|
dateCalendarView.value = res.data;
|
});
|
</script>
|
|
<style lang="scss">
|
.container {
|
.header {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20px;
|
.title {
|
font-size: 26px;
|
font-weight: 600;
|
}
|
.btns {
|
button {
|
height: 26px;
|
border-radius: 0;
|
margin: 0 2px;
|
cursor: pointer;
|
border-width: 1px;
|
}
|
}
|
}
|
.calendar {
|
display: flex;
|
flex-wrap: wrap;
|
border-bottom: 1px solid #ccc;
|
border-left: 1px solid #ccc;
|
.itemWeeks {
|
width: calc(100% / 7);
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
border-top: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
}
|
.item {
|
width: calc(100% / 7);
|
height: 92px;
|
text-align: center;
|
border-top: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
& .color_grey {
|
color: #999;
|
}
|
.text_cell_right {
|
text-align: right;
|
margin-right:20px;
|
margin-top:30px;
|
}
|
.text_cell {
|
padding-top: 10px;
|
}
|
}
|
.today {
|
color: blue;
|
font-weight: 600;
|
}
|
}
|
}
|
.bg_success {
|
background: #f0f9eb;
|
color: #67c23a;
|
}
|
.bg_warn {
|
background: #fdf6ec;
|
color: #e6a23c;
|
}
|
.bg_primary {
|
background: #d8ebff;
|
color: #409EFF;
|
}
|
</style>
|
