<template>
<!-- 季度选择时间控件 -->
<div class="jidudatepicker">
<span>
<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-input
placeholder="选择季度"
v-model="showValue"
@focus="showSeason=true"
>
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-card
class="box-card"
style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
v-show="showSeason"
>
<div slot="header" class="firstBtn">
<button
type="button"
aria-label="前一年"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
@click="prev"
></button>
<span role="button" class="el-date-picker__header-label">{{year}}年</span>
<button
type="button"
aria-label="后一年"
@click="next"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
></button>
</div>
<div class="text">
<!-- 如下,绑定class,disabled为禁止选择的时间的设置 -->
<el-button
type="text"
size="medium"
:class="{'colorDis': (this.seasonMonth < 1 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
:disabled="(this.seasonMonth < 1 && this.year >= this.defaultyear) || this.year > this.defaultyear"
style="width:47%;color: #606266;float:left;"
@click="selectSeason(1)"
>第一季度</el-button>
<el-button
type="text"
size="medium"
:class="{'colorDis': (this.seasonMonth < 2 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
:disabled="(this.seasonMonth < 2 && this.year >= this.defaultyear) || this.year > this.defaultyear"
style="float:right;width:47%;color: #606266;"
@click="selectSeason(2)"
>第二季度</el-button>
</div>
<div class="item" style="text-align:center;">
<el-button
type="text"
size="medium"
:class="{'colorDis': (this.seasonMonth < 3 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
:disabled="(this.seasonMonth < 3 && this.year >= this.defaultyear) || this.year > this.defaultyear"
style="width:47%;color: #606266;float:left;"
@click="selectSeason(3)"
>第三季度</el-button>
<el-button
type="text"
size="medium"
:class="{'colorDis': (this.seasonMonth < 4 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
:disabled="(this.seasonMonth < 4 && this.year >= this.defaultyear) || this.year > this.defaultyear"
style="float:right;width:47%;color: #606266;"
@click="selectSeason(4)"
>第四季度</el-button>
</div>
</el-card>
</span>
</div>
</template>
<script>
export default {
name: 'jududatepicker',
props: {
valueArr: {
default: () => {
return ['01-03', '04-06', '07-09', '10-12']
},
type: Array
},
getValue: {
default: val => {
return val
},
type: Function
}
// defaultValue: {
// // 默认值 201904-201906
// default: '',
// type: String
// }
},
data() {
return {
showSeason: false,
season: '',
year: new Date().getFullYear(), // input显示时间,会随着用户操作改变
defaultyear: new Date().getFullYear(), // 当前年份,不变
month: new Date().getMonth() + 1, // 当前月份,不变
showValue: '',
seasonMonth: '',
beforeyear: null // 默认显示上一季度所用时间,可能是去年
}
},
created() {
// if (this.defaultValue) {
// let value = this.defaultValue
// let arr = value.split('-')
// this.year = arr[0].slice(0, 4)
// let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
// let arrAll = this.valueArr
// // valueArr ['01-03', '04-06', '07-09', '10-12']
// this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`
// }
},
mounted() {
// 每次挂在时都对组件进行重置,那么就不需要在上级组件中进行重置
this.getDefaultTime()
},
watch: {
// defaultValue: function(value, oldValue) {
// let arr = value.split('-')
// this.year = arr[0].slice(0, 4)
// let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
// let arrAll = this.valueArr
// // valueArr ['01-03', '04-06', '07-09', '10-12']
// this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`
// }
},
methods: {
one() {
this.showSeason = false
},
prev() {
this.year = this.year * 1 - 1
},
next() {
this.year = this.year * 1 + 1
},
selectSeason(i) {
let that = this
that.season = i
// 为区别月份对待,这里返回:yyyy-Q e: 2020-1
let seasonValue = that.getValue(that.year + '-' + that.season)
that.showSeason = false
this.showValue = `${this.year} 年 ${this.season} 季度`
// 每次选择时间都将当前选择时间发送到父组件
that.$emit('chooseSeason', seasonValue)
},
reset() {
// 季度重置 当前季度
this.getDefaultTime()
},
getDefaultTime() {
// 获取默认的上一个季度
var year = this.defaultyear
var month = this.month
var season = null
if (month <= 3) {
this.season = 1
season = 1
this.beforeyear = year
this.seasonMonth = 1
} else if (month > 3 && month <= 6) {
this.season = 2
season = 2
this.beforeyear = year
this.seasonMonth = 2
} else if (month > 6 && month <= 9) {
this.season = 3
season = 3
this.beforeyear = year
this.seasonMonth = 3
} else if (month > 9 && month <= 12) {
this.season = 4
season = 4
this.beforeyear = year
this.seasonMonth = 4
}
this.showValue = `${year} 年 ${season} 季度`
}
}
}
</script>
<style lang="scss" scoped>
.jidudatepicker {
display: inline;
.firstBtn {
height: 30px;
line-height: 34px;
width: 100%;
text-align: center;
}
.text {
text-align: center;
margin: 15px 0 10px;
}
.item {
text-align: center;
}
}
.colorDis {
color: #999 !important;
}
</style>
<style lang="scss">
.jidudatepicker {
.el-card__header {
padding: 12px;
}
}
</style>
element-ui 季度时间选择器组件
最新推荐文章于 2024-07-31 10:30:29 发布