feat(commonTable): editable field

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>

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;
+}

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;
 }

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,
+    NzIconModule, NzModalModule, NzOutletModule, NzPopconfirmModule, NzSwitchModule,
-    NzTableModule,
+    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 {

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,