浏览代码

季度选择

lilei 11 月之前
父节点
当前提交
1e19bff78e
共有 2 个文件被更改,包括 106 次插入0 次删除
  1. 9 0
      src/libs/getDate.js
  2. 97 0
      src/views/common/quarterDate.vue

+ 9 - 0
src/libs/getDate.js

@@ -142,5 +142,14 @@ export default {
       	beginDate: moment(year.toString()).startOf('year').format('YYYY-MM-DD 00:00:00'),
       	beginDate: moment(year.toString()).startOf('year').format('YYYY-MM-DD 00:00:00'),
       	endDate: moment(year.toString()).endOf('year').format('YYYY-MM-DD 23:59:59')
       	endDate: moment(year.toString()).endOf('year').format('YYYY-MM-DD 23:59:59')
     }
     }
+  },
+  // 获取某年某季度的开始和结束时间
+  getQuarterByYear (year, quarter) {
+     const start = moment([year]).quarter(quarter).startOf('quarter');
+       const end = moment([year]).quarter(quarter).endOf('quarter');
+       return {
+         start: start.format('YYYY-MM-DD 00:00:00'),
+         end: end.format('YYYY-MM-DD 23:59:59')
+       };
   }
   }
 }
 }

+ 97 - 0
src/views/common/quarterDate.vue

@@ -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>