From ea0708357f50c62ca7902b52457f1f7dfa45f8d9 Mon Sep 17 00:00:00 2001 From: Sylvaner <745620190@qq.com> Date: Tue, 14 Jul 2020 11:55:14 +0800 Subject: [PATCH] feat(DatePicker): support columns-order (#6672) (#6768) --- src/datetime-picker/DatePicker.js | 100 +++++----- src/datetime-picker/README.md | 37 ++++ src/datetime-picker/README.zh-CN.md | 37 ++++ src/datetime-picker/demo/index.vue | 17 +- src/datetime-picker/shared.js | 1 + .../test/__snapshots__/demo.spec.js.snap | 172 ++++++++++++++++++ 6 files changed, 315 insertions(+), 49 deletions(-) diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index 9f2d20a54..6ee4ac6cd 100644 --- a/src/datetime-picker/DatePicker.js +++ b/src/datetime-picker/DatePicker.js @@ -83,20 +83,28 @@ export default createComponent({ }, ]; - if (this.type === 'date') { - result = result.slice(0, 3); + switch (this.type) { + case 'date': + result = result.slice(0, 3); + break; + case 'year-month': + result = result.slice(0, 2); + break; + case 'month-day': + result = result.slice(1, 3); + break; + case 'datehour': + result = result.slice(0, 4); + break; } - if (this.type === 'year-month') { - result = result.slice(0, 2); - } - - if (this.type === 'month-day') { - result = result.slice(1, 3); - } - - if (this.type === 'datehour') { - result = result.slice(0, 4); + if (this.columnsOrder) { + const columnsOrder = this.columnsOrder.concat( + result.map((column) => column.type) + ); + result.sort( + (a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type) + ); } return result; @@ -155,7 +163,13 @@ export default createComponent({ updateInnerValue() { const { type } = this; const indexes = this.getPicker().getIndexes(); - const getValue = (index) => { + const getValue = (type) => { + let index = 0; + this.originColumns.forEach((column, columnIndex) => { + if (type === column.type) { + index = columnIndex; + } + }); const { values } = this.originColumns[index]; return getTrueValue(values[indexes[index]]); }; @@ -163,15 +177,14 @@ export default createComponent({ let year; let month; let day; - if (type === 'month-day') { year = this.innerValue.getFullYear(); - month = getValue(0); - day = getValue(1); + month = getValue('month'); + day = getValue('day'); } else { - year = getValue(0); - month = getValue(1); - day = type === 'year-month' ? 1 : getValue(2); + year = getValue('year'); + month = getValue('month'); + day = type === 'year-month' ? 1 : getValue('day'); } const maxDay = getMonthEndDay(year, month); @@ -181,12 +194,12 @@ export default createComponent({ let minute = 0; if (type === 'datehour') { - hour = getValue(3); + hour = getValue('hour'); } if (type === 'datetime') { - hour = getValue(3); - minute = getValue(4); + hour = getValue('hour'); + minute = getValue('minute'); } const value = new Date(year, month - 1, day, hour, minute); @@ -208,32 +221,23 @@ export default createComponent({ const value = this.innerValue; const { formatter } = this; - let values = [ - formatter('year', `${value.getFullYear()}`), - formatter('month', padZero(value.getMonth() + 1)), - formatter('day', padZero(value.getDate())), - ]; - - if (this.type === 'datetime') { - values.push( - formatter('hour', padZero(value.getHours())), - formatter('minute', padZero(value.getMinutes())) - ); - } - - if (this.type === 'datehour') { - values.push( - formatter('hour', padZero(value.getHours())) - ); - } - - if (this.type === 'year-month') { - values = values.slice(0, 2); - } - - if (this.type === 'month-day') { - values = values.slice(1, 3); - } + const values = this.originColumns.map((column) => { + switch (column.type) { + case 'year': + return formatter('year', `${value.getFullYear()}`); + case 'month': + return formatter('month', padZero(value.getMonth() + 1)); + case 'day': + return formatter('day', padZero(value.getDate())); + case 'hour': + return formatter('hour', padZero(value.getHours())); + case 'minute': + return formatter('minute', padZero(value.getMinutes())); + default: + // no default + return null; + } + }); this.$nextTick(() => { this.getPicker().setValues(values); diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index bd5539af8..bd27f1e51 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -208,6 +208,42 @@ export default { }; ``` +### Columns Order + +```html + +``` + +```js +export default { + data() { + return { + currentDate: new Date(), + }; + }, + methods: { + formatter(type, val) { + if (type === 'year') { + return val + ' Year'; + } + if (type === 'month') { + return val + ' Month'; + } + if (type === 'day') { + return val + ' Day'; + } + return val; + }, + }, +}; +``` + ## API ### Props @@ -222,6 +258,7 @@ export default { | loading | Whether to show loading prompt | _boolean_ | `false` | | filter | Option filter | _(type, vals) => vals_ | - | | formatter | Option text formatter | _(type, val) => val_ | - | +| columns-order `v2.9.2` | Array for ordering columns, where item can be set to
`year`, `month`, `day`, `hour` and `minute` | _string[]_ | - | | item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` | | visible-item-count | Count of visible columns | _number \| string_ | `5` | | swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index c772a4264..22f7d54f8 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -217,6 +217,42 @@ export default { }; ``` +### 自定义列排序 + +```html + +``` + +```js +export default { + data() { + return { + currentDate: new Date(), + }; + }, + methods: { + formatter(type, val) { + if (type === 'year') { + return val + '年'; + } + if (type === 'month') { + return val + '月'; + } + if (type === 'day') { + return val + '日'; + } + return val; + }, + }, +}; +``` + ## API ### Props @@ -231,6 +267,7 @@ export default { | loading | 是否显示加载状态 | _boolean_ | `false` | | filter | 选项过滤函数 | _(type, vals) => vals_ | - | | formatter | 选项格式化函数 | _(type, val) => val_ | - | +| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为
`year`、`month`、`day`、`hour`、`minute` | _string[]_ | - | | item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` | | visible-item-count | 可见的选项个数 | _number \| string_ | `5` | | swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` | diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue index 316474ed0..e02bfc9f4 100644 --- a/src/datetime-picker/demo/index.vue +++ b/src/datetime-picker/demo/index.vue @@ -70,6 +70,18 @@ :filter="filter" /> + + + + @@ -87,9 +99,10 @@ export default { monthDayType: '选择月日', yearMonthType: '选择年月', optionFilter: '选项过滤器', + sortColumns: '自定义列排序', }, 'en-US': { - day: 'Day', + day: ' Day', year: ' Year', month: ' Month', timeType: 'Choose Time', @@ -99,6 +112,7 @@ export default { monthDayType: 'Choose Month-Day', yearMonthType: 'Choose Year-Month', optionFilter: 'Option Filter', + sortColumns: 'Columns Order', }, }, @@ -114,6 +128,7 @@ export default { monthDay: new Date(2020, 0, 1), yearMonth: new Date(2020, 0, 1), optionFilter: '12:00', + sortColumnsDate: new Date(2020, 0, 1), }, }; }, diff --git a/src/datetime-picker/shared.js b/src/datetime-picker/shared.js index c478b8c69..45ad4a273 100644 --- a/src/datetime-picker/shared.js +++ b/src/datetime-picker/shared.js @@ -15,6 +15,7 @@ export const sharedProps = { type: Function, default: (type, value) => value, }, + columnsOrder: Array, }; export const TimePickerMixin = { diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap index f5d53bde5..30a574b09 100644 --- a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap @@ -1442,5 +1442,177 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
自定义列排序
+
+ +
+
+
    +
  • +
    01月
    +
    • +
  • +
    02月
    +
    • +
  • +
    03月
    +
    • +
  • +
    04月
    +
    • +
  • +
    05月
    +
    • +
  • +
    06月
    +
    • +
  • +
    07月
    +
    • +
  • +
    08月
    +
    • +
  • +
    09月
    +
    • +
  • +
    10月
    +
    • +
  • +
    11月
    +
    • +
  • +
    12月
    +
    • +
+
+
+
    +
  • +
    01日
    +
    • +
  • +
    02日
    +
    • +
  • +
    03日
    +
    • +
  • +
    04日
    +
    • +
  • +
    05日
    +
    • +
  • +
    06日
    +
    • +
  • +
    07日
    +
    • +
  • +
    08日
    +
    • +
  • +
    09日
    +
    • +
  • +
    10日
    +
    • +
  • +
    11日
    +
    • +
  • +
    12日
    +
    • +
  • +
    13日
    +
    • +
  • +
    14日
    +
    • +
  • +
    15日
    +
    • +
  • +
    16日
    +
    • +
  • +
    17日
    +
    • +
  • +
    18日
    +
    • +
  • +
    19日
    +
    • +
  • +
    20日
    +
    • +
  • +
    21日
    +
    • +
  • +
    22日
    +
    • +
  • +
    23日
    +
    • +
  • +
    24日
    +
    • +
  • +
    25日
    +
    • +
  • +
    26日
    +
    • +
  • +
    27日
    +
    • +
  • +
    28日
    +
    • +
  • +
    29日
    +
    • +
  • +
    30日
    +
    • +
  • +
    31日
    +
    • +
+
+
+
    +
  • +
    2020年
    +
    • +
  • +
    2021年
    +
    • +
  • +
    2022年
    +
    • +
  • +
    2023年
    +
    • +
  • +
    2024年
    +
    • +
  • +
    2025年
    +
    • +
+
+
+
+
+ +
+
`;