diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event')
2 files changed, 205 insertions, 38 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html index 3395a6ee..1c1e766b 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html @@ -11,39 +11,82 @@ * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ --> - -<div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label> - <div class="col-md-9"> - <p-radioButton name="timeType" label="Duration" value="timeDuration" [ngModel]="node.timerEventDefinition.type" (ngModelChange)="timerTypeChange($event)">Duration</p-radioButton> - <p-radioButton name="timeType" label="Date" value="timeDate" [(ngModel)]="node.timerEventDefinition.type">Date</p-radioButton> - <p-radioButton name="timeType" label="Cycle" value="timeCycle" [(ngModel)]="node.timerEventDefinition.type">Cycle</p-radioButton> - </div> -</div> - -<div *ngIf="node.timerEventDefinition.type === 'timeDuration'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DURATION' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDuration"> - <label>eg: P1Y3M5DT6H7M30S</label> +<form class="form-horizontal"> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label> + <div class="col-md-9"> + <label class="plx-radio-container"> + <input type="radio" class="plx-radio" [checked]="checkedType === timeType[timeType.timeDuration]" + (click)="timeTypeChange(timeType[timeType.timeDuration])"> + <div class="radio-substitute"></div> + <span>{{'WORKFLOW.TIMER_CYCLE' | translate}}</span> + </label> + <label class="plx-radio-container"> + <input type="radio" class="plx-radio" [checked]="checkedType === timeType[timeType.timeDate]" + (click)="timeTypeChange(timeType[timeType.timeDate])"> + <div class="radio-substitute"></div> + <span>{{'WORKFLOW.TIMER_DATE' | translate}}</span> + </label> + </div> </div> -</div> -<div *ngIf="node.timerEventDefinition.type === 'timeDate'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDate"> - <label>eg: 2007-04-05T12:30-02:00</label> - <!-- - <p-calendar [(ngModel)]="node.timerEventDefinition.timeDate" [showIcon]="true" [showTime]="true" [showSeconds]="true"></p-calendar> - --> + <div *ngIf="checkedType === timeType[timeType.timeDuration]"> + <!--<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_YEAR' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="year" min="0" width="336px" + [(ngModel)]="timeCycle.year" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div>--> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_MONTH' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="month" min="0" max="12" width="336px" + [(ngModel)]="timeDuration.month" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DAY' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="day" min="0" max="31" width="336px" + [(ngModel)]="timeDuration.day" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_HOUR' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="hour" min="0" max="23" width="336px" + [(ngModel)]="timeDuration.hour" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_MINUTE' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="minute" min="0" max="59" width="336px" + [(ngModel)]="timeDuration.minute" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_SECOND' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="second" min="0" max="59" width="336px" + [(ngModel)]="timeDuration.second" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div> + <!--<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE_INDEX' | translate}}</label> + <div class="col-md-9"> + <plx-text-input type="number" name="time" min="1" width="336px" + [(ngModel)]="timeCycle.time" (change)="transformTimeDurationToString()"></plx-text-input> + </div> + </div>--> </div> -</div> -<div *ngIf="node.timerEventDefinition.type === 'timeCycle'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE' | translate}}</label> - <div class="col-md-9"> - <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeCycle"> - <label>eg: R5/P1Y2M10DT2H30M</label> + <div *ngIf="checkedType === timeType[timeType.timeDate]" class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label> + <div class="col-md-9"> + <plx-datepicker name="date" [(ngModel)]="timeDate" [locale]="locale" (onConfirm)="timeDateChange()" showTime="true" + showSeconds='true' dateFormat="YYYY/MM/DD HH:mm:ss"></plx-datepicker> + </div> </div> -</div> +</form>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts index e8e2c780..d5f201f6 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.ts @@ -9,23 +9,147 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ -import { AfterViewInit, Component, Input } from '@angular/core'; -import { Subscription } from 'rxjs/Subscription'; - -import {IntermediateCatchEvent} from '../../../model/workflow/intermediate-catch-event'; +import {Component, Input, OnChanges, SimpleChanges, OnDestroy} from "@angular/core"; +import {IntermediateCatchEvent} from "../../../model/workflow/intermediate-catch-event"; +import {TimerEventDefinitionType} from "../../../model/workflow/timer-event-definition"; +import {TranslateService} from "@ngx-translate/core"; @Component({ - selector: 'b4t-intermediate-catch-event', + selector: 'wfm-intermediate-catch-event', templateUrl: 'intermediate-catch-event.component.html', }) -export class IntermediateCatchEventComponent { +export class IntermediateCatchEventComponent implements OnChanges, OnDestroy { @Input() public node: IntermediateCatchEvent; - public timerTypeChange(type: string) { + public checkedType: string; + public timeType = TimerEventDefinitionType; + public timeDate: string; + public timeDuration: any = { + year: 0, + month: 0, + day: 0, + hour: 0, + minute: 0, + second: 0 + }; + + public locale: any; + private localeZh: any = { + firstDayOfWeek: 0, + dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], + dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], + monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], + monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], + dateFns: null, + confirm: '确定' + }; + + constructor(private translate: TranslateService) { + this.locale = translate.currentLang.indexOf('zh') > -1 ? this.localeZh : undefined; + } + + public ngOnChanges(changes: SimpleChanges): void { + if (this.node && this.node.timerEventDefinition) { + this.checkedType = this.node.timerEventDefinition.type; + } + if (!this.checkedType) { + this.checkedType = this.timeType[this.timeType.timeDuration]; + } else if (this.checkedType === this.timeType[this.timeType.timeCycle]) { + // 兼容老数据，把timeCycle转为timeDuration + this.checkedType = this.node.timerEventDefinition.type = this.timeType[this.timeType.timeDuration]; + } + + if (this.node.timerEventDefinition.timeDuration) { + this.transformStringToTimeDuration(); + } else if (this.node.timerEventDefinition.timeCycle) { + // 兼容老数据，把timeCycle转为timeDuration + const timeCycleArray = this.node.timerEventDefinition.timeCycle.split('/'); + this.node.timerEventDefinition.timeDuration = timeCycleArray.length > 1 ? timeCycleArray[1] : timeCycleArray[0]; + this.node.timerEventDefinition.timeCycle = ''; + this.transformStringToTimeDuration(); + } else if (this.node.timerEventDefinition.timeDate) { + this.transformISOToDate(); + } + } + + public ngOnDestroy(): void { + if (this.checkedType === this.timeType[this.timeType.timeDuration]) { + this.transformTimeDurationToString(); + } else { + this.timeDateChange(); + } + } + + private transformStringToTimeDuration(): void { + // R5/P1Y2M10DT2H30M + // P1Y3M5DT6H7M30S + this.timeDuration.year = this.splitTimeDuration('P', 'Y'); + this.timeDuration.month = this.splitTimeDuration('Y', 'M'); + this.timeDuration.day = this.splitTimeDuration('M', 'D'); + this.timeDuration.hour = this.splitTimeDuration('D', 'H'); + this.timeDuration.minute = this.splitTimeDuration('H', 'M'); + this.timeDuration.second = this.splitTimeDuration('M', 'S'); + } + + private splitTimeDuration(startKey: string, endKey: string): number { + const timeDuration = this.node.timerEventDefinition.timeDuration; + let start = timeDuration.indexOf(startKey); + let end = timeDuration.indexOf(endKey); + if (startKey === 'H' || endKey === 'S') { + start = timeDuration.lastIndexOf(startKey); + end = timeDuration.lastIndexOf(endKey); + } + const result = parseInt(timeDuration.substring(start + 1, end)); + if (isNaN(result)) { + return 0; + } else { + return result; + } + } + + public timeTypeChange(type: string): void { + this.checkedType = type; const timer = this.node.timerEventDefinition; timer.type = type; timer.timeCycle = ''; timer.timeDate = ''; timer.timeDuration = ''; } + + public transformTimeDurationToString(): void { + // R5/P1Y2M10DT2H30M + this.node.timerEventDefinition.timeDuration = 'P' + + this.timeDuration.year + 'Y' + + this.timeDuration.month + 'M' + + this.timeDuration.day + 'D' + + 'T' + this.timeDuration.hour + 'H' + + this.timeDuration.minute + 'M' + + this.timeDuration.second + 'S'; + } + + private transformISOToDate(): void { + this.timeDate = new Date(this.node.timerEventDefinition.timeDate).toString(); + } + + private pad(value: number): string { + let result = value.toString(); + if (result.length === 1) { + result = '0' + result; + } + return result; + } + + private transformDateToISO(date: Date): string { + return date.getFullYear() + '-' + this.pad(date.getMonth() + 1) + '-' + this.pad(date.getDate()) + 'T' + + this.pad(date.getHours()) + ':' + this.pad(date.getMinutes()) + ':' + this.pad(date.getSeconds()); + } + + public timeDateChange(): void { + // 2007-04-05T12:30-02:00 + if (this.timeDate) { + const date = new Date(this.timeDate); + this.node.timerEventDefinition.timeDate = this.transformDateToISO(date); + console.log(this.node.timerEventDefinition.timeDate); + } + } } |