建站资讯

快递下单小程序_Angular封装查找框组件操作示例

作者:admin 发布时间:2021-01-07
Angular封装搜索框组件操作示例       这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下

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

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

大致样式如下图:

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

<:

 div nz-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 {{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" [hidden]="filterLength = 3" 
 button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()" 查询 /button 
 button nz-button type="reset" (click)="resetData()" 重置 /button 
 /nz-col 
 /nz-row 
 nz-row [hidden]="filterLength 3" 
 nz-col [nzSpan]="24" 
 button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()" 查询 /button 
 button nz-button type="reset" (click)="resetData()" 重置 /button 
 a (click)="expandForm = !expandForm" *ngIf="filterLength 3" 
 {{expandForm '收起' : '展开'}}
 i [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm" /i 
 /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',
 ',
 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去进行筛选。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。



收缩