直接上代码不多说
list.component.html
<ol class="breadcrumb text-primary rounded-0" style="border:1px solid #e6e6e6;">
<li> <a routerLink=""><i class="fa fa-home"></i> 首页 </a></li>
<li> <a><i class="fa fa fa-file-text-o"></i> XXX列表 </a></li>
</ol>
<br>
<form class="card rounded-0" #searchForm="ngForm" (ngSubmit)="doSearch()">
<div class="card-header"><i class="fa fa-search"></i> 筛选</div>
<div class="card-block">
<!-- 一个筛选条件一个<div class="input-group" ></div> <br>-->
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">筛选条件(根据某个字段查询/模糊查询)</button>
</span>
<!-- search_xxx xxx代表字段名 search.xxx同左-->
<input #search_xxx="ngModel" name="search_xxx" [(ngModel)]="search.xxx" type="text" class="form-control" placeholder="请输入会员名称">
</div>
<br>
<!-- 根据日期查询的模板 -->
<div class="input-group" style="width:50%">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">查询日期</button>
</span>
<input #search_date="ngModel" class="form-control" placeholder="请选择日期" type="text" name="search_date" [(ngModel)]="search.date"
ngbDatepicker #d="ngbDatepicker">
<span class="input-group-btn">
<button class="btn btn-secondary" (click)="d.toggle()" type="button">
<img src="..\..\..\..\..\assets\system\calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</span>
<!-- <input #search_date="ngModel" name="search_date" [(ngModel)]="search.date" type="date" class="form-control" placeholder="请输入查询日期"> -->
</div>
<br>
<!-- 根据类型来查询的模版 -->
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">详情类别</button>
</span>
<select class="custom-select" name="search_classify_id" [(ngModel)]="search.classify_id">
<option value="">全部类型</option>
<option *ngFor = "let item of classify" [value]="item.id">{{item.name}}</option>
<!-- <option value="0">状态</option>
<option value="1">逆状态</option> -->
</select>
</div>
<br>
<div class="row">
<div class="col-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">查询结果</button>
</span>
<input type="text" class="form-control text-center bg-white" value="{{page.totalItems}}" readonly>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">条</button>
</span>
</div>
</div>
<div class="col-6 text-right">
<button type="submit" class="btn btn-secondary pointer" [disabled]="!searchForm.form"><i class="fa fa-search"></i> 查询</button>
</div>
</div>
</div>
</form>
<br>
<div class="card rounded-0" style="padding:10px 10px;">
<div class="table-pad">
<table class="table table-striped">
<thead>
<tr>
<th class="border-0">ID(主键)</th>
<!-- 需要列表显示的信息 比如显示的字段信息、时间、状态啥的-->
<th class="border-0">其他信息</th>
<th class="border-0">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data;index as i">
<td>{{item.id}}</td>
<!-- item.xxx --xxx表示接口接收到的数据的字段名 -->
<td>{{item.other}}</td>
<td>
<!-- 多状态的显示的模板 -->
<span [hidden]="item.status!=1">状态1</span>
<span [hidden]="item.status!=2">状态2</span>
<span [hidden]="item.status!=0">状态0</span>
</td>
<td>{{item.created_time}}</td>
<td>
<button routerLink="/lotus/pray/info/{{item.id}}" class="btn btn-outline-info btn-sm"><i class="fa fa-info"></i> 详情</button>
<!-- <button (click)="delExhibition(alert,i)" class="btn btn-outline-danger btn-sm"><span class="fa fa-trash-o"> 删除</span></button> -->
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary btn-sm" ngbDropdownToggle><i class="fa fa-hand-paper-o"></i> 操作</button>
<div class="dropdown-menu">
<!-- 改变状态的模板 -->
<button (click)="isModify(alert_info,item.id,1)" class="dropdown-item pointer" *ngIf="item.status==0"><span class="badge badge-info">设为XX</span></button>
<button (click)="isModify(alert_info,item.id,0)" class="dropdown-item pointer" *ngIf="item.status==1"><span class="badge badge-warning">取消XX</span></button>
<button (click)="delPray(alert_danger,i)" class="dropdown-item pointer"><span class="badge badge-danger">删除</span></button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<pagination class="pull-right" previousText="上一页" nextText="下一页" firstText="首页" lastText="尾页" [boundaryLinks]="true" [rotate]="false"
[maxSize]="5" [totalItems]="page.totalItems" [(ngModel)]="page.currentPage" (pageChanged)="pageChanged($event)" pageBtnClass="btn"
itemsPerPage="{{page.limitCount}}">
</pagination>
</div>
<app-modal-window #alert_danger [className]="'card-inverse card-danger'" [title]="'警告'" [message]="'确认删除此订单，操作不可恢复！'"></app-modal-window>
<app-modal-window #alert_info [className]="'card-inverse card-info'" [title]="'提示'" [message]="'确认修改？'"></app-modal-window>
list.component.ts
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
providers: [xxxListService]
})
export class ListComponent implements OnInit {
constructor() private xxListService: xxListService
}
ngOnInit() {
this.load();
this.baojiListService.getClass(classify => this.classify = classify)
}
//分页方法
pageChanged($event) {
this.page.currentPage = $event.page;
this.xxxListService.getBaoji(this.page.getWithParams(this.search), pages => {
this.baoji = pages.rows;
this.page.totalItems = pages.total;
});
}
load() {
//时间查询的附加代码
console.log(this.search.date)
if ((this.search.date) && (this.search.date != "undefined-undefined-undefined")) {
this.search.date = this.search.date.year + "-" + this.search.date.month + "-" + this.search.date.day
} else {
this.search.date = '';
}
console.log(this.search)
//正常查询
this.xxxListService.getxxxList(this.data.getWithParams(this.search), datas => {
this.data.totalItems = datas.total;
this.data = datas.rows;
this.search.date = '';
});
}
// 删除
delPray(alert: any, id: number) {
alert.show(() => {
this.xxxListService.del(this.data[index].id, () => this.data.splice(index, 1))
})
}
// 状态改变 --针对于正反状态
isModify(alert: any, index: number, is_modify: number) {
alert.show(() => {
this.xxxListService.isModify({ id: this.data[index].id, status: is_modify }, () => { this.data[index].is_modify = is_modify });
this.load();
})
}
is_modify: number;
change(feature: any, checked: boolean) {
console.log(feature)
checked ? this.is_modify = 1 : this.is_modify = 0;
console.log(this.is_modify)
}
// 分页参数
page: Page = new Page()
// 列表数据
xxx: Array < any > = new Array<any>()
// 查询参数 {里面填写对应的需要筛选条件字段}
search: any = { other: '', date: '' }
}
服务因为接口不一，就不直接贴了，有些地方可能只是理论上是这样....还没有直接测试
网友评论