封装搜索框组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/guanguan0_0/article/details/84790982

后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。

大致样式如下图：

这里我使用的是ng-zorro蚂蚁金服的angular组件库

index.html:

<div nz-form class="ant-advanced-search-form">
  <nz-row [nzGutter]="24">
    <nz-col [nzSpan]="8" *ngFor="let item of columns, let i=index" [style.display]="(i>2 && !expandForm) ? 'none' : 'block'">
      <nz-form-item nzFlex>
        <nz-form-label style="min-width: 20%;">{{item.label}}</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="searchData[item.key]" placeholder="请输入" *ngIf="item.type === 'input'">
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'select'">
            <nz-option *ngFor="let son of item.data; let idx = index" [nzLabel]="son.label" [nzValue]="son.value"></nz-option>
          </nz-select>
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'gender'">
            <nz-option nzLabel="女" nzValue=0></nz-option>
            <nz-option nzLabel="男" nzValue=1></nz-option>
          </nz-select>
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'operator'"
            nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch($event)" (ngModelChange)="changeOption($event)">
            <ng-container *ngFor="let opt of operatorOptions">
              <nz-option [nzValue]="opt" [nzLabel]="opt.name + '-'+ opt.user_type"></nz-option>
            </ng-container>
          </nz-select>
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'merchant'"
            nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_merchant($event)">
            <ng-container *ngFor="let opt of merchantOptions">
              <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
            </ng-container>
          </nz-select>
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'client'"
            nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_client($event)">
            <ng-container *ngFor="let opt of clientOptions">
              <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
            </ng-container>
          </nz-select>
          <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'admin'"
            nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_admin($event)">
            <ng-container *ngFor="let opt of adminOptions">
              <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
            </ng-container>
          </nz-select>
          <nz-date-picker *ngIf="item.type === 'date'" [(ngModel)]="searchData[item.key]"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
    </nz-col>
    <nz-col [nzSpan]="8" style="text-align: left;" [hidden]="filterLength >= 3">
      <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button>
      <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
    </nz-col>
  </nz-row>
  <nz-row [hidden]="filterLength < 3">
    <nz-col [nzSpan]="24" style="text-align: right;">
      <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button>
      <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
      <a (click)="expandForm = !expandForm" *ngIf="filterLength > 3">
        {{expandForm ? '收起' : '展开'}}
        <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
      </a>
    </nz-col>
  </nz-row>
</div>

index.ts:

import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core';
import { _HttpClient } from '@delon/theme';

@Component({
  selector: 'search-filter',
  templateUrl: './index.html',
  styleUrls: ['./index.less']
})

export class SearchFilterComponent implements OnInit {
  @Input() columns;
  @Input() loading;
  @Output() toSearch = new EventEmitter<Object>();
  constructor(
    private httpClient: _HttpClient,
  ) { }
  searchData: any = {
    page: 1,
    limit: 15
  };
  filterLength = 0;
  operatorOptions = [];
  merchantOptions = [];
  clientOptions = [];
  adminOptions = [];

  ngOnInit() {
    this.columns.forEach(el => {
      if (el.type == 'operator') {
        this.searchData['user_id'] = '';
        this.searchData['el.user_type'] = '';
        this.onSearch('')
      }
      if (el.type == 'merchant') {
        this.onSearch_merchant('')
      }
      if (el.type == 'client') {
        this.onSearch_client('')
      }
      if (el.type == 'admin') {
        this.onSearch_admin('')
      }
      this.searchData[el.key] = "";
      this.filterLength++;
    })
  }

  // 清空搜索条件
  resetData() {
    for (const i in this.searchData) {
      if (this.searchData[i]) {
        this.searchData[i] = '';
      }
    }
    this.searchData.page = 1;
    this.searchData.limit = 15;
    this.submit();
  }
  // 搜索按钮事件
  submit() {
    if (this.searchData.operator) {
      delete this.searchData.operator;
    }
    if (this.searchData.start_at) {
      this.searchData.start_at = this.format(this.searchData.start_at)
    }
    if (this.searchData.end_at) {
      this.searchData.end_at = this.format(this.searchData.end_at)
    }
    this.toSearch.emit(this.searchData);
  }

  // 日志操作人搜索
  onSearch(value: string) {
    this.httpClient.get('/api/admin/member?name=' + value).subscribe((res: {}) => {
      const resData: any = res;
      this.operatorOptions = resData.message;
    });
  }
  changeOption(value: {}) {
    this.searchData.user_id = value['id'];
    this.searchData.user_type = value['user_type'];
  }

  // 商户名称搜索
  onSearch_merchant(value: string) {
    this.httpClient.get('/api/admin/merchant?name=' + value).subscribe((res: {}) => {
      const resData: any = res;
      this.merchantOptions = resData.message.data;
    });
  }

  // 客户名搜索
  onSearch_client(value: string) {
    this.httpClient.get('/api/admin/user?name=' + value).subscribe((res: {}) => {
      const resData: any = res;
      this.clientOptions = resData.message.data;
    });
  }

  // 操作员名搜索
  onSearch_admin(value: string) {
    this.httpClient.get('/api/admin/admin?name=' + value).subscribe((res: {}) => {
      const resData: any = res;
      this.adminOptions = resData.message.data;
    });
  }

  // 格式化时间
  format(time) {
    var date = new Date(time);
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return (year + '-' + month + '-' + day);
  }
}

index.less:

:host {
    display: block;
    width: 95%;
    margin: 0 auto;
    ::ng-deep {
        nz-form-control {
            min-width: 60%;
        }
        nz-select {
            width: 100%;
        }
        .ant-calendar-picker {
            width: 100%;
        }
    }
}

其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。