ngx-axis-appforge 0.0.0

package/axis-components/table/design/config.ts

@@ -0,0 +1,147 @@
+import { TableFieldSetting } from "./table-field-setting/table-field-setting";
+import { TableFieldsMenu } from "./table-fields-menu/table-fields-menu";
+import { TableSetting } from "./table-setting/table-setting";
+import { DesignConfig, NextInfo, DesignBuildResult, OptionsNode, DesignBindElementsResult, SimpleMenu } from 'ngx-axis-appforge/core';
+
+export const Config: DesignConfig = {
+
+    componentName: "表格",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        const next: NextInfo[] = [];
+        const fieldsChildren: OptionsNode[] = [];
+        const fieldsNode = new OptionsNode({
+            id: nextInfo.currentObject.id + ".fields",
+            parentId: nextInfo.currentObject.id,
+            scopeId: nextInfo.scopeId,
+            rootOptions: nextInfo.currentObject.fields,
+            contextMenu: TableFieldsMenu,
+            name: `表格列[${nextInfo.currentObject.fields?.length ?? 0}]`,
+            canDrop: true,
+            dropType: "axis-components/table/table-field",
+            dropObj: nextInfo.currentObject.fields,
+            defaultDropIndex: nextInfo.currentObject.fields?.length ?? 0,
+            childDirection: 'horizontal',
+            icon: "project",
+            children: fieldsChildren
+        });
+        nextInfo.currentObject.fields?.forEach((f: any, i: number) => {
+            next.push({
+                parentId: fieldsNode.id + "." + f.field,
+                parentObject: f,
+                indexOfParent: "child",
+                scopeId: nextInfo.currentObject.id + ".row"
+            });
+            fieldsChildren.push(new OptionsNode({
+                id: fieldsNode.id + "." + f.field,
+                updateId: (options) => fieldsNode.id + "." + options.field,
+                scopeId: fieldsNode.scopeId,
+                parentId: fieldsNode.id,
+                parentObj: fieldsNode.options,
+                indexOfParentObj: i,
+                rootOptions: f,
+                name: `字段[${f.field}]`,
+                icon: "profile",
+                canSetting: true,
+                settingType: TableFieldSetting,
+                contextMenu: SimpleMenu,
+                canDrag: true,
+                dragType: "axis-components/table/table-field",
+                canDrop: true,
+                dropType: "component",
+                dropObj: f,
+                defaultDropIndex: "child",
+                children: []
+            }));
+        });
+        const rowActionsNode = new OptionsNode({
+            id: nextInfo.currentObject.id + ".rowActions",
+            parentId: nextInfo.currentObject.id,
+            scopeId: nextInfo.scopeId,
+            rootOptions: nextInfo.currentObject.rowActions,
+            name: `操作列[${nextInfo.currentObject.rowActions?.length ?? 0}]`,
+            contextMenu: SimpleMenu,
+            canDrop: true,
+            dropType: "component",
+            dropObj: nextInfo.currentObject.rowActions,
+            defaultDropIndex: nextInfo.currentObject.rowActions?.length ?? 0,
+            childDirection: 'horizontal',
+            icon: "control",
+            children: []
+        });
+        next.push({
+            parentId: rowActionsNode.id,
+            parentObject: rowActionsNode.options,
+            scopeId: nextInfo.currentObject.id + ".row"
+        });
+        const expandNode = new OptionsNode({
+            id: nextInfo.currentObject.id + ".expandRow",
+            parentId: nextInfo.currentObject.id,
+            scopeId: nextInfo.scopeId,
+            rootOptions: nextInfo.currentObject,
+            name: "扩展行",
+            contextMenu: SimpleMenu,
+            canDrop: true,
+            dropType: "component",
+            dropObj: nextInfo.currentObject,
+            defaultDropIndex: "expandRow",
+            icon: "control",
+            children: []
+        });
+        next.push({
+            parentId: expandNode.id,
+            parentObject: nextInfo.currentObject,
+            indexOfParent: "expandRow",
+            scopeId: nextInfo.currentObject.id + ".row"
+        });
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: "表格",
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: TableSetting,
+                contextMenu: SimpleMenu,
+                icon: "table",
+                children: [
+                    fieldsNode,
+                    rowActionsNode,
+                    expandNode
+                ],
+            }),
+            next: next,
+            newScopes: [
+                {
+                    scopeId: nextInfo.currentObject.id + ".row",
+                    parentScopeId: nextInfo.scopeId,
+                    scopeName: "表格行",
+                    ds: {
+                        row: nextInfo.currentObject.data?.[0] ?? "示例数据"
+                    }
+                }
+            ]
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        const fieldsParent = element.querySelector("thead>.ant-table-row") as HTMLElement | undefined;
+        const res: DesignBindElementsResult = {
+            [options.id]: { element },
+            [`${options.id}.fields`]: { element: fieldsParent, dropElement: fieldsParent },
+        };
+        (options.fields as any[] | undefined)?.forEach((f) => {
+            const fieldElement = fieldsParent?.querySelector(`th[data-field="${f.field}"]`) as HTMLElement | undefined;
+            const fieldChildElement = element?.querySelector(`td[data-field="${f.field}"]`) as HTMLElement | undefined;
+            res[`${options.id}.fields.${f.field}`] = { element: fieldElement, dropElement: fieldChildElement }
+        });
+        const rowActionsElement = fieldsParent?.querySelector("th[data-rowactions]") as HTMLElement | undefined;
+        const rowActionsChildElement = element.querySelector("td>div[data-rowactions]") as HTMLElement | undefined;
+        res[`${options.id}.rowActions`] = { element: rowActionsElement, dropElement: rowActionsChildElement };
+        const expandRowElement = element.querySelector("tr[data-expandrow]") as HTMLElement | undefined;
+        res[`${options.id}.expandRow`] = { element: expandRowElement, dropElement: expandRowElement };
+        return res;
+    },
+};

package/axis-components/table/design/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "config.ts"
+    }
+}

package/axis-components/table/design/table-field-setting/table-field-setting.html

@@ -0,0 +1,259 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    字段名
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <input nz-input formControlName="field" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    字段标题
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="title">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否可用
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="inuse">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="外观设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    宽度
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="width">
+                        <nz-input-number ngModel [ngModelOptions]="{standalone:true}" style="width: 100%;" [nzMin]="0">
+                            <span nzInputAddonAfter>px</span>
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    对齐方式
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="align">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="left" nzLabel="左对齐"></nz-option>
+                            <nz-option nzValue="center" nzLabel="居中"></nz-option>
+                            <nz-option nzValue="right" nzLabel="右对齐"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    固定方式
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="freezeMode">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="none" nzLabel="不固定"></nz-option>
+                            <nz-option nzValue="left" nzLabel="固定在左"></nz-option>
+                            <nz-option nzValue="right" nzLabel="固定在右"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzTooltipTitle="未实现">
+                    分组表头标题
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="titleGroup">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzTooltipTitle="未实现">
+                    分组级别
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="groupLevel">
+                        <nz-input-number style="width: 100%;" [nzMin]="1" ngModel [ngModelOptions]="{standalone:true}"
+                            [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="排序过滤">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否排序
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="sortAble">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().sortAble?.funMode || formValue()?.sortAble?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    默认排序方式
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="sortOrder">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}" nzAllowClear>
+                            <nz-option nzValue="ascend" nzLabel="升序"></nz-option>
+                            <nz-option nzValue="descend" nzLabel="降序"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    排序优先级
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="sortPriority">
+                        <nz-input-number style="width: 100%;" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否过滤
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="filterAble">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().filterAble?.funMode || formValue()?.filterAble?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    多个过滤条件
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="filterMultiple">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="统计设置(未实现)">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否统计
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-switch formControlName="totalAble"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().totalAble) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    自定义统计函数
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="totalFn" [onlyFun]="true" [noListen]="true">
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="导出导入(未实现)">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否导出
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="export">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().export?.funMode || formValue()?.export?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    导出内容跟随
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="exportFlowChild">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().exportFlowChild?.funMode || !formValue()?.exportFlowChild?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    导出函数
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="exportFn" [onlyFun]="true" [noListen]="true">
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否导入
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="import">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().import?.funMode || formValue()?.import?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    必填标志
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importRequired">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    单元格类型
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importCellType">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}" [nzAllowClear]="false">
+                            <nz-option nzValue="text" nzLabel="文本"></nz-option>
+                            <nz-option nzValue="number" nzLabel="数字"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    导入帮助
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importHelp">
+                        <textarea nz-input ngModel [ngModelOptions]="{standalone:true}"></textarea>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+    </nz-collapse>
+</form>

package/axis-components/table/design/table-field-setting/table-field-setting.ts

@@ -0,0 +1,105 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormValidators, FunFieldValueBase, FunFieldOptions, DataSourceOptions, FunField } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-scope-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, NzInputModule, FunField, NzRadioModule, NzSelectModule, NzInputNumberModule, NzSwitchModule],
+  templateUrl: './table-field-setting.html',
+  styleUrl: './table-field-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableFieldSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    inuse: [undefined, FormValidators.requiredFun],
+    field: ["unknown", FormValidators.required],
+    title: [undefined, FormValidators.requiredFun],
+    export: [undefined, FormValidators.requiredFun],
+    exportFlowChild: [undefined, FormValidators.requiredFun],
+    exportFn: [],
+    import: [undefined, FormValidators.requiredFun],
+    importRequired: [undefined, FormValidators.requiredFun],
+    importCellType: [undefined, FormValidators.requiredFun],
+    importHelp: [],
+    sortAble: [undefined, FormValidators.requiredFun],
+    sortOrder: [],
+    sortPriority: [],
+    filterAble: [undefined, FormValidators.requiredFun],
+    filterMultiple: [undefined, FormValidators.requiredFun],
+    width: [],
+    align: [undefined, FormValidators.requiredFun],
+    freezeMode: [undefined, FormValidators.requiredFun],
+    groupLevel: [],
+    totalAble: [false, FormValidators.required],
+    totalFn: [],
+    titleGroup: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    inuse: {
+      defaultValue: true
+    },
+    title: {
+      defaultValue: "未命名"
+    },
+    export: {
+      defaultValue: false
+    },
+    exportFlowChild: {
+      defaultValue: true
+    },
+    import: {
+      defaultValue: false
+    },
+    importRequired: {
+      defaultValue: false
+    },
+    importCellType: {
+      defaultValue: "text"
+    },
+    importHelp: {
+      defaultValue: undefined
+    },
+    sortAble: {
+      defaultValue: false
+    },
+    sortOrder: {
+      defaultValue: null
+    },
+    sortPriority: {
+      defaultValue: null
+    },
+    filterAble: {
+      defaultValue: false
+    },
+    filterMultiple: {
+      defaultValue: false
+    },
+    width: {
+      defaultValue: null
+    },
+    align: {
+      defaultValue: "left"
+    },
+    freezeMode: {
+      defaultValue: "none"
+    },
+    titleGroup: {
+      defaultValue: undefined
+    },
+    groupLevel: {
+      defaultValue: null
+    },
+  };
+
+  excludeDs = computed(() => this.value().dataSources?.map((e: DataSourceOptions) => e.name))
+
+}

package/axis-components/table/design/table-fields-menu/table-fields-menu.html

@@ -0,0 +1,9 @@
+<nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+        <li nz-menu-item (click)="addField()">
+            <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <nz-divider nzType="vertical"></nz-divider>
+            <span>添加字段</span>
+        </li>
+    </ul>
+</nz-dropdown-menu>

package/axis-components/table/design/table-fields-menu/table-fields-menu.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { BaseMenu } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-table-fields-menu',
+  imports: [NzDropDownModule, NzDividerModule, NzIconModule],
+  templateUrl: './table-fields-menu.html',
+  styleUrl: './table-fields-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableFieldsMenu extends BaseMenu {
+
+  addField() {
+    this.optionsNodes.current.options.push({
+      field: `unnamed#${this.optionsNodes.current.options.length + 1}`,
+      title: "未命名",
+      inuse: true,
+    });
+    this.onChange();
+  }
+}