other / mew-iview

Commit 3747aecd53aa04fbe8f8eb30e6c5e9630164380a

Authored by Sergio Crisostomo
1 parent 8a4f9d5a

Refactor date-picker cell click 

Added `cell.date` so we don’t need `. getDateOfCell()` anymore
Passed `cell` directly in `@click="handleClick(cell)”` so we don’t need
`const cell =
this.cells[parseInt(event.target.getAttribute('index’))];` anymore
Showing 1 changed file with 38 additions and 81 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @3747aec
1 1 <template>
2 2 <div
3 3 :class="classes"
4   - @click="handleClick"
5 4 @mousemove="handleMouseMove">
6 5 <div :class="[prefixCls + '-header']">
7 6 <span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
8 7 </div>
9   - <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span>
  8 + <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span>
10 9 </div>
11 10 </template>
12 11 <script>
... ... @@ -106,6 +105,7 @@
106 105 const cell_tmpl = {
107 106 text: '',
108 107 type: '',
  108 + date: null,
109 109 selected: false,
110 110 disabled: false,
111 111 range: false,
... ... @@ -117,14 +117,8 @@
117 117 const cell = deepCopy(cell_tmpl);
118 118 cell.type = 'prev-month';
119 119 cell.text = dateCountOfLastMonth - (day - 1) + i;
120   -
121   - let prevMonth = this.month - 1;
122   - let prevYear = this.year;
123   - if (this.month === 0) {
124   - prevMonth = 11;
125   - prevYear -= 1;
126   - }
127   - const time = clearHours(new Date(prevYear, prevMonth, cell.text));
  120 + cell.date = new Date(this.year, this.month - 1, cell.text);
  121 + const time = clearHours(cell.date);
128 122 cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
129 123 cells.push(cell);
130 124 }
... ... @@ -132,9 +126,10 @@
132 126  
133 127 for (let i = 1; i <= dateCountOfMonth; i++) {
134 128 const cell = deepCopy(cell_tmpl);
135   - const time = clearHours(new Date(this.year, this.month, i));
136   - cell.type = time === today ? 'today' : 'normal';
137 129 cell.text = i;
  130 + cell.date = new Date(this.year, this.month, cell.text);
  131 + const time = clearHours(cell.date);
  132 + cell.type = time === today ? 'today' : 'normal';
138 133 cell.selected = time === selectDay;
139 134 cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
140 135 cell.range = time >= minDay && time <= maxDay;
... ... @@ -149,14 +144,8 @@
149 144 const cell = deepCopy(cell_tmpl);
150 145 cell.type = 'next-month';
151 146 cell.text = i;
152   -
153   - let nextMonth = this.month + 1;
154   - let nextYear = this.year;
155   - if (this.month === 11) {
156   - nextMonth = 0;
157   - nextYear += 1;
158   - }
159   - const time = clearHours(new Date(nextYear, nextMonth, cell.text));
  147 + cell.date = new Date(this.year, this.month + 1, cell.text);
  148 + const time = clearHours(cell.date);
160 149 cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
161 150 cells.push(cell);
162 151 }
... ... @@ -165,71 +154,39 @@
165 154 }
166 155 },
167 156 methods: {
168   - getDateOfCell (cell) {
169   - let year = this.year;
170   - let month = this.month;
171   - let day = cell.text;
172   -
173   - const date = this.date;
174   - const hours = date.getHours();
175   - const minutes = date.getMinutes();
176   - const seconds = date.getSeconds();
177   -
178   - if (cell.type === 'prev-month') {
179   - if (month === 0) {
180   - month = 11;
181   - year--;
182   - } else {
183   - month--;
184   - }
185   - } else if (cell.type === 'next-month') {
186   - if (month === 11) {
187   - month = 0;
188   - year++;
189   - } else {
190   - month++;
191   - }
192   - }
193   -
194   - return new Date(year, month, day, hours, minutes, seconds);
195   - },
196   - handleClick (event) {
197   - const target = event.target;
198   - if (target.tagName === 'EM') {
199   - const cell = this.cells[parseInt(event.target.getAttribute('index'))];
200   - if (cell.disabled) return;
201   -
202   - const newDate = this.getDateOfCell(cell);
203   -
204   - if (this.selectionMode === 'range') {
205   - if (this.minDate && this.maxDate) {
  157 + handleClick (cell) {
  158 +
  159 + if (cell.disabled) return;
  160 + const newDate = cell.date;
  161 +
  162 + if (this.selectionMode === 'range') {
  163 + if (this.minDate && this.maxDate) {
  164 + const minDate = new Date(newDate.getTime());
  165 + const maxDate = null;
  166 + this.rangeState.selecting = true;
  167 + this.markRange(this.minDate);
  168 +
  169 + this.$emit('on-pick', {minDate, maxDate}, false);
  170 + } else if (this.minDate && !this.maxDate) {
  171 + if (newDate >= this.minDate) {
  172 + const maxDate = new Date(newDate.getTime());
  173 + this.rangeState.selecting = false;
  174 +
  175 + this.$emit('on-pick', {minDate: this.minDate, maxDate});
  176 + } else {
206 177 const minDate = new Date(newDate.getTime());
207   - const maxDate = null;
208   - this.rangeState.selecting = true;
209   - this.markRange(this.minDate);
210   -
211   - this.$emit('on-pick', {minDate, maxDate}, false);
212   - } else if (this.minDate && !this.maxDate) {
213   - if (newDate >= this.minDate) {
214   - const maxDate = new Date(newDate.getTime());
215   - this.rangeState.selecting = false;
216   -
217   - this.$emit('on-pick', {minDate: this.minDate, maxDate});
218   - } else {
219   - const minDate = new Date(newDate.getTime());
220   -
221   - this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
222   - }
223   - } else if (!this.minDate) {
224   - const minDate = new Date(newDate.getTime());
225   - this.rangeState.selecting = true;
226   - this.markRange(this.minDate);
227 178  
228 179 this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
229 180 }
230   - } else {
231   - this.$emit('on-pick', newDate);
  181 + } else if (!this.minDate) {
  182 + const minDate = new Date(newDate.getTime());
  183 + this.rangeState.selecting = true;
  184 + this.markRange(this.minDate);
  185 +
  186 + this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
232 187 }
  188 + } else {
  189 + this.$emit('on-pick', newDate);
233 190 }
234 191 this.$emit('on-pick-click');
235 192 },
... ... @@ -246,7 +203,7 @@
246 203 if (target.tagName === 'EM') {
247 204 const cell = this.cells[parseInt(event.target.getAttribute('index'))];
248 205 // if (cell.disabled) return; // todo 待确定
249   - this.rangeState.endDate = this.getDateOfCell(cell);
  206 + this.rangeState.endDate = cell.date;
250 207 }
251 208 },
252 209 markRange (maxDate) {
... ...