@dignite-ng/expand.dynamic-form 3.1.11 → 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 +12 -19
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs +11 -18
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs.map +1 -1
- package/lib/components/form/tree/tree-config.component.d.ts +4 -4
- package/package.json +1 -1
|
@@ -1630,7 +1630,8 @@ class TreeConfigComponent {
|
|
|
1630
1630
|
/**更新展开状态 */
|
|
1631
1631
|
updateExpandedState() {
|
|
1632
1632
|
const allKeys = this.getAllNodeKeys(this.nodes);
|
|
1633
|
-
this.isAllExpanded =
|
|
1633
|
+
this.isAllExpanded =
|
|
1634
|
+
allKeys.length > 0 && allKeys.every(key => this.anExpandedNode.includes(key));
|
|
1634
1635
|
}
|
|
1635
1636
|
/**生成GUID */
|
|
1636
1637
|
generateGuid() {
|
|
@@ -1706,7 +1707,7 @@ class TreeConfigComponent {
|
|
|
1706
1707
|
}
|
|
1707
1708
|
else {
|
|
1708
1709
|
// 编辑节点
|
|
1709
|
-
this.
|
|
1710
|
+
this.updateNodeByReference(selectTree.origin, value);
|
|
1710
1711
|
}
|
|
1711
1712
|
}
|
|
1712
1713
|
else {
|
|
@@ -1739,19 +1740,11 @@ class TreeConfigComponent {
|
|
|
1739
1740
|
}
|
|
1740
1741
|
return false;
|
|
1741
1742
|
}
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
node.isChecked = updatedData.isChecked;
|
|
1748
|
-
return true;
|
|
1749
|
-
}
|
|
1750
|
-
if (node.children?.length && this.updateNode(node.children, targetKey, updatedData)) {
|
|
1751
|
-
return true;
|
|
1752
|
-
}
|
|
1753
|
-
}
|
|
1754
|
-
return false;
|
|
1743
|
+
/**通过引用更新节点 */
|
|
1744
|
+
updateNodeByReference(node, updatedData) {
|
|
1745
|
+
node.title = updatedData.title;
|
|
1746
|
+
node.key = updatedData.key;
|
|
1747
|
+
node.isChecked = updatedData.isChecked;
|
|
1755
1748
|
}
|
|
1756
1749
|
/**删除节点 */
|
|
1757
1750
|
deleteMenuItemBtn(node) {
|
|
@@ -2038,11 +2031,11 @@ class TreeConfigComponent {
|
|
|
2038
2031
|
});
|
|
2039
2032
|
}
|
|
2040
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 }); }
|
|
2041
|
-
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 \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" }] }); }
|
|
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" }] }); }
|
|
2042
2035
|
}
|
|
2043
2036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeConfigComponent, decorators: [{
|
|
2044
2037
|
type: Component,
|
|
2045
|
-
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"] }]
|
|
2046
2039
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.ToPinyinService }], propDecorators: { type: [{
|
|
2047
2040
|
type: Input
|
|
2048
2041
|
}], selected: [{
|
|
@@ -2806,7 +2799,7 @@ class DynamicConfigComponent {
|
|
|
2806
2799
|
//在容器中创建组件
|
|
2807
2800
|
const { instance } = this.FormconfigRef?.createComponent(fieldControlItem.fieldConfigComponent); //创建组件模板
|
|
2808
2801
|
// /**向创建的组件模板中传值 */
|
|
2809
|
-
instance.selected = JSON.parse(JSON.stringify(this.selected));
|
|
2802
|
+
instance.selected = this.selected ? JSON.parse(JSON.stringify(this.selected)) : this.selected;
|
|
2810
2803
|
instance.type = formControlName;
|
|
2811
2804
|
instance.Entity = this.formEntity;
|
|
2812
2805
|
}
|