UNPKG

@kre-form/ant

Version:

1,049 lines 124 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, Input } from "@angular/core"; import { FormGroup, Validators } from "@angular/forms"; import * as _ from "lodash"; /** * @record */ function Item() { } if (false) { /** @type {?} */ Item.prototype.value; /** @type {?} */ Item.prototype.label; /** @type {?|undefined} */ Item.prototype.parameterId; } export class EventItemComponent { constructor() { this.index = 0; this.options = []; this.fields = []; // fieldType: "select" | "text" | "numbers" | "textarea" | "textBtn" = "select"; this.selected = []; this.selectItem = []; this.changeItem = []; this.changeToItem = []; this.changeAction = []; this.Includes = [ { label: "包含", value: "includes", }, { label: "不包含", value: "notIncludes", }, ]; this.minIncludes = this.Includes; this.maxLengthIncludes = this.Includes; this.maxIncludes = this.Includes; this.minLengthIncludes = this.Includes; this.typeList = [ "select", "text", "numbers", "textarea", "textBtn", "upload", "datetime", ]; this.nzPrecision = 0; this.multiple = "multiple"; this.editType = [ { label: "可编辑", value: "edit", }, { label: "只读", value: "readOnly", }, { label: "隐藏", value: "hide", }, { label: "显示", value: "show", }, ]; this.RequiredType = [ { label: "必填", value: "required", }, { label: "不必填", value: "notRequired", }, ]; this.IncludesType = [ { label: "包含", value: "includes", }, { label: "不包含", value: "notIncludes", }, ]; this.changeToValue = []; this.selectType = "default"; this.selectItemType = "default"; this.fixedValue = { minLength: null, maxLength: null, nzMax: null, nzMin: null, nzPrecision: 0, maxDate: null, minDate: null, }; this.selectItemList = ["selectItem", "selectItems"]; this.fieldKeyList = ["fieldKey", "changeFieldType"]; this.changeActionList = ["changeAction", "changeActions"]; this.changeToItemList = ["changeToItem", "changeToItems"]; this.lengthList = [ "maxLength", "maxLengthIncludes", "minLength", "minLengthIncludes", ]; this.specValueList = ["specValue"]; this.numbersList = ["maxIncludes", "max", "minIncludes", "min"]; this.limit = { max: null, min: null, maxLength: null, minLength: null, }; } /** * @return {?} */ ngOnInit() { } /** * @return {?} */ ngOnChanges() { if (this.myForm.value["selected"] === "select") { this.selectItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).setValidators(Validators.required); })); } this.selectItem = []; this.changeToItem = []; // console.log(this.fields); this.fields.forEach((/** * @param {?} el * @return {?} */ (el) => { if (this.field.tableType === "single") { if ((/** @type {?} */ (((/** @type {?} */ (this.typeList))))).includes(el.type) && el.key !== this.field.key) { (/** @type {?} */ (this.changeItem)).push(el); } } else { if ((/** @type {?} */ (((/** @type {?} */ (this.typeList))))).includes(el.type) && el.key !== this.field.key && (el.tableCode === this.field.tableCode || el.tableType === "single")) { (/** @type {?} */ (this.changeItem)).push(el); } } if (el.key === this.field.key) { this.selectItemType = (/** @type {?} */ (el.templateOptions)).selectType === "multiple" ? "multiple" : "default"; } })); if (!_.isEmpty(this.options)) { (/** @type {?} */ (this.options)).forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.parameterId === (/** @type {?} */ ((/** @type {?} */ (this.field)).templateOptions)).parameterId) { (/** @type {?} */ (this.selectItem)).push({ value: (/** @type {?} */ (el)).value, label: (/** @type {?} */ (el)).label, }); } if (this.myForm.value["fieldKey"]) { if (el.parameterId === (/** @type {?} */ ((/** @type {?} */ ((/** @type {?} */ ((/** @type {?} */ (this.changeItem)).filter((/** * @param {?} field * @return {?} */ (field) => field.key === this.myForm.value["fieldKey"]))))[0])).templateOptions)).parameterId) { (/** @type {?} */ (this.changeToValue)).push({ value: (/** @type {?} */ (el)).value, label: (/** @type {?} */ (el)).label, }); } } })); } if (!!this.myForm.value["fieldKey"]) { this.newSelectType(this.myForm.value["fieldKey"]); } /** @type {?} */ let inputIsNull = [ { value: "inputIsNull", label: "为空", }, ]; switch (this.myForm.value["fieldType"]) { case "select": this.selected = [ { value: "selected", label: "选中选项值", }, { value: "selectAny", label: "任意选项值", }, ]; /** @type {?} */ const selectIsNull = [ { value: "selectIsNull", label: "选项值为空", }, ]; if (this.myForm.value["required"] === false) { this.selected = this.selected.concat(selectIsNull); } break; case "upload": this.selected = [ { value: "inputIsFill", label: "不为空", }, ]; if (this.myForm.value["required"] === false) { this.selected = this.selected.concat(inputIsNull); } break; case "datetime": this.selected = [ { value: "dateTimeIsFill", label: "不为空", }, { value: "dateTimeIsSpec", label: "特定时间", }, ]; break; default: this.selected = [ { value: "inputIsFill", label: "不为空", }, { value: "inputIsSpec", label: "特定值", }, ]; if (this.myForm.value["required"] === false) { this.selected = this.selected.concat(inputIsNull); } break; } if (!!this.myForm.value["changeFieldType"]) { this.setChangeAction(); } if (!!this.myForm.value["changeActions"]) { this.changeActionChangeItem(this.myForm.value["changeActions"]); } } /** * @param {?} e * @return {?} */ newSelectType(e) { if (!!(/** @type {?} */ (this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === e))[0].templateOptions)).selectType) { this.selectType = (/** @type {?} */ (this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === e))[0].templateOptions)).selectType === "multiple" ? "multiple" : "default"; this.multiple = this.selectType; if (((/** @type {?} */ (["hideState", "showState"]))).includes(this.myForm.value["changeToItems"])) { this.multiple = this.selectType = "multiple"; } } else { this.selectType = "default"; } this.initFixedValueOne(this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === e))[0]); } /** * @param {?} e * @return {?} */ selectedChange(e) { /** @type {?} */ const list = [ ...this.selectItemList, ...this.fieldKeyList, ...this.changeActionList, ...this.changeToItemList, ...this.lengthList, ...this.numbersList, ...this.specValueList, ]; this.setValueToNull(list); if (this.myForm.value["selected"] === "selected") { this.selectItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).setValidators(Validators.required); })); (/** @type {?} */ (((/** @type {?} */ (this.myForm))))).get("specValue").clearValidators(); (/** @type {?} */ ((/** @type {?} */ (((/** @type {?} */ (this.myForm))))).get("specValue"))).reset(); } else { if (this.myForm.value["selected"] === "inputIsSpec") { (/** @type {?} */ (this.myForm.get("specValue"))).setValidators(Validators.required); (/** @type {?} */ (this.myForm.get("specValue"))).reset(); } else { (/** @type {?} */ (this.myForm.get("specValue"))).clearValidators(); (/** @type {?} */ (this.myForm.get("specValue"))).reset(); } this.selectItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).clearValidators(); (/** @type {?} */ (this.myForm.get(el))).reset(); })); } } /** * @param {?} list * @return {?} */ setValueToNull(list) { if (!_.isEmpty(list)) { list.forEach((/** * @param {?} el * @return {?} */ (el) => { this.myForm.controls[el].setValue(null); this.myForm.controls[el].setErrors(null); })); } this.myForm.controls["fixedValue"].setValue(null); (/** @type {?} */ (this.myForm.get("fixedValue"))).clearValidators(); } /** * @param {?} e * @return {?} */ selectItemChange(e) { if (!!e && e.length > 0) { /** @type {?} */ let list = []; this.selectItem.forEach((/** * @param {?} el * @return {?} */ (el) => { if ((/** @type {?} */ (e)).includes(el.value)) { (/** @type {?} */ (list)).push(el); } })); this.myForm.controls.selectItem.setValue(null); this.myForm.controls.selectItem.setValue(list); } else { this.myForm.controls.selectItem.setValue(null); } } /** * @param {?} e * @return {?} */ changeToItemChange(e) { if (!!e && Array.isArray(e)) { /** @type {?} */ let list = []; /** @type {?} */ const valueList = e; this.changeToItem.forEach((/** * @param {?} el * @return {?} */ (el) => { if ((/** @type {?} */ (((/** @type {?} */ (valueList))))).includes(el.value)) { (/** @type {?} */ (list)).push(el); } })); this.myForm.controls.changeToItem.setValue(null); this.myForm.controls.changeToItem.setValue(list); } else { /** @type {?} */ const value = (/** @type {?} */ (e)); if (!!e) { /** @type {?} */ let list = []; this.changeToItem.forEach((/** * @param {?} el * @return {?} */ (el) => { if (value === el.value) { (/** @type {?} */ (list)).push(el); } })); this.myForm.controls.changeToItem.setValue(null); this.myForm.controls.changeToItem.setValue(list); } } } /** * @param {?} e * @return {?} */ fieldKeyChange(e) { /** @type {?} */ const list = [ ...this.changeActionList, ...this.changeToItemList, ...this.lengthList, ...this.numbersList, ]; this.changeToItem = []; this.setValueToNull(list); if (((/** @type {?} */ (this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === e))))).length > 0) { /** @type {?} */ const field = this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === e))[0]; this.myForm.controls.changeFieldType.setValue(field.type); this.myForm.controls.changeFieldName.setValue((/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).label); this.nzPrecision = (/** @type {?} */ (field)).templateOptions.precision || 0; this.limit.max = (/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).max || null; this.limit.min = (/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).min || null; this.limit.maxLength = (/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).maxLength || null; this.limit.minLength = (/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).minLength || null; this.initFixedValueOne(field); this.newSelectType(e); if (!_.isEmpty(this.options)) { this.changeToValue = []; this.options.forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.parameterId === (/** @type {?} */ ((/** @type {?} */ (field)).templateOptions)).parameterId) { (/** @type {?} */ (this.changeToValue)).push({ value: (/** @type {?} */ (el)).value, label: (/** @type {?} */ (el)).label, }); } })); } } this.setChangeAction(); } /** * @param {?} value * @return {?} */ newPrimitive(value) { if (value.primitiveProperty === null || value.primitiveProperty === undefined) { value.primitiveProperty = {}; } /** @type {?} */ const list = [ "maxLength", "minLength", "max", "min", "precision", "maxDate", "minDate", ]; list.forEach((/** * @param {?} key * @return {?} */ (key) => { if (value.primitiveProperty[key] === null || value.primitiveProperty[key] === undefined) { value.primitiveProperty[key] = value.templateOptions[key]; } })); } /** * @param {?} field * @return {?} */ initFixedValueOne(field) { this.newPrimitive(field); this.fixedValue.minLength = (/** @type {?} */ (field.templateOptions)).minLength || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).minLength || 0; this.fixedValue.maxLength = (/** @type {?} */ (field.templateOptions)).maxLength || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).maxLength || 500; this.fixedValue.nzPrecision = (/** @type {?} */ (field.templateOptions)).precision || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).precision || 0; this.fixedValue.max = (/** @type {?} */ (field.templateOptions)).max || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).max || 999999; this.fixedValue.min = (/** @type {?} */ (field.templateOptions)).min || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).min || -999999; this.fixedValue.maxDate = (/** @type {?} */ (field.templateOptions)).maxDate || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).maxDate || "2050-12-31"; this.fixedValue.minDate = (/** @type {?} */ (field.templateOptions)).minDate || (/** @type {?} */ ((/** @type {?} */ (field)).primitiveProperty)).minDate || "1900-01-01"; } /** * @return {?} */ setFixedValueValidators() { if (!!this.fixedValue.min || this.fixedValue.min === 0) { (/** @type {?} */ (this.myForm .get("fixedValue"))).setValidators(Validators.min(this.fixedValue.min)); } if (!!this.fixedValue.minLength) { (/** @type {?} */ (this.myForm .get("fixedValue"))).setValidators(Validators.minLength(this.fixedValue.minLength)); } if (!!this.fixedValue.max) { (/** @type {?} */ (this.myForm .get("fixedValue"))).setValidators(Validators.max(this.fixedValue.max)); } if (!!this.fixedValue.maxLength) { (/** @type {?} */ (this.myForm .get("fixedValue"))).setValidators(Validators.maxLength(this.fixedValue.maxLength)); } } /** * @return {?} */ setChangeAction() { /** @type {?} */ const requireList = [ { value: "requireState", label: "必填状态变更", }, ]; if (!!this.myForm.value["changeFieldType"]) { if (this.myForm.value["changeFieldType"] === "select") { this.changeAction = [ { value: "valueChange", label: "值变更", }, { value: "editState", label: "编辑状态变更", }, { value: "hideState", label: "隐藏选项值", }, { value: "showState", label: "提供选项值", }, ]; } else if (this.myForm.value["changeFieldType"] === "numbers") { this.changeAction = [ { value: "fixedValueChange", label: "固定值变更", }, { value: "limitNumber", label: "限定数值范围", }, { value: "editState", label: "编辑状态变更", }, ]; } else if (this.myForm.value["changeFieldType"] === "upload") { this.changeAction = [ { value: "editState", label: "编辑状态变更", }, ]; } else if (this.myForm.value["changeFieldType"] === "datetime") { this.changeAction = [ { value: "fixedValueChange", label: "固定值变更", }, { value: "editState", label: "编辑状态变更", }, { value: "limitDateTime", label: "限定时间范围", }, ]; } else { this.changeAction = [ { value: "fixedValueChange", label: "固定值变更", }, { value: "limitLength", label: "限定字符长度", }, { value: "editState", label: "编辑状态变更", }, ]; } } if (!!this.myForm.value["fieldKey"] && !(/** @type {?} */ ((/** @type {?} */ ((/** @type {?} */ ((/** @type {?} */ (this.changeItem)).filter((/** * @param {?} el * @return {?} */ (el) => el.key === this.myForm.value["fieldKey"]))))[0])).templateOptions)).required) { this.changeAction = this.changeAction.concat(requireList); } } /** * @param {?} type * @return {?} */ changeActionChange(type) { /** @type {?} */ const list = [ ...this.changeToItemList, ...this.lengthList, ...this.numbersList, ]; this.setValueToNull(list); if (!!type) { this.myForm.controls.changeAction.setValue(this.changeAction.filter((/** * @param {?} el * @return {?} */ (el) => el.value === type))); } else { this.myForm.controls.changeAction.setValue(null); } this.changeActionChangeItem(type); if (!!this.myForm.value["fieldKey"]) { /** @type {?} */ const field = this.changeItem.filter((/** * @param {?} el * @return {?} */ (el) => el.key === this.myForm.value["fieldKey"]))[0]; this.initFixedValue(field); } } /** * @param {?} type * @return {?} */ changeActionChangeItem(type) { this.changeToItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).setValidators(Validators.required); })); [...this.lengthList, ...this.numbersList].forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).clearValidators(); })); switch (type) { case "valueChange": this.changeToItem = this.changeToValue; this.multiple = this.selectType; break; case "hideState": case "showState": this.changeToItem = this.changeToValue; this.multiple = "multiple"; break; case "editState": this.changeToItem = this.editType; this.multiple = "default"; break; case "requireState": this.changeToItem = this.RequiredType; this.multiple = "default"; break; case "limitLength": this.changeToItem = []; this.changeToItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).clearValidators(); })); if (!this.myForm.value["maxLengthIncludes"]) { (/** @type {?} */ (this.myForm.get("maxLengthIncludes"))).setValue("includes"); } if (!this.myForm.value["minLengthIncludes"]) { (/** @type {?} */ (this.myForm.get("minLengthIncludes"))).setValue("includes"); } (/** @type {?} */ (this.myForm.get("maxLength"))).setValidators([Validators.required]); (/** @type {?} */ (this.myForm.get("minLength"))).setValidators([Validators.required]); break; case "limitNumber": this.changeToItem = []; this.changeToItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).clearValidators(); })); if (!this.myForm.value["maxIncludes"]) { (/** @type {?} */ (this.myForm.get("maxIncludes"))).setValue("includes"); } if (!this.myForm.value["minIncludes"]) { (/** @type {?} */ (this.myForm.get("minIncludes"))).setValue("includes"); } (/** @type {?} */ (this.myForm.get("max"))).setValidators([Validators.required]); (/** @type {?} */ (this.myForm.get("min"))).setValidators([Validators.required]); break; case "fixedValueChange": this.changeToItem = []; this.changeToItemList.forEach((/** * @param {?} el * @return {?} */ (el) => { (/** @type {?} */ (this.myForm.get(el))).clearValidators(); })); break; default: break; } } /** * @return {?} */ minNzMax() { /** @type {?} */ let num = 999999; if (!!(/** @type {?} */ (this.limit)).max) { num = (/** @type {?} */ (this.limit)).max; } if (!!(/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).max) { num = (/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).max; } return num; } /** * @return {?} */ minNzMin() { /** @type {?} */ let num = null; if (!!(/** @type {?} */ (this.limit)).min) { num = (/** @type {?} */ (this.limit)).min; } return num; } /** * @return {?} */ maxNzMax() { /** @type {?} */ let num = 999999; if (!!(/** @type {?} */ (this.limit)).max) { num = (/** @type {?} */ (this.limit)).max; } return num; } /** * @return {?} */ maxNzMin() { /** @type {?} */ let num = null; if (!!(/** @type {?} */ (this.limit)).min) { num = (/** @type {?} */ (this.limit)).min; } if (!!(/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).min) { num = (/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).min; } return num; } /////////////////////////////////////////////////// /** * @return {?} */ minLengthNzMax() { /** @type {?} */ let num = 500; if (!!(/** @type {?} */ (this.limit)).maxLength) { num = (/** @type {?} */ (this.limit)).maxLength; } if (!!(/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).maxLength) { num = (/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).maxLength; } return num; } /** * @return {?} */ minLengthNzMin() { /** @type {?} */ let num = 0; if (!!(/** @type {?} */ (this.limit)).minLength) { num = (/** @type {?} */ (this.limit)).minLength; } return num; } /** * @return {?} */ maxLengthNzMax() { /** @type {?} */ let num = 500; if (!!(/** @type {?} */ (this.limit)).maxLength) { num = (/** @type {?} */ (this.limit)).maxLength; } return num; } /** * @return {?} */ maxLengthNzMin() { /** @type {?} */ let num = null; if (!!(/** @type {?} */ (this.limit)).minLength) { num = (/** @type {?} */ (this.limit)).minLength; } if (!!(/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).minLength) { num = (/** @type {?} */ ((/** @type {?} */ (this.myForm)).value)).minLength; } return num; } // 获取限定值 /** * @param {?} field * @return {?} */ initFixedValue(field) { this.initFixedValueOne(field); /** @type {?} */ const eventList = this.myForm.root.value["eventList"]; if (!_.isEmpty(eventList)) { /** @type {?} */ const otherList = (/** @type {?} */ (eventList)).filter((/** * @param {?} el * @return {?} */ (el) => el.code !== this.myForm.value["code"] && el.fieldKey === this.myForm.value["fieldKey"])); if (!_.isEmpty(otherList)) { /** @type {?} */ const maxList = []; /** @type {?} */ const minList = []; /** @type {?} */ const maxLengthList = []; /** @type {?} */ const minLengthList = []; /** @type {?} */ let min = Math.max.apply(Math, otherList.map((/** * @param {?} el * @return {?} */ (el) => { return el.min; }))); /** @type {?} */ let max = Math.min.apply(Math, otherList.map((/** * @param {?} el * @return {?} */ (el) => { return el.max; }))); /** @type {?} */ let minLength = Math.max.apply(Math, otherList.map((/** * @param {?} el * @return {?} */ (el) => { return el.minLength; }))); /** @type {?} */ let maxLength = Math.min.apply(Math, otherList.map((/** * @param {?} el * @return {?} */ (el) => { return el.maxLength; }))); if (!!min || min === 0) { otherList.forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.min === min) { minList.push(el); } })); } if (!!max || max === 0) { otherList.forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.max === max) { maxList.push(el); } })); } if (!!maxLength || maxLength === 0) { otherList.forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.maxLength === maxLength) { maxLengthList.push(el); } })); } if (!!minLength || minLength === 0) { otherList.forEach((/** * @param {?} el * @return {?} */ (el) => { if (el.minLength === minLength) { minLengthList.push(el); } })); } if (!_.isEmpty(maxList)) { if (maxList.some((/** * @param {?} el * @return {?} */ (el) => el.maxIncludes === "notIncludes"))) { this.fixedValue.max = Math.min(this.fixedValue.max, max - 1); } else { this.fixedValue.max = Math.min(this.fixedValue.max, max); } } if (!_.isEmpty(minList)) { if (minList.some((/** * @param {?} el * @return {?} */ (el) => el.minIncludes === "notIncludes"))) { this.fixedValue.min = Math.max(this.fixedValue.min, min - 1); } else { this.fixedValue.min = Math.max(this.fixedValue.min, min); } } if (!_.isEmpty(minLengthList)) { if (minLengthList.some((/** * @param {?} el * @return {?} */ (el) => el.minLengthIncludes === "notIncludes"))) { this.fixedValue.minLength = Math.max(this.fixedValue.minLength, minLength - 1); } else { this.fixedValue.minLength = Math.max(this.fixedValue.minLength, minLength); } } if (!_.isEmpty(maxLengthList)) { if (maxLengthList.some((/** * @param {?} el * @return {?} */ (el) => el.maxLengthIncludes === "notIncludes"))) { this.fixedValue.maxLength = Math.min(this.fixedValue.maxLength, maxLength - 1); } else { this.fixedValue.maxLength = Math.min(this.fixedValue.maxLength, maxLength); } } } } this.setFixedValueValidators(); } } EventItemComponent.decorators = [ { type: Component, args: [{ selector: "demo-event-item", template: "<ng-container [formGroup]=\"myForm\">\n <div class=\"w-100 flex-h\">\n <div class=\"w-100\">\n <nz-form-item class=\"flex-h mb-0\">\n <nz-form-control\n nz-col\n nzSpan=\"4\"\n class=\"pr-3\"\n nzErrorTip=\"\u8BF7\u9009\u62E9\u53D8\u66F4\u7C7B\u578B\"\n >\n <nz-select\n id=\"selected\"\n formControlName=\"selected\"\n nzPlaceHolder=\"\u53D8\u66F4\u7C7B\u578B\"\n nzShowSearch\n nzDropdownMatchSelectWidth=\"true\"\n (ngModelChange)=\"selectedChange($event)\"\n >\n <nz-option\n *ngFor=\"let item of selected\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"5\"\n class=\"pr-3\"\n nzErrorTip=\"\u8BF7\u9009\u62E9\u53D8\u66F4\u7C7B\u578B\u503C\"\n *ngIf=\"myForm.value['selected'] === 'selected'\"\n >\n <nz-select\n id=\"selectItem\"\n nzMode=\"multiple\"\n [nzMaxTagCount]=\"3\"\n formControlName=\"selectItems\"\n nzDropdownMatchSelectWidth=\"true\"\n (ngModelChange)=\"selectItemChange($event)\"\n nzPlaceHolder=\"\u53D8\u66F4\u7C7B\u578B\u503C\"\n style=\"width: 160px\"\n nzShowSearch\n >\n <nz-option\n *ngFor=\"let item of selectItem\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"5\"\n class=\"pr-3\"\n *ngIf=\"myForm.value['selected'] === 'inputIsSpec'\"\n nzErrorTip=\"\u8BF7\u8F93\u5165\u7279\u5B9A\u503C\"\n >\n <input nz-input placeholder=\"\u7279\u5B9A\u503C\" formControlName=\"specValue\" />\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"5\"\n class=\"pr-3\"\n *ngIf=\"myForm.value['selected'] === 'dateTimeIsSpec'\"\n nzErrorTip=\"\u8BF7\u8F93\u5165\u7279\u5B9A\u65F6\u95F4\"\n >\n <!-- <demo-datetime\n formControlName=\"dateTimeIsSpec\"\n [maxDate]=\"fixedValue.maxDate\"\n [minDate]=\"fixedValue.minDate\"\n >\n </demo-datetime> -->\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"5\"\n class=\"pr-3\"\n nzErrorTip=\"\u8BF7\u9009\u62E9\u53D8\u66F4\u5BF9\u8C61\"\n >\n <nz-select\n id=\"fieldKey\"\n formControlName=\"fieldKey\"\n nzPlaceHolder=\"\u53D8\u66F4\u5BF9\u8C61\"\n nzShowSearch\n nzDropdownMatchSelectWidth=\"true\"\n (ngModelChange)=\"fieldKeyChange($event)\"\n >\n <nz-option\n *ngFor=\"let item of changeItem\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.key\"\n [nzLabel]=\"item.templateOptions.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.templateOptions.label }}\n <span *ngIf=\"!!item?.tableName\">--{{ item?.tableName }}</span>\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"4\"\n class=\"pr-3\"\n nzErrorTip=\"\u8BF7\u9009\u62E9\u53D8\u66F4\u52A8\u4F5C\"\n >\n <nz-select\n id=\"changeAction\"\n formControlName=\"changeActions\"\n nzPlaceHolder=\"\u53D8\u66F4\u52A8\u4F5C\"\n nzShowSearch\n nzDropdownMatchSelectWidth=\"true\"\n (ngModelChange)=\"changeActionChange($event)\"\n >\n <nz-option\n *ngFor=\"let item of changeAction\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n <nz-form-control\n nz-col\n nzSpan=\"4\"\n class=\"\"\n nzErrorTip=\"\u8BF7\u9009\u62E9\u53D8\u66F4\u7ED3\u679C\"\n *ngIf=\"\n myForm.value['changeActions'] !== 'limitLength' &&\n myForm.value['changeActions'] !== 'limitNumber' &&\n myForm.value['changeActions'] !== 'limitDateTime' &&\n myForm.value['changeActions'] !== 'fixedValueChange'\n \"\n >\n <nz-select\n id=\"changeToItem\"\n formControlName=\"changeToItems\"\n nzPlaceHolder=\"\u53D8\u66F4\u7ED3\u679C\"\n nzShowSearch\n (ngModelChange)=\"changeToItemChange($event)\"\n [nzMode]=\"multiple\"\n [nzMaxTagCount]=\"3\"\n nzDropdownMatchSelectWidth=\"true\"\n >\n <nz-option\n *ngFor=\"let item of changeToItem\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n\n <nz-form-control\n nz-col\n nzSpan=\"4\"\n class=\"\"\n *ngIf=\"myForm.value['changeActions'] === 'fixedValueChange'\"\n nzErrorTip=\"\u56FA\u5B9A\u503C\u586B\u5199\u6709\u8BEF\"\n >\n <ng-container *ngIf=\"myForm.value['changeFieldType'] !== 'numbers'\">\n <input\n nz-input\n id=\"fixedValue\"\n formControlName=\"fixedValue\"\n placeHolder=\"\u56FA\u5B9A\u503C\"\n [maxlength]=\"fixedValue.maxLength\"\n [minlength]=\"fixedValue.minLength\"\n />\n </ng-container>\n\n <ng-container *ngIf=\"myForm.value['changeFieldType'] === 'numbers'\">\n <nz-input-number\n style=\"width: 100%\"\n id=\"fixedValue\"\n formControlName=\"fixedValue\"\n nzPlaceHolder=\"\u56FA\u5B9A\u503C\"\n [nzMax]=\"fixedValue.max\"\n [nzMin]=\"fixedValue.min\"\n [nzPrecision]=\"fixedValue.nzPrecision\"\n ></nz-input-number>\n </ng-container>\n </nz-form-control>\n\n <div\n class=\"new-flex-1\"\n *ngIf=\"myForm.value['changeActions'] === 'limitNumber'\"\n >\n <div class=\"mb-2 flex-h\">\n <nz-form-control class=\"mb-2\" nzErrorTip=\"\u6700\u5C0F\u503C\u586B\u5199\u6709\u8BEF\">\n <nz-input-number\n id=\"min\"\n style=\"width: 100%\"\n nzPlaceHolder=\"\u6700\u5C0F\u503C\"\n formControlName=\"min\"\n [nzMax]=\"minNzMax()\"\n [nzMin]=\"minNzMin()\"\n [nzPrecision]=\"nzPrecision\"\n class=\"mr-3\"\n ></nz-input-number>\n </nz-form-control>\n <nz-form-control>\n <nz-select\n style=\"width: 80px\"\n id=\"minIncludes\"\n formControlName=\"minIncludes\"\n nzDropdownMatchSelectWidth=\"true\"\n nzPlaceHolder=\"\u662F\u5426\u5305\u542B\"\n >\n <nz-option\n *ngFor=\"let item of minIncludes\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n </div>\n\n <div class=\"flex-h\">\n <nz-form-control nz-col nzErrorTip=\"\u6700\u5927\u503C\u586B\u5199\u6709\u8BEF\">\n <nz-input-number\n id=\"max\"\n style=\"width: 100%\"\n nzPlaceHolder=\"\u6700\u5927\u503C\"\n formControlName=\"max\"\n [nzMax]=\"maxNzMax()\"\n [nzMin]=\"maxNzMin()\"\n [nzPrecision]=\"nzPrecision\"\n class=\"mr-3\"\n ></nz-input-number>\n </nz-form-control>\n <nz-form-control>\n <nz-select\n style=\"width: 80px\"\n id=\"maxIncludes\"\n formControlName=\"maxIncludes\"\n nzPlaceHolder=\"\u662F\u5426\u5305\u542B\"\n nzDropdownMatchSelectWidth=\"true\"\n >\n <nz-option\n *ngFor=\"let item of maxIncludes\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n </div>\n </div>\n\n <div\n class=\"new-flex-1\"\n *ngIf=\"myForm.value['changeActions'] === 'limitLength'\"\n >\n <div class=\"mb-2 flex-h\">\n <nz-form-control nz-col nzErrorTip=\"\u6700\u5C0F\u957F\u5EA6\u586B\u5199\u6709\u8BEF\">\n <nz-input-number\n id=\"minLength\"\n style=\"width: 100%\"\n nzPlaceHolder=\"\u6700\u5C0F\u957F\u5EA6\"\n formControlName=\"minLength\"\n nzPrecision=\"0\"\n [nzMax]=\"minLengthNzMax()\"\n [nzMin]=\"minLengthNzMin()\"\n class=\"mr-3\"\n ></nz-input-number>\n </nz-form-control>\n\n <nz-form-control>\n <nz-select\n style=\"width: 80px\"\n id=\"minLengthIncludes\"\n formControlName=\"minLengthIncludes\"\n nzPlaceHolder=\"\u662F\u5426\u5305\u542B\"\n nzDropdownMatchSelectWidth=\"true\"\n >\n <nz-option\n *ngFor=\"let item of minLengthIncludes\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n </div>\n\n <div class=\"flex-h\">\n <nz-form-control nz-col nzErrorTip=\"\u6700\u5927\u957F\u5EA6\u586B\u5199\u6709\u8BEF\">\n <nz-input-number\n id=\"maxLength\"\n style=\"width: 100%\"\n nzPlaceHolder=\"\u6700\u5927\u957F\u5EA6\"\n formControlName=\"maxLength\"\n nzPrecision=\"0\"\n [nzMax]=\"maxLengthNzMax()\"\n [nzMin]=\"maxLengthNzMin()\"\n class=\"mr-3\"\n ></nz-input-number>\n </nz-form-control>\n <nz-form-control>\n <nz-select\n style=\"width: 80px\"\n id=\"maxLengthIncludes\"\n formControlName=\"maxLengthIncludes\"\n nzPlaceHolder=\"\u662F\u5426\u5305\u542B\"\n nzDropdownMatchSelectWidth=\"true\"\n >\n <nz-option\n *ngFor=\"let item of maxIncludes\"\n nzCustomContent\n nzDropdownMatchSelectWidth=\"true\"\n [nzValue]=\"item.value\"\n [nzLabel]=\"item.label\"\n >\n <div class=\"options-item w-95\">\n {{ item.label }}\n </div>\n </nz-option>\n </nz-select>\n </nz-form-control>\n </div>\n </div>\n <div\n class=\"new-flex-1\"\n *ngIf=\"myForm.value['changeActions'] === 'limitDateTime'\"\n >\n <div class=\"mb-2 flex-h\">\n <nz-form-control nz-col nzErrorTip=\"\u6700\u5C0F\u957F\u5EA6\u586B\u5199\u6709\u8BEF\">\n <nz-input-number\n id=\"minLength\"\n style=\"width: 100%\"\n nzPlaceHolder=\"\u6700\u5C0F\u957F\u5EA6\"\n formControlName=\"minLength\"\n nzPrecision=\"0\"\n [nzMax]=\"minLengthNzMax()\"\n [nzMin]=\"minLengthNzMin()\"\n class=\"mr-3\"\n ></nz-input-number>\n </nz-form-control>\n\n <nz-form-control>\n <nz-select\n style=\"width: 80px\"\n id=\"min