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

<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>

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); }}

: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%;    }  }}