chenhaodong / mew-iview

Browse Code »

Commit e32b86e97f1239114d82ad37bdc2361895925426

Authored by Sergio Crisostomo 2018-01-16 22:22:49 +0100

1 parent 11867c87

move date.vue to subfolder

Showing 2 changed files with 162 additions and 261 deletions Show diff stats

Inline Side-by-side

src/components/date-picker/panel/Date/date.vue 0 → 100644

Show/Hide comments View file @e32b86e

		1	+<template>
		2	+ <div :class="classes" @mousedown.prevent>
		3	+ <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
		4	+ <div
		5	+ :class="[prefixCls + '-shortcut']"
		6	+ v-for="shortcut in shortcuts"
		7	+ @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
		8	+ </div>
		9	+ <div :class="[prefixCls + '-body']">
		10	+ <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
		11	+ <span
		12	+ :class="iconBtnCls('prev', '-double')"
		13	+ @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
		14	+ <span
		15	+ :class="iconBtnCls('prev')"
		16	+ @click="changeMonth(-1)"
		17	+ v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
		18	+ <date-panel-label
		19	+ :date-panel-label="datePanelLabel"
		20	+ :current-view="currentView"
		21	+ :date-prefix-cls="datePrefixCls"></date-panel-label>
		22	+ <span
		23	+ :class="iconBtnCls('next', '-double')"
		24	+ @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
		25	+ <span
		26	+ :class="iconBtnCls('next')"
		27	+ @click="changeMonth(+1)"
		28	+ v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
		29	+ </div>
		30	+ <div :class="[prefixCls + '-content']">
		31	+ <component
		32	+ :is="pickerTable"
		33	+ ref="pickerTable"
		34	+ v-if="currentView !== 'time'"
		35	+ :table-date="panelDate"
		36	+ :value="dates"
		37	+ :selection-mode="selectionMode"
		38	+ :disabled-date="disabledDate"
		39	+ @on-pick="handlePick"
		40	+ @on-pick-click="handlePickClick"
		41	+ ></component>
		42	+ </div>
		43	+ <div :class="[prefixCls + '-content']" v-show="isTime">
		44	+ <time-picker
		45	+ ref="timePicker"
		46	+ v-if="currentView === 'time'"
		47	+ :value="dates"
		48	+ :format="format"
		49	+ :time-disabled="timeDisabled"
		50	+ @on-pick="handlePick"
		51	+ @on-pick-click="handlePickClick"
		52	+ @on-pick-clear="handlePickClear"
		53	+ @on-pick-success="handlePickSuccess"
		54	+ @on-pick-toggle-time="handleToggleTime"
		55	+ ></time-picker>
		56	+ </div>
		57	+ <Confirm
		58	+ v-if="confirm"
		59	+ :show-time="showTime"
		60	+ :is-time="isTime"
		61	+ @on-pick-toggle-time="handleToggleTime"
		62	+ @on-pick-clear="handlePickClear"
		63	+ @on-pick-success="handlePickSuccess"
		64	+ ></Confirm>
		65	+ </div>
		66	+ </div>
		67	+</template>
		68	+<script>
		69	+ import Icon from '../../../icon/icon.vue';
		70	+ import DateTable from '../../base/date-table.vue';
		71	+ import YearTable from '../../base/year-table.vue';
		72	+ import MonthTable from '../../base/month-table.vue';
		73	+ import TimePicker from '../Time/time.vue';
		74	+ import Confirm from '../../base/confirm.vue';
		75	+ import datePanelLabel from './date-panel-label.vue';
		76	+
		77	+ import Mixin from '../panel-mixin';
		78	+ import DateMixin from './date-panel-mixin';
		79	+ import Locale from '../../../../mixins/locale';
		80	+
		81	+ import { siblingMonth, formatDateLabels } from '../../util';
		82	+
		83	+ const prefixCls = 'ivu-picker-panel';
		84	+ const datePrefixCls = 'ivu-date-picker';
		85	+
		86	+ export default {
		87	+ name: 'DatePickerPanel',
		88	+ mixins: [ Mixin, Locale, DateMixin ],
		89	+ components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
		90	+ props: {
		91	+ // in the mixin
		92	+ },
		93	+ data () {
		94	+ const dates = this.value.slice().sort();
		95	+ return {
		96	+ prefixCls: prefixCls,
		97	+ datePrefixCls: datePrefixCls,
		98	+ currentView: this.selectionMode \|\| 'date',
		99	+ dates: dates,
		100	+ panelDate: dates[0] \|\| new Date()
		101	+ };
		102	+ },
		103	+ computed: {
		104	+ classes () {
		105	+ return [
		106	+ `${prefixCls}-body-wrapper`,
		107	+ {
		108	+ [`${prefixCls}-with-sidebar`]: this.shortcuts.length
		109	+ }
		110	+ ];
		111	+ },
		112	+ pickerTable(){
		113	+ return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
		114	+ },
		115	+ datePanelLabel () {
		116	+ const locale = this.t('i.locale');
		117	+ const datePanelLabel = this.t('i.datepicker.datePanelLabel');
		118	+ const date = this.panelDate;
		119	+ const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
		120	+
		121	+ const handler = type => {
		122	+ return () => (this.currentView = type);
		123	+ };
		124	+
		125	+ return {
		126	+ separator: separator,
		127	+ labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
		128	+ };
		129	+ },
		130	+ timeDisabled(){
		131	+ return !this.dates[0];
		132	+ }
		133	+ },
		134	+ watch: {
		135	+ value (newVal) {
		136	+ this.dates = newVal;
		137	+ },
		138	+ selectionMode(){
		139	+ this.currentView = this.selectionMode;
		140	+ },
		141	+ currentView (val) {
		142	+ this.$emit('on-selection-mode-change', val);
		143	+ }
		144	+ },
		145	+ methods: {
		146	+ changeYear(dir){
		147	+ this.panelDate = siblingMonth(this.panelDate, dir * 12);
		148	+ },
		149	+ changeMonth(dir){
		150	+ this.panelDate = siblingMonth(this.panelDate, dir);
		151	+ },
		152	+ handlePick (value) {
		153	+ const {selectionMode} = this;
		154	+ if (selectionMode === 'year') value = new Date(value, 0, 1);
		155	+ else if (selectionMode === 'month') value = new Date(this.panelDate.getFullYear(), value, 1);
		156	+ else value = new Date(value);
		157	+
		158	+ this.$emit('on-pick', value);
		159	+ },
		160	+ },
		161	+ };
		162	+</script>

src/components/date-picker/panel/date.vue deleted

View file @11867c8

1	-<template>
2	- <div :class="classes" @mousedown.prevent>
3	- <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
4	- <div
5	- :class="[prefixCls + '-shortcut']"
6	- v-for="shortcut in shortcuts"
7	- @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
8	- </div>
9	- <div :class="[prefixCls + '-body']">
10	- <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
11	- <span
12	- :class="iconBtnCls('prev', '-double')"
13	- @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
14	- <span
15	- :class="iconBtnCls('prev')"
16	- @click="changeMonth(-1)"
17	- v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
18	- <date-panel-label
19	- :date-panel-label="datePanelLabel"
20	- :current-view="currentView"
21	- :date-prefix-cls="datePrefixCls"/>
22	- <span
23	- :class="iconBtnCls('next', '-double')"
24	- @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
25	- <span
26	- :class="iconBtnCls('next')"
27	- @click="changeMonth(+1)"
28	- v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
29	- </div>
30	- <div :class="[prefixCls + '-content']">
31	- <date-table
32	- v-show="currentView === 'date'"
33	- :year="year"
34	- :month="month"
35	- :date="date"
36	- :value="value"
37	- :selection-mode="selectionMode"
38	- :disabled-date="disabledDate"
39	- @on-pick="handleDatePick"
40	- @on-pick-click="handlePickClick"></date-table>
41	- <year-table
42	- ref="yearTable"
43	- v-show="currentView === 'year'"
44	- :year="year"
45	- :date="date"
46	- :selection-mode="selectionMode"
47	- :disabled-date="disabledDate"
48	- @on-pick="handleYearPick"
49	- @on-pick-click="handlePickClick"></year-table>
50	- <month-table
51	- ref="monthTable"
52	- v-show="currentView === 'month'"
53	- :month="month"
54	- :date="date"
55	- :selection-mode="selectionMode"
56	- :disabled-date="disabledDate"
57	- @on-pick="handleMonthPick"
58	- @on-pick-click="handlePickClick"></month-table>
59	- <time-picker
60	- ref="timePicker"
61	- show-date
62	- v-show="currentView === 'time'"
63	- @on-pick="handleTimePick"
64	- @on-pick-click="handlePickClick"></time-picker>
65	- </div>
66	- <Confirm
67	- v-if="confirm"
68	- :show-time="showTime"
69	- :is-time="isTime"
70	- @on-pick-toggle-time="handleToggleTime"
71	- @on-pick-clear="handlePickClear"
72	- @on-pick-success="handlePickSuccess"></Confirm>
73	- </div>
74	- </div>
75	-</template>
76	-<script>
77	- import Icon from '../../icon/icon.vue';
78	- import DateTable from '../base/date-table.vue';
79	- import YearTable from '../base/year-table.vue';
80	- import MonthTable from '../base/month-table.vue';
81	- import TimePicker from './time.vue';
82	- import Confirm from '../base/confirm.vue';
83	- import datePanelLabel from './date-panel-label.vue';
84	-
85	- import Mixin from './mixin';
86	- import Locale from '../../../mixins/locale';
87	-
88	- import { initTimeDate, siblingMonth, formatDateLabels } from '../util';
89	-
90	- const prefixCls = 'ivu-picker-panel';
91	- const datePrefixCls = 'ivu-date-picker';
92	-
93	- export default {
94	- name: 'DatePicker',
95	- mixins: [ Mixin, Locale ],
96	- components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
97	- data () {
98	- return {
99	- prefixCls: prefixCls,
100	- datePrefixCls: datePrefixCls,
101	- shortcuts: [],
102	- currentView: 'date',
103	- date: initTimeDate(),
104	- value: '',
105	- showTime: false,
106	- selectionMode: 'day',
107	- disabledDate: '',
108	- year: null,
109	- month: null,
110	- confirm: false,
111	- isTime: false,
112	- format: 'yyyy-MM-dd'
113	- };
114	- },
115	- computed: {
116	- classes () {
117	- return [
118	- `${prefixCls}-body-wrapper`,
119	- {
120	- [`${prefixCls}-with-sidebar`]: this.shortcuts.length
121	- }
122	- ];
123	- },
124	- datePanelLabel () {
125	- if (!this.year) return null; // not ready yet
126	- const locale = this.t('i.locale');
127	- const datePanelLabel = this.t('i.datepicker.datePanelLabel');
128	- const date = new Date(this.year, this.month);
129	- const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
130	-
131	- const handler = type => {
132	- return () => (this.currentView = type);
133	- };
134	-
135	- return {
136	- separator: separator,
137	- labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
138	- };
139	- }
140	- },
141	- watch: {
142	- value (newVal) {
143	- if (!newVal) return;
144	- newVal = new Date(newVal);
145	- if (!isNaN(newVal)) {
146	- this.date = newVal;
147	- this.setMonthYear(newVal);
148	- }
149	- if (this.showTime) this.$refs.timePicker.value = newVal;
150	- },
151	- date (val) {
152	- if (this.showTime) this.$refs.timePicker.date = val;
153	- },
154	- format (val) {
155	- if (this.showTime) this.$refs.timePicker.format = val;
156	- },
157	- currentView (val) {
158	- if (val === 'time') this.$refs.timePicker.updateScroll();
159	- }
160	- },
161	- methods: {
162	- resetDate () {
163	- this.date = new Date(this.date);
164	- },
165	- setMonthYear(date){
166	- this.month = date.getMonth();
167	- this.year = date.getFullYear();
168	- },
169	- handleClear () {
170	- this.date = new Date();
171	- this.$emit('on-pick', '');
172	- if (this.showTime) this.$refs.timePicker.handleClear();
173	- },
174	- resetView (reset = false) {
175	- if (this.currentView !== 'time' \|\| reset) {
176	- if (this.selectionMode === 'month') {
177	- this.currentView = 'month';
178	- } else if (this.selectionMode === 'year') {
179	- this.currentView = 'year';
180	- } else {
181	- this.currentView = 'date';
182	- }
183	- }
184	- this.setMonthYear(this.date);
185	- if (reset) this.isTime = false;
186	- },
187	- changeYear(dir){
188	- if (this.currentView === 'year') {
189	- this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
190	- } else {
191	- this.year+= dir;
192	- this.date = siblingMonth(this.date, dir * 12);
193	- }
194	- },
195	- changeMonth(dir){
196	- this.date = siblingMonth(this.date, dir);
197	- this.setMonthYear(this.date);
198	- },
199	- handleToggleTime () {
200	- if (this.currentView === 'date') {
201	- this.currentView = 'time';
202	- this.isTime = true;
203	- } else if (this.currentView === 'time') {
204	- this.currentView = 'date';
205	- this.isTime = false;
206	- }
207	- },
208	- handleYearPick(year, close = true) {
209	- this.year = year;
210	- if (!close) return;
211	-
212	- this.date.setFullYear(year);
213	- if (this.selectionMode === 'year') {
214	- this.$emit('on-pick', new Date(year, 0, 1));
215	- } else {
216	- this.currentView = 'month';
217	- }
218	-
219	- this.resetDate();
220	- },
221	- handleMonthPick (month) {
222	- this.month = month;
223	- this.date.setMonth(month);
224	- if (this.selectionMode !== 'month') {
225	- this.currentView = 'date';
226	- this.resetDate();
227	- } else {
228	- this.year && this.date.setFullYear(this.year);
229	- this.resetDate();
230	- const value = new Date(this.date.getFullYear(), month, 1);
231	- this.$emit('on-pick', value);
232	- }
233	- },
234	- handleDatePick (value) {
235	- if (this.selectionMode === 'day') {
236	- this.$emit('on-pick', new Date(value.getTime()));
237	- this.date = new Date(value);
238	- }
239	- },
240	- handleTimePick (date) {
241	- this.handleDatePick(date);
242	- }
243	- },
244	- mounted () {
245	- if (this.selectionMode === 'month') {
246	- this.currentView = 'month';
247	- }
248	-
249	- if (this.date && !this.year) {
250	- this.setMonthYear(this.date);
251	- }
252	- if (this.showTime) {
253	- // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
254	- this.$refs.timePicker.date = this.date;
255	- this.$refs.timePicker.value = this.value;
256	- this.$refs.timePicker.format = this.format;
257	- this.$refs.timePicker.showDate = true;
258	- }
259	- }
260	- };
261	-</script>