<template>
<div class="el-quarter-wrap">
<el-popover width="280" v-model="visible">
<template #reference>
<el-input v-model="quarterDate" placeholder="请选择季度" clearable :prefix-icon="Calendar" readonly
@change="quarterDateChange" style="width: 300px;">
<template #suffix>
<el-icon v-if="quarterDate" class="el-quarter-clear" @click="clearData">
<Close />
</el-icon>
</template>
</el-input>
</template>
<div class="el-quarter__header">
<span class="el-quarter-btn el-quarter-btn__pre" @click="changeShowYear(-1)">
<el-icon>
<DArrowLeft />
</el-icon>
</span>
<div class="el-quarter__header-text" @click="showYearList">
{{ quarterTitle }}
</div>
<span class="el-quarter-btn el-quarter-btn__next" @click="changeShowYear(1)">
<el-icon>
<DArrowRight />
</el-icon>
</span>
</div>
<div class="el-quarter__content" v-if="!isEditYear">
<div class="el-quarter__row">
<span
class="quarter-index"
:class="{ 'is-active': showYear === pickerYear && quarterIndex === index }"
@click="pickerQuarte(index)"
v-for="(item, index) in ['第一季度', '第二季度','第三季度','第四季度',]"
>{{ item }}</span>
</div>
</div>
<div class="el-year__content" v-else>
<div class="el-year-item" v-for="item in yearList">
<div class="cell" :class="{ 'is-active': showYear == item }" @click="selectYear(item)">
{{ item }}
</div>
</div>
</div>
</el-popover>
</div>
</template>
<script lang="ts" setup>
import { DArrowLeft, DArrowRight, Close, Calendar } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref } from 'vue'
let visible = ref(false)
let quarterDate = ref('')
let pickerYear = ref('') as any
let showYear = ref('') as any
let quarterIndex = ref(-1)
let isEditYear = ref(false)
let startYear = ref('') as any
let yearList = reactive([] as any)
const quarterTitle = computed(() => {
if(isEditYear.value) {
return startYear.value+ "年 - " + (startYear.value + 9) + "年"
} else {
return showYear.value + '年'
}
})
function pickerQuarte(index:number) {
quarterIndex.value = index
pickerYear.value = showYear.value
quarterDate.value = pickerYear.value + "-Q" + index
}
function changeShowYear(num: number) {
if(isEditYear.value) {
startYear.value = startYear.value + (num * 10)
changeYearList()
} else {
showYear.value = showYear.value + num
}
}
function clearData() {
quarterDate.value = ''
pickerYear.value = ''
showYear.value = new Date().getFullYear()
quarterIndex.value = 0
}
function quarterDateChange(value:any) {
const splitArray = value.split('-Q')
if (splitArray.length < 2) {
pickerYear.value = ''
showYear.value = new Date().getFullYear()
quarterIndex.value = 0
} else {
pickerYear.value = splitArray[0]
showYear.value = splitArray[0]
quarterIndex.value = splitArray[1]
}
}
function changeYearList() {
yearList = []
let year = startYear.value
for (let i = 0; i < 10; i++) {
yearList.push(year++)
}
}
function showYearList() {
if(!isEditYear.value) {
startYear.value = Number(Math.floor(showYear.value / 10) + '0')
changeYearList()
isEditYear.value = true
} else {
isEditYear.value = false
}
}
function selectYear(item:any) {
showYear.value = item
isEditYear.value = false
}
onMounted(() => {
showYear.value = new Date().getFullYear()
startYear.value = Number(Math.floor(showYear.value / 10) + '0')
changeYearList()
})
</script>
<style lang="scss">
.el-quarter__header {
padding-bottom: 12px;
border-bottom: 1px solid #ebeef5;
display: flex;
align-items: center;
justify-content: space-between;
.el-quarter-btn {
font-size: 12px;
}
.el-quarter__header-text {
font-size: 16px;
font-weight: 500;
text-align: center;
cursor: pointer;
}
}
.el-quarter__content {
min-height: 60px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
.el-quarter__row {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.quarter-index {
display: block;
padding: 4px 10px;
width: 50%;
text-align: center;
cursor: pointer;
&:hover {
color: #337ecc
}
}
.is-active {
color: #409eff
}
}
}
.el-quarter-clear {
position: relative;
color: #909399;
display: none;
height: 12px;
width: 12px;
cursor: pointer;
&::after {
content: '';
position: absolute;
height: 14px;
width: 14px;
margin: auto;
border-radius: 50%;
border: 1px solid #909399
}
}
.el-input {
&:hover {
.el-quarter-clear {
display: flex;
}
}
}
.el-year__content {
min-height: 100px;
display: flex;
padding: 10px 0;
flex-wrap: wrap;
.el-year-item {
width: calc(100% / 4);
display: flex;
align-items: center;
justify-content: center;
.cell {
padding: 4px 10px;
width: fit-content;
cursor: pointer;
cursor: pointer;
white-space: nowrap;
&:hover {
color: #337ecc
}
}
.is-active {
color: #409eff
}
}
}</style>
02-23
928
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-09
4976
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-19
4631
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-16
1554
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)