Angular封装搜索框组件操作示例

本文实例讲述了angular封装搜索框组件操作。分享给大家供大家参考，具体如下：

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

大致样式如下图：

这里我使用的是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去进行筛选。