feat(commonTable): editable field

2020-08-28 11:25:45 +08:00
parent 22480569a2
commit 449adc4cee
5 changed files with 106 additions and 10 deletions
--- a/src/app/view/admin/components/common-table/common-table.component.html
+++ b/src/app/view/admin/components/common-table/common-table.component.html
@@ -1,10 +1,12 @@
-<nz-card *ngIf="cardTitle" nzSize="small" [nzExtra]="refresh" [nzTitle]="cardTitle" [nzLoading]="loading">
+<nz-card *ngIf="cardTitle" nzSize="small" [nzExtra]="extra" [nzTitle]="cardTitle" [nzLoading]="loading">
    <ng-container *ngTemplateOutlet="table"></ng-container>
 </nz-card>

 <ng-container [ngTemplateOutlet]="table" *ngIf="!cardTitle"></ng-container>

-<ng-template #refresh>
+<ng-template #extra>
+    <i nz-icon nzType="setting" nzTheme="outline" title="设置" (click)="showFieldSetting()"
+       style="cursor: pointer;margin-right: 10px"></i>
    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" title="刷新" style="cursor: pointer"></i>
 </ng-template>

@@ -17,11 +19,11 @@
              [nzPageSize]="dataList.pageSize"
              (nzPageIndexChange)="getData()"
              nzFrontPagination="false"
-              [nzScroll]="{x:'1300px'}"
+              [nzScroll]="{x:visibleFieldLength*100+'px'}"
              [nzLoading]="loading">
        <thead>
        <tr>
-            <ng-container *ngFor="let data of headData">
+            <ng-container *ngFor="let data of filedData">
                <th *ngIf="data.show">
                    {{data.title}}
                </th>
@@ -30,7 +32,7 @@
        </thead>
        <tbody>
        <tr *ngFor="let t of dataList.list;let index = index">
-            <ng-container *ngFor="let data of headData">
+            <ng-container *ngFor="let data of filedData">
                <td *ngIf="data.show"
                    nz-typography
                    nzEllipsis
@@ -70,3 +72,27 @@
        </tbody>
    </nz-table>
 </ng-template>
+
+
+<nz-modal [(nzVisible)]="settingModalVisible"
+          [nzClosable]="true"
+          (nzOnCancel)="cancel()"
+          (nzOnOk)="ok()"
+          nzTitle="表格字段设置(可拖动排序)"
+>
+    <button nz-button nzType="primary" (click)="reset()" [disabled]="!changed">重置</button>
+    <nz-table [nzData]="editData" nzSize="small" nzPageSize="10000" nzShowPagination="false">
+        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
+        <ng-template ngFor [ngForOf]="editData" let-item let-index="index">
+            <tr *ngIf="!item.isActionColumns" cdkDrag>
+                <td>{{index + 1}}</td>
+                <td style="text-align: center">{{item.title}}</td>
+                <td style="text-align: center">{{item.fieldValue}}</td>
+                <td style="text-align: right">
+                    <nz-switch [(ngModel)]="item.show" nzSize="small"></nz-switch>
+                </td>
+            </tr>
+        </ng-template>
+        </tbody>
+    </nz-table>
+</nz-modal>
--- a/src/app/view/admin/components/common-table/common-table.component.less
+++ b/src/app/view/admin/components/common-table/common-table.component.less
@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin: 8px 0;
+    padding: 0;
+  }
+}
+
+td {
+  border-bottom: none !important;
+}
--- a/src/app/view/admin/components/common-table/common-table.component.ts
+++ b/src/app/view/admin/components/common-table/common-table.component.ts
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
 import {Data} from './data';
 import {PageList, RequestObj} from '../../../../class/HttpReqAndResp';
 import {HttpService} from '../../../../api/http/http.service';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
    selector: 'common-table',
@@ -17,7 +18,7 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
    /**
     * 设置readonly data 因为后面有使用eval 为了安全
     */
-    @Input() headData: Data<T>[];
+    @Input() private headData: Data<T>[];
    @Input() request: RequestObj;
    @Input() cardTitle: string | null;
    @Input() template: {
@@ -30,8 +31,21 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
    loading: boolean = true;

    dataList: PageList<T> = new PageList<T>();
+    settingModalVisible: boolean = false;
+    filedData: Data<T>[];
+    editData: Data<T>[];
+    changed: boolean = false;
+    visibleFieldLength: number = 0;

    ngOnInit(): void {
+        if (localStorage.getItem(this.request.path)) {
+            this.filedData = JSON.parse(localStorage.getItem(this.request.path));
+            this.changed = true;
+        } else {
+            this.filedData = JSON.parse(JSON.stringify(this.headData));
+        }
+        this.calculateVisibleFieldLength();
+
        if (!this.template) this.template = {}
        this.headData.forEach(dat => {
            if (!dat.action) return;
@@ -100,4 +114,37 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
        }
        return context;
    }
+
+    showFieldSetting() {
+        this.settingModalVisible = true;
+        this.editData = JSON.parse(JSON.stringify(this.filedData));
+    }
+
+    ok() {
+        this.calculateVisibleFieldLength();
+        this.settingModalVisible = !this.settingModalVisible;
+        if (JSON.stringify(this.filedData) === JSON.stringify(this.editData)) {
+            return;
+        }
+        this.dataList = JSON.parse(JSON.stringify(this.dataList));
+        this.filedData = this.editData;
+        localStorage.setItem(this.request.path, JSON.stringify(this.filedData))
+        this.changed = true;
+    }
+
+    drop(event: CdkDragDrop<T, any>) {
+        moveItemInArray(this.editData, event.previousIndex, event.currentIndex);
+    }
+
+    reset = () => {
+        localStorage.removeItem(this.request.path);
+        this.filedData = JSON.parse(JSON.stringify(this.headData))
+        this.editData = JSON.parse(JSON.stringify(this.headData));
+        this.changed = false;
+        this.calculateVisibleFieldLength();
+    }
+
+    cancel = () => this.settingModalVisible = false;
+
+    calculateVisibleFieldLength = () => this.filedData.filter(value => value.show).length;
 }
--- a/src/app/view/admin/components/common-table/common-table.module.ts
+++ b/src/app/view/admin/components/common-table/common-table.module.ts
@@ -2,14 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CommonTableComponent} from './common-table.component';
 import {
+    NzButtonModule,
    NzCardModule,
    NzDividerModule,
-    NzIconModule, NzOutletModule, NzPopconfirmModule,
-    NzTableModule,
+    NzIconModule, NzModalModule, NzOutletModule, NzPopconfirmModule, NzSwitchModule,
+    NzTableModule, NzTagModule,
    NzToolTipModule,
    NzTypographyModule
 } from 'ng-zorro-antd';
-
+import {FormsModule} from '@angular/forms';
+import {DragDropModule} from '@angular/cdk/drag-drop'

@NgModule({
    declarations: [
@@ -27,7 +29,13 @@ import {
        NzCardModule,
        NzIconModule,
        NzOutletModule,
-        NzPopconfirmModule
+        NzPopconfirmModule,
+        NzModalModule,
+        NzTagModule,
+        NzSwitchModule,
+        FormsModule,
+        DragDropModule,
+        NzButtonModule
    ]
 })
 export class CommonTableModule {
--- a/src/app/view/admin/components/common-table/data.ts
+++ b/src/app/view/admin/components/common-table/data.ts
@@ -12,6 +12,7 @@ export class Data<T> {
            [value: string]: string
        }
    };
+    order?: number;
    action ?: {
        name: string,
        color?: string,