ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/table/table-setter/table-setter.css

@@ -0,0 +1,55 @@
+.container {
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+}
+
+.list {
+    min-height: 60px;
+    border-radius: 4px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: block;
+    border: 1px dashed #ccc;
+    flex: 1 1 auto;
+}
+
+.list>.box {
+    cursor: move;
+}
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow:
+        0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 4px;
+    padding: 4px 8px;
+    background-color: rgb(0 112 204 / 15%);
+}
+
+.box span {
+    cursor: pointer;
+}

package/axis-components/table/table-setter/table-setter.html

@@ -0,0 +1,38 @@
+<a nz-button nzType="link" nzSize="small" (click)="modalVisible.set(true)" style="margin: 2px;">
+    <nz-icon nzType="setting" nzTheme="outline" />
+</a>
+<nz-modal [(nzVisible)]="modalVisible" nzTitle="表头设置" nzDraggable [nzOkText]="null" nzCancelText="关闭"
+    (nzOnCancel)="modalVisible.set(false)">
+    <ng-container *nzModalContent>
+        <div nz-row [nzGutter]="24">
+            <div nz-col class="gutter-row" [nzSpan]="12">
+                <div class="container">
+                    <p>展示字段<a nz-button nzType="link" (click)="resetDefault()">恢复默认</a></p>
+                    <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="fix()"
+                        [cdkDropListConnectedTo]="[doneList]" class="list" (cdkDropListDropped)="drop($event)">
+                        @for (item of fix(); track item; let i = $index) {
+                        <div class="box" cdkDrag>
+                            {{ item.title() }}
+                            <nz-icon nzType="minus-circle" nzTheme="outline" (click)="deleteCustom(i)" />
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            <div nz-col class="gutter-row" [nzSpan]="12">
+                <div class="container">
+                    <p>隐藏字段</p>
+                    <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="notFix()"
+                        [cdkDropListConnectedTo]="[todoList]" class="list" (cdkDropListDropped)="drop($event)">
+                        @for (item of notFix(); track item; let i = $index) {
+                        <div class="box" cdkDrag>
+                            {{ item.title() }}
+                            <nz-icon nzType="plus-circle" nzTheme="outline" (click)="addCustom(i)" />
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</nz-modal>

package/axis-components/table/table-setter/table-setter.ts

@@ -0,0 +1,121 @@
+import { ChangeDetectionStrategy, Component, effect, input, model, OnDestroy, output, signal } from '@angular/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { TableFieldOptions } from '../table.options';
+import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { debounceTime, Subject, Subscription } from 'rxjs';
+
+
+@Component({
+  selector: 'axis-table-setter',
+  imports: [NzIconModule, NzButtonModule, NzModalModule, NzGridModule, CdkDrag, CdkDropList],
+  templateUrl: './table-setter.html',
+  styleUrl: './table-setter.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableSetter implements OnDestroy {
+
+  constructor() {
+    effect(() => this.buildFixAndNotFixColumn());
+    effect(() => this.onChange.emit(this.fix()));
+    this.sub = this.saveCacheSubject.pipe(debounceTime(200)).subscribe(v => this.saveCache());
+  }
+
+  readonly fields = input.required<TableFieldOptions[]>();
+  readonly cacheKey = input<string>();
+  readonly onChange = output<TableFieldOptions[]>();
+
+  readonly modalVisible = model(false);
+  readonly fix = signal<TableFieldOptions[]>([]);
+  readonly notFix = signal<TableFieldOptions[]>([]);
+
+  saveCacheSubject = new Subject<void>();
+  cache: { fix: string[], notFix: string[], widths: { [field: string]: number } } = { fix: [], notFix: [], widths: {} };
+  sub?: Subscription;
+
+  private buildFixAndNotFixColumn(): void {
+    this.loadCache();
+    if (this.cache) {
+      const fieldMap = new Map<string, TableFieldOptions>();
+      for (const f of this.fields()) {
+        fieldMap.set(f.field(), f);
+        if (this.cache.widths.hasOwnProperty(f.field())) {
+          f.width.set(this.cache.widths[f.field()]);
+        }
+      }
+      this.fix.set(this.cache.fix.filter(f => fieldMap.has(f)).map(f => fieldMap.get(f)!)
+        .concat(this.fields().filter(f => !this.cache!.fix.includes(f.field()) && !this.cache!.notFix.includes(f.field()))));
+      this.notFix.set(this.cache.notFix.filter(f => fieldMap.has(f)).map(f => fieldMap.get(f)!));
+    } else {
+      this.fix.set(this.fields());
+    }
+  }
+
+  private loadCache() {
+    if (this.cacheKey()) {
+      const cacheStr = localStorage.getItem(this.cacheKey()!);
+      if (cacheStr) {
+        try {
+          this.cache = JSON.parse(cacheStr);
+        } catch (_) { }
+      }
+    }
+  }
+
+  private saveCache() {
+    if (this.cacheKey()) {
+      localStorage.setItem(this.cacheKey()!, JSON.stringify(this.cache));
+    }
+  }
+
+  private updateFix(): void {
+    this.fix.set([...this.fix()]);
+    this.notFix.set([...this.notFix()]);
+    if (this.cacheKey()) {
+      this.cache.fix = this.fix().map(f => f.field());
+      this.cache.notFix = this.notFix().map(f => f.field());
+      this.saveCache();
+    }
+  }
+
+  drop(event: CdkDragDrop<TableFieldOptions[], any, any>): void {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+    }
+    this.updateFix();
+  }
+
+  deleteCustom(index: number): void {
+    transferArrayItem(this.fix(), this.notFix(), index, this.notFix().length);
+    this.updateFix();
+  }
+
+  addCustom(index: number): void {
+    transferArrayItem(this.notFix(), this.fix(), index, this.fix().length);
+    this.updateFix();
+  }
+
+  onResize(field: TableFieldOptions, event: NzResizeEvent) {
+    field.width.set(event.width ?? null);
+    this.cache.widths[field.field()] = event.width!;
+    this.saveCacheSubject.next();
+  }
+
+  resetDefault() {
+    this.fix.set(this.fields());
+    this.notFix.set([]);
+    if (this.cacheKey()) {
+      localStorage.removeItem(this.cacheKey()!);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.sub?.unsubscribe();
+    this.saveCacheSubject.unsubscribe();
+  }
+}

package/axis-components/table/table.css

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}

package/axis-components/table/table.html

@@ -0,0 +1,191 @@
+@if (options.showTableTitleSet()) {
+<axis-table-setter [fields]="fields()" [cacheKey]="options.tableSetCacheKey()"
+    (onChange)="fixFields.set($event)"></axis-table-setter>
+}
+<nz-table #table [nzSize]="options.size()" [nzData]="displayData()??[]" [nzLoading]="!displayData()"
+    [nzBordered]="options.bordered()" [nzOuterBordered]="options.outerBordered()"
+    [nzShowPagination]="options.showPagination()"
+    [nzFrontPagination]="options.showPagination() && !options.useBackEndPaging()" [nzTotal]="rowtotal()"
+    [nzPageSize]="options.pageSize()" [nzShowSizeChanger]="options.showSizeChanger()"
+    [nzPageSizeOptions]="pageSizeOptions()" [nzShowTotal]="options.showDataSize()?totalRange:null" [nzScroll]="scroll()"
+    (nzCurrentPageDataChange)="currentPageDataChange()" (nzPageIndexChange)="onPageChange()"
+    (nzPageSizeChange)="onPageChange()" [(nzPageIndex)]="pageIndex" [nzVirtualItemSize]="options.virtualItemSize()"
+    [nzVirtualForTrackBy]="trackByKeyField">
+    <thead>
+        <tr>
+            @if (options.showCheckbox()) {
+            @if (!options.checkboxLinkageForExpand() && !options.singleCheck()) {
+            <th nzLeft [nzChecked]="select.headerChecked()!='none'"
+                [nzIndeterminate]="select.headerChecked()=='indeterminate'"
+                (nzCheckedChange)="select.onAllChecked($event)" nzAlign="center" [nzWidth]="leaderFieldWidth()-10+'px'">
+            </th>
+            }@else {
+            <th nzLeft [nzWidth]="leaderFieldWidth()-10+'px'"></th>
+            }
+            }
+            @if (options.showExpand()) {
+            <th nzLeft nzAlign="center" [nzWidth]="leaderFieldWidth()-15+'px'"></th>
+            }
+            @if (options.showOrder()) {
+            <th nzAlign="center" [nzWidth]="leaderFieldWidth()+'px'">序号</th>
+            }
+            @for (f of displayFields(); track f.field()) {
+            <th [attr.data-field]="f.field()" nz-resizable nzBounds="window"
+                [nzDisabled]="!options.showTableTitleSet() || !f.width()"
+                [nzWidth]="f.width() == null ?null:f.width()+'px'" (nzResize)="tableSetter?.onResize(f,$event)"
+                [nzShowSort]="f.sortAble()" [nzSortFn]="fieldsControlsMap()[f.field()]?.sortFn"
+                [nzSortOrder]="f.sortOrder()" [nzSortPriority]="f.sortPriority()??false"
+                [nzShowFilter]="f.filterAble() && !options.useBackEndPaging()"
+                [nzFilters]="fieldsControlsMap()[f.field()]?.filterItems ?? []"
+                [nzFilterFn]="fieldsControlsMap()[f.field()]?.filterFn"
+                (nzFilterChange)="filterChange(f.field(),$event)" [nzFilterMultiple]="f.filterMultiple()"
+                [nzAlign]="f.align()" [nzLeft]="f.freezeMode()=='left'" [nzRight]="f.freezeMode()=='right'"
+                (nzSortOrderChange)="sortChange(f.field(),$event)">
+                <span>
+                    {{f.title()}}
+                    @if(options.showTableTitleSet()){
+                    <nz-resize-handle [style.transform]="`translateX(${resizeHandleOffsetX(f)}px)`" nzDirection="right"
+                        (click)="$event.stopPropagation()">
+                        <div class="resize-trigger"></div>
+                    </nz-resize-handle>
+                    }
+                </span>
+            </th>
+            }
+            @if (rowActions().length)
+            {
+            <th nzRight nzAlign="center" [nzWidth]="actionsFieldWidth()+'px'" data-rowactions>操作</th>
+            }
+        </tr>
+    </thead>
+    <tbody>
+        @if (!options.showPagination() && options.virtualScroll()) {
+        <ng-template nz-virtual-scroll let-data let-i="index">
+        </ng-template>
+        }@else {
+        @for (data of table.data; track $index;let i=$index) {
+        <tr [axisScope]="options.id+'.row'" [attr.data-appid]="data.appid" scopeName="表格行"
+            [dataSources]="[{name:'row',type:'local',data:data}]" (dblclick)="select.toggleChecked(data)">
+            @if (options.showCheckbox()) {
+            <td nzLeft [nzChecked]="select.setOfCheckedId.has(data[options.keyField()])"
+                [nzIndeterminate]="select.setOfIndeterminateId.has(data[options.keyField()])"
+                [nzDisabled]="select.setOfDisabledId().has(data[options.keyField()])"
+                (nzCheckedChange)="select.onItemChecked(data, $event)" nzAlign="center"></td>
+            }
+            @if (options.showExpand()) {
+            <td nzLeft [nzExpand]="expand.expandedSet.has(data[options.keyField()])"
+                (nzExpandChange)="expand.onExpandChange(data[options.keyField()],$event)"></td>
+            }
+            @if (options.showOrder()) {
+            <td nzAlign="center">{{(table.nzPageIndex-1) * table.nzPageSize + i+1}}</td>
+            }
+            @for (f of displayFields(); track f.field()) {
+            @if (rowspan(f.field(),i)) {
+            <td [attr.rowspan]="rowspan(f.field(),i)" [nzLeft]="f.freezeMode()=='left'" [attr.data-field]="f.field()"
+                [nzRight]="f.freezeMode()=='right'" [nzAlign]="f.align()">
+                @if (f.child()) {
+                <ng-container [axisDynamic]="f.child()"></ng-container>
+                }@else {
+                {{data[f.field()]}}
+                }
+            </td>
+            }
+            }
+            @if (rowActions().length) {
+            <td nzRight>
+                <div nz-flex nzJustify="space-evenly" data-rowactions>
+                    @for (a of rowActions(); track a.id) {
+                    <ng-container [axisDynamic]="a"></ng-container>
+                    }
+                </div>
+            </td>
+            }
+        </tr>
+        @if (options.showExpand()) {
+        <tr [axisScope]="options.id+'.row'" scopeName="表格行" [dataSources]="[{name:'row',type:'local',data:data}]"
+            [nzExpand]="expand.expandedSet.has(data[options.keyField()])" data-expandrow>
+            <ng-container [axisDynamic]="options.expandRow()"></ng-container>
+        </tr>
+        }
+        <!-- @if (showSubTotal() && subTotalGroupField() && subTotalMap[i]) {
+        <tr>
+            @if (options.showCheckbox()) {
+            <td nzLeft></td>
+            }
+            @if (options.showExpand()) {
+            <td nzLeft></td>
+            }
+            @if (options.showOrder()) {
+            <td></td>
+            }
+            @for (f of displayFields(); track f.field()) {
+            @if (f.groupLevel && f.groupLevel! == subTotalGroupField.groupLevel!) {
+            <td nzAlign="right" [nzLeft]="f.freezeMode=='left'" [nzRight]="f.freezeMode=='right'">
+                <b>{{options.subTotalTitle() || "小计"}}</b>
+            </td>
+            }
+            @if(!f.groupLevel || f.groupLevel! > subTotalGroupField.groupLevel!) {
+            <td [nzLeft]="f.freezeMode=='left'" [nzRight]="f.freezeMode=='right'">
+                @if (f.totalAble) {
+                <div [class]="'td-box-'+(f.align || 'center')">
+                    <b>
+                        @if (f.child()) {
+                        @if (f.injectBy() == "data") {
+                        <ng-container [axisDynamic]="f.child()"></ng-container>
+                        }@else{
+                        <ng-container [axisDynamic]="f.child()" [ngModel]="subTotalMap[i][f.field]"></ng-container>
+                        }
+                        }@else {
+                        {{subTotalMap[i][f.field]}}
+                        }
+                    </b>
+                </div>
+                }
+            </td>
+            }
+            }
+            <td *ngIf="rowActions?.length" nzRight></td>
+        </tr>
+        } -->
+        }
+        }
+        <!-- @if (showTotal && displayData?.length) {
+        <tr class="total-row">
+            @if (options.showCheckbox()) {
+            <td nzLeft></td>
+            }
+            @if (options.showExpand()) {
+            <td nzLeft></td>
+            }
+            <td nzAlign="right" [nzLeft]="!options.showOrder() && displayFields[0].freezeMode=='left'"
+                [nzRight]="!options.showOrder() && displayFields[0].freezeMode=='right'"><b>{{options.totalTitle() ||
+                    "合计"}}</b></td>
+            @for (f of displayFields()|slice:(options.showOrder()?0:1); track f.field()) {
+            <td [nzLeft]="f.freezeMode=='left'" [nzRight]="f.freezeMode=='right'">
+                @if (f.totalAble()) {
+                <div [class]="'td-box-'+(f.align || 'center')">
+                    <b>
+                        @if (f.child()) {
+                        @if (f.injectBy() == "data") {
+                        <ng-container [axisDynamic]="f.child()"></ng-container>
+                        }@else{
+                        <ng-container [axisDynamic]="f.child()" [ngModel]="totalMap[f.field]"></ng-container>
+                        }
+                        }@else {
+                        {{totalMap[f.field]}}
+                        }
+                    </b>
+                </div>
+                }
+            </td>
+            }
+            @if (rowActions()?.length) {
+            <td nzRight></td>
+            }
+        </tr>
+        } -->
+    </tbody>
+    <ng-template #totalRange let-range="range" let-total>
+        共{{ total }}条数据，第{{ range[0] }}-{{ range[1] }}条
+    </ng-template>
+</nz-table>

package/axis-components/table/table.options.ts

@@ -0,0 +1,72 @@
+import { signal } from "@angular/core";
+import { DataOptions } from "ngx-axis-appforge/core";
+
+export class TableOptions extends DataOptions {
+    readonly keyField = signal("");
+    readonly showExpand = signal(false);
+    readonly showTableTitleSet = signal(false);
+    readonly tableSetCacheKey = signal("");
+    readonly size = signal<'middle' | 'small' | 'default'>("middle");
+    readonly showOrder = signal(true);
+    readonly heightExpanded = signal(false);
+    readonly showDataSize = signal(true);
+    readonly bordered = signal(false);
+    readonly outerBordered = signal(false);
+    readonly width = signal<string | undefined>(undefined);
+    readonly actionsFieldWidth = signal<number | null>(null);
+    readonly showCheckbox = signal(false);
+    readonly singleCheck = signal(false);
+    readonly checkboxLinkageForExpand = signal(false);
+    readonly disableCheckboxFn = signal<string | undefined>(undefined);
+    readonly enableRowClick = signal(false);
+    readonly defaultSelectFirstRow = signal(false);
+    readonly showTotal = signal(false);
+    readonly totalTitle = signal("合计");
+    readonly showSubTotal = signal(false);
+    readonly subTotalTitle = signal("小计");
+    readonly subTotalGroupLevel = signal(1);
+    readonly showPagination = signal(true);
+    readonly virtualScroll = signal(false);
+    readonly virtualItemSize = signal(32);
+    readonly pageSize = signal(10);
+    readonly showSizeChanger = signal(true);
+    readonly pageSizeOptions = signal("10,20,50,100");
+    readonly useBackEndPaging = signal(false);
+    readonly pageParamsDataSourceName = signal("pageParams");
+    readonly exportParamsDataSourceName = signal("exportParams");
+    readonly exportFileName = signal("数据导出");
+    readonly exportBookType = signal("xlsx");
+    readonly importLimitLength = signal<number | null>(null);
+    readonly importStartLine = signal(2);
+    readonly importTemplateFileName = signal("数据导入模版");
+    readonly importExampleData = signal<any>([]);
+    readonly fields = signal<any[]>([]);
+    readonly rowActions = signal<any[]>([]);
+    readonly expandRow = signal<any>(undefined);
+}
+
+export class TableFieldOptions {
+    readonly inuse = signal(true);
+    readonly field = signal("unknown");
+    readonly title = signal("未命名");
+    readonly export = signal(false);
+    readonly exportFlowChild = signal(true);
+    readonly exportFn = signal<string | undefined>(undefined);
+    readonly import = signal(false);
+    readonly importRequired = signal(false);
+    readonly importCellType = signal<"text" | "number">("text");
+    readonly importHelp = signal<string | undefined>(undefined);
+    readonly sortAble = signal(false);
+    readonly sortOrder = signal<"descend" | "ascend" | null>(null);
+    readonly sortPriority = signal<number | null>(null);
+    readonly filterAble = signal(false);
+    readonly filterMultiple = signal(false);
+    readonly width = signal<number | null>(null);
+    readonly align = signal<'left' | 'right' | 'center'>("left");
+    readonly freezeMode = signal<'none' | 'left' | 'right'>("none");
+    readonly groupLevel = signal<number | null>(null);
+    readonly totalAble = signal(false);
+    readonly totalFn = signal<string | undefined>(undefined);
+    readonly titleGroup = signal<string | undefined>(undefined);
+    readonly child = signal<any>(undefined);
+}