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 93c2a66..55542a0 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 @@ -1,10 +1,12 @@ - + - + + @@ -17,11 +19,11 @@ [nzPageSize]="dataList.pageSize" (nzPageIndexChange)="getData()" nzFrontPagination="false" - [nzScroll]="{x:'1300px'}" + [nzScroll]="{x:visibleFieldLength*100+'px'}" [nzLoading]="loading"> - + {{data.title}} @@ -30,7 +32,7 @@ - + + + + + + + + + + {{index + 1}} + {{item.title}} + {{item.fieldValue}} + + + + + + + + diff --git a/src/app/view/admin/components/common-table/common-table.component.less b/src/app/view/admin/components/common-table/common-table.component.less index e69de29..9eec261 100644 --- 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; +} 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 dbfb784..a2f08ad 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 @@ -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 implements OnInit, OnChanges { /** * 设置readonly data 因为后面有使用eval 为了安全 */ - @Input() headData: Data[]; + @Input() private headData: Data[]; @Input() request: RequestObj; @Input() cardTitle: string | null; @Input() template: { @@ -30,8 +31,21 @@ export class CommonTableComponent implements OnInit, OnChanges { loading: boolean = true; dataList: PageList = new PageList(); + settingModalVisible: boolean = false; + filedData: Data[]; + editData: Data[]; + 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 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) { + 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; } diff --git a/src/app/view/admin/components/common-table/common-table.module.ts b/src/app/view/admin/components/common-table/common-table.module.ts index c371954..9a6044e 100644 --- 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 { diff --git a/src/app/view/admin/components/common-table/data.ts b/src/app/view/admin/components/common-table/data.ts index 304b9cf..13b4b87 100644 --- 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 { [value: string]: string } }; + order?: number; action ?: { name: string, color?: string,