From e95cd8fe23d3a337f20d9482f0db39c45c015453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= <zh56462271@qq.com>
Date: Fri, 28 Aug 2020 14:46:55 +0800
Subject: [PATCH] fix(commonTable): error cause by shallow copy

---
 .../common-table/common-table.component.html  |  6 ++--
 .../common-table/common-table.component.ts    | 36 +++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/app/view/admin/components/common-table/common-table.component.html b/src/app/view/admin/components/common-table/common-table.component.html
index 965585f..1a017d9 100644
--- a/src/app/view/admin/components/common-table/common-table.component.html
+++ b/src/app/view/admin/components/common-table/common-table.component.html
@@ -81,10 +81,10 @@
           nzTitle="表格字段设置(可拖动排序)"
 >
     <button nz-button nzType="primary" (click)="reset()" [disabled]="!changed">重置</button>
-    <nz-table [nzData]="editData" nzSize="small" nzPageSize="10000" nzShowPagination="false">
+    <nz-table [nzData]="filedData" 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>
+        <ng-template ngFor [ngForOf]="filedData" let-item let-index="index">
+            <tr *ngIf="!item.isActionColumns" cdkDrag (click)="click()">
                 <td>{{index + 1}}</td>
                 <td style="text-align: center">{{item.title}}</td>
                 <td style="text-align: center">{{item.fieldValue}}</td>
diff --git a/src/app/view/admin/components/common-table/common-table.component.ts b/src/app/view/admin/components/common-table/common-table.component.ts
index a2f08ad..96e34e6 100644
--- a/src/app/view/admin/components/common-table/common-table.component.ts
+++ b/src/app/view/admin/components/common-table/common-table.component.ts
@@ -33,16 +33,16 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     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.filedData = this.cloneData(localStorage.getItem(this.request.path));
             this.changed = true;
         } else {
-            this.filedData = JSON.parse(JSON.stringify(this.headData));
+            this.filedData = this.cloneData(this.headData)
+            console.log(this.filedData)
         }
         this.calculateVisibleFieldLength();
 
@@ -117,29 +117,27 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
 
     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;
+        if (!this.changed) {
+            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);
+        this.changed = true;
+        moveItemInArray(this.filedData, 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.filedData = this.cloneData(this.headData);
         this.changed = false;
         this.calculateVisibleFieldLength();
     }
@@ -147,4 +145,22 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     cancel = () => this.settingModalVisible = false;
 
     calculateVisibleFieldLength = () => this.filedData.filter(value => value.show).length;
+
+    cloneData = (source: Data<T>[] | string): Data<T>[] => {
+        let dist: Data<T>[];
+        if (typeof source === 'string') {
+            dist = JSON.parse(source);
+        } else {
+            dist = JSON.parse(JSON.stringify(source));
+        }
+        const action = this.headData.filter(value => value.isActionColumns).pop();
+        const del = dist.filter(value => value.isActionColumns).pop()
+        dist.splice(dist.indexOf(del), 1);
+        dist.push(action);
+        return dist;
+    }
+
+    click() {
+        this.changed = true;
+    }
 }