[优化] 添加三个时间粒度，以设置不带日期的时间

zcg1991 · rdkmaster · commit da68db7df658 · 2020-03-17T18:32:55.000+08:00
diff --git a/src/app/demo/pc/range-time/gr/demo.component.html b/src/app/demo/pc/range-time/gr/demo.component.html
@@ -4,13 +4,15 @@
 
 
 <!-- start to learn the demo from here -->
-<h4>Gr</h4>
+<h4>粒度 Gr</h4>
 
-Gr : <jigsaw-tile trackItemBy="label" [(selectedItems)]="gr" [multipleSelect]="false">
-    <jigsaw-tile-option *ngFor="let item of datas" [value]="item">{{item.label}}</jigsaw-tile-option>
-</jigsaw-tile><br>
+<p>如下粒度（Gr）值支持日期和时间同时选择：</p>
+<jigsaw-button-bar [data]="['second','minute','hour','date','week','month']" [(selectedItems)]="gr">
+</jigsaw-button-bar>
 
-<jigsaw-range-time [(beginDate)]="beginDate" [gr]="gr[0].label" [(endDate)]="endDate" ></jigsaw-range-time><br>
+<br><br>
 
-<div *ngIf="gr[0].label!='week'">beginDate ： {{beginDate}}   endDate：{{endDate}}</div>
-<div *ngIf="gr[0].label=='week'">beginDate ： {{beginDate | json}}   endDate：{{endDate | json}}</div>
+<jigsaw-range-time [(beginDate)]="beginDate" [gr]="gr[0]" [(endDate)]="endDate" ></jigsaw-range-time><br>
+
+<div *ngIf="gr[0] !='week'">beginDate ： {{beginDate}}   endDate：{{endDate}}</div>
+<div *ngIf="gr[0] =='week'">beginDate ： {{beginDate | json}}   endDate：{{endDate | json}}</div>
diff --git a/src/app/demo/pc/range-time/gr/demo.component.ts b/src/app/demo/pc/range-time/gr/demo.component.ts
@@ -25,16 +25,13 @@ export class RangeTimeGrComponent implements AfterContentInit {
 
     endDate = "now";
 
-    datas = [{label: "second"}, {label: "minute"}, {label: "hour"},
-        {label: "date"}, {label: "week"}, {label: "month"}];
-
     gr:any;
 
     constructor(public changeDetectorRef: ChangeDetectorRef) {
     }
 
     ngAfterContentInit() {
-        this.gr = [this.datas[3]];
+        this.gr = [`date`];
         this.changeDetectorRef.detectChanges();
     }
 
diff --git a/src/app/demo/pc/range-time/gr/demo.module.ts b/src/app/demo/pc/range-time/gr/demo.module.ts
@@ -1,14 +1,14 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {JigsawRangeTimeModule} from "jigsaw/pc-components/range-time/index";
-import {JigsawTileSelectModule} from "jigsaw/pc-components/list-and-tile/tile";
+import {JigsawButtonBarModule} from "jigsaw/pc-components/list-and-tile/button-bar";
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
 import {RangeTimeGrComponent} from "./demo.component";
 
 @NgModule({
     declarations: [RangeTimeGrComponent],
     exports: [RangeTimeGrComponent],
-    imports: [JigsawRangeTimeModule, JigsawTileSelectModule, CommonModule, JigsawDemoDescriptionModule]
+    imports: [JigsawRangeTimeModule, CommonModule, JigsawDemoDescriptionModule, JigsawButtonBarModule]
 })
 export class RangeTimeGrModule {
 
diff --git a/src/app/demo/pc/time/full/demo.component.ts b/src/app/demo/pc/time/full/demo.component.ts
@@ -15,7 +15,7 @@ export class TimeFullComponent {
 
     // demo-2
     date2 = 'now';
-    grList = ['second', 'minute', 'hour', 'date', 'week', 'month'];
+    grList = ['second', 'minute', 'hour', 'date', 'week', 'month', 'time', 'time_hour_minute', 'time_minute_second'];
     gr = this.grList[3];
 
     // demo-3
diff --git a/src/app/demo/pc/time/gr/demo.component.html b/src/app/demo/pc/time/gr/demo.component.html
@@ -4,12 +4,18 @@
 
 
 <!-- start to learn the demo from here -->
-<h4>Gr</h4>
+<h4>粒度 Gr</h4>
 
-Gr : <jigsaw-tile trackItemBy="label" [(selectedItems)]="gr" [multipleSelect]="false">
-    <jigsaw-tile-option *ngFor="let item of datas" [value]="item">{{item.label}}</jigsaw-tile-option>
-</jigsaw-tile><br>
+<p>如下粒度（Gr）值支持日期和时间同时选择：</p>
+<jigsaw-button-bar [data]="['second','minute','hour','date','week','month']" [(selectedItems)]="gr">
+</jigsaw-button-bar>
+<br><br>
+<p>如下粒度（Gr）值仅支持时间选择：</p>
+<jigsaw-button-bar [data]="['time','time_hour_minute','time_minute_second']" [(selectedItems)]="gr">
+</jigsaw-button-bar>
 
-<jigsaw-time [(date)]="date" [gr]="gr[0].label" (dateChange)="dateChange($event)"></jigsaw-time><br>
+<br><br>
+
+<jigsaw-time [(date)]="date" [gr]="gr[0]" (dateChange)="dateChange($event)"></jigsaw-time><br>
 
 <p>{{date | json}}</p>
diff --git a/src/app/demo/pc/time/gr/demo.component.ts b/src/app/demo/pc/time/gr/demo.component.ts
@@ -17,10 +17,7 @@ import {Component} from "@angular/core";
 export class TimeGrComponent {
     date = "now";
 
-    datas = [{label: "second"}, {label: "minute"}, {label: "hour"},
-        {label: "date"}, {label: "week"}, {label: "month"}];
-
-    gr = [this.datas[2]];
+    gr = ['date'];
 
     dateChange($event) {
         console.log($event);
diff --git a/src/app/demo/pc/time/gr/demo.module.ts b/src/app/demo/pc/time/gr/demo.module.ts
@@ -1,12 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from "@angular/common";
 import {JigsawTimeModule} from "jigsaw/pc-components/time/index";
-import {JigsawTileSelectModule} from "jigsaw/pc-components/list-and-tile/tile";
-import {TimeGrComponent} from './demo.component';
+import {JigsawButtonBarModule} from "jigsaw/pc-components/list-and-tile/button-bar";
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {TimeGrComponent} from './demo.component';
 
 @NgModule({
-    imports: [CommonModule, JigsawTimeModule, JigsawTileSelectModule, JigsawDemoDescriptionModule],
+    imports: [CommonModule, JigsawTimeModule, JigsawDemoDescriptionModule, JigsawButtonBarModule],
     declarations: [TimeGrComponent],
     exports: [TimeGrComponent]
 })
diff --git a/src/jigsaw/common/service/time.service.ts b/src/jigsaw/common/service/time.service.ts
@@ -5,7 +5,7 @@ import {CommonUtils} from "../core/utils/common-utils";
  * 时间粒度值
  */
 export enum TimeGr {
-    second, minute, hour, date, week, month
+    second, minute, hour, date, week, month, time, time_hour_minute, time_minute_second
 }
 
 /**
@@ -37,14 +37,14 @@ export enum TimeWeekDayStart {
  * `TimeService`提供了许多有用的时间换算、格式化工具，当你有需要对时间进行运算时，可以参考它的api说。
  */
 export enum TimeUnit {
-    s,m,h,d,w,M,y
+    s, m, h, d, w, M, y
 }
 
 /**
  * 常用时间格式，`TimeService.format`可以支持任何格式，我们做这个枚举只是他们太常用了，使用这个枚举+IDE提示，你可以少敲很多次键盘。
  */
 export enum TimeFormatters {
-    yyyy_mm_dd_hh_mm_ss,yyyy_mm_dd_hh_mm,yyyy_mm_dd_hh,yyyy_mm_dd,yyyy_mm
+    yyyy_mm_dd_hh_mm_ss, yyyy_mm_dd_hh_mm, yyyy_mm_dd_hh, yyyy_mm_dd, yyyy_mm, hh_mm_ss, hh_mm, mm_ss
 }
 
 /**
@@ -64,26 +64,37 @@ export class TimeService {
      * @param {TimeGr} gr 目标粒度
      * @return {string} 符合粒度格式的时刻
      */
-    public static convertValue(value: WeekTime, gr:TimeGr): string {
+    public static convertValue(value: WeekTime, gr: TimeGr): string {
         value = TimeService._handleWeekValue(value);
         value = TimeService.getFormatDate(<Time>value, gr);
         return <string>value;
     }
 
-    private static _handleWeekValue(newValue:WeekTime) : Time{
+    private static _handleWeekValue(newValue: WeekTime): Time {
         if (newValue && typeof newValue["week"] === 'number') {
             return TimeService.getDateFromYearAndWeek(newValue["year"], newValue["week"])
         }
         return <Time>newValue;
     }
 
-    private static _timeFormatterConvert(formatter : TimeFormatters):string{
-        switch (formatter){
-            case TimeFormatters.yyyy_mm_dd_hh_mm_ss : return "YYYY-MM-DD HH:mm:ss";
-            case TimeFormatters.yyyy_mm_dd_hh_mm : return "YYYY-MM-DD HH:mm";
-            case TimeFormatters.yyyy_mm_dd_hh : return "YYYY-MM-DD HH";
-            case TimeFormatters.yyyy_mm_dd : return "YYYY-MM-DD";
-            case TimeFormatters.yyyy_mm : return "YYYY-MM";
+    private static _timeFormatterConvert(formatter: TimeFormatters): string {
+        switch (formatter) {
+            case TimeFormatters.yyyy_mm_dd_hh_mm_ss :
+                return "YYYY-MM-DD HH:mm:ss";
+            case TimeFormatters.yyyy_mm_dd_hh_mm :
+                return "YYYY-MM-DD HH:mm";
+            case TimeFormatters.yyyy_mm_dd_hh :
+                return "YYYY-MM-DD HH";
+            case TimeFormatters.yyyy_mm_dd :
+                return "YYYY-MM-DD";
+            case TimeFormatters.yyyy_mm :
+                return "YYYY-MM";
+            case TimeFormatters.hh_mm_ss :
+                return "HH:mm:ss";
+            case TimeFormatters.hh_mm :
+                return "HH:mm";
+            case TimeFormatters.mm_ss :
+                return "mm:ss";
         }
     }
 
@@ -93,7 +104,10 @@ export class TimeService {
         [TimeGr.hour, TimeService._timeFormatterConvert(TimeFormatters.yyyy_mm_dd_hh)],
         [TimeGr.date, TimeService._timeFormatterConvert(TimeFormatters.yyyy_mm_dd)],
         [TimeGr.week, TimeService._timeFormatterConvert(TimeFormatters.yyyy_mm_dd)],
-        [TimeGr.month, TimeService._timeFormatterConvert(TimeFormatters.yyyy_mm)]
+        [TimeGr.month, TimeService._timeFormatterConvert(TimeFormatters.yyyy_mm)],
+        [TimeGr.time, TimeService._timeFormatterConvert(TimeFormatters.hh_mm_ss)],
+        [TimeGr.time_hour_minute, TimeService._timeFormatterConvert(TimeFormatters.hh_mm)],
+        [TimeGr.time_minute_second, TimeService._timeFormatterConvert(TimeFormatters.mm_ss)],
     ]);
 
     /**
@@ -102,8 +116,8 @@ export class TimeService {
      * @param {TimeUnit} unit 时间单位枚举值
      * @return {string} 返回对应的字符串
      */
-    public static timeUnitConvert(unit : TimeUnit):string {
-       return TimeUnit[unit];
+    public static timeUnitConvert(unit: TimeUnit): string {
+        return TimeUnit[unit];
     }
 
     private static _timeUnitMap = new Map([
@@ -119,7 +133,7 @@ export class TimeService {
     private static _initMoment() {
         try {
             moment.suppressDeprecationWarnings = 1;
-        } catch(e) {
+        } catch (e) {
         }
     }
 
@@ -136,7 +150,7 @@ export class TimeService {
      * @param {Time} time 给定的时刻值
      * @returns {boolean} 如果给定的值非字符串，则必然返回false。
      */
-    public static isMacro(time:Time): boolean {
+    public static isMacro(time: Time): boolean {
         if (typeof time === 'string') {
             return !!time.match(/^\s*(now|today|yestoday|tomorrow)\s*([+-]\s*\d+\s*\w+)?\s*$/i);
         }
@@ -148,7 +162,7 @@ export class TimeService {
      * @param timeMacro
      * @returns {any}
      */
-    private static _convertBasicMacro(timeMacro:string): Date|string {
+    private static _convertBasicMacro(timeMacro: string): Date | string {
         let date;
         switch (timeMacro) {
             case 'now':
@@ -168,7 +182,7 @@ export class TimeService {
      * @param {string|number} num   数量，为负数即为减法
      * @param {TimeUnit} unit  单位
      */
-    public static addDate(date:Time, num:string|number, unit:TimeUnit): Moment {
+    public static addDate(date: Time, num: string | number, unit: TimeUnit): Moment {
         return moment(date).add(num, TimeService._timeUnitMap.get(unit));
     }
 
@@ -190,7 +204,7 @@ export class TimeService {
      * @param {string | TimeFormatters} formatter
      */
     public static format(date: Time, formatter: string | TimeFormatters): string {
-        if(typeof formatter === "number") formatter = TimeService._timeFormatterConvert(formatter);
+        if (typeof formatter === "number") formatter = TimeService._timeFormatterConvert(formatter);
         return moment(date).format(formatter);
     }
 
@@ -200,7 +214,7 @@ export class TimeService {
      * @param {Time} date
      * @param {TimeGr} gr
      */
-    public static formatWithGr(date:Time, gr:TimeGr): string {
+    public static formatWithGr(date: Time, gr: TimeGr): string {
         let format = TimeService.getFormatter(gr);
         return moment(date).format(format);
     }
@@ -230,7 +244,7 @@ export class TimeService {
      * @param date
      *
      */
-    public static getWeekYear(date:Time): number {
+    public static getWeekYear(date: Time): number {
         return moment(date).weekYear();
     }
 
@@ -240,7 +254,7 @@ export class TimeService {
      * @param {Time} date
      * @return {number}
      */
-    public static getWeekOfYear(date:Time): number {
+    public static getWeekOfYear(date: Time): number {
         return moment(date).week();
     }
 
@@ -250,7 +264,7 @@ export class TimeService {
      * @param {Time} date
      * @return {number}
      */
-    public static getYear(date:Time): number {
+    public static getYear(date: Time): number {
         return moment(date).year();
     }
 
@@ -260,7 +274,7 @@ export class TimeService {
      * @param {Time} date
      * @return {number}
      */
-    public static getMonth(date:Time): number {
+    public static getMonth(date: Time): number {
         return moment(date).month() + 1;
     }
 
@@ -270,15 +284,15 @@ export class TimeService {
      * @param {Time} date
      * @return {number}
      */
-    public static getDay(date:Time): number {
+    public static getDay(date: Time): number {
         return moment(date).date();
     }
 
     public static getDateFromYearAndWeek(year: number, week: number): Date {
         return moment().weekYear(year).week(week)
     }
 
-    public static getDate(str:Time, gr: TimeGr): Moment {
+    public static getDate(str: Time, gr: TimeGr): Moment {
         return moment(str, TimeService.getFormatter(gr));
     }
 

Original file line number	Diff line number	Diff line change
`@@ -25,16 +25,13 @@ export class RangeTimeGrComponent implements AfterContentInit {`
`25`	`25`
`26`	`26`	`endDate = "now";`
`27`	`27`
`28`		`- datas = [{label: "second"}, {label: "minute"}, {label: "hour"},`
`29`		`- {label: "date"}, {label: "week"}, {label: "month"}];`
`30`		`-`
`31`	`28`	`gr:any;`
`32`	`29`
`33`	`30`	`constructor(public changeDetectorRef: ChangeDetectorRef) {`
`34`	`31`	`}`
`35`	`32`
`36`	`33`	`ngAfterContentInit() {`
`37`		`- this.gr = [this.datas[3]];`
	`34`	+ this.gr = [`date`];
`38`	`35`	`this.changeDetectorRef.detectChanges();`
`39`	`36`	`}`
`40`	`37`