diantou/src_product/iam/kpi/components/kpi-datadate-component.vue

<template>
  <a-form-item label="数据时期">
    <!-- 年 -->
    <a-date-picker
      v-if="dateType === 'year'"
      format="YYYY"
      mode="year"
      :value="value"
      :open="open"
      @openChange="openChange"
      @panelChange="panelChange"
    />
    <!-- 半年 -->
    <KpiHalfyearPicker v-if="dateType === 'halfyear'" @setvalue="setValue"></KpiHalfyearPicker>
    <!-- 季度 -->
    <KpiQuarterPicker v-if="dateType === 'quarter'" @setvalue="setValue"></KpiQuarterPicker>
    <!-- 月 -->
    <a-month-picker v-if="dateType === 'month'" v-model="value" placeholder="请选择月份" />
    <!-- 周 -->
    <a-week-picker v-if="dateType === 'week'" v-model="value" placeholder="请选择周" />
    <!-- 日 -->
    <a-date-picker v-if="dateType === 'day'" v-model="value" placeholder="请选择日期" />
  </a-form-item>
</template>

<script>
import moment from 'moment'
import KpiQuarterPicker from './kpi-quarter-picker.vue'
import KpiHalfyearPicker from './kpi-halfyear-picker.vue'
import components from './_import-components/kpi-datadate-component-import'

export default {
  name: 'KpiDatadateComponent',
  components: {
    ...components,
    KpiQuarterPicker,
    KpiHalfyearPicker,
  },
  props: {
    // 时间时期类型
    dateType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      value: '',
      open: false,
    }
  },
  methods: {
    setValue(val) {
      this.value = val
    },
    // Ant Design封装年份选择组件
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    panelChange(value) {
      this.value = value
      this.open = false
    },
    getFormatDate() {
      // 格式化返回的日期数据
      let strYear = '' // 年份
      let strDate = '' // 日期
      switch (this.dateType) {
        case 'year':
          // 年
          strYear = new Date(this.value).getFullYear()
          strDate = moment(this.value).format('YYYY年')
          break
        case 'halfyear':
          // 半年
          strYear = JSON.parse(this.value).year
          strDate = JSON.parse(this.value).quarter
          break
        case 'quarter':
          // 季度
          strYear = JSON.parse(this.value).year
          strDate = JSON.parse(this.value).quarter
          break
        case 'month':
          // 月
          strYear = new Date(this.value).getFullYear()
          strDate = moment(this.value).format('MM月')
          break
        case 'week':
          // 周
          strYear = new Date(this.value).getFullYear()
          strDate = moment(this.value).format('第w周')
          break
        case 'day':
          // 日
          strYear = new Date(this.value).getFullYear()
          strDate = moment(this.value).format('MM月DD日')
          break
        default:
          break
      }
      return {
        year: strYear,
        date: strDate,
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>