feat: account add sort

cashwarden · Sep 18, 2020 · 7c078d7 · 7c078d7
1 parent d4fd69d
commit 7c078d7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/src/app/routes/account/index/index.component.html b/src/app/routes/account/index/index.component.html
@@ -24,6 +24,27 @@
 </div>
 
 <nz-card>
+  <form nz-form #f="ngForm" se-container size="compact" (ngSubmit)="search()" gutter="24" [labelWidth]="null">
+    <se col="6">
+      <input nz-input [(ngModel)]="q.name" name="name" placeholder="搜索账户名称" />
+    </se>
+    <se col="6">
+      <nz-select [(ngModel)]="q.type" name="type" [nzPlaceHolder]="'全部类型'" nzShowSearch nzAllowClear>
+        <nz-option nzCustomContent [nzLabel]="i.name" [nzValue]="i.type" *ngFor="let i of accountTypes">
+          <i nz-icon nzIconfont="icon-{{ i.type }}"></i> {{ i.name }}
+        </nz-option>
+      </nz-select>
+    </se>
+    <se col="6">
+      <nz-select [(ngModel)]="q.sort" name="sort" [nzPlaceHolder]="'默认排序'" nzShowSearch nzAllowClear>
+        <nz-option *ngFor="let i of accountSorts" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
+      </nz-select>
+    </se>
+
+    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
+    <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
+  </form>
+  <!-- 
   <form nz-form [nzLayout]="'inline'" (ngSubmit)="submit()" class="search__form">
     <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
       <div nz-col nzMd="8" nzSm="24">
@@ -49,20 +70,14 @@
         <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
       </div>
     </div>
-  </form>
+  </form> -->
   <button nz-button (click)="form()" [nzType]="'primary'">
     <i nz-icon nzType="plus"></i>
     <span>新建</span>
   </button>
 </nz-card>
 
-<nz-list
-  [nzDataSource]="list"
-  [nzLoading]="loading"
-  [nzRenderItem]="item"
-  [nzPagination]="pagination"
-  [nzGrid]="{ gutter: 24, lg: 8, md: 12, sm: 24, xs: 24 }"
->
+<nz-list [nzDataSource]="list" [nzLoading]="loading" [nzRenderItem]="item" [nzGrid]="{ gutter: 24, lg: 8, md: 12, sm: 24, xs: 24 }">
   <ng-template #item let-item>
     <g2-card [title]="title" [bordered]="true" [total]="item.balance | _currency" [footer]="footer" [avatar]="avatar" [action]="action">
       <ng-template #title>
@@ -92,7 +107,4 @@
       </ng-template>
     </g2-card>
   </ng-template>
-  <ng-template #pagination>
-    <nz-pagination [nzTotal]="pagination.pageCount" [nzPageSize]="pagination.perPage" (nzPageIndexChange)="getData()"></nz-pagination>
-  </ng-template>
 </nz-list>
diff --git a/src/app/routes/account/index/index.component.ts b/src/app/routes/account/index/index.component.ts
@@ -11,17 +11,18 @@ import { AccountFormComponent } from './../form/form.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountIndexComponent implements OnInit {
-  q = {
+  q: any = {
     page: 1,
-    name: '',
-    sort: '',
-    type: '',
+    pageSize: 50,
   };
+  accountSorts = [
+    { value: '-balance_cent', label: '余额倒序' },
+    { value: 'balance_cent', label: '余额正序' },
+  ];
   accountTypes: any[] = [];
   list: Array<{ id: number; name: string; type: string; color: string; balance: string }> = [];
 
   loading = true;
-  pagination: {};
   overview: { count: number; net_asset: number; total_assets: number; liabilities: number };
 
   constructor(
@@ -40,9 +41,13 @@ export class AccountIndexComponent implements OnInit {
 
   getData(): void {
     this.loading = true;
+    const q = {};
+    Object.entries(this.q)
+      .filter(([, value]) => value !== null)
+      .map(([key, value]) => (q[key] = value));
+    this.q = q;
     this.http.get('/api/accounts', this.q).subscribe((res) => {
       this.list = res.data.items;
-      this.pagination = res.data._meta;
       this.loading = false;
       this.cdr.detectChanges();
     });
@@ -55,8 +60,7 @@ export class AccountIndexComponent implements OnInit {
         return;
       }
       if (res.data) {
-        const init = { type: '', name: '全部' };
-        this.accountTypes = [init, ...res.data];
+        this.accountTypes = res.data;
         this.cdr.detectChanges();
       }
     });
@@ -69,18 +73,14 @@ export class AccountIndexComponent implements OnInit {
     });
   }
 
-  submit(): void {
-    console.log(this.q);
-
+  search(): void {
     this.getData();
   }
 
   reset(): void {
     this.q = {
       page: 1,
-      name: '',
-      sort: '',
-      type: '',
+      pageSize: 50,
     };
     this.getData();
   }

diff --git a/src/app/routes/record/index/index.component.html b/src/app/routes/record/index/index.component.html
@@ -23,7 +23,7 @@
     <se *ngFor="let selectLabel of selectLabels" [label]="selectLabel.label" col="4">
       <nz-select [(ngModel)]="q[selectLabel.key]" [name]="selectLabel.key" [nzPlaceHolder]="'全部'" nzShowSearch nzAllowClear>
         <nz-option nzCustomContent [nzLabel]="i.name" [nzValue]="i.id" *ngFor="let i of selectData[selectLabel.key]">
-          <i nz-icon nzIconfont="icon-{{ i.icon }}" *ngIf="i.icon" class="select-icon"></i>{{ i.name }}
+          <i nz-icon nzIconfont="icon-{{ i.icon }}" *ngIf="i.icon"></i>{{ i.name }}
         </nz-option>
       </nz-select>
     </se>