quarterDate.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <!-- 季度选择器 -->
  3. <div class="quarter-date-box">
  4. <div class="quarter-date-year">
  5. <a-select
  6. style="width: 100%"
  7. :size="size"
  8. placeholder="请选择年份"
  9. :value="currYear"
  10. @change="changeYear"
  11. allowClear>
  12. <a-select-option v-for="item in years" :value="item" :key="item">
  13. {{ item }}
  14. </a-select-option>
  15. </a-select>
  16. </div>
  17. <div class="quarter-date-jd">
  18. <a-select
  19. style="width: 100%"
  20. :size="size"
  21. placeholder="请选择季度"
  22. :value="currJd"
  23. @change="changeJd"
  24. allowClear>
  25. <a-select-option v-for="item in quarter" :value="item.id" :key="item.id">
  26. {{ item.val }}
  27. </a-select-option>
  28. </a-select>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import getDate from '@/libs/getDate.js'
  34. export default {
  35. props: {
  36. value: {
  37. type: Array,
  38. default: () => {
  39. return []
  40. }
  41. },
  42. size: {
  43. type: String,
  44. default: 'default'
  45. }
  46. },
  47. data () {
  48. return {
  49. date: this.value,
  50. toYears: new Date().getFullYear(), // 今年
  51. currYear: this.toYears,
  52. currJd: undefined
  53. }
  54. },
  55. computed: {
  56. years () {
  57. const years = []
  58. const lens = (this.toYears - 2023) + 1
  59. for (let i = 0; i < lens; i++) {
  60. years.push(this.toYears - i)
  61. }
  62. return years
  63. },
  64. quarter () {
  65. const quarterData = [{ id: 1, val: '一季度' }, { id: 2, val: '二季度' }, { id: 3, val: '三季度' }, { id: 4, val: '四季度' }]
  66. const now = new Date()
  67. const month = now.getMonth()
  68. const numInfo = Math.floor(month / 3) + 1
  69. quarterData.map(item => {
  70. if (numInfo * 1 + 1 === item.id) {
  71. item.isToChoose = true
  72. } else {
  73. item.isToChoose = false
  74. }
  75. })
  76. return quarterData
  77. }
  78. },
  79. watch: {
  80. value (val) {
  81. this.date = val
  82. if (val.length > 0) {
  83. this.currYear = val[0]
  84. this.currJd = val[1]
  85. }
  86. }
  87. },
  88. methods: {
  89. changeYear (val) {
  90. this.currYear = val
  91. const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
  92. this.$emit('input', [this.currYear, this.currJd], valStr)
  93. this.$emit('change', [this.currYear, this.currJd], valStr)
  94. },
  95. changeJd (val) {
  96. this.currJd = val
  97. const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
  98. this.$emit('input', [this.currYear, this.currJd], valStr)
  99. this.$emit('change', [this.currYear, this.currJd], valStr)
  100. },
  101. resetDate () {
  102. this.currYear = this.toYears
  103. this.currJd = undefined
  104. this.$emit('input', [this.currYear, this.currJd], null)
  105. this.$emit('change', [this.currYear, this.currJd], null)
  106. }
  107. }
  108. }
  109. </script>
  110. <style lange="less">
  111. .quarter-date-box{
  112. display: flex;
  113. align-items: center;
  114. width:100%;
  115. .quarter-date-year{
  116. flex:1;
  117. width:49%;
  118. }
  119. .quarter-date-jd{
  120. flex:1;
  121. width:50%;
  122. }
  123. }
  124. </style>