order-ui-pc/src/views/reportQuery/stockReport/components/PeriodDatePicker.vue

<template>
  <div class="fl time">
    <el-date-picker
      v-model="startTime"
      style="margin: 0"
      class="date-picker"
      :type="timeType || 'date'"
      :size="size"
      :style="{ width: width }"
      placeholder="开始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions1"
      :editable="false"
      :clearable="true"
      :disabled="isEdit"
      @change="timeChange"
    />
    <samp style="padding: 0 3px; margin: 0">至</samp>
    <el-date-picker
      style="margin: 0"
      :size="size"
      v-model="endTime"
      class="date-picker"
      :style="{ width: width }"
      :type="timeType || 'date'"
      placeholder="结束日期"
      :disabled="isEdit"
      :picker-options="pickerOptions2"
      :editable="false"
      value-format="yyyy-MM-dd"
      :clearable="true"
      @change="timeChange"
    />
  </div>
</template>

<script>
// 选择时间段(只有日期)组件
// timeReturned 返回值{startTime: Number,endTime: Number}
export default {
  name: "PeriodDatePicker",
  props: ["start", "end", "disabled", "size", "width", "type", "timeType"],
  data() {
    return {
      startTime: this.start,
      endTime: this.end,
      isEdit: this.disabled,
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.endTime != null && this.endTime != "" && time) {
            return time.getTime() > new Date(this.endTime).valueOf();
          }
        
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.startTime != null && this.startTime != "" && time) {
            return time.getTime() < new Date(this.startTime).valueOf();
          }
          
        },
      },
    };
  },
  watch: {
    disabled: function (val) {
      this.isEdit = val;
    },
    start(val) {
      this.startTime = val;
    },
    end(val) {
      this.endTime = val;
    },
  },
  mounted() {},
  methods: {
    timeChange() {
      if (
        this.startTime !== "" &&
        this.startTime !== null &&
        this.endTime !== "" &&
        this.endTime !== null
      ) {
        if (this.type + "" === "1" && !this.setType(365)) {
          this.showMessage("时间跨度不能超过一年！");
          return;
        } else if (this.type + "" === "2" && !this.setType(90)) {
          this.showMessage("时间跨度不能超过90天！");
          return;
        } else if (this.type + "" === "3" && !this.setType(30)) {
          this.showMessage("时间跨度不能超过30天！");
          return;
        }else if (
          new Date(this.endTime).valueOf() < new Date(this.startTime).valueOf()
        ) {
          this.showMessage("结束时间不大于开始时间！");
          return;
        } else {
          this.timeReturned();
        }
      } else {
        this.timeReturned();
      }
    },
    timeReturned() {
      let s = this.startTime == null ? "" : this.startTime;
      let e = this.endTime == null ? "" : this.endTime;
      let model = {
        startTime: s == "" ? "" : this.transformTime(s),
        endTime: e == "" ? "" : this.transformTime(e),
      };

      this.$emit("timeReturned", model);
    },

    transformTime(tTime) {
      let time = new Date(tTime);
      let y = time.getFullYear();
      let M = time.getMonth() + 1;
      let d = time.getDate();
      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
    },
    showMessage(message) {
      this.$message.error(message);
      this.startTime = "";
      this.endTime = "";
      this.timeReturned();
    },
    setType(days) {
      let step = 24 * 3600 * 1000;
      let sDay = new Date(this.startTime).valueOf();
      let eDay = new Date(this.endTime).valueOf();
      let isok = true;
      if (eDay - sDay > step * days) {
        isok = false;
      }

      return isok;
    },
  },
};
</script>
<style lang="scss">
.date-picker.el-input {
  // width: 150px !important;
}
</style>