|
@@ -0,0 +1,97 @@
|
|
|
|
+<template>
|
|
|
|
+ <!-- 季度选择器 -->
|
|
|
|
+ <div class="quarter-date-box">
|
|
|
|
+ <div class="quarter-date-year">
|
|
|
|
+ <a-select style="width: 100%" :size="size" :value="currYear" @change="changeYear">
|
|
|
|
+ <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" :value="currJd" @change="changeJd">
|
|
|
|
+ <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(), // 今年
|
|
|
|
+ quarter: [{ id: 1, val: '一季度' }, { id: 2, val: '二季度' }, { id: 3, val: '三季度' }, { id: 4, val: '四季度' }], // 季度
|
|
|
|
+ currYear: this.toYears,
|
|
|
|
+ currJd: undefined
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ years () {
|
|
|
|
+ const years = []
|
|
|
|
+ const lens = (this.toYears - 2024) + 1
|
|
|
|
+ for (let i = 0; i < lens; i++) {
|
|
|
|
+ years.push(this.toYears - i)
|
|
|
|
+ }
|
|
|
|
+ return years
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+ .quarter-date-jd{
|
|
|
|
+ flex:1;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|