<script setup>
|
import {onMounted, ref, watch} from 'vue'
|
|
const props = defineProps({
|
valueArr: {
|
default: () => {
|
return ['01-03', '04-06', '07-09', '10-12'];
|
},
|
type: Array,
|
},
|
getValue: {
|
default: () => { },
|
type: Function,
|
},
|
// 传入显示的时间
|
defaultValue: {
|
default: "",
|
type: String,
|
},
|
limitTime: {
|
type: String,
|
default: ''
|
},
|
clearable: {
|
type: Boolean,
|
default: false
|
},
|
placeholder: {
|
type: String,
|
default: ''
|
}
|
})
|
const emit = defineEmits(['change'])
|
|
const showSeason = ref(false)
|
const showValue = ref('')
|
const year = ref(new Date().getFullYear())
|
const season = ref()
|
|
watch(() => props.defaultValue, (value) => {
|
initDefaultValue(value)
|
})
|
|
const prev = () => {
|
year.value = year.value * 1 - 1;
|
}
|
const next = () => {
|
// 如果有时间限制的话会进行判断
|
if (props.limitTime == "") {
|
year.value = year.value * 1 + 1;
|
} else if (props.limitTime != "" && year.value < props.limitTime) {
|
year.value = year.value * 1 + 1;
|
}
|
}
|
|
const whitchQuarter = (month) => {
|
let quarter = "";
|
month = Number(month);
|
switch (month) {
|
case 1:
|
case 2:
|
case 3:
|
quarter = "1";
|
break;
|
case 4:
|
case 5:
|
case 6:
|
quarter = "2";
|
break;
|
case 7:
|
case 8:
|
case 9:
|
quarter = "3";
|
break;
|
case 10:
|
case 11:
|
case 12:
|
quarter = "4";
|
break;
|
default:
|
console.error("The entered time is incorrect");
|
}
|
return quarter;
|
}
|
|
// 季度时间判定
|
const InitialTime = (val) => {
|
let num = "";
|
val = Number(val);
|
switch (val) {
|
case 1:
|
num = "01";
|
break;
|
case 2:
|
num = "04";
|
break;
|
case 3:
|
num = "07";
|
break;
|
case 4:
|
num = "10";
|
break;
|
default:
|
console.error("时间格式有误！");
|
}
|
return num;
|
}
|
|
const selectSeason = (i) => {
|
season.value = i + 1;
|
let arr = props.valueArr[i].split("-");
|
props.getValue(year.value + arr[0] + "-" + year.value + arr[1]);
|
showSeason.value = false;
|
showValue.value = `${year.value}年${season.value}季度`;
|
var formatValue = `${year.value}-${InitialTime(season.value)}`;
|
emit("change", formatValue);
|
}
|
|
const initDefaultValue = (value) => {
|
let arr = value.split("-");
|
year.value = arr[0].slice(0, 4);
|
var myseason = arr[1];
|
showValue.value = `${year.value}年${whitchQuarter(myseason)}季度`;
|
}
|
|
|
onMounted(() => {
|
if (props.defaultValue) {
|
console.log(props.defaultValue)
|
initDefaultValue(props.defaultValue);
|
}
|
})
|
</script>
|
|
<template>
|
<div class="quarter">
|
<mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"
|
@click.stop="showSeason = false"></mark>
|
<el-popover
|
:visible="showSeason"
|
placement="bottom"
|
trigger="click"
|
class="popover"
|
:width="300"
|
>
|
<template #reference>
|
<el-input :placeholder="props.placeholder" v-model="showValue" style="width:100%;" class="elWidth" :clearable="props.clearable" @click="showSeason = true" >
|
<template #prefix>
|
<el-icon class="el-input__icon"><Calendar /></el-icon>
|
</template>
|
</el-input>
|
</template>
|
<template #default>
|
<div class="box-card">
|
<div class="yearBox">
|
<el-button type="info" icon="DArrowLeft" @click="prev" link></el-button>
|
<span role="button" class="el-date-picker__header-label">{{ year }}年</span>
|
<el-button type="info" @click="next" :class="{ notallow: year === props.limitTime }"
|
icon="DArrowRight" link></el-button>
|
</div>
|
<div class="text">
|
<div @click="selectSeason(0)" class="item">第一季度</div>
|
<div @click="selectSeason(1)" class="item">第二季度</div>
|
</div>
|
<div class="text">
|
<div @click="selectSeason(2)" class="item">第三季度</div>
|
<div @click="selectSeason(3)" class="item">第四季度</div>
|
</div>
|
</div>
|
</template>
|
</el-popover>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.quarter{
|
width: 100%;
|
.elWidth{
|
width: 100%;
|
}
|
}
|
:deep(.el-popover .el-popper){
|
width: 300px !important;
|
}
|
.notallow {
|
cursor: not-allowed;
|
}
|
.box-card {
|
width: 100%;
|
.yearBox{
|
text-align:center;
|
padding:0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.text{
|
margin-top: 1rem;
|
display: flex;
|
.item{
|
width: 50%;
|
text-align: center;
|
&:hover{
|
color: #409eff !important;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
