@dignite-ng/expand.dynamic-form 3.1.9 → 3.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/dynamic/dynamic-config.component.mjs +2 -2
- package/esm2022/lib/components/form/tree/tree-config.component.mjs +29 -22
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs +28 -22
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs.map +1 -1
- package/lib/components/form/tree/tree-config.component.d.ts +8 -3
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { inject, ChangeDetectorRef, ViewChild, Input, Component, ChangeDetection
|
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { Validators, FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i4 from '@abp/ng.core';
|
|
6
|
-
import { CoreModule } from '@abp/ng.core';
|
|
6
|
+
import { LocalizationService, CoreModule } from '@abp/ng.core';
|
|
7
7
|
import * as i6$1 from '@abp/ng.theme.shared';
|
|
8
8
|
import { ThemeSharedModule } from '@abp/ng.theme.shared';
|
|
9
9
|
import * as i7 from '@ng-bootstrap/ng-bootstrap';
|
|
@@ -1501,6 +1501,7 @@ class TreeConfigComponent {
|
|
|
1501
1501
|
this.isVisible = false;
|
|
1502
1502
|
/**用于确定模态的繁忙状态是否为真 */
|
|
1503
1503
|
this.modalBusy = false;
|
|
1504
|
+
this._LocalizationService = inject(LocalizationService);
|
|
1504
1505
|
}
|
|
1505
1506
|
set type(v) {
|
|
1506
1507
|
this._type = v;
|
|
@@ -1629,12 +1630,25 @@ class TreeConfigComponent {
|
|
|
1629
1630
|
/**更新展开状态 */
|
|
1630
1631
|
updateExpandedState() {
|
|
1631
1632
|
const allKeys = this.getAllNodeKeys(this.nodes);
|
|
1632
|
-
this.isAllExpanded =
|
|
1633
|
+
this.isAllExpanded =
|
|
1634
|
+
allKeys.length > 0 && allKeys.every(key => this.anExpandedNode.includes(key));
|
|
1633
1635
|
}
|
|
1634
1636
|
/**生成GUID */
|
|
1635
1637
|
generateGuid() {
|
|
1636
1638
|
return crypto.randomUUID();
|
|
1637
1639
|
}
|
|
1640
|
+
get keyInput() {
|
|
1641
|
+
return this.nodeForm?.get('key');
|
|
1642
|
+
}
|
|
1643
|
+
SlugRegExValidator() {
|
|
1644
|
+
return (control) => {
|
|
1645
|
+
const regex = /^[a-zA-Z0-9_-]+$/;
|
|
1646
|
+
if (control.value && !regex.test(control.value)) {
|
|
1647
|
+
return { repetition: this._LocalizationService.instant(`Cms::SlugValidatorsText`) };
|
|
1648
|
+
}
|
|
1649
|
+
return null;
|
|
1650
|
+
};
|
|
1651
|
+
}
|
|
1638
1652
|
/**创建节点 */
|
|
1639
1653
|
addNodeBtn() {
|
|
1640
1654
|
this.isVisible = true;
|
|
@@ -1642,7 +1656,7 @@ class TreeConfigComponent {
|
|
|
1642
1656
|
this.selectTree = null;
|
|
1643
1657
|
this.nodeForm = this.fb.group({
|
|
1644
1658
|
title: ['', Validators.required],
|
|
1645
|
-
key: [
|
|
1659
|
+
key: ['', [Validators.required, this.SlugRegExValidator()]],
|
|
1646
1660
|
isChecked: [false],
|
|
1647
1661
|
children: new FormArray([]),
|
|
1648
1662
|
});
|
|
@@ -1654,7 +1668,7 @@ class TreeConfigComponent {
|
|
|
1654
1668
|
this.selectTree = node;
|
|
1655
1669
|
this.nodeForm = this.fb.group({
|
|
1656
1670
|
title: [node.title, Validators.required],
|
|
1657
|
-
key: [node.key, Validators.required],
|
|
1671
|
+
key: [node.key, [Validators.required, this.SlugRegExValidator()]],
|
|
1658
1672
|
isChecked: [node.origin?.isChecked ?? false],
|
|
1659
1673
|
children: new FormArray([]),
|
|
1660
1674
|
});
|
|
@@ -1666,7 +1680,7 @@ class TreeConfigComponent {
|
|
|
1666
1680
|
this.selectTree = node;
|
|
1667
1681
|
this.nodeForm = this.fb.group({
|
|
1668
1682
|
title: ['', Validators.required],
|
|
1669
|
-
key: [
|
|
1683
|
+
key: ['', [Validators.required, this.SlugRegExValidator()]],
|
|
1670
1684
|
isChecked: [false],
|
|
1671
1685
|
children: new FormArray([]),
|
|
1672
1686
|
});
|
|
@@ -1693,7 +1707,7 @@ class TreeConfigComponent {
|
|
|
1693
1707
|
}
|
|
1694
1708
|
else {
|
|
1695
1709
|
// 编辑节点
|
|
1696
|
-
this.
|
|
1710
|
+
this.updateNodeByReference(selectTree.origin, value);
|
|
1697
1711
|
}
|
|
1698
1712
|
}
|
|
1699
1713
|
else {
|
|
@@ -1726,19 +1740,11 @@ class TreeConfigComponent {
|
|
|
1726
1740
|
}
|
|
1727
1741
|
return false;
|
|
1728
1742
|
}
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
node.isChecked = updatedData.isChecked;
|
|
1735
|
-
return true;
|
|
1736
|
-
}
|
|
1737
|
-
if (node.children?.length && this.updateNode(node.children, targetKey, updatedData)) {
|
|
1738
|
-
return true;
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
return false;
|
|
1743
|
+
/**通过引用更新节点 */
|
|
1744
|
+
updateNodeByReference(node, updatedData) {
|
|
1745
|
+
node.title = updatedData.title;
|
|
1746
|
+
node.key = updatedData.key;
|
|
1747
|
+
node.isChecked = updatedData.isChecked;
|
|
1742
1748
|
}
|
|
1743
1749
|
/**删除节点 */
|
|
1744
1750
|
deleteMenuItemBtn(node) {
|
|
@@ -2025,11 +2031,11 @@ class TreeConfigComponent {
|
|
|
2025
2031
|
});
|
|
2026
2032
|
}
|
|
2027
2033
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.ToPinyinService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TreeConfigComponent, selector: "df-tree-config", inputs: { type: "type", selected: "selected", Entity: "Entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }, { propertyName: "nodeModalSubmit", first: true, predicate: ["nodeModalSubmit"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formEntity\">\r\n <div formGroupName=\"formConfiguration\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label \">{{'AbpDynamicForm::Nodes' | abpLocalization}}</label>\r\n <button *ngIf=\"hasAnyNodeWithChildren()\" class=\"btn btn-sm btn-light ms-2\"\r\n style=\"--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;\" type=\"button\"\r\n (click.stop)=\"toggleExpandAll()\">\r\n <i class=\"fa\" [ngClass]=\"isAllExpanded ? 'fa-compress' : 'fa-expand'\"></i>\r\n </button>\r\n <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\r\n (click.stop)=\"addNodeBtn()\">{{'AbpDynamicForm::AddNode' |\r\n abpLocalization}}</button>\r\n <div class=\"border p-2 rounded-2 mt-2\">\r\n <abp-tree class=\"mb-2\" [nodes]=\"nodes\" [checkable]=\"false\" (dropOver)=\"dropOver($event)\"\r\n (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\" [draggable]=\"true\">\r\n <ng-template #menu let-node>\r\n <button ngbDropdownItem (click.stop)=\"editItemBtn(node)\"><i\r\n class=\" me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"createChildItemBtn(node)\"><i\r\n class=\" me-1 fa fa-plus\"></i>{{'AbpDynamicForm::AddSubNode' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"deleteMenuItemBtn(node)\"><i\r\n class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' |\r\n abpLocalization}}</button>\r\n </ng-template>\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input type=\"checkbox\" [checked]=\"node.origin?.isChecked\"\r\n [attr.data-indeterminate]=\"hasChildrenChecked(node)\" class=\"form-check-input me-2\">\r\n {{node.title}}\r\n </div>\r\n </ng-template>\r\n <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\r\n <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\r\n <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\r\n </ng-template>\r\n\r\n <ng-template #minusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z\" />\r\n </svg>\r\n </ng-template>\r\n\r\n <ng-template #plusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z\" />\r\n </svg>\r\n </ng-template>\r\n </abp-tree>\r\n <div *ngIf=\"nodes.length === 0\" class=\"text-muted \">{{'AbpDynamicForm::PleaseAddNode' |\r\n abpLocalization}}</div>\r\n </div>\r\n <div *ngIf=\"TreeOptions?.errors?.required\" class=\"invalid-feedback \">\r\n {{'AbpValidation::ThisFieldIsRequired.' | abpLocalization: 'Nodes'}}\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMultiple($event)\"\r\n formControlName=\"TreeView.Multiple\" id=\"Multiple\">\r\n <label class=\"form-check-label\" for=\"Multiple\">\r\n {{'AbpDynamicForm::Multiple' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\r\n #submitclick></button>\r\n </div>\r\n</form>\r\n\r\n\r\n<!-- [options]=\"{ size: CurrentSelectionTableControlName==='Matrix'?'xl':'' ,scrollable:false }\" (visibleChange)=\"tableSelectVisibleChange($event)\"-->\r\n<abp-modal [(visible)]=\"isVisible\" [busy]=\"modalBusy\">\r\n <ng-template #abpHeader>\r\n <h3>{{isCreateChild ? ('AbpDynamicForm::AddSubNode' | abpLocalization) : (selectTree ? ('AbpUi::Edit' |\r\n abpLocalization) : ('Cms::New' | abpLocalization))}}</h3>\r\n </ng-template>\r\n <ng-template #abpBody>\r\n <ng-template #loaderRef>\r\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\r\n </ng-template>\r\n <ng-container *ngIf=\"nodeForm; else loaderRef\">\r\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"nodeForm\" (submit)=\"createOrEditSave()\">\r\n <button type=\"submit\" #nodeModalSubmit style=\"display: none\"></button>\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::NodeItemText' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" [placeholder]=\"\"\r\n (blur)=\"disPlayNameInputBlur($event)\" />\r\n </div>\r\n <!-- <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::SelectListItemValue' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"key\" [placeholder]=\"\" />\r\n </div> -->\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"isChecked\" id=\"isSelected\">\r\n <label class=\"form-check-label\" for=\"isSelected\">\r\n {{'AbpDynamicForm::Selected' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #abpFooter>\r\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\r\n <abp-button iconClass=\"fa fa-check\" [disabled]=\"!nodeForm.valid\"\r\n (abpClick)=\"nodeModalSubmit.nativeElement.click()\">{{'AbpUi::Save' |\r\n abpLocalization}}</abp-button>\r\n </ng-template>\r\n</abp-modal>", styles: ["input[type=checkbox]:indeterminate{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i6$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i6$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i6$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i7.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: i8.TreeNodeTemplateDirective, selector: "[abpTreeNodeTemplate],[abp-tree-node-template]" }, { kind: "directive", type: i8.ExpandedIconTemplateDirective, selector: "[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]" }, { kind: "component", type: i8.TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
2034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.5", type: TreeConfigComponent, selector: "df-tree-config", inputs: { type: "type", selected: "selected", Entity: "Entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }, { propertyName: "nodeModalSubmit", first: true, predicate: ["nodeModalSubmit"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formEntity\">\r\n <div formGroupName=\"formConfiguration\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label \">{{'AbpDynamicForm::Nodes' | abpLocalization}}</label>\r\n <button *ngIf=\"hasAnyNodeWithChildren()\" class=\"btn btn-sm btn-light ms-2\"\r\n style=\"--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;\" type=\"button\"\r\n (click.stop)=\"toggleExpandAll()\">\r\n <i class=\"fa\" [ngClass]=\"isAllExpanded ? 'fa-compress' : 'fa-expand'\"></i>\r\n </button>\r\n <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\r\n (click.stop)=\"addNodeBtn()\">{{'AbpDynamicForm::AddNode' |\r\n abpLocalization}}</button>\r\n <div class=\"border p-2 rounded-2 mt-2\">\r\n @if (nodes.length>0) {\r\n <abp-tree class=\"mb-2\" [nodes]=\"nodes\" [checkable]=\"false\" (dropOver)=\"dropOver($event)\"\r\n (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\" [draggable]=\"true\">\r\n <ng-template #menu let-node>\r\n <button ngbDropdownItem (click.stop)=\"editItemBtn(node)\"><i\r\n class=\" me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"createChildItemBtn(node)\"><i\r\n class=\" me-1 fa fa-plus\"></i>{{'AbpDynamicForm::AddSubNode' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"deleteMenuItemBtn(node)\"><i\r\n class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' |\r\n abpLocalization}}</button>\r\n </ng-template>\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input type=\"checkbox\" [checked]=\"node.origin?.isChecked\"\r\n [attr.data-indeterminate]=\"hasChildrenChecked(node)\" class=\"form-check-input me-2\">\r\n {{node.title}}\r\n </div>\r\n </ng-template>\r\n <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\r\n <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\r\n <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\r\n </ng-template>\r\n <ng-template #minusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z\" />\r\n </svg>\r\n </ng-template>\r\n <ng-template #plusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z\" />\r\n </svg>\r\n </ng-template>\r\n </abp-tree>\r\n }\r\n <div *ngIf=\"nodes.length === 0\" class=\"text-muted \">{{'AbpDynamicForm::PleaseAddNode' |\r\n abpLocalization}}</div>\r\n </div>\r\n <div *ngIf=\"TreeOptions?.errors?.required\" class=\"invalid-feedback \">\r\n {{'AbpValidation::ThisFieldIsRequired.' | abpLocalization: 'Nodes'}}\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMultiple($event)\"\r\n formControlName=\"TreeView.Multiple\" id=\"Multiple\">\r\n <label class=\"form-check-label\" for=\"Multiple\">\r\n {{'AbpDynamicForm::Multiple' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\r\n #submitclick></button>\r\n </div>\r\n</form>\r\n\r\n\r\n<!-- [options]=\"{ size: CurrentSelectionTableControlName==='Matrix'?'xl':'' ,scrollable:false }\" (visibleChange)=\"tableSelectVisibleChange($event)\"-->\r\n<abp-modal [(visible)]=\"isVisible\" [busy]=\"modalBusy\">\r\n <ng-template #abpHeader>\r\n <h3>{{isCreateChild ? ('AbpDynamicForm::AddSubNode' | abpLocalization) : (selectTree ? ('AbpUi::Edit' |\r\n abpLocalization) : ('Cms::New' | abpLocalization))}}</h3>\r\n </ng-template>\r\n <ng-template #abpBody>\r\n <ng-template #loaderRef>\r\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\r\n </ng-template>\r\n <ng-container *ngIf=\"nodeForm; else loaderRef\">\r\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"nodeForm\" (submit)=\"createOrEditSave()\">\r\n <button type=\"submit\" #nodeModalSubmit style=\"display: none\"></button>\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::NodeItemText' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" [placeholder]=\"\"\r\n (blur)=\"disPlayNameInputBlur($event)\" />\r\n </div>\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::SelectListItemValue' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"key\" [placeholder]=\"\" />\r\n <div class=\"text-danger invalid-feedback\" *ngIf=\"keyInput?.errors?.repetition\">\r\n {{keyInput?.errors?.repetition}}\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"isChecked\" id=\"isSelected\">\r\n <label class=\"form-check-label\" for=\"isSelected\">\r\n {{'AbpDynamicForm::Selected' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #abpFooter>\r\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\r\n <abp-button iconClass=\"fa fa-check\" [disabled]=\"!nodeForm.valid\"\r\n (abpClick)=\"nodeModalSubmit.nativeElement.click()\">{{'AbpUi::Save' |\r\n abpLocalization}}</abp-button>\r\n </ng-template>\r\n</abp-modal>", styles: ["input[type=checkbox]:indeterminate{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i6$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i6$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i6$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i7.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i7.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: i8.TreeNodeTemplateDirective, selector: "[abpTreeNodeTemplate],[abp-tree-node-template]" }, { kind: "directive", type: i8.ExpandedIconTemplateDirective, selector: "[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]" }, { kind: "component", type: i8.TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
2029
2035
|
}
|
|
2030
2036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeConfigComponent, decorators: [{
|
|
2031
2037
|
type: Component,
|
|
2032
|
-
args: [{ selector: 'df-tree-config', template: "<form [formGroup]=\"formEntity\">\r\n <div formGroupName=\"formConfiguration\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label \">{{'AbpDynamicForm::Nodes' | abpLocalization}}</label>\r\n <button *ngIf=\"hasAnyNodeWithChildren()\" class=\"btn btn-sm btn-light ms-2\"\r\n style=\"--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;\" type=\"button\"\r\n (click.stop)=\"toggleExpandAll()\">\r\n <i class=\"fa\" [ngClass]=\"isAllExpanded ? 'fa-compress' : 'fa-expand'\"></i>\r\n </button>\r\n <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\r\n (click.stop)=\"addNodeBtn()\">{{'AbpDynamicForm::AddNode' |\r\n abpLocalization}}</button>\r\n <div class=\"border p-2 rounded-2 mt-2\">\r\n <abp-tree class=\"mb-2\" [nodes]=\"nodes\" [checkable]=\"false\" (dropOver)=\"dropOver($event)\"\r\n (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\" [draggable]=\"true\">\r\n <ng-template #menu let-node>\r\n <button ngbDropdownItem (click.stop)=\"editItemBtn(node)\"><i\r\n class=\" me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"createChildItemBtn(node)\"><i\r\n class=\" me-1 fa fa-plus\"></i>{{'AbpDynamicForm::AddSubNode' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"deleteMenuItemBtn(node)\"><i\r\n class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' |\r\n abpLocalization}}</button>\r\n </ng-template>\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input type=\"checkbox\" [checked]=\"node.origin?.isChecked\"\r\n [attr.data-indeterminate]=\"hasChildrenChecked(node)\" class=\"form-check-input me-2\">\r\n {{node.title}}\r\n </div>\r\n </ng-template>\r\n <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\r\n <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\r\n <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\r\n </ng-template>\r\n
|
|
2038
|
+
args: [{ selector: 'df-tree-config', template: "<form [formGroup]=\"formEntity\">\r\n <div formGroupName=\"formConfiguration\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label \">{{'AbpDynamicForm::Nodes' | abpLocalization}}</label>\r\n <button *ngIf=\"hasAnyNodeWithChildren()\" class=\"btn btn-sm btn-light ms-2\"\r\n style=\"--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;\" type=\"button\"\r\n (click.stop)=\"toggleExpandAll()\">\r\n <i class=\"fa\" [ngClass]=\"isAllExpanded ? 'fa-compress' : 'fa-expand'\"></i>\r\n </button>\r\n <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\r\n (click.stop)=\"addNodeBtn()\">{{'AbpDynamicForm::AddNode' |\r\n abpLocalization}}</button>\r\n <div class=\"border p-2 rounded-2 mt-2\">\r\n @if (nodes.length>0) {\r\n <abp-tree class=\"mb-2\" [nodes]=\"nodes\" [checkable]=\"false\" (dropOver)=\"dropOver($event)\"\r\n (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\" [draggable]=\"true\">\r\n <ng-template #menu let-node>\r\n <button ngbDropdownItem (click.stop)=\"editItemBtn(node)\"><i\r\n class=\" me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"createChildItemBtn(node)\"><i\r\n class=\" me-1 fa fa-plus\"></i>{{'AbpDynamicForm::AddSubNode' |\r\n abpLocalization}}</button>\r\n <button ngbDropdownItem (click.stop)=\"deleteMenuItemBtn(node)\"><i\r\n class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' |\r\n abpLocalization}}</button>\r\n </ng-template>\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input type=\"checkbox\" [checked]=\"node.origin?.isChecked\"\r\n [attr.data-indeterminate]=\"hasChildrenChecked(node)\" class=\"form-check-input me-2\">\r\n {{node.title}}\r\n </div>\r\n </ng-template>\r\n <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\r\n <i aria-hidden=\"true\" *ngIf=\"node.children.length>0\">\r\n <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\r\n </ng-template>\r\n <ng-template #minusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z\" />\r\n </svg>\r\n </ng-template>\r\n <ng-template #plusIcon>\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\r\n fill-rule=\"evenodd\" clip-rule=\"evenodd\">\r\n <path\r\n d=\"M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z\" />\r\n </svg>\r\n </ng-template>\r\n </abp-tree>\r\n }\r\n <div *ngIf=\"nodes.length === 0\" class=\"text-muted \">{{'AbpDynamicForm::PleaseAddNode' |\r\n abpLocalization}}</div>\r\n </div>\r\n <div *ngIf=\"TreeOptions?.errors?.required\" class=\"invalid-feedback \">\r\n {{'AbpValidation::ThisFieldIsRequired.' | abpLocalization: 'Nodes'}}\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMultiple($event)\"\r\n formControlName=\"TreeView.Multiple\" id=\"Multiple\">\r\n <label class=\"form-check-label\" for=\"Multiple\">\r\n {{'AbpDynamicForm::Multiple' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\r\n #submitclick></button>\r\n </div>\r\n</form>\r\n\r\n\r\n<!-- [options]=\"{ size: CurrentSelectionTableControlName==='Matrix'?'xl':'' ,scrollable:false }\" (visibleChange)=\"tableSelectVisibleChange($event)\"-->\r\n<abp-modal [(visible)]=\"isVisible\" [busy]=\"modalBusy\">\r\n <ng-template #abpHeader>\r\n <h3>{{isCreateChild ? ('AbpDynamicForm::AddSubNode' | abpLocalization) : (selectTree ? ('AbpUi::Edit' |\r\n abpLocalization) : ('Cms::New' | abpLocalization))}}</h3>\r\n </ng-template>\r\n <ng-template #abpBody>\r\n <ng-template #loaderRef>\r\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\r\n </ng-template>\r\n <ng-container *ngIf=\"nodeForm; else loaderRef\">\r\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"nodeForm\" (submit)=\"createOrEditSave()\">\r\n <button type=\"submit\" #nodeModalSubmit style=\"display: none\"></button>\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::NodeItemText' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" [placeholder]=\"\"\r\n (blur)=\"disPlayNameInputBlur($event)\" />\r\n </div>\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\">{{ 'AbpDynamicForm::SelectListItemValue' | abpLocalization }}</label>\r\n <input type=\"text\" class=\"form-control\" formControlName=\"key\" [placeholder]=\"\" />\r\n <div class=\"text-danger invalid-feedback\" *ngIf=\"keyInput?.errors?.repetition\">\r\n {{keyInput?.errors?.repetition}}\r\n </div>\r\n </div>\r\n <div class=\"mb-3\">\r\n <div class=\"form-check form-check-inline\">\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"isChecked\" id=\"isSelected\">\r\n <label class=\"form-check-label\" for=\"isSelected\">\r\n {{'AbpDynamicForm::Selected' | abpLocalization}}\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #abpFooter>\r\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\r\n <abp-button iconClass=\"fa fa-check\" [disabled]=\"!nodeForm.valid\"\r\n (abpClick)=\"nodeModalSubmit.nativeElement.click()\">{{'AbpUi::Save' |\r\n abpLocalization}}</abp-button>\r\n </ng-template>\r\n</abp-modal>", styles: ["input[type=checkbox]:indeterminate{opacity:.5}\n"] }]
|
|
2033
2039
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.ToPinyinService }], propDecorators: { type: [{
|
|
2034
2040
|
type: Input
|
|
2035
2041
|
}], selected: [{
|
|
@@ -2793,7 +2799,7 @@ class DynamicConfigComponent {
|
|
|
2793
2799
|
//在容器中创建组件
|
|
2794
2800
|
const { instance } = this.FormconfigRef?.createComponent(fieldControlItem.fieldConfigComponent); //创建组件模板
|
|
2795
2801
|
// /**向创建的组件模板中传值 */
|
|
2796
|
-
instance.selected = this.selected;
|
|
2802
|
+
instance.selected = this.selected ? JSON.parse(JSON.stringify(this.selected)) : this.selected;
|
|
2797
2803
|
instance.type = formControlName;
|
|
2798
2804
|
instance.Entity = this.formEntity;
|
|
2799
2805
|
}
|