123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- <template>
- <!-- 季度选择器 -->
- <div class="quarter-date-box">
- <div class="quarter-date-year">
- <a-select
- style="width: 100%"
- :size="size"
- placeholder="请选择年份"
- :value="currYear"
- @change="changeYear"
- allowClear>
- <a-select-option v-for="item in years" :value="item" :key="item">
- {{ item }}
- </a-select-option>
- </a-select>
- </div>
- <div class="quarter-date-jd">
- <a-select
- style="width: 100%"
- :size="size"
- placeholder="请选择季度"
- :value="currJd"
- @change="changeJd"
- allowClear>
- <a-select-option v-for="item in quarter" :value="item.id" :key="item.id">
- {{ item.val }}
- </a-select-option>
- </a-select>
- </div>
- </div>
- </template>
- <script>
- import getDate from '@/libs/getDate.js'
- export default {
- props: {
- value: {
- type: Array,
- default: () => {
- return []
- }
- },
- size: {
- type: String,
- default: 'default'
- }
- },
- data () {
- return {
- date: this.value,
- toYears: new Date().getFullYear(), // 今年
- currYear: this.toYears,
- currJd: undefined
- }
- },
- computed: {
- years () {
- const years = []
- const lens = (this.toYears - 2023) + 1
- for (let i = 0; i < lens; i++) {
- years.push(this.toYears - i)
- }
- return years
- },
- quarter () {
- const quarterData = [{ id: 1, val: '一季度' }, { id: 2, val: '二季度' }, { id: 3, val: '三季度' }, { id: 4, val: '四季度' }]
- const now = new Date()
- const month = now.getMonth()
- const numInfo = Math.floor(month / 3) + 1
- quarterData.map(item => {
- if (numInfo * 1 + 1 === item.id) {
- item.isToChoose = true
- } else {
- item.isToChoose = false
- }
- })
- return quarterData
- }
- },
- watch: {
- value (val) {
- this.date = val
- if (val.length > 0) {
- this.currYear = val[0]
- this.currJd = val[1]
- }
- }
- },
- methods: {
- changeYear (val) {
- this.currYear = val
- const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
- this.$emit('input', [this.currYear, this.currJd], valStr)
- this.$emit('change', [this.currYear, this.currJd], valStr)
- },
- changeJd (val) {
- this.currJd = val
- const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
- this.$emit('input', [this.currYear, this.currJd], valStr)
- this.$emit('change', [this.currYear, this.currJd], valStr)
- },
- resetDate () {
- this.currYear = this.toYears
- this.currJd = undefined
- this.$emit('input', [this.currYear, this.currJd], null)
- this.$emit('change', [this.currYear, this.currJd], null)
- }
- }
- }
- </script>
- <style lange="less">
- .quarter-date-box{
- display: flex;
- align-items: center;
- width:100%;
- .quarter-date-year{
- flex:1;
- width:49%;
- }
- .quarter-date-jd{
- flex:1;
- width:50%;
- }
- }
- </style>
|