<template>
<ELPlusLanguageConfig :local="local">
<el-calendar v-model="newData" class="dialog-calendar">
<template #header="{ date }">
<div class="font18" style="color: var(--color6)">{{ date }}</div>
<div class="view-btn">
<span class="pointer active">Single period view</span>
<span @click="goPage('/DataWrite/DataEditCompare',{id:123,c:true})" class="pointer">Compare view</span>
</div>
</template>
<template #dateCell="{ date, data }">
<el-row>
<el-col class="datastyle">
<span>{{ ("-").slice(2).join("-") }}</span>
<span class="marginL10">{{ solarToLunar(date, data) }}</span>
</el-col>
</el-row>
<template v-for="(item, index) in textContent()" :key="index">
<div v-for="(list, ind) in (0, 4)" :key="ind" class="paddingV5 item-list ellipsis">{{ }}</div>
<!-- Up to 4 pieces of information are displayed below each date, and more than 4 pieces of information are displayed on the page -->
<div v-if=" > 4" class="flex items-center justify-end">
<div class="marginR10 item-page">
<span style="color:#262626;">{{ }}</span>
<span style="color:#999;margin: 0 1px;">/</span>
<span style="color:#999;">{{ }}</span>
</div>
<div style="color:var(--fontColor);font-weight: 550;">
<span class="pointer marginR10" @="prevPage()"><</span>
<span class="pointer" @="nextPage()">></span>
</div>
</div>
</template>
</template>
</el-calendar>
</ELPlusLanguageConfig>
</template>
<script setup>
import {ref, reactive} from "vue";
import {useRouter} from "vue-router";
import ELPlusLanguageConfig from '@/components/ELPlusLanguageConfig'
import calendarUtils from '@/utils/calendar/calendar'
import useWeeks from '@/utils/useWeeks'// Calendar related start -------
const newData= ref(new Date())
let valueFormat = 'YYYY-MM'
const local = useWeeks(valueFormat);
const router = useRouter();
const props = defineProps({
showDialog:{
type:Boolean,
default:false
}
})
const form = ref();
const emit = defineEmits()
const doClose = () => {
emit('update:showDialog',false)
}
const goPage = (path,query = {}) => {
({
path,
query
})
}
const submit = () => {
emit('onSubmit',)
doClose()
}
const state = reactive({//Test data
calendarData:[
{
day: "2023-07-04",
list: [
{
name: 'Completed Unit Name 1Completed Unit Name 1Completed Unit Name 1Completed Unit Name 1Completed Unit Name 1Completed Unit Name 1'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-05",
list: [
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-06",
list: [
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
}
],
currentPage: 1,
totalPage: 5,
},
{
day: "2023-07-07",
list: [
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
},
{
name: 'Company Name 1 has been filled in'
}
],
currentPage: 1,
totalPage: 5,
},
],
});
const textContent = (date) => {//The current date is to get the current date value of the calendar component above. According to this value, filter the test data and find the corresponding data under each date.return ((item) => {
return date === ;
});
}// Gregorian calendar to lunar calendar
const solarToLunar= (slotDate, slotData) => {
let solarDayArr = ('-');
let lunarDay = calendarUtils.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])// Lunar Date
//let lunarMD =+
// Gregorian calendar festival\Lunar New Year\Lunar solar term
//let festAndTerm = [];
// ( == null ? '' : ' ' + )
// ( == null ? '' : '' + )
// ( == null ? '' : '' + )
// festAndTerm = ('')
// return festAndTerm == '' ? lunarMD : festAndTerm
return
}// Previous page
const prevPage= (day) => {
let calendarData = ;
for (let i = 0; i <; i++ ) {
let items = calendarData[i];
if ( == day) {
if ( === 1) {
= 1
} else {
--
}
}
}
}// Next page
const nextPage= (day) => {
let calendarData = ;
for (let i = 0; i <; i++ ) {
let items = calendarData[i];
if ( == day) {
if ( == ) {
=
} else {
++
}
}
}
}
</script>
<style scoped>
.view-btn>span{
padding:10px 20px;
background-color: rgb(248, 248, 248);
border: 1px solid rgb(203, 203, 203);
}
.view-btn>span:first-child{
border-radius: 5px 0 0 5px;
}
.view-btn>span:last-child{
border-radius: 0 5px 5px 0;
}
.view-btn>,.view-btn>span:hover{
background-color: rgb(0, 122, 251, 0.9);
color: #FFFFFF;
border: 1px solid rgb(0, 122, 251);
}
.item-list {
font-size: 0.75rem;
}
.item-page {
font-size: 0.75rem;
}
</style>
