aftermarket-mp/src/views/home/condition.vue

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

    <div class="selct" style="display: inline-block; margin-right: 15px; width: 220px">
      <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" v-if="!typeShow">
      <!-- <span style="margin-right:15px">颗粒度</span> -->
      <Select
        v-model:value="value"
        style="width: 100px; margin-right: 30px"
        placeholder="请选择颗粒度"
        :options="options"
        @change="handleData"
      />
    </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', 'change', 'expor']);
  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,
    selectTimeType: Number,
    cameraType: Boolean,
  });


  type RangeValue = [Dayjs, Dayjs];
  const picker = ref('date');
  const type = ref(props.timeType || '0');
  const value = ref(props.type || '2');
  const isUserDate = ref(false);
  const selectPriceDate = ref(dayjs().subtract(6, 'month').format('YYYY-MM-DD'));
  const selectTime = ref<RangeValue>([
    dayjs()
      .subtract(props.selectTimeType == 1 ? 1 : 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]) || '四维看见',
    },
    {
      value: '2',
      label: (props.name && props.name[2]) || '四维深时',
    },
    {
      value: '3',
      label: (props.name && props.name[3]) || '四维深光',
    },
  ]);
  function calendarPriceRangeChange(date) {
    selectPriceDate.value = date[0];
  }
  function handleData(val) {
    value.value = val;
    if (!isUserDate.value) {
      selectTime.value = [
        dayjs()
          .subtract(value.value == '0' ? 1 : 6, 'month')
          .format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD'),
      ];
    }
    output();
  }

  function handleType(val) {
    type.value = val;
    output();
  }

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