Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
47928940 1 parent 294534f7

✨ feat(日期录入控件逻辑调整):

Inline Side-by-side
Showing 2 changed files with 133 additions and 120 deletions
1 -/*
2 - * @Date: 2022-09-19 16:54:23
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-19 16:54:59
5 - * @FilePath: /swx/src/components/time-picker-data/dateTimePicker.js
6 - * @Description: 文件描述
7 - */
8 var getDaysInOneMonth = function (year, month) { 1 var getDaysInOneMonth = function (year, month) {
9 let _month = parseInt(month, 10); 2 let _month = parseInt(month, 10);
10 let d = new Date(year, _month, 0); 3 let d = new Date(year, _month, 0);
11 return d.getDate(); 4 return d.getDate();
12 } 5 }
13 var dateDate = function (date) { 6 var dateDate = function (date) {
14 - let year = date.getFullYear(); 7 + let year = date && date.getFullYear();
15 - let month = date.getMonth() + 1; 8 + let month = date && date.getMonth() + 1;
16 - let day = date.getDate(); 9 + let day = date && date.getDate();
17 - let hours = date.getHours(); 10 + let hours = date && date.getHours();
18 - let minutes = date.getMinutes(); 11 + let minutes = date && date.getMinutes();
19 return { 12 return {
20 year, month, day, hours, minutes 13 year, month, day, hours, minutes
21 } 14 }
...@@ -23,24 +16,17 @@ var dateDate = function (date) { ...@@ -23,24 +16,17 @@ var dateDate = function (date) {
23 var dateTimePicker = function (startyear, endyear) { 16 var dateTimePicker = function (startyear, endyear) {
24 // 获取date time 年份，月份，天数，小时，分钟推后30分 17 // 获取date time 年份，月份，天数，小时，分钟推后30分
25 const years = []; 18 const years = [];
19 + const months = [];
20 + const hours = [];
21 + const minutes = [];
26 for (let i = startyear; i <= endyear; i++) { 22 for (let i = startyear; i <= endyear; i++) {
27 years.push({ 23 years.push({
28 name: i + '年', 24 name: i + '年',
29 id: i 25 id: i
30 }); 26 });
31 } 27 }
32 - return function (_year, _month, _day, _hour, _minute) {
33 - const months = [];
34 - const days = [];
35 - const hours = [];
36 - const minutes = [];
37 - _year = parseInt(_year);
38 - _month = parseInt(_month);
39 - _day = parseInt(_day);
40 - _hour = parseInt(_hour);
41 - _minute = parseInt(_minute);
42 //获取月份 28 //获取月份
43 - for (let i = _month; i <= 12; i++) { 29 + for (let i = 1; i <= 12; i++) {
44 if (i < 10) { 30 if (i < 10) {
45 i = "0" + i; 31 i = "0" + i;
46 } 32 }
...@@ -49,18 +35,8 @@ var dateTimePicker = function (startyear, endyear) { ...@@ -49,18 +35,8 @@ var dateTimePicker = function (startyear, endyear) {
49 id: i 35 id: i
50 }); 36 });
51 } 37 }
52 - //获取日期
53 - for (let i = _day; i <= getDaysInOneMonth(_year, _month); i++) {
54 - if (i < 10) {
55 - i = "0" + i;
56 - }
57 - days.push({
58 - name: i + '日',
59 - id: i
60 - });
61 - }
62 //获取小时 38 //获取小时
63 - for (let i = _hour; i < 24; i++) { 39 + for (let i = 0; i < 24; i++) {
64 if (i < 10) { 40 if (i < 10) {
65 i = "0" + i; 41 i = "0" + i;
66 } 42 }
...@@ -70,7 +46,7 @@ var dateTimePicker = function (startyear, endyear) { ...@@ -70,7 +46,7 @@ var dateTimePicker = function (startyear, endyear) {
70 }); 46 });
71 } 47 }
72 //获取分钟 48 //获取分钟
73 - for (let i = _minute; i < 60; i++) { 49 + for (let i = 0; i < 60; i++) {
74 if (i < 10) { 50 if (i < 10) {
75 i = "0" + i; 51 i = "0" + i;
76 } 52 }
...@@ -79,6 +55,20 @@ var dateTimePicker = function (startyear, endyear) { ...@@ -79,6 +55,20 @@ var dateTimePicker = function (startyear, endyear) {
79 id: i 55 id: i
80 }); 56 });
81 } 57 }
58 + return function (_year, _month) {
59 + const days = [];
60 + _year = parseInt(_year);
61 + _month = parseInt(_month);
62 + //获取日期
63 + for (let i = 1; i <= getDaysInOneMonth(_year, _month); i++) {
64 + if (i < 10) {
65 + i = "0" + i;
66 + }
67 + days.push({
68 + name: i + '日',
69 + id: i
70 + });
71 + }
82 return [years, months, days, hours, minutes]; 72 return [years, months, days, hours, minutes];
83 } 73 }
84 } 74 }
......
...@@ -35,6 +35,9 @@ export default { ...@@ -35,6 +35,9 @@ export default {
35 hour: 0, 35 hour: 0,
36 minute: 0, 36 minute: 0,
37 datePicker: "", 37 datePicker: "",
38 + defaultIndex: [0, 0, 0, 0, 0],
39 + startIndex: [0, 0, 0, 0, 0],
40 + endIndex: [0, 0, 0, 0, 0],
38 }; 41 };
39 }, 42 },
40 computed: { 43 computed: {
...@@ -47,6 +50,9 @@ export default { ...@@ -47,6 +50,9 @@ export default {
47 timeDate() { 50 timeDate() {
48 this.initData(); 51 this.initData();
49 }, 52 },
53 + defaultTime () {
54 + this.initData();
55 + }
50 }, 56 },
51 created() { 57 created() {
52 this.initData(); 58 this.initData();
...@@ -59,28 +65,43 @@ export default { ...@@ -59,28 +65,43 @@ export default {
59 startTime.getFullYear(), 65 startTime.getFullYear(),
60 endTime.getFullYear() 66 endTime.getFullYear()
61 ); 67 );
62 - this.setDateData(this.startTime); 68 + this.setDateData(this.defaultTime);
69 + this.getKeyIndex(this.startTime, "startIndex");
70 + // 截止时间索引
71 + this.getKeyIndex(this.endTime, "endIndex");
72 + // 默认索引
73 + this.getKeyIndex(this.defaultTime, "defaultIndex");
74 + this.timeIndex = this.defaultIndex;
63 // 初始时间 75 // 初始时间
64 this.initTime(); 76 this.initTime();
65 - // 初始索引 77 + },
78 + getKeyIndex(time, key) {
79 + let Arr = dateDate(time);
80 + let _index = this.getIndex(Arr);
81 + this[key] = _index;
82 + },
83 + getIndex(arr) {
84 + let timeIndex = [];
85 + let indexKey = ["year", "month", "day", "hours", "minutes"];
86 + this.activityArray.forEach((element, index) => {
87 + let _index = element.findIndex(
88 + (item) => parseInt(item.id) === parseInt(arr[indexKey[index]])
89 + );
90 + timeIndex[index] = _index >= 0 ? _index : 0;
91 + });
92 + return timeIndex;
66 }, 93 },
67 initTime() { 94 initTime() {
68 - this.year = this.activityArray[0][0].id; 95 + let _index = this.timeIndex;
69 - this.month = this.activityArray[1][0].id; 96 + this.year = this.activityArray[0][_index[0]].id;
70 - this.day = this.activityArray[2][0].id; 97 + this.month = this.activityArray[1].length && this.activityArray[1][_index[1]].id;
71 - this.hour = this.activityArray[3][0].id; 98 + this.day = this.activityArray[2].length && this.activityArray[2][_index[2]].id;
72 - this.minute = this.activityArray[4][0].id; 99 + this.hour = this.activityArray[3].length && this.activityArray[3][_index[3]].id;
100 + this.minute = this.activityArray[4].length && this.activityArray[4][_index[4]].id;
73 }, 101 },
74 setDateData(_date) { 102 setDateData(_date) {
75 let _data = dateDate(_date); 103 let _data = dateDate(_date);
76 - this.activityArray = this.datePicker( 104 + this.activityArray = this.datePicker(_data.year, _data.month);
77 - _data.year,
78 - _data.month,
79 - _data.day,
80 - _data.hours,
81 - _data.minutes
82 - );
83 - // console.log(this.activityArray);
84 }, 105 },
85 bindMultiPickerChange(e) { 106 bindMultiPickerChange(e) {
86 console.log("picker发送选择改变，携带值为", e.detail.value); 107 console.log("picker发送选择改变，携带值为", e.detail.value);
...@@ -96,109 +117,111 @@ export default { ...@@ -96,109 +117,111 @@ export default {
96 console.log("修改的列为", e.detail.column, "，值为", e.detail.value); 117 console.log("修改的列为", e.detail.column, "，值为", e.detail.value);
97 let _data = JSON.parse(JSON.stringify(this.activityArray)), 118 let _data = JSON.parse(JSON.stringify(this.activityArray)),
98 timeIndex = JSON.parse(JSON.stringify(this.timeIndex)), 119 timeIndex = JSON.parse(JSON.stringify(this.timeIndex)),
120 + { startIndex, endIndex } = this,
99 { column, value } = e.detail, 121 { column, value } = e.detail,
100 _value = _data[column][value].id, 122 _value = _data[column][value].id,
101 - _year = this.startTime.getFullYear(), 123 + _start = dateDate(this.startTime),
102 - _endYear = this.endTime.getFullYear(), 124 + _end = dateDate(this.endTime);
103 - _month = parseInt(this.startTime.getMonth() + 1),
104 - _day = parseInt(this.startTime.getDay()),
105 - _minute = parseInt(this.startTime.getMinutes());
106 switch (e.detail.column) { 125 switch (e.detail.column) {
107 case 0: 126 case 0:
108 - this.year = _value; 127 + if (_value <= _start.year) {
109 - if (value === 0) { 128 + timeIndex = startIndex;
110 - //选择第一年 注意初始时间 129 + this.year = _start.year;
111 this.setDateData(this.startTime); 130 this.setDateData(this.startTime);
112 - } else if (value === _data[0].length - 1) { 131 + } else if (_value >= _end.year) {
113 - // 选择最后一年设置截止时间 132 + this.year = _end.year;
133 + timeIndex = [endIndex[0], 0, 0, 0, 0];
114 this.setDateData(this.endTime); 134 this.setDateData(this.endTime);
115 } else { 135 } else {
116 - this.activityArray = this.datePicker(_value, 1, 1, 0, 0); 136 + this.year = _value;
117 - }
118 timeIndex = [value, 0, 0, 0, 0]; 137 timeIndex = [value, 0, 0, 0, 0];
138 + this.activityArray = this.datePicker(_value, 1);
139 + }
140 + timeIndex = this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
119 this.timeIndex = timeIndex; 141 this.timeIndex = timeIndex;
120 break; 142 break;
121 case 1: 143 case 1:
122 - // 月份选择器 当年份为第一年和最后一年的时候需要注意 144 + if (this.year == _start.year && value <= startIndex[1]) {
123 - this.month = _value; 145 + timeIndex = startIndex;
124 - this.timeIndex = JSON.parse( 146 + this.month = _start.month;
125 - JSON.stringify([timeIndex[0], value, 0, 0, 0])
126 - );
127 - if (this.year == _year && value === 0) {
128 this.setDateData(this.startTime); 147 this.setDateData(this.startTime);
129 - } else if (this.year == _endYear && value === 0) { 148 + } else if (this.year == _end.year && value >= endIndex[1]) {
149 + timeIndex = endIndex;
150 + this.month = _end.month;
130 this.setDateData(this.endTime); 151 this.setDateData(this.endTime);
131 } else { 152 } else {
132 - _data[2] = this.datePicker(this.year, this.month, 1, 0, 0)[2]; 153 + this.month = _value;
133 - _data[3] = this.datePicker(this.year, this.month, 1, 0, 0)[3]; 154 + _data[2] = this.datePicker(this.year, this.month)[2];
134 - _data[4] = this.datePicker(this.year, this.month, 1, 0, 0)[4]; 155 + timeIndex = [timeIndex[0], value, 0, 0, 0];
135 this.activityArray = _data; 156 this.activityArray = _data;
136 } 157 }
158 + this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
137 break; 159 break;
138 case 2: 160 case 2:
139 - this.day = _value; 161 + if (
140 - this.timeIndex = JSON.parse( 162 + this.year == _start.year &&
141 - JSON.stringify([timeIndex[0], timeIndex[1], value, 0, 0]) 163 + this.month == _start.month &&
142 - ); 164 + value <= startIndex[2]
143 - if (this.year == _year && this.month == _month && value === 0) { 165 + ) {
144 - this.setDateData(this.startTime); 166 + this.day = _start.day;
167 + timeIndex = startIndex;
145 } else if ( 168 } else if (
146 - this.year == _endYear && 169 + this.year == _end.year &&
147 - this.month == _month && 170 + this.month == _end.month &&
148 - value === 0 171 + value >= endIndex[2]
149 ) { 172 ) {
150 - this.setDateData(this.endTime); 173 + this.day = _end.day;
174 + timeIndex = endIndex;
151 } else { 175 } else {
152 - _data[3] = this.datePicker( 176 + this.day = _value;
153 - this.year, 177 + timeIndex = [timeIndex[0], timeIndex[1], value, 0, 0];
154 - this.month,
155 - this.day,
156 - 0,
157 - 0
158 - )[3];
159 - _data[4] = this.datePicker(
160 - this.year,
161 - this.month,
162 - this.day,
163 - 0,
164 - 0
165 - )[4];
166 - this.activityArray = _data;
167 } 178 }
179 + this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
168 break; 180 break;
169 case 3: 181 case 3:
170 - this.hour = _value;
171 - timeIndex[3] = value;
172 - timeIndex[4] = 0;
173 - this.timeIndex = timeIndex;
174 if ( 182 if (
175 - this.year == _year && 183 + this.year == _start.year &&
176 - this.month == _month && 184 + this.month == _start.month &&
177 - this.day == _day && 185 + this.day == _start.day &&
178 - value === 0 186 + value <= startIndex[3]
179 ) { 187 ) {
180 - this.setDateData(this.startTime); 188 + this.hour = _start.hours;
189 + timeIndex = startIndex;
181 } else if ( 190 } else if (
182 - this.year == _endYear && 191 + this.year == _end.year &&
183 - this.month == _month && 192 + this.month == _end.month &&
184 - this.day == _day && 193 + this.day == _end.day &&
185 - value === 0 194 + value >= endIndex[3]
186 ) { 195 ) {
187 - this.setDateData(this.endTime); 196 + this.hour = _end.hours;
197 + timeIndex = endIndex;
188 } else { 198 } else {
189 - _data[4] = this.datePicker( 199 + this.hour = _value;
190 - this.year, 200 + timeIndex[3] = value;
191 - this.month, 201 + timeIndex[4] = 0;
192 - this.day,
193 - this.hour,
194 - 0
195 - )[4];
196 - this.activityArray = _data;
197 } 202 }
203 + this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
198 break; 204 break;
199 case 4: 205 case 4:
200 timeIndex[4] = value; 206 timeIndex[4] = value;
201 - this.timeIndex = timeIndex; 207 + if (
208 + this.year == _start.year &&
209 + this.month == _start.month &&
210 + this.day == _start.day &&
211 + this.hour == _start.hours &&
212 + value <= startIndex[4]
213 + ) {
214 + timeIndex = startIndex;
215 + } else if (
216 + this.year == _end.year &&
217 + this.month == _end.month &&
218 + this.day == _end.day &&
219 + this.hour == _end.hours &&
220 + value >= endIndex[4]
221 + ) {
222 + timeIndex = endIndex;
223 + }
224 + this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
202 break; 225 break;
203 } 226 }
204 }, 227 },
......