@dignite-ng/expand.dynamic-form 3.1.11 → 3.2.0
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 +51 -23
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs +50 -22
- package/fesm2022/dignite-ng-expand.dynamic-form.mjs.map +1 -1
- package/lib/components/form/tree/tree-config.component.d.ts +23 -5
- 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() {
|
|
@@ -1639,15 +1640,50 @@ class TreeConfigComponent {
|
|
|
1639
1640
|
get keyInput() {
|
|
1640
1641
|
return this.nodeForm?.get('key');
|
|
1641
1642
|
}
|
|
1642
|
-
|
|
1643
|
+
/**
|
|
1644
|
+
* 验证器：检查字符串格式和唯一性
|
|
1645
|
+
* @description 格式只允许字母、数字、下划线和短横线，且值在树中必须唯一
|
|
1646
|
+
*/
|
|
1647
|
+
keyValidator() {
|
|
1643
1648
|
return (control) => {
|
|
1644
1649
|
const regex = /^[a-zA-Z0-9_-]+$/;
|
|
1645
1650
|
if (control.value && !regex.test(control.value)) {
|
|
1646
1651
|
return { repetition: this._LocalizationService.instant(`Cms::SlugValidatorsText`) };
|
|
1647
1652
|
}
|
|
1653
|
+
// 检查唯一性
|
|
1654
|
+
if (control.value && this.isKeyExists(control.value)) {
|
|
1655
|
+
return { repetition: this._LocalizationService.instant(`Cms::ValueAlreadyExis`) };
|
|
1656
|
+
}
|
|
1648
1657
|
return null;
|
|
1649
1658
|
};
|
|
1650
1659
|
}
|
|
1660
|
+
/**
|
|
1661
|
+
* 检查 key 是否在树中已存在
|
|
1662
|
+
* @param key 要检查的 key 值
|
|
1663
|
+
* @returns 如果存在返回 true，否则返回 false
|
|
1664
|
+
*/
|
|
1665
|
+
isKeyExists(key) {
|
|
1666
|
+
const currentKey = this.selectTree?.key;
|
|
1667
|
+
return this.findKeyInNodes(this.nodes, key, currentKey);
|
|
1668
|
+
}
|
|
1669
|
+
/**
|
|
1670
|
+
* 递归查找 key 是否存在于节点中
|
|
1671
|
+
* @param nodes 节点数组
|
|
1672
|
+
* @param targetKey 要查找的 key
|
|
1673
|
+
* @param excludeKey 要排除的 key（编辑时排除当前节点）
|
|
1674
|
+
* @returns 如果找到返回 true，否则返回 false
|
|
1675
|
+
*/
|
|
1676
|
+
findKeyInNodes(nodes, targetKey, excludeKey) {
|
|
1677
|
+
for (const node of nodes) {
|
|
1678
|
+
if (node.key === targetKey && node.key !== excludeKey) {
|
|
1679
|
+
return true;
|
|
1680
|
+
}
|
|
1681
|
+
if (node.children?.length && this.findKeyInNodes(node.children, targetKey, excludeKey)) {
|
|
1682
|
+
return true;
|
|
1683
|
+
}
|
|
1684
|
+
}
|
|
1685
|
+
return false;
|
|
1686
|
+
}
|
|
1651
1687
|
/**创建节点 */
|
|
1652
1688
|
addNodeBtn() {
|
|
1653
1689
|
this.isVisible = true;
|
|
@@ -1655,7 +1691,7 @@ class TreeConfigComponent {
|
|
|
1655
1691
|
this.selectTree = null;
|
|
1656
1692
|
this.nodeForm = this.fb.group({
|
|
1657
1693
|
title: ['', Validators.required],
|
|
1658
|
-
key: ['', [Validators.required, this.
|
|
1694
|
+
key: ['', [Validators.required, this.keyValidator()]],
|
|
1659
1695
|
isChecked: [false],
|
|
1660
1696
|
children: new FormArray([]),
|
|
1661
1697
|
});
|
|
@@ -1667,7 +1703,7 @@ class TreeConfigComponent {
|
|
|
1667
1703
|
this.selectTree = node;
|
|
1668
1704
|
this.nodeForm = this.fb.group({
|
|
1669
1705
|
title: [node.title, Validators.required],
|
|
1670
|
-
key: [node.key, [Validators.required, this.
|
|
1706
|
+
key: [node.key, [Validators.required, this.keyValidator()]],
|
|
1671
1707
|
isChecked: [node.origin?.isChecked ?? false],
|
|
1672
1708
|
children: new FormArray([]),
|
|
1673
1709
|
});
|
|
@@ -1679,7 +1715,7 @@ class TreeConfigComponent {
|
|
|
1679
1715
|
this.selectTree = node;
|
|
1680
1716
|
this.nodeForm = this.fb.group({
|
|
1681
1717
|
title: ['', Validators.required],
|
|
1682
|
-
key: ['', [Validators.required, this.
|
|
1718
|
+
key: ['', [Validators.required, this.keyValidator()]],
|
|
1683
1719
|
isChecked: [false],
|
|
1684
1720
|
children: new FormArray([]),
|
|
1685
1721
|
});
|
|
@@ -1706,7 +1742,7 @@ class TreeConfigComponent {
|
|
|
1706
1742
|
}
|
|
1707
1743
|
else {
|
|
1708
1744
|
// 编辑节点
|
|
1709
|
-
this.
|
|
1745
|
+
this.updateNodeByReference(selectTree.origin, value);
|
|
1710
1746
|
}
|
|
1711
1747
|
}
|
|
1712
1748
|
else {
|
|
@@ -1739,19 +1775,11 @@ class TreeConfigComponent {
|
|
|
1739
1775
|
}
|
|
1740
1776
|
return false;
|
|
1741
1777
|
}
|
|
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;
|
|
1778
|
+
/**通过引用更新节点 */
|
|
1779
|
+
updateNodeByReference(node, updatedData) {
|
|
1780
|
+
node.title = updatedData.title;
|
|
1781
|
+
node.key = updatedData.key;
|
|
1782
|
+
node.isChecked = updatedData.isChecked;
|
|
1755
1783
|
}
|
|
1756
1784
|
/**删除节点 */
|
|
1757
1785
|
deleteMenuItemBtn(node) {
|
|
@@ -2038,11 +2066,11 @@ class TreeConfigComponent {
|
|
|
2038
2066
|
});
|
|
2039
2067
|
}
|
|
2040
2068
|
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" }] }); }
|
|
2069
|
+
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
2070
|
}
|
|
2043
2071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TreeConfigComponent, decorators: [{
|
|
2044
2072
|
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
|
|
2073
|
+
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
2074
|
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.ToPinyinService }], propDecorators: { type: [{
|
|
2047
2075
|
type: Input
|
|
2048
2076
|
}], selected: [{
|
|
@@ -2806,7 +2834,7 @@ class DynamicConfigComponent {
|
|
|
2806
2834
|
//在容器中创建组件
|
|
2807
2835
|
const { instance } = this.FormconfigRef?.createComponent(fieldControlItem.fieldConfigComponent); //创建组件模板
|
|
2808
2836
|
// /**向创建的组件模板中传值 */
|
|
2809
|
-
instance.selected = JSON.parse(JSON.stringify(this.selected));
|
|
2837
|
+
instance.selected = this.selected ? JSON.parse(JSON.stringify(this.selected)) : this.selected;
|
|
2810
2838
|
instance.type = formControlName;
|
|
2811
2839
|
instance.Entity = this.formEntity;
|
|
2812
2840
|
}
|