博客

在查询数据时，有这样的情况，既可以查询当年的所有月份，又可以查询以年为单位的数据，例如这样：

切换后：

直接上菜！初始值可以为空，根据业务情况你们可以给开始时间、结束时间设定默认值！

<template>
  <div class="chart-box">
    <div v-if="!hiddenSearch"
         class="chart-box-search">
      <div class="month-select">
        <el-select v-model="monthValue"
                   style="width: 80px;">
          <el-option v-for="item in monthList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </div>
      <div class="date-picker">
        <el-date-picker v-model="dateValue1"
                        :type="datePicker.type"
                        :placeholder="datePicker.placeholder"
                        :picker-options="{
            disabledDate: handleDisabledDate({ max: dateValue2})
          }">
        </el-date-picker>
        <span class="separator">至</span>
        <el-date-picker v-model="dateValue2"
                        :type="datePicker.type"
                        :placeholder="datePicker.placeholder"
                        :picker-options="{
            disabledDate: handleDisabledDate({ min: dateValue1})
          }">
        </el-date-picker>
      </div>
      <el-button type="primary"
                 @click="handleSearch">
        查询
      </el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from 'element-ui/src/utils/date-util'
import { Message } from 'element-ui'

export default {
  name: 'chartBox',
  components: {
    BlueTable,
    ChartAbstract
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      validator (val) {
        return ['chart', 'table'].includes(val)
      },
      default: 'chart'
    },
    chartType: {
      type: String,
      validator (val) {
        return ['bar', 'line'].includes(val)
      },
      default: 'bar'
    },
    chartSource: {
      type: [Object, Array],
      default: () => ({})
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableSource: {
      type: Array,
      default: () => []
    },
    hiddenSearch: Boolean
  },
  data () {
    return {
      monthList: [
        { label: '按年', value: 'Y' },
        { label: '按月', value: 'M' }
      ],
      monthValue: 'M',
      dateValue1: ''
      dateValue2: '',
      options: {}
    }
  },
  computed: {
    ...mapState(['scale']),
    datePicker () {
      return {
        Y: {
          type: 'year',
          placeholder: '选择年',
          format: 'yyyy'
        },
        M: {
          type: 'month',
          placeholder: '选择月',
          format: 'yyyy-MM'
        }
      }[this.monthValue]
    }
  },
  watch: {
    monthValue () {
      this.dateValue1 = ''
      this.dateValue2 = ''
    }
  },
  created () {
  },
  methods: {
    handleSearch () {
      if (!this.dateValue1) {
        Message.error('请选择开始时间！')
        return
      } else if (!this.dateValue2) {
        Message.error('请选择结束时间！')
        return
      }

      const { format } = this.datePicker
// 因为这是子组件，需要将date发送到父组件
      this.$emit('on-search', {
        dateType: this.monthValue,
        startDate: formatDate(this.dateValue1, format),
        endDate: formatDate(this.dateValue2, format)
      })
    },
// 判断结束时间不能小于开始时间
    handleDisabledDate (conf) {
      const { min, max } = conf
      return (date) => {
        if (min && date < min) return true
        else if (max && max < date) return true
        else return false
      }
    },
  }
}
</script>

<style lang="less" scoped>
.chart-box {
  min-height: 400px;
  padding: 20px;
  border: 1px solid #e8ecef;
  box-shadow: 0 0 15px 0 rgba(231, 236, 239, 0.1);
  position: relative;

.chart-view {
  height: 265px;
}

.date-picker {
  .el-date-editor {
    width: 200px;
  }

  .separator {
    margin: 10px;
    color: #8c8c8c;
    font-size: 14px;
    line-height: 40px;
  }
}
</style>