4dkk_mp/src/views/statistics/components/condition.vue

<template>
  <div class="condition">
    <div class="selct" style="display: inline-block" v-if="!typeShow">
      <!-- <span style="margin-right:15px"></span> -->
      <Select
        v-model:value="type"
        style="width: 100px; margin-right: 30px"
        placeholder="请选择类型"
        :options="typeOptions"
        @change="handleType"
      ></Select>
    </div>

    <div class="selct" style="display: inline-block; margin-right: 15px">
      <RangePicker v-model:value="selectTime" @calendarChange="calendarPriceRangeChange" valueFormat="YYYY-MM-DD" :disabled-date="disabledDate" format="YYYY-MM-DD" @change="handleTime"/>
    </div>

    <div class="selct" style="display: inline-block">
      <!-- <span style="margin-right:15px">颗粒度</span> -->
      <Select
        v-model:value="value"
        style="width: 100px; margin-right: 30px"
        placeholder="请选择颗粒度"
        :options="options"
        @change="handleData"
      ></Select>
    </div>
    <a-button type="primary" @click="but">导出</a-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, Ref, defineEmits } from 'vue';
const emit = defineEmits(["alertSome"])
import { Select, DatePicker } from 'ant-design-vue';
const { RangePicker } = DatePicker;
// import type { dataItemType } from './props';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
const props = defineProps({
  loading: Boolean,
  typeShow: Boolean,
  type: String,
  timeType: String,
  name:Object,
});

type RangeValue = [Dayjs, Dayjs];
const picker = ref('date');
const type = ref(props.timeType ||'0');
const value = ref(props.type ||'0');
const selectPriceDate = ref(dayjs().subtract(6,'month').format('YYYY-MM-DD'))
const selectTime = ref<RangeValue>([dayjs().subtract(6,'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]);
const options = ref<SelectProps['options']>([
  {
    value: '0',
    label: '日',
  },
  {
    value: '1',
    label: '周',
  },
  {
    value: '2',
    label: '月',
  },
]);
const disabledDate = (current: Dayjs) => {
    if(selectPriceDate.value){
        return current >dayjs(selectPriceDate.value).add(2,'year')  || current < dayjs(selectPriceDate.value).subtract(2,'year')
    }else{
        return false
    }
};
const typeOptions = ref<SelectProps['options']>([
  {
    value: '0',
    label: props.name && props.name[0] || '新增',
  },
  {
    value: '1',
    label: props.name && props.name[1] || '累计',
  },
]);
function calendarPriceRangeChange(date){
  selectPriceDate.value = date[0]
}
function handleData(val) {
  console.log('handleData',val)
  value.value = val
  output()
}
function handleType(val) {
  type.value = val
  output()
}

function handleTime(val) {
  console.log('selectTime',val)
  selectTime.value = val
  output()
}
function but(){
  if(!props.typeShow){
    emit('expor',type)
  }else{
    emit('expor')
  }
}
function output(){
  let data = {
    startTime:selectTime.value[0],
    endTime:selectTime.value[1],
    dataType:value.value,
    type:type.value,
  }
  emit('change',data)
}
</script>