Compare commits
4 Commits
70ac8f8c19
...
af255c356c
| Author | SHA1 | Date | |
|---|---|---|---|
|
af255c356c | ||
|
|
e978bdb511 | ||
|
|
cb6598accd | ||
|
|
34d0738ad7 |
21
src/api/calendar/agenda/index.ts
Normal file
21
src/api/calendar/agenda/index.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import request from "@/config/axios";
|
||||||
|
|
||||||
|
export interface CalendarDate {
|
||||||
|
isSelected: boolean
|
||||||
|
type: string
|
||||||
|
day: string
|
||||||
|
date: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工作日历API
|
||||||
|
*/
|
||||||
|
export const AgendaApi = {
|
||||||
|
/**
|
||||||
|
* 获取工作Day
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
getAgendaPage: async (params: any) => {
|
||||||
|
return await request.get({ url: `/calendar/agenda/page`, params })
|
||||||
|
},
|
||||||
|
}
|
||||||
141
src/views/calendar/agenda/index-bk.vue
Normal file
141
src/views/calendar/agenda/index-bk.vue
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col v-for="(month, index) in months" :key="index" :span="6" >
|
||||||
|
<h3 class="month-title">{{ month }}</h3>
|
||||||
|
<el-calendar
|
||||||
|
ref="calendar"
|
||||||
|
class="custom-calendar"
|
||||||
|
:model-value="new Date(currentYear, index, 1)"
|
||||||
|
>
|
||||||
|
<template #header="{ date }">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24" class="header-date">
|
||||||
|
<span class="cl-title"> {{ date }}</span>
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="8" style="text-align: center;">-->
|
||||||
|
<!-- <el-button-group style="display: flex; justify-content: space-between;">-->
|
||||||
|
<!-- <el-button size="small" @click="selectDate('prev-year')">上年</el-button>-->
|
||||||
|
<!-- <el-button size="small" @click="selectDate('prev-month')">上月</el-button>-->
|
||||||
|
<!-- <el-button size="small" @click="selectDate('today')">今天</el-button>-->
|
||||||
|
<!-- <el-button size="small" @click="selectDate('next-year')">下年</el-button>-->
|
||||||
|
<!-- <el-button size="small" @click="selectDate('next-month')">下月</el-button>-->
|
||||||
|
<!-- </el-button-group>-->
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #date-cell="{ data }">
|
||||||
|
<div v-if="holidays[data.day]" @click="handleSelect(data.date)" class="holiday">
|
||||||
|
<!-- {{ data.day + ": " + holidays[data.day] }}-->
|
||||||
|
{{ data.date.getDay() }}
|
||||||
|
</div>
|
||||||
|
<!-- <div v-if="schedules[data.day]" @click="handleSelect(schedules[data.day])" class="schedule">-->
|
||||||
|
<!-- {{ data.day + ": " + schedules[data.day] }}-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||||
|
|
||||||
|
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
// const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
|
// const workdays = {};
|
||||||
|
const calendar = ref<CalendarInstance>()
|
||||||
|
// const selectedDate = ref(""); // 选择的日期
|
||||||
|
const currentYear = ref(new Date().getFullYear()) // 获取当前年份
|
||||||
|
const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
||||||
|
|
||||||
|
// const selectDate = (val: CalendarDateType) => {
|
||||||
|
// if (!calendar.value) return
|
||||||
|
// calendar.value.selectDate(val)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 处理日期选择
|
||||||
|
const handleSelect = (date: Date) => {
|
||||||
|
date.getDay()
|
||||||
|
date.getFullYear()
|
||||||
|
date.getMonth()
|
||||||
|
message.success(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDay()}`)
|
||||||
|
// selectedDate.value = date;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 节假日数据
|
||||||
|
const holidays = ref({
|
||||||
|
'2024-01-01': '元旦',
|
||||||
|
'2024-01-21': '春节',
|
||||||
|
'2024-02-10': '春节假期',
|
||||||
|
'2024-04-04': '清明节',
|
||||||
|
'2024-05-01': '劳动节',
|
||||||
|
'2024-06-10': '端午节',
|
||||||
|
'2024-08-10': '中元节',
|
||||||
|
'2024-09-29': '中秋节',
|
||||||
|
'2024-10-01': '国庆节',
|
||||||
|
'2024-10-02': '国庆假期',
|
||||||
|
'2024-10-03': '国庆假期',
|
||||||
|
'2024-10-04': '国庆假期',
|
||||||
|
'2024-10-05': '国庆假期',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 日常安排数据
|
||||||
|
// const schedules = ref({
|
||||||
|
// '2024-10-15': '工作',
|
||||||
|
// '2024-10-16': '工作',
|
||||||
|
// '2024-10-17': '工作',
|
||||||
|
// '2024-10-18': '工作',
|
||||||
|
// '2024-10-19': '工作',
|
||||||
|
// '2024-10-20': '代码提交截止',
|
||||||
|
// '2024-11-20': '代码提交截止',
|
||||||
|
// '2024-12-20': '代码提交截止',
|
||||||
|
// });
|
||||||
|
|
||||||
|
const getDate = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
onMounted(()=> {
|
||||||
|
getDate();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.custom-calendar .el-calendar-day {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.custom-calendar {
|
||||||
|
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||||
|
border-radius: 5px; /* 可选：添加圆角 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.holiday {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #15bc83;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #CCFFCC;
|
||||||
|
color: #3b3e55;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.month-title {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
.cl-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px
|
||||||
|
}
|
||||||
|
.header-date {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
136
src/views/calendar/agenda/index-bk2.vue
Normal file
136
src/views/calendar/agenda/index-bk2.vue
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col v-for="(month, index) in months" :key="index" :span="6" >
|
||||||
|
<h3 class="month-title">{{ month }}</h3>
|
||||||
|
<el-calendar
|
||||||
|
ref="calendar"
|
||||||
|
class="custom-calendar"
|
||||||
|
:model-value="new Date(currentYear, index, 1)"
|
||||||
|
>
|
||||||
|
<template #header="{ date }">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24" class="header-date">
|
||||||
|
<span class="cl-title"> {{ date }}</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #date-cell="{ data }">
|
||||||
|
<div @click="handleSelect(data)" :class="{ 'holiday': holidays[data.day] }">
|
||||||
|
{{ data.date.getDate()}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||||
|
|
||||||
|
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const calendar = ref<CalendarInstance>()
|
||||||
|
// const selectedDate = ref(""); // 选择的日期
|
||||||
|
// const today = ref("")
|
||||||
|
const currentYear = ref(new Date().getFullYear()) // 获取当前年份
|
||||||
|
const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
||||||
|
|
||||||
|
// const selectDate = (val: CalendarDateType) => {
|
||||||
|
// if (!calendar.value) return
|
||||||
|
// calendar.value.selectDate(val)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 处理日期选择
|
||||||
|
const handleSelect = (date:CalendarDate) => {
|
||||||
|
const date2 = date.date
|
||||||
|
// message.info(`${date2.getFullYear()}-${date2.getMonth()+1}-${date2.getDate()}`)
|
||||||
|
// selectedDate.value = date;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 节假日数据
|
||||||
|
const holidays = ref({
|
||||||
|
'2024-01-01': '元旦',
|
||||||
|
'2024-01-21': '春节',
|
||||||
|
'2024-02-10': '春节假期',
|
||||||
|
'2024-04-04': '清明节',
|
||||||
|
'2024-05-01': '劳动节',
|
||||||
|
'2024-06-10': '端午节',
|
||||||
|
'2024-08-10': '中元节',
|
||||||
|
'2024-09-29': '中秋节',
|
||||||
|
'2024-10-01': '国庆节',
|
||||||
|
'2024-10-02': '国庆假期',
|
||||||
|
'2024-10-03': '国庆假期',
|
||||||
|
'2024-10-04': '国庆假期',
|
||||||
|
'2024-10-05': '国庆假期',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 日常安排数据
|
||||||
|
// const schedules = ref({
|
||||||
|
// '2024-10-15': '工作',
|
||||||
|
// '2024-10-16': '工作',
|
||||||
|
// '2024-10-17': '工作',
|
||||||
|
// '2024-10-18': '工作',
|
||||||
|
// '2024-10-19': '工作',
|
||||||
|
// '2024-10-20': '代码提交截止',
|
||||||
|
// '2024-11-20': '代码提交截止',
|
||||||
|
// '2024-12-20': '代码提交截止',
|
||||||
|
// });
|
||||||
|
|
||||||
|
const getDate = () => {
|
||||||
|
// const d = new Date();
|
||||||
|
// today.value=`${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
|
||||||
|
// console.log(today.value)
|
||||||
|
}
|
||||||
|
onMounted(()=> {
|
||||||
|
getDate();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.custom-calendar .el-calendar-day {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.custom-calendar .is-today {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.custom-calendar {
|
||||||
|
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||||
|
border-radius: 5px; /* 可选：添加圆角 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.holiday {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #15bc83;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #CCFFCC;
|
||||||
|
color: #3b3e55;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.month-title {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
.cl-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px
|
||||||
|
}
|
||||||
|
.header-date {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,40 +1,161 @@
|
|||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-calendar ref="calendar" class="custom-calendar">
|
<el-button-group style="display: flex; justify-content: space-between;">
|
||||||
<template #header = "{date}">
|
<el-button size="large" @click="selectDate2(-1)">上年</el-button>
|
||||||
<el-row>
|
<el-button size="large" @click="toYear()">今年</el-button>
|
||||||
<el-col :span="8" style="text-align: center;">
|
<el-button size="large" @click="selectDate2(1)">下年</el-button>
|
||||||
<span style="display: inline-block;font-size: 10px">{{ date }}</span>
|
</el-button-group>
|
||||||
</el-col>
|
<el-row :gutter="10">
|
||||||
<el-col :span="8" style="text-align: center;">
|
<el-col v-for="(month, index) in months" :key="index" :span="6" >
|
||||||
1
|
<h5 class="month-title">{{ month }}</h5>
|
||||||
</el-col>
|
<el-calendar
|
||||||
<el-col :span="8" style="text-align: center;">
|
ref="calendar"
|
||||||
<el-button-group style="display: flex; justify-content: space-between;">
|
class="custom-calendar"
|
||||||
<el-button size="small" @click="selectDate('prev-year')">上年</el-button>
|
:model-value="new Date(currentYear, index, 1)"
|
||||||
<el-button size="small" @click="selectDate('prev-month')">上月</el-button>
|
>
|
||||||
<el-button size="small" @click="selectDate('today')">今天</el-button>
|
<template #header="{ date }">
|
||||||
<el-button size="small" @click="selectDate('next-year')">下年</el-button>
|
<el-row>
|
||||||
<el-button size="small" @click="selectDate('next-month')">下月</el-button>
|
<el-col :span="24" class="header-date">
|
||||||
</el-button-group>
|
<span class="cl-title"> {{ date }}</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
</el-calendar>
|
|
||||||
|
<template #date-cell="{ data }">
|
||||||
|
<div @click="handleSelect(data)" :class="{ 'holiday': holidays2[data.day] }">
|
||||||
|
{{ data.date.getDate()}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import {CalendarDateType, CalendarInstance} from "element-plus";
|
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||||
|
import {AgendaApi,CalendarDate} from "@/api/calendar/agenda";
|
||||||
|
|
||||||
|
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||||
|
|
||||||
|
// const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
const calendar = ref<CalendarInstance>()
|
const calendar = ref<CalendarInstance>()
|
||||||
|
const currentYear = ref(new Date().getFullYear()) // 获取当前年份
|
||||||
|
const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
||||||
|
|
||||||
const selectDate = (val: CalendarDateType) => {
|
const selectDate = (val: CalendarDateType) => {
|
||||||
if (!calendar.value) return
|
if (!calendar.value) return
|
||||||
calendar.value.selectDate(val)
|
calendar.value.selectDate(val)
|
||||||
|
console.log(calendar.value.selectDate(val))
|
||||||
}
|
}
|
||||||
|
const selectDate2 = (val:number) => {
|
||||||
|
if (!val){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
currentYear.value += val
|
||||||
|
}
|
||||||
|
const toYear = () => {
|
||||||
|
currentYear.value = new Date().getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理日期选择
|
||||||
|
const handleSelect = (date:CalendarDate) => {
|
||||||
|
const date2 = date.date
|
||||||
|
const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
|
||||||
|
holidays2[da] = !holidays2[da]
|
||||||
|
console.log("da",da)
|
||||||
|
console.log("holidays[da]",holidays2[da])
|
||||||
|
console.log("date2",date2)
|
||||||
|
console.log("holidays2",holidays2)
|
||||||
|
};
|
||||||
|
|
||||||
|
// 节假日数据
|
||||||
|
const holidays = reactive({
|
||||||
|
'2024-01-01': 1,
|
||||||
|
'2024-01-21': 1,
|
||||||
|
'2024-02-10': 1,
|
||||||
|
'2024-04-04': 1,
|
||||||
|
'2024-05-01': 1,
|
||||||
|
'2024-06-10': 1,
|
||||||
|
'2024-08-10': 1,
|
||||||
|
'2024-09-29': 1,
|
||||||
|
'2024-10-01': 1,
|
||||||
|
'2024-10-02': 1,
|
||||||
|
'2024-10-03': 1,
|
||||||
|
'2024-10-04': 1,
|
||||||
|
'2024-10-05': 1,
|
||||||
|
'2024-10-06': 0,
|
||||||
|
'2024-10-07': 0,
|
||||||
|
'2024-10-08': 0,
|
||||||
|
'2024-10-09': 1,
|
||||||
|
});
|
||||||
|
const holidays2 = reactive({});
|
||||||
|
const startDate = new Date('2024-01-01');
|
||||||
|
const endDate = new Date('2024-12-31');
|
||||||
|
|
||||||
|
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
|
||||||
|
const formattedDate = d.toISOString().split('T')[0]; // 格式化日期为 YYYY-MM-DD
|
||||||
|
holidays2[formattedDate] = Math.floor(Math.random() * 2); // 随机生成 0 或 1
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(holidays2);
|
||||||
|
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
id: undefined,
|
||||||
|
date:[]
|
||||||
|
})
|
||||||
|
|
||||||
|
const getDate = () => {
|
||||||
|
const data = AgendaApi.getAgendaPage(queryParams)
|
||||||
|
}
|
||||||
|
onMounted(()=> {
|
||||||
|
// getDate();
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
<style scoped lang="scss">
|
.custom-calendar .el-calendar-day {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.custom-calendar .is-today {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.custom-calendar {
|
||||||
|
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||||
|
border-radius: 10px; /* 可选：添加圆角 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.holiday {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #15bc83;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #CCFFCC;
|
||||||
|
color: #3b3e55;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.month-title {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
.cl-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
.header-date {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user