<template>
|
<div class="calenBox">
|
<el-calendar ref="calendar" v-model="leftValue">
|
<template #date-cell="{ data }">
|
<div :class="data.isSelected ? 'is-selected' : ''">
|
<div class="date-number">{{ data.day.slice(8, 10) }}</div>
|
<div class="events">
|
<div
|
v-for="(event, index) in getEvents(data.day)"
|
:key="index"
|
class="event-item"
|
:class="event.type"
|
@click="jumpcalendar(event, data.day)"
|
>
|
<img :src="getEventIcon(event.type)" alt="" />
|
{{ event.name }}<span>{{ event.value }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-calendar>
|
</div>
|
</template>
|
|
<script setup>
|
import dayjs from 'dayjs';
|
import { jobEventBar, getCalen } from '@/api/home/index';
|
import { useRouter } from 'vue-router';
|
import ev1 from '@/assets/images/workbench/ev1.png';
|
import ev2 from '@/assets/images/workbench/ev2.png';
|
import { ElMessage } from 'element-plus'
|
const router = useRouter();
|
const events = ref({});
|
const params = ref({
|
end_date: undefined,
|
start_date: undefined,
|
});
|
const eventIcons = ref({
|
'work-order': ev1,
|
task: ev2,
|
});
|
const getEventIcon = type => {
|
return eventIcons.value[type] || eventIcons.value.default;
|
};
|
function getCurrentMonthRange() {
|
return {
|
start_date: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
end_date: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
};
|
}
|
const leftValue = ref(new Date());
|
watch(
|
() => leftValue.value,
|
(newV, oldV) => {
|
if (newV && oldV) {
|
const newDate = dayjs(newV);
|
params.value = {
|
start_date: newDate.startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
end_date: newDate.endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
};
|
getJobEventBar();
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 获取日期数字
|
const getDate = date => {
|
return date.getDate();
|
};
|
// 获取对应日期的事件
|
const getEvents = dateString => {
|
return events.value[dateString] || [];
|
};
|
const monthRange = getCurrentMonthRange();
|
params.value = monthRange;
|
const getJobEventBar = () => {
|
getCalen(params.value).then(res => {
|
if (res.data.code !== 0) return;
|
events.value = res.data.data;
|
});
|
};
|
const jumpcalendar = (event, day) => {
|
if (event.name === '工单') {
|
router.push({
|
path: '/tickets/ticket',
|
query: {
|
day: day,
|
},
|
});
|
}else{
|
ElMessage.warning('加急开发中...')
|
}
|
};
|
onMounted(() => {
|
getJobEventBar();
|
});
|
</script>
|
<style lang="scss">
|
.calenBox {
|
|
.el-calendar-table td.is-selected {
|
background-color: #f0f7ff;
|
border: 2px solid #409eff;
|
border-radius: 4px;
|
}
|
.el-calendar-table td.is-selected .date-number {
|
font-weight: bold;
|
color: #409eff;
|
}
|
|
.el-calendar-table td.is-selected .events {
|
// padding: 2px;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.calenBox {
|
margin-top: 10px;
|
height: 546px;
|
overflow: hidden;
|
.event-item {
|
font-size: 12px;
|
// padding: 2px;
|
|
border-radius: 3px;
|
white-space: nowrap;
|
// overflow: hidden;
|
// text-overflow: ellipsis;
|
|
&.work-order {
|
font-weight: 400;
|
font-size: 12px;
|
color: #7b7b7b;
|
span {
|
font-weight: 600;
|
font-size: 14px;
|
color: #1c5cff;
|
margin-left: 2px;
|
}
|
}
|
|
&.task {
|
font-weight: 400;
|
font-size: 12px;
|
color: #7b7b7b;
|
span {
|
font-weight: 600;
|
font-size: 14px;
|
color: #029d36;
|
margin-left: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
