@dignite-ng/expand.dynamic-form 3.1.8 → 3.1.11
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 +69 -8
- package/esm2022/lib/components/form/tree/tree-control.component.mjs +45 -5
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs +109 -10
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs.map +1 -1
- package/lib/components/form/tree/tree-config.component.d.ts +17 -1
- package/lib/components/form/tree/tree-control.component.d.ts +10 -0
- 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';
|
|
@@ -1493,12 +1493,15 @@ class TreeConfigComponent {
|
|
|
1493
1493
|
this.nodes = [];
|
|
1494
1494
|
/**已展开的节点 */
|
|
1495
1495
|
this.anExpandedNode = [];
|
|
1496
|
+
/**是否全部展开 */
|
|
1497
|
+
this.isAllExpanded = false;
|
|
1496
1498
|
/**是否创建子节点 */
|
|
1497
1499
|
this.isCreateChild = false;
|
|
1498
1500
|
/**模态框状态 */
|
|
1499
1501
|
this.isVisible = false;
|
|
1500
1502
|
/**用于确定模态的繁忙状态是否为真 */
|
|
1501
1503
|
this.modalBusy = false;
|
|
1504
|
+
this._LocalizationService = inject(LocalizationService);
|
|
1502
1505
|
}
|
|
1503
1506
|
set type(v) {
|
|
1504
1507
|
this._type = v;
|
|
@@ -1586,11 +1589,65 @@ class TreeConfigComponent {
|
|
|
1586
1589
|
anExpandedNode.push(event.node.key);
|
|
1587
1590
|
}
|
|
1588
1591
|
this.anExpandedNode = anExpandedNode;
|
|
1592
|
+
// 检查是否所有有子节点的节点都已展开
|
|
1593
|
+
// const allKeys = this.getAllNodeKeys(this.nodes);
|
|
1594
|
+
this.isAllExpanded = anExpandedNode.length > 0;
|
|
1595
|
+
}
|
|
1596
|
+
/**切换展开/收缩所有节点 */
|
|
1597
|
+
toggleExpandAll() {
|
|
1598
|
+
this.isAllExpanded = !this.isAllExpanded;
|
|
1599
|
+
this.anExpandedNode = this.isAllExpanded ? this.getAllNodeKeys(this.nodes) : [];
|
|
1600
|
+
if (!this.isAllExpanded) {
|
|
1601
|
+
this.nodes = [...this.setExpanded(this.nodes, false)];
|
|
1602
|
+
}
|
|
1603
|
+
this.cdr.detectChanges();
|
|
1604
|
+
}
|
|
1605
|
+
//递归设置nodes中的expanded值 并且返回一个数组
|
|
1606
|
+
setExpanded(nodes, expanded) {
|
|
1607
|
+
for (const node of nodes) {
|
|
1608
|
+
node.expanded = expanded;
|
|
1609
|
+
if (node.children?.length) {
|
|
1610
|
+
node.children = this.setExpanded(node.children, expanded);
|
|
1611
|
+
}
|
|
1612
|
+
}
|
|
1613
|
+
return nodes;
|
|
1614
|
+
}
|
|
1615
|
+
/**获取所有有子节点的节点的key */
|
|
1616
|
+
getAllNodeKeys(nodes) {
|
|
1617
|
+
const keys = [];
|
|
1618
|
+
for (const node of nodes) {
|
|
1619
|
+
if (node.children?.length) {
|
|
1620
|
+
keys.push(node.key);
|
|
1621
|
+
keys.push(...this.getAllNodeKeys(node.children));
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1624
|
+
return keys;
|
|
1625
|
+
}
|
|
1626
|
+
/**检查是否有任何节点包含子节点 */
|
|
1627
|
+
hasAnyNodeWithChildren() {
|
|
1628
|
+
return this.getAllNodeKeys(this.nodes).length > 0;
|
|
1629
|
+
}
|
|
1630
|
+
/**更新展开状态 */
|
|
1631
|
+
updateExpandedState() {
|
|
1632
|
+
const allKeys = this.getAllNodeKeys(this.nodes);
|
|
1633
|
+
this.isAllExpanded = allKeys.length > 0 && allKeys.every(key => this.anExpandedNode.includes(key));
|
|
1589
1634
|
}
|
|
1590
1635
|
/**生成GUID */
|
|
1591
1636
|
generateGuid() {
|
|
1592
1637
|
return crypto.randomUUID();
|
|
1593
1638
|
}
|
|
1639
|
+
get keyInput() {
|
|
1640
|
+
return this.nodeForm?.get('key');
|
|
1641
|
+
}
|
|
1642
|
+
SlugRegExValidator() {
|
|
1643
|
+
return (control) => {
|
|
1644
|
+
const regex = /^[a-zA-Z0-9_-]+$/;
|
|
1645
|
+
if (control.value && !regex.test(control.value)) {
|
|
1646
|
+
return { repetition: this._LocalizationService.instant(`Cms::SlugValidatorsText`) };
|
|
1647
|
+
}
|
|
1648
|
+
return null;
|
|
1649
|
+
};
|
|
1650
|
+
}
|
|
1594
1651
|
/**创建节点 */
|
|
1595
1652
|
addNodeBtn() {
|
|
1596
1653
|
this.isVisible = true;
|
|
@@ -1598,7 +1655,7 @@ class TreeConfigComponent {
|
|
|
1598
1655
|
this.selectTree = null;
|
|
1599
1656
|
this.nodeForm = this.fb.group({
|
|
1600
1657
|
title: ['', Validators.required],
|
|
1601
|
-
key: [
|
|
1658
|
+
key: ['', [Validators.required, this.SlugRegExValidator()]],
|
|
1602
1659
|
isChecked: [false],
|
|
1603
1660
|
children: new FormArray([]),
|
|
1604
1661
|
});
|
|
@@ -1610,7 +1667,7 @@ class TreeConfigComponent {
|
|
|
1610
1667
|
this.selectTree = node;
|
|
1611
1668
|
this.nodeForm = this.fb.group({
|
|
1612
1669
|
title: [node.title, Validators.required],
|
|
1613
|
-
key: [node.key, Validators.required],
|
|
1670
|
+
key: [node.key, [Validators.required, this.SlugRegExValidator()]],
|
|
1614
1671
|
isChecked: [node.origin?.isChecked ?? false],
|
|
1615
1672
|
children: new FormArray([]),
|
|
1616
1673
|
});
|
|
@@ -1622,7 +1679,7 @@ class TreeConfigComponent {
|
|
|
1622
1679
|
this.selectTree = node;
|
|
1623
1680
|
this.nodeForm = this.fb.group({
|
|
1624
1681
|
title: ['', Validators.required],
|
|
1625
|
-
key: [
|
|
1682
|
+
key: ['', [Validators.required, this.SlugRegExValidator()]],
|
|
1626
1683
|
isChecked: [false],
|
|
1627
1684
|
children: new FormArray([]),
|
|
1628
1685
|
});
|
|
@@ -1663,6 +1720,7 @@ class TreeConfigComponent {
|
|
|
1663
1720
|
}
|
|
1664
1721
|
this.nodes = [...nodes];
|
|
1665
1722
|
this.syncTreeOptionsFromNodes();
|
|
1723
|
+
this.updateExpandedState();
|
|
1666
1724
|
this.cdr.detectChanges();
|
|
1667
1725
|
this.resetModal();
|
|
1668
1726
|
}
|
|
@@ -1700,6 +1758,7 @@ class TreeConfigComponent {
|
|
|
1700
1758
|
this.deleteNode(this.nodes, node.key);
|
|
1701
1759
|
this.nodes = [...this.nodes];
|
|
1702
1760
|
this.syncTreeOptionsFromNodes();
|
|
1761
|
+
this.updateExpandedState();
|
|
1703
1762
|
this.cdr.detectChanges();
|
|
1704
1763
|
}
|
|
1705
1764
|
/**递归删除节点 */
|
|
@@ -1927,7 +1986,8 @@ class TreeConfigComponent {
|
|
|
1927
1986
|
nodes.splice(insertIndex, 0, newNode);
|
|
1928
1987
|
return true;
|
|
1929
1988
|
}
|
|
1930
|
-
if (nodes[i].children?.length &&
|
|
1989
|
+
if (nodes[i].children?.length &&
|
|
1990
|
+
this.insertNodeBeside(nodes[i].children, targetKey, newNode, position)) {
|
|
1931
1991
|
return true;
|
|
1932
1992
|
}
|
|
1933
1993
|
}
|
|
@@ -1978,11 +2038,11 @@ class TreeConfigComponent {
|
|
|
1978
2038
|
});
|
|
1979
2039
|
}
|
|
1980
2040
|
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 }); }
|
|
1981
|
-
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 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 <abp-tree [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 mt-2\">{{'AbpDynamicForm::PleaseAddNode' |\r\n abpLocalization}}</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.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" }] }); }
|
|
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" }] }); }
|
|
1982
2042
|
}
|
|
1983
2043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeConfigComponent, decorators: [{
|
|
1984
2044
|
type: Component,
|
|
1985
|
-
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 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 <abp-tree [nodes]=\"nodes\" [checkable]=\"false\" (dropOver)=\"dropOver($event)\"\r\n
|
|
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\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"] }]
|
|
1986
2046
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.ToPinyinService }], propDecorators: { type: [{
|
|
1987
2047
|
type: Input
|
|
1988
2048
|
}], selected: [{
|
|
@@ -2011,6 +2071,8 @@ class TreeControlComponent {
|
|
|
2011
2071
|
this.nodes = [];
|
|
2012
2072
|
/**已展开的节点 */
|
|
2013
2073
|
this.anExpandedNode = [];
|
|
2074
|
+
/**是否全部展开 */
|
|
2075
|
+
this.isAllExpanded = false;
|
|
2014
2076
|
}
|
|
2015
2077
|
set fields(v) {
|
|
2016
2078
|
this._fields = v;
|
|
@@ -2088,6 +2150,43 @@ class TreeControlComponent {
|
|
|
2088
2150
|
anExpandedNode.push(event.node.key);
|
|
2089
2151
|
}
|
|
2090
2152
|
this.anExpandedNode = anExpandedNode;
|
|
2153
|
+
// 检查是否所有有子节点的节点都已展开
|
|
2154
|
+
const allKeys = this.getAllNodeKeys(this.nodes);
|
|
2155
|
+
this.isAllExpanded = allKeys.length > 0 && allKeys.every(key => anExpandedNode.includes(key));
|
|
2156
|
+
}
|
|
2157
|
+
/**切换展开/收缩所有节点 */
|
|
2158
|
+
toggleExpandAll() {
|
|
2159
|
+
this.isAllExpanded = !this.isAllExpanded;
|
|
2160
|
+
this.anExpandedNode = this.isAllExpanded ? this.getAllNodeKeys(this.nodes) : [];
|
|
2161
|
+
if (!this.isAllExpanded) {
|
|
2162
|
+
this.nodes = [...this.setExpanded(this.nodes, false)];
|
|
2163
|
+
}
|
|
2164
|
+
this.cdr.detectChanges();
|
|
2165
|
+
}
|
|
2166
|
+
/**递归设置nodes中的expanded值 并且返回一个数组 */
|
|
2167
|
+
setExpanded(nodes, expanded) {
|
|
2168
|
+
for (const node of nodes) {
|
|
2169
|
+
node.expanded = expanded;
|
|
2170
|
+
if (node.children?.length) {
|
|
2171
|
+
node.children = this.setExpanded(node.children, expanded);
|
|
2172
|
+
}
|
|
2173
|
+
}
|
|
2174
|
+
return nodes;
|
|
2175
|
+
}
|
|
2176
|
+
/**获取所有有子节点的节点的key */
|
|
2177
|
+
getAllNodeKeys(nodes) {
|
|
2178
|
+
const keys = [];
|
|
2179
|
+
for (const node of nodes) {
|
|
2180
|
+
if (node.children?.length) {
|
|
2181
|
+
keys.push(node.key);
|
|
2182
|
+
keys.push(...this.getAllNodeKeys(node.children));
|
|
2183
|
+
}
|
|
2184
|
+
}
|
|
2185
|
+
return keys;
|
|
2186
|
+
}
|
|
2187
|
+
/**检查是否有任何节点包含子节点 */
|
|
2188
|
+
hasAnyNodeWithChildren() {
|
|
2189
|
+
return this.getAllNodeKeys(this.nodes).length > 0;
|
|
2091
2190
|
}
|
|
2092
2191
|
/**切换节点选中状态 */
|
|
2093
2192
|
toggleNodeChecked(event, node) {
|
|
@@ -2244,11 +2343,11 @@ class TreeControlComponent {
|
|
|
2244
2343
|
});
|
|
2245
2344
|
}
|
|
2246
2345
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeControlComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TreeControlComponent, selector: "df-tree-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\r\n <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\r\n\r\n <abp-tree [nodes]=\"nodes\" (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\">\r\n
|
|
2346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TreeControlComponent, selector: "df-tree-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\r\n <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</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 <div class=\"border p-2 rounded-2 mt-2\">\r\n <abp-tree [nodes]=\"nodes\" (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\">\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input #checkbox 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>\r\n </div>\r\n\r\n </div>\r\n <button type=\"submit\" style=\"display: none;\" #submitclick></button>\r\n</form>", styles: ["input[type=checkbox]:indeterminate{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { 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"] }] }); }
|
|
2248
2347
|
}
|
|
2249
2348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeControlComponent, decorators: [{
|
|
2250
2349
|
type: Component,
|
|
2251
|
-
args: [{ selector: 'df-tree-control', template: "<form [formGroup]=\"_entity\">\r\n <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\r\n\r\n <abp-tree [nodes]=\"nodes\" (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\">\r\n
|
|
2350
|
+
args: [{ selector: 'df-tree-control', template: "<form [formGroup]=\"_entity\">\r\n <div formGroupName=\"extraProperties\" class=\"selectcontrol\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</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 <div class=\"border p-2 rounded-2 mt-2\">\r\n <abp-tree [nodes]=\"nodes\" (nzExpandChange)=\"nzExpandChange($event)\" [expandedKeys]=\"anExpandedNode\">\r\n <ng-template abpTreeNodeTemplate let-node>\r\n <div (click)=\"toggleNodeChecked($event, node)\">\r\n <input #checkbox 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>\r\n </div>\r\n\r\n </div>\r\n <button type=\"submit\" style=\"display: none;\" #submitclick></button>\r\n</form>", styles: ["input[type=checkbox]:indeterminate{opacity:.5}\n"] }]
|
|
2252
2351
|
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { fields: [{
|
|
2253
2352
|
type: Input
|
|
2254
2353
|
}], parentFiledName: [{
|
|
@@ -2707,7 +2806,7 @@ class DynamicConfigComponent {
|
|
|
2707
2806
|
//在容器中创建组件
|
|
2708
2807
|
const { instance } = this.FormconfigRef?.createComponent(fieldControlItem.fieldConfigComponent); //创建组件模板
|
|
2709
2808
|
// /**向创建的组件模板中传值 */
|
|
2710
|
-
instance.selected = this.selected;
|
|
2809
|
+
instance.selected = JSON.parse(JSON.stringify(this.selected));
|
|
2711
2810
|
instance.type = formControlName;
|
|
2712
2811
|
instance.Entity = this.formEntity;
|
|
2713
2812
|
}
|