UA 不良品页面提交

he wei

2024-07-25 66b41779cf4090ed86509d9ed4b3522ded8e9049

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <div>
    <a-date-picker :getCalendarContainer="getCalendarContainer" v-model="startValue" :disabled-date="disabledStartDate"
      :disabled-time="disabledStartTime" :show-time="showTime" :format="formatStr" placeholder="Start" :open="startOpen"
      size="small" @openChange="handleStartOpenChange" @change="change(0)" />
    -
    <a-date-picker :getCalendarContainer="getCalendarContainer" v-model="endValue" :disabled-date="disabledEndDate"
      :disabled-time="disabledEndTime" :show-time="showTime" :format="formatStr" placeholder="End" :open="endOpen"
      size="small" @change="change(1)" @openChange="handleEndOpenChange" />
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      startOpen: false,
      endOpen: false,
    };
  },
  props: {
    value: {
      required: true,
    },
    getCalendarContainer: {
      required: true
    },
    showTime: {
      type: Boolean,
      default: true
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  watch: {
    value(newV) {
      this.resultData = newV;
    },
  },
  computed: {
    resultData: {
      get() {
        return [this.startValue, this.endValue];
      },
      set(value) {
        this.startValue = value[0];
        this.endValue = value[1];
      },
    },
    formatStr() {
      return this.showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"
    },
  },
  methods: {
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      // console.log(startValue.valueOf(), endValue.valueOf(), 'start, end');
      return startValue.valueOf() >= endValue.valueOf();
    },
    disabledStartTime(startValue) {
      let endValue = this.endValue;
      if (!endValue || !startValue) {
        return {
          disabledHours: () => [],
          disabledMinutes: () => [],
          disabledSeconds: () => []
        }
      }
      let startDate = startValue.format('YYYY-MM-DD');
      let startH = startValue.hour(),
        startM = startValue.minute(),
        startS = startValue.second();
      return {
        disabledHours: () => this.range(0, 24).filter(v => moment(`${startDate} ${v}:${startM}:${startS}`).valueOf() > endValue.valueOf()),
        disabledMinutes: () => this.range(0, 60).filter(v => moment(`${startDate} ${startH}:${v}:${startS}`).valueOf() > endValue.valueOf()),
        disabledSeconds: () => this.range(0, 60).filter(v => moment(`${startDate} ${startH}:${startM}:${v}`).valueOf() > endValue.valueOf()),
      };
    },
    disabledEndTime(endValue) {
      let startValue = this.startValue;
      if (!endValue || !startValue) {
        return {
          disabledHours: () => [],
          disabledMinutes: () => [],
          disabledSeconds: () => []
        }
      }
      let endDate = endValue.format('YYYY-MM-DD');
      let endH = endValue.hour(),
        endM = endValue.minute(),
        endS = endValue.second();
      return {
        disabledHours: () => this.range(0, 24).filter(v => moment(`${endDate} ${v}:${endM}:${endS}`).valueOf() < startValue.valueOf()),
        disabledMinutes: () => this.range(0, 60).filter(v => moment(`${endDate} ${endH}:${v}:${endS}`).valueOf() < startValue.valueOf()),
        disabledSeconds: () => this.range(0, 60).filter(v => moment(`${endDate} ${endH}:${endM}:${v}`).valueOf() < startValue.valueOf()),
      };
    },
    handleStartOpenChange(open) {
      this.startOpen = open;
      if (!open && !this.endValue) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
      // if (!open && !this.startValue) {
      //   this.startOpen = true;
      // }
    },
    change(isEnd) {
      // if (!this.startValue || !this.endValue) {
      //   return false;
      // }
      if (isEnd) {
        // 如果结束时间比开始时间小
        if (this.startValue && this.endValue.valueOf() < this.startValue.valueOf()) {
          this.endValue = this.startValue;
        }
      } else {
        if (this.endValue && this.startValue.valueOf() > this.endValue.valueOf()) {
          this.startValue = this.endValue;
        }
      }
      this.$emit("change", this.resultData);
    },
  },
};
</script>