新增新版本。静安区特供版

riku

2024-08-23 1788c96aea9247cc36ef8b82734997f1a6a92fb4

 src/components/search/OptionTime.vue

@@ -1,35 +1,77 @@
<template>
  <el-form-item label="时间">
  <el-form-item label="时间" prop="timeArray">
    <el-date-picker
      v-model="date"
      @change="handleChange"
      :model-value="modelValue"
      @update:model-value="handleChange"
      :type="type"
      start-placeholder="选择开始时间"
      end-placeholder="选择结束时间"
      size="small"
      class="w-150"
      :disabled-date="diableData"
    />
  </el-form-item>
</template>

<script>
import moment from 'moment';
import { ElMessage } from 'element-plus';

export default {
  props: {
    modelValue: Array,
    // 日期值
    modelValue: {
      type: Array
    },
    // 控件类型
    type: {
      type: String,
      default: 'datetimerange'
    }
    },
    // 允许开始时间
    startDate: Date,
    // 允许结束时间
    endDate: Date
  },
  emits: ['update:modelValue'],
  data() {
    return {
      date: this.modelValue
    };
    return {};
  },
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
      // 时间不能超过设定的开始结束时间
      let outRange = false;
      if (this.startDate) {
        outRange =
          outRange ||
          moment(value[0]).isBefore(this.startDate) ||
          moment(value[1]).isBefore(this.startDate);
      }
      if (this.endDate) {
        outRange =
          outRange ||
          moment(value[0]).isAfter(this.endDate) ||
          moment(value[1]).isAfter(this.endDate);
      }
      if (outRange) {
        ElMessage({
          message: '所选时间不能超过走航任务时间范围',
          type: 'warning'
        });
      } else {
        this.$emit('update:modelValue', value);
      }
    },
    diableData(date) {
      const time = moment(date);
      let result1 = false;
      let result2 = false;
      if (this.startDate) {
        result1 = time.isBefore(this.startDate);
      }
      if (this.endDate) {
        result2 = time.isAfter(this.endDate);
      }
      return result1 || result2;
    }
  },
  mounted() {