@kre-form/ant
Version:
1,521 lines (1,487 loc) • 612 kB
JavaScript
import { ActivatedRoute } from '@angular/router';
import { tap, catchError } from 'rxjs/operators';
import { CommonModule, registerLocaleData } from '@angular/common';
import { HttpModule } from '@angular/http';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import { HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
import { TranslateModule } from '@ngx-translate/core';
import { NzModalService, NgZorroAntdModule, NZ_I18N, zh_CN, NZ_ICONS } from 'ng-zorro-antd';
import { ColorPickerModule } from 'ngx-color-picker';
import { MenuFoldOutline, MenuUnfoldOutline, FormOutline, DashboardOutline, MinusSquareFill, MinusSquareOutline, MinusSquareTwoTone, MinusOutline, InboxOutline } from '@ant-design/icons-angular/icons';
import zh from '@angular/common/locales/zh';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { NzModalService as NzModalService$1 } from 'ng-zorro-antd/modal';
import { DomSanitizer } from '@angular/platform-browser';
import { FieldType, Guid, KreFormCommonService, FormGlobalService, FieldWrapper, clone, FieldArrayType, KreFormBuilder, KreFormModule } from '@kre-form/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
import { get, isEmpty, cloneDeep, assignIn, round } from 'lodash';
import { FormGroup, FormBuilder, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as differenceInCalendarDays_ from 'date-fns/difference_in_calendar_days';
import * as moment_ from 'moment';
import { DeonCodemirrorModule } from '@kre-form/abc';
import { Component, ViewChild, HostListener, Injectable, EventEmitter, Pipe, Input, Output, ChangeDetectorRef, forwardRef, ElementRef, Inject, NgModule, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldAnchor extends FieldType {
}
KreFormFieldAnchor.decorators = [
{ type: Component, args: [{
selector: "krefield-anchor",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<nz-divider
class="control-design"
[id]="field.key"
[nzText]="to.description"
></nz-divider>
<!-- <div id="components-anchor-demo-basic" style="height: 400px;">1</div> -->
</ng-container>
<ng-template #other>
<nz-divider
class="control-design"
[id]="field.key"
[nzText]="to.description"
></nz-divider>
<!-- <div id="components-anchor-demo-basic" style="height: 400px;">1</div> -->
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/*
<ng-container *ngIf="formStatus !== 0">
<krefield-private_text [field]="field" [status]="formStatus"></krefield-private_text>
</ng-container>
*/
class KreFormFieldText extends FieldType {
}
KreFormFieldText.decorators = [
{ type: Component, args: [{
selector: "krefield-text",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<input
nz-input
autocomplete="off"
[formControl]="formControl"
[kreFormAttributes]="field"
[placeholder]="placeHolder"
[class.is-invalid]="showError"
[maxLength]="to.maxLength || 200"
[minLength]="to.minLength || 0"
/>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ text }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldTextI18n extends FieldType {
/**
* @param {?} route
*/
constructor(route) {
super();
this.route = route;
this.triggerWidth = "260px";
this.languageList = [
{ languageType: "zh-cn", label: "中", resValue: null },
{ languageType: "en", label: "英", resValue: null },
];
}
/**
* @param {?} event
* @return {?}
*/
resize(event) {
this.visibleChange(event);
}
/**
* @return {?}
*/
ngOnInit() {
if (!!this.route.snapshot.queryParams["lang"] &&
((/** @type {?} */ (this.route.snapshot.queryParams["lang"]))).toLocaleLowerCase() === "en") {
this.languageList = [
{ languageType: "zh-cn", label: "中", resValue: null },
{ languageType: "en", label: "EN", resValue: null },
];
}
}
/**
* @return {?}
*/
get language() {
if (this.model != undefined &&
this.model != null &&
this.key != undefined &&
this.key != null &&
this.model.hasOwnProperty(this.key)) {
if (this.formControl.value != undefined &&
this.formControl.value != null &&
this.formControl.value != [] &&
this.formControl.value.length > 0) {
if (this.formControl.value != this.languageList) {
this.languageList = this.formControl.value;
}
}
}
return this.languageList;
}
/**
* @param {?} value
* @return {?}
*/
onChange(value) {
if (this.to.required) {
/** @type {?} */
let empty = this.languageList.some((/**
* @param {?} item
* @return {?}
*/
(item) => {
return ((item.resValue === null ||
item.resValue === "" ||
item.resValue === " ") &&
item.languageType === "zh-cn");
}));
if (empty) {
this.formControl.setValue([]);
}
else {
this.formControl.setValue(this.languageList);
}
}
else {
this.formControl.setValue(this.languageList);
}
this.formControl.markAsTouched();
}
/**
* @param {?} event
* @return {?}
*/
visibleChange(event) {
if (event) {
if (this.cdkOverlayOrigin !== undefined) {
this.triggerWidth =
this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect()
.width -
0 +
"px";
}
}
}
/**
* @return {?}
*/
get langText() {
if (this.model != undefined &&
this.model != null &&
this.key != undefined &&
this.key != null &&
this.model[this.key] != undefined) {
/** @type {?} */
let lang = this.model[this.key];
if (lang != undefined &&
lang != null &&
lang != "" &&
lang instanceof Array &&
lang.length > 0) {
return lang[0]["resValue"];
}
return "";
}
return "";
}
}
KreFormFieldTextI18n.decorators = [
{ type: Component, args: [{
selector: "kreform-field-inputi18n",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<div class="inputi18n">
<div class="inputi18n-text" cdkOverlayOrigin>
<input
nz-input
autocomplete="off"
[(ngModel)]="language[0].resValue"
[kreFormAttributes]="field"
(ngModelChange)="onChange(language[0].resValue)"
nz-popover
nzPopoverTrigger="click"
[nzPopoverContent]="contentTemplate"
nzOverlayClassName="inputi18n-template"
nzPopoverPlacement="bottom"
[nzOverlayStyle]="{ width: triggerWidth }"
(nzVisibleChange)="visibleChange($event)"
[maxLength]="to.maxLength || 200"
[minLength]="to.minLength || 0"
/>
<i nz-icon class="inputi18n-i" nzType="global"></i>
</div>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</div>
<ng-template #contentTemplate>
<ul>
<ng-container *ngFor="let item of language; let i = index">
<li *ngIf="i > 0">
<label>{{ item.label }}</label>
<input
nz-input
autocomplete="off"
[(ngModel)]="item.resValue"
[kreFormAttributes]="field"
(ngModelChange)="onChange(item.resValue)"
[maxLength]="to.maxLength || 200"
[minLength]="to.minLength || 0"
/>
</li>
</ng-container>
</ul>
</ng-template>
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ langText }}</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldTextI18n.ctorParameters = () => [
{ type: ActivatedRoute }
];
KreFormFieldTextI18n.propDecorators = {
cdkOverlayOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin, { static: false },] }],
resize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldTextArea extends FieldType {
/**
* @return {?}
*/
ngOnInit() {
// console.log(this.formControl.value);
}
}
KreFormFieldTextArea.decorators = [
{ type: Component, args: [{
selector: "krefield-textarea",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<textarea
nz-input
disabled
[rows]="to.rows ? to.rows : 4"
style="resize:none"
>
</textarea>
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<textarea
wrap="hard"
nz-input
autocomplete="off"
[formControl]="formControl"
class="form-control"
[class.is-invalid]="showError"
[kreFormAttributes]="field"
[rows]="to.rows ? to.rows : 4"
style="resize:none"
[maxLength]="to.maxLength || 500"
[minLength]="to.minLength || 0"
>
</textarea>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div
class="fieldtext krefield-textarea-{{ to.rows || 4 }} "
*ngIf="editor === false"
[innerHTML]="text | replaceLine"
></div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldNumber extends FieldType {
/**
* @return {?}
*/
get precision() {
/** @type {?} */
let result = 0;
if (this.to != undefined &&
this.to != null &&
this.to["precision"] != undefined &&
this.to["precision"] != null) {
result = this.to["precision"];
}
return result;
}
/**
* @return {?}
*/
get number() {
/** @type {?} */
let result = this.text;
if (this.to != undefined &&
this.to != null &&
this.to["precision"] != undefined &&
this.to["precision"] != null) {
if (!!result || result === 0) {
result = round(result, this.to["precision"]);
if (!isEmpty(this.model) &&
((/** @type {?} */ (this.model))).hasOwnProperty(this.key)) {
this.model[this.key] = result;
}
}
}
return result;
}
}
KreFormFieldNumber.decorators = [
{ type: Component, args: [{
selector: "krefield-number",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<nz-input-number
autocomplete="off"
[formControl]="formControl"
[nzPlaceHolder]="placeHolder"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzPrecision]="
to.precision == undefined || to.precision == null
? null
: to.precision
"
[nzMax]="to.max || 999999"
[nzMin]="to.min || -999999"
></nz-input-number>
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ number }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldPassWord extends FieldType {
constructor() {
super(...arguments);
this.passwordVisible = false;
// clickRead() {
// this.read = !this.read;
// if (this.read) {
// this.password = new Array(this.text.length).fill("*").join("");
// } else {
// this.password = this.text;
// }
// }
// <div class="text">
// {{ password }}
// </div>
// <div class="read">
// <i
// nz-icon
// [nzType]="read ? 'eye-invisible' : 'eye'"
// (click)="clickRead()"
// ></i>
// </div>
}
// password = "";
// read = true;
/**
* @return {?}
*/
ngOnInit() {
// this.password = new Array(this.text.length).fill("*").join("");
}
}
KreFormFieldPassWord.decorators = [
{ type: Component, args: [{
selector: "krefield-password",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<!-- <input
nz-input
autocomplete="off"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[type]="'password'"
/>-->
<nz-input-group [nzSuffix]="suffixTemplate">
<input
[type]="passwordVisible ? 'text' : 'password'"
nz-input
autocomplete="off"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
/>
</nz-input-group>
<ng-template #suffixTemplate>
<i
nz-icon
[nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
(click)="passwordVisible = !passwordVisible"
></i>
</ng-template>
</ng-container>
<div class="fieldtext" *ngIf="editor === false">
{{ text }}
</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldRadio extends FieldType {
}
KreFormFieldRadio.decorators = [
{ type: Component, args: [{
selector: "krefield-radio",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<label nz-radio nzDisabled="true"></label>
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<label
nz-radio
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
></label>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ text }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldRadioGroup extends FieldType {
constructor() {
super(...arguments);
this.guid = Guid.create()["value"];
}
}
KreFormFieldRadioGroup.decorators = [
{ type: Component, args: [{
selector: "krefield-radiogroup",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<nz-radio-group
[nzName]="'radiogroup-' + guid"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
>
<ng-container *ngFor="let item of to.options">
<label nz-radio [nzValue]="item.value" nzDisabled="true">{{
item.label
}}</label>
</ng-container>
</nz-radio-group>
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<nz-radio-group
[nzName]="'radiogroup-' + guid"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
>
<ng-container *ngFor="let item of to.options">
<ng-container *ngIf="to.type == 'button'">
<label nz-radio-button [nzValue]="item.value">{{
item.label
}}</label>
</ng-container>
<ng-container
*ngIf="
to.type == null || to.type == undefined || to.type == 'default'
"
>
<label nz-radio [nzValue]="item.value">{{ item.label }}</label>
</ng-container>
</ng-container>
</nz-radio-group>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ textRadio }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldCheckbox extends FieldType {
}
KreFormFieldCheckbox.decorators = [
{ type: Component, args: [{
selector: "krefield-checkbox",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<label nz-checkbox nzDisabled="true"></label>
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<label
nz-checkbox
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
></label>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ text }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldCheckboxGroup extends FieldType {
constructor() {
super(...arguments);
this.guid = Guid.create()["value"];
}
/**
* @param {?} values
* @return {?}
*/
onChange(values) {
if (values != undefined && values != null && values.length > 0) {
values.forEach((/**
* @param {?} value
* @return {?}
*/
(value) => {
if (this.to.options !== undefined && this.to.options !== null) {
this.to.options.forEach((/**
* @param {?} option
* @return {?}
*/
(option) => {
if (option["value"] === value) ;
}));
}
}));
}
this.formControl.patchValue(values);
this.formControl.markAsTouched();
}
/**
* @param {?} option
* @return {?}
*/
getCheckStatus(option) {
this.formControl.value;
}
/**
* @param {?} values
* @param {?} option
* @return {?}
*/
getControlChecked(values, option) {
/** @type {?} */
let result = false;
if (option && values) {
result = values.some((/**
* @param {?} value
* @return {?}
*/
(value) => {
return value == option.value;
}));
}
return result;
}
}
KreFormFieldCheckboxGroup.decorators = [
{ type: Component, args: [{
selector: "krefield-checkboxgroup",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<nz-checkbox-wrapper
style="width: 100%;"
(nzOnChange)="onChange($event)"
[class.is-invalid]="showError"
>
<ng-container *ngFor="let option of to.options; let i = index">
<label
nz-checkbox
[nzValue]="option.value"
[ngModel]="getControlChecked(formControl.value, option)"
[kreFormAttributes]="field"
disabled
>{{ option.label }}</label
>
</ng-container>
</nz-checkbox-wrapper>
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<nz-checkbox-wrapper
style="width: 100%;"
(nzOnChange)="onChange($event)"
[class.is-invalid]="showError"
>
<ng-container *ngFor="let option of to.options; let i = index">
<label
nz-checkbox
[nzValue]="option.value"
[ngModel]="getControlChecked(formControl.value, option)"
[kreFormAttributes]="field"
>{{ option.label }}</label
>
</ng-container>
</nz-checkbox-wrapper>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">{{ textMultiple }}</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldSelect extends FieldType {
constructor() {
super(...arguments);
this._defaultValue = "";
this._defaultValues = [];
this.selectType = "default";
}
/**
* @return {?}
*/
get getModelValue() {
if (this.to.selectType === "multiple") {
return this.defaultValues;
}
else {
return this.defaultValue;
}
}
/**
* @param {?} value
* @return {?}
*/
set getModelValue(value) { }
/**
* @return {?}
*/
get defaultValue() {
if (this.model &&
this.model[this.key] &&
Array.isArray(this.model[this.key]) &&
this.model[this.key].length > 0) {
this._defaultValue = this.model[this.key][0].value;
}
else {
return null;
}
return this._defaultValue;
}
/**
* @return {?}
*/
get defaultValues() {
if (this.model &&
this.model[this.key] &&
Array.isArray(this.model[this.key])) {
this._defaultValues.length = 0;
this.model[this.key].forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
this._defaultValues.push(item.value);
}));
}
else {
return null;
}
return this._defaultValues;
}
// get defaultValues() {
// if (!this._defaultValues) {
// this._defaultValues = [];
// } else {
// this._defaultValues.length = 0;
// }
// if (
// this.model &&
// this.model[this.key] &&
// Array.isArray(this.model[this.key]) &&
// !_.isEmpty(this.model[this.key])
// ) {
// if (!!this.model[this.key]) {
// this.model[this.key].forEach((item: any) => {
// this._defaultValues.push(item.value);
// });
// }
// } else {
// this._defaultValues = null;
// }
// return this._defaultValues;
// }
/**
* @return {?}
*/
getSelectText() {
/** @type {?} */
let result = "";
if (this.to && this.to.selectType) {
if (this.to.selectType === "multiple") {
result = this.textMultiple;
}
else {
result = this.textSingle;
}
}
else {
result = this.textSingle;
}
return result;
}
/**
* @param {?} e
* @return {?}
*/
selectedChange(e) {
/** @type {?} */
let values = [];
if (this.to.selectType && this.to.selectType == "multiple") {
if (e && Array.isArray(e)) {
e.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (this.to.options && Array.isArray(this.to.options)) {
this.to.options.forEach((/**
* @param {?} options
* @return {?}
*/
(options) => {
if (options.value == item) {
values.push(options);
}
}));
}
}));
}
}
else {
if (this.to.options && Array.isArray(this.to.options)) {
this.to.options.forEach((/**
* @param {?} options
* @return {?}
*/
(options) => {
if (options.value == e) {
values = [options];
}
}));
}
}
this.formControl.patchValue(values);
this.formControl.markAsTouched();
}
/**
* @return {?}
*/
get clear() {
if (typeof this.to.clear === "undefined") {
return true;
}
return !!this.to.clear;
}
}
KreFormFieldSelect.decorators = [
{ type: Component, args: [{
selector: "krefield-select",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<nz-select
[nzAllowClear]="!to.required && clear"
[nzMode]="to.selectType === 'multiple' ? 'multiple' : 'default'"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzPlaceHolder]="placeHolder"
[(ngModel)]="getModelValue"
nzShowSearch="true"
(ngModelChange)="selectedChange($event)"
>
<ng-container *ngFor="let item of to.options">
<nz-option
[nzLabel]="item.label"
[nzValue]="item.value"
></nz-option>
</ng-container>
</nz-select>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-container>
<div class="fieldtext" *ngIf="editor === false">
{{ getSelectText() }}
</div>
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const moment = moment_;
/** @type {?} */
const differenceInCalendarDays = differenceInCalendarDays_;
class KreFormFieldDateTime extends FieldType {
/**
* @param {?} globalService
* @param {?} commonService
*/
constructor(globalService, commonService) {
super();
this.globalService = globalService;
this.commonService = commonService;
this.disabledDate = (/**
* @param {?} current
* @return {?}
*/
(current) => {
if (!!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
return (differenceInCalendarDays(current, new Date((/** @type {?} */ (this.to)).maxDate)) > 0 ||
differenceInCalendarDays(current, new Date((/** @type {?} */ ((/** @type {?} */ (this.to)).minDate)))) < 0);
}
else if (!!(/** @type {?} */ (this.to)).maxDate && !(/** @type {?} */ (this.to)).minDate) {
return differenceInCalendarDays(current, new Date((/** @type {?} */ (this.to)).maxDate)) > 0;
}
else if (!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
return differenceInCalendarDays(current, new Date((/** @type {?} */ (this.to)).minDate)) < 0;
}
else {
return false;
}
});
this.disabledDateTime = (/**
* @param {?} e
* @return {?}
*/
(e) => {
/** @type {?} */
let nzDisabledHours = [];
/** @type {?} */
let nzDisabledMinutes = [];
if (!!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
if (differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).minDate)) === 0) {
nzDisabledHours = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getHours());
if (!!e && new Date((/** @type {?} */ (this.to)).minDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getMinutes());
}
}
if (differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).maxDate)) === 0) {
nzDisabledHours = [
...nzDisabledHours,
...this.range(new Date((/** @type {?} */ (this.to)).maxDate).getHours() + 1, 24),
];
if (!!e && new Date((/** @type {?} */ (this.to)).maxDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = [
...nzDisabledMinutes,
...this.range(new Date((/** @type {?} */ (this.to)).maxDate).getMinutes(), 60),
];
}
}
}
else if (!!(/** @type {?} */ (this.to)).maxDate && !(/** @type {?} */ (this.to)).minDate) {
if (!!e &&
differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).maxDate)) === 0) {
nzDisabledHours = this.range(new Date((/** @type {?} */ (this.to)).maxDate).getHours() + 1, 24);
if (!!e && new Date((/** @type {?} */ (this.to)).maxDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(new Date((/** @type {?} */ (this.to)).maxDate).getMinutes(), 60);
}
}
}
else if (!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
if (!!e &&
differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).minDate)) === 0) {
nzDisabledHours = this.range(0, new Date((/** @type {?} */ (this.to)).minDate).getHours());
if (!!e && new Date((/** @type {?} */ (this.to)).minDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getMinutes());
}
}
}
return {
nzDisabledHours: (/**
* @return {?}
*/
() => nzDisabledHours),
nzDisabledMinutes: (/**
* @return {?}
*/
() => nzDisabledMinutes),
nzDisabledSeconds: (/**
* @return {?}
*/
() => []),
};
});
this.disabledHours = (/**
* @return {?}
*/
() => {
/** @type {?} */
let nzDisabledHours = [];
if (!!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
nzDisabledHours = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getHours());
nzDisabledHours = nzDisabledHours.concat(this.range(new Date((/** @type {?} */ (this.to)).maxDate).getHours() + 1, 24));
}
else if (!!(/** @type {?} */ (this.to)).maxDate && !(/** @type {?} */ (this.to)).minDate) {
nzDisabledHours = this.range(new Date((/** @type {?} */ (this.to)).maxDate).getHours() + 1, 24);
}
else if (!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
nzDisabledHours = this.range(0, new Date((/** @type {?} */ (this.to)).minDate).getHours());
}
return nzDisabledHours;
});
this.disabledMinutes = (/**
* @param {?} e
* @return {?}
*/
(e) => {
/** @type {?} */
let nzDisabledMinutes = [];
if (!!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
if (differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).minDate)) === 0) {
if (!!e && new Date((/** @type {?} */ (this.to)).minDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getMinutes());
}
}
if (differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).maxDate)) === 0) {
if (!!e && new Date((/** @type {?} */ (this.to)).maxDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(new Date((/** @type {?} */ (this.to)).maxDate).getMinutes(), 60);
}
}
}
else if (!!(/** @type {?} */ (this.to)).maxDate && !(/** @type {?} */ (this.to)).minDate) {
if (!!e &&
differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).maxDate)) === 0) {
if (!!e && new Date((/** @type {?} */ (this.to)).maxDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(new Date((/** @type {?} */ (this.to)).maxDate).getMinutes(), 60);
}
}
}
else if (!(/** @type {?} */ (this.to)).maxDate && !!(/** @type {?} */ (this.to)).minDate) {
if (!!e &&
differenceInCalendarDays(e, new Date((/** @type {?} */ (this.to)).minDate)) === 0) {
if (!!e && new Date((/** @type {?} */ (this.to)).minDate).getHours() - e.getHours() === 0) {
nzDisabledMinutes = this.range(-1, new Date((/** @type {?} */ (this.to)).minDate).getMinutes());
}
}
}
return nzDisabledMinutes;
});
}
/**
*
* @param {?} e
* @param {?} global 该变量是用来做之前的兼容，具体用来干什么 需要看外部的调用
* @return {?}
*/
nzOnOpenChange(e, global) {
if (global == true) {
if (!!this.field &&
!!this.field.templateOptions &&
this.field.templateOptions.enableInterface) {
this.globalService.notifyDataChanged("DateTimeClick", {
rdm: Math.random(),
config: this.field,
state: e,
});
}
}
if (e == false &&
this.to != undefined &&
this.to != null &&
this.to.blur != undefined &&
this.to.blur != null) {
this.to.blur(this.field, null);
}
}
//datetime date month year time
/**
* @return {?}
*/
get format() {
/** @type {?} */
let result = "yyyy/MM/dd HH:mm";
if ((/** @type {?} */ (this.to))["format"] != undefined &&
(/** @type {?} */ (this.to))["format"] != null &&
(/** @type {?} */ (this.to))["format"] != "") {
result = (/** @type {?} */ (this.to))["format"];
}
return result;
}
/**
* @return {?}
*/
get showType() {
/** @type {?} */
let result = "datetime";
if ((/** @type {?} */ (this.to))["type"] != undefined &&
(/** @type {?} */ (this.to))["type"] != null &&
(/** @type {?} */ (this.to))["type"] != "") {
result = (/** @type {?} */ (this.to))["type"].toLowerCase();
}
return result;
}
/**
* @return {?}
*/
getText() {
/** @type {?} */
let result = "";
if ((/** @type {?} */ (this.to)).type === undefined ||
(/** @type {?} */ (this.to)).type === null ||
(/** @type {?} */ (this.to)).type === "") {
(/** @type {?} */ (this.to)).type = "datetime";
}
if (this.model != undefined &&
this.model != null &&
this.field != undefined &&
this.field != null &&
this.field.key != undefined &&
this.field.key != null &&
this.model[this.field.key] != undefined &&
this.model[this.field.key] != null &&
this.model[this.field.key] != "") {
if (moment(this.model[this.field.key]).isValid()) {
/** @type {?} */
const date = this.model[this.field.key];
switch ((/** @type {?} */ (this.to)).type) {
case "datetime":
result = moment(date).format("YYYY/MM/DD HH:mm");
break;
case "date":
result = moment(date).format("YYYY/MM/DD");
break;
case "year":
result = moment(date).format("YYYY");
break;
case "month":
result = moment(date).format("YYYY/MM");
break;
case "time":
result = moment(date).format("HH:mm");
break;
}
}
}
return result;
}
// differenceInCalendarDays(e: Date | null, date: Date): number {
// if (!!e) {
// return e.getDate() - date.getDate();
// } else {
// return 0;
// }
// }
/**
* @param {?} start
* @param {?} end
* @return {?}
*/
range(start, end) {
/** @type {?} */
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
/**
* @return {?}
*/
get showToday() {
if (typeof this.to.today === "undefined") {
return true;
}
return !!this.to.today;
}
}
KreFormFieldDateTime.decorators = [
{ type: Component, args: [{
selector: "krefield-datetime",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<ng-container *ngIf="editor === true">
<ng-container [ngSwitch]="showType">
<ng-container *ngSwitchCase="'datetime'">
<nz-date-picker
nzShowTime
[nzShowTime]="{ nzFormat: 'HH:mm' }"
nzFormat="yyyy/MM/dd HH:mm"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzDisabledDate]="disabledDate"
[nzDisabledTime]="disabledDateTime"
[nzPlaceHolder]="to.placeholder || undefined"
(nzOnOpenChange)="nzOnOpenChange($event, true)"
></nz-date-picker>
</ng-container>
<ng-container *ngSwitchCase="'date'">
<nz-date-picker
nzFormat="yyyy/MM/dd"
[formControl]="formControl"
[kreFormAttributes]="field"
[nzDisabledDate]="disabledDate"
[class.is-invalid]="showError"
[nzShowToday]="showToday"
[nzPlaceHolder]="to.placeholder || undefined"
(nzOnOpenChange)="nzOnOpenChange($event, false)"
></nz-date-picker>
</ng-container>
<ng-container *ngSwitchCase="'year'">
<nz-year-picker
nzFormat="yyyy"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzPlaceHolder]="to.placeholder || undefined"
(nzOnOpenChange)="nzOnOpenChange($event, false)"
></nz-year-picker>
</ng-container>
<ng-container *ngSwitchCase="'month'">
<nz-month-picker
nzFormat="yyyy/MM"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzPlaceHolder]="to.placeholder || undefined"
(nzOnOpenChange)="nzOnOpenChange($event, false)"
></nz-month-picker>
</ng-container>
<ng-container *ngSwitchCase="'time'">
<nz-time-picker
nzFormat="HH:mm"
[formControl]="formControl"
[kreFormAttributes]="field"
[class.is-invalid]="showError"
[nzDisabledHours]="disabledHours"
[nzDisabledMinutes]="disabledMinutes"
(nzOpenChange)="nzOnOpenChange($event, true)"
[nzPlaceHolder]="to.placeholder || undefined"
nzClearText=""
[nzPopupClassName]="field.className"
></nz-time-picker>
</ng-container>
<ng-container *ngSwitchDefault></ng-container>
</ng-container>
</ng-container>
<div class="fieldtext" *ngIf="editor === false">
{{ getText() }}
</div>
</ng-template>
`
}] }
];
/** @nocollapse */
KreFormFieldDateTime.ctorParameters = () => [
{ type: FormGlobalService },
{ type: KreFormCommonService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldImage extends FieldType {
}
KreFormFieldImage.decorators = [
{ type: Component, args: [{
selector: "krefield-image",
template: `
<ng-container *ngIf="formStatus !== 0; else other">
<div class="control-design">
<input nz-input disabled />
</div>
</ng-container>
<ng-template #other>
<nz-avatar
nzIcon="user"
nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnKreCYX.png"
></nz-avatar>
<!-- <div class="tips">
<i
class="icon-bangzhu"
[nzTooltipTitle]="tips"
nzTooltipPlacement="top"
nz-tooltip
*ngIf="tips != ''"
></i>
</div> -->
</ng-template>
`
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class KreFormFieldUpload extends FieldType {
/**
* @param {?} msg
*/
constructor(msg) {
super();
this.msg = msg;
this.defaultFileList = [];
this.handleRemove = (/**
* @param {?} file
* @return {?}
*/
(file) => new Observable((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
observer.next(true);
observer.complete();
})));
this.beforeUpload = (/**
* @param {?} file
* @return {?}
*/
(file) => {
return new Observable((/**
* @param {?} observer
* @return {?}
*/
(observer) => {
/** @type {?} */
const isJPG = file.type === "image/jpeg";
if (!this.checkFileType(file)) {
this.msg.error("您上传的文件类型不符合要求！");
observer.complete();
return;
}
if (!this.checkFileSize(file)) {
this.msg.error("您上传的文件大小已经超出最大设置");
observer.complete();
return;
}
observer.next(true);
observer.complete();
}));
});
}
/**
* @param {?} __0
* @return {?}
*/
handleChange({ file, fileList }) {
/** @type {?} */
const status = file.status;
if (status === "done") {
/** @type {?} */
let values = fileList.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
return {
uid: item.uid,
name: item.name,
url: item.url,
};
}));
/* this.model[this.field.key] = values;
this.formControl.markAsTouched(); */
this.formControl.patchValue(values);
this.formControl.markAsTouched();
this.msg.success(`文件${file.name} 上传成功！`);
}
else if (status === "error") {
this.msg.error(`文件${file.name} 上传失败！`);
}
if (status === "removed") {
/** @type {?} */
let values = this.formControl.value;
values.forEach((/**
* @param {?} item
* @param {?} index
* @param {?} object
* @return {?}
*/
(item, index, object) => {
if (item.uid === file.uid) {
object.splice(index, 1);
}
}));
//this.formControl.patchValue(values);
//this.formControl.markAsTouched();
this.msg.success(`文件${file.name} 删除成功！`);
}
}
/**
* @param {?} file
* @return {?}
*/
checkFileType(file) {
/** @type {?} */
let result = true;
if (this.field &&
this.field.templateOptions &&
this.field.templateOptions.attachment &&
this.field.templateOptions.attachment.type) {
/** @type {?} */
let types = this.field.templateOptions.attachment.type;
if (types != undefined && types != null && types != "") {
result = types.split(",").some((/**