1、ts文件
import { Component, OnInit, Injectable, Input, Output, EventEmitter } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { AlertService } from 'ng-jhipster';
import { Principal } from '../'; // 分頁設置，權限驗證等
import { API_URL } from '../../app.constants';
import { TreeModule, TreeNode } from 'primeng/primeng';
import { RadioButtonModule } from 'primeng/primeng';
@Component({
selector: 'rv-seg-query',
styles: [`
.ipt-search{
display: inline-block;
position: relative;
}
.ipt-search .btn-search{
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
color: gray;
}
`],
templateUrl: './rvSegQuery.component.html'
})
export class RvSegQueryComponent implements OnInit {
private resourceUrl = `${API_URL}/api/wrRvSeg`;
// 樹的篩選條件:1-按行政區划，2-按河流
rvSegType: number;
treeNodes: TreeNode[];
@Input() selectedNode: TreeNode;
query: any = {};
loading: boolean = true;
titleStr: string = '';
allSelectedNode: any[] = [];
hiddenAddv: boolean = true;
hiddenRvSeg: boolean = false;
// 父節點code需要傳進來
@Input() parentCode: string;
@Output() onNodeSelect = new EventEmitter();
//所有樹數據
treeList: any[];
//第幾條
pageIndex: number = 0;
//總條數
totalRecords: number = 0;
//總頁數
totalPage: number = 0;
//每頁30條
itemsPerPage: number = 30;
nowScrollTop: number = 0;//當前滾動的離頂部的距離
constructor(
private http: Http,
private alertService: AlertService //錯誤管理
) { }
/*注冊滾動事件*/
registerScrollEvent() {
this.nowScrollTop = 0;
let treeDiv = document.getElementsByClassName('ui-tree-container');
// if (treeDiv.addEventListener) {
// "abort" | "activate" | "beforeactivate" | "beforecopy" | "beforecut" | "beforedeactivate"
// | "beforepaste" | "blur" | "canplay" | "canplaythrough" | "change" | "click" | "contextmenu"
// | "copy" | "cuechange" | "cut" | "dblclick" | "deactivate" | "drag" | "dragend" | "dragenter"
// | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended"
// | "error" | "focus" | "input" | "invalid" | "keydown" | "keypress" | "keyup" | "load"
// | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave"
// | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "mousewheel" | "MSContentZoom"
// | "MSManipulationStateChanged" | "paste" | "pause" | "play" | "playing"
// | "progress" | "ratechange" | "reset" | "scroll" | "seeked" | "seeking"
// | "select" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate"
// | "volumechange" | "waiting" | "ariarequest" | "command" | "gotpointercapture"
// | "lostpointercapture" | "MSGestureChange" | "MSGestureDoubleTap" | "MSGestureEnd"
// | "MSGestureHold" | "MSGestureStart" | "MSGestureTap" | "MSGotPointerCapture"
// | "MSInertiaStart" | "MSLostPointerCapture" | "MSPointerCancel" | "MSPointerDown"
// | "MSPointerEnter" | "MSPointerLeave" | "MSPointerMove" | "MSPointerOut"
// | "MSPointerOver" | "MSPointerUp" | "touchcancel" | "touchend" | "touchmove"
// | "touchstart" | "webkitfullscreenchange" | "webkitfullscreenerror" | "pointercancel"
// | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout"
// | "pointerover" | "pointerup" | "wheel"
if (treeDiv.length > 0 && treeDiv[0].addEventListener) {
treeDiv[0].addEventListener('scroll', (event) => {
this.scrollFunc(event);
});
}
}
/**
* 滾動回調方法
* 判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，
* 現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，
* 其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個 值，
* detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。
*/
scrollFunc(e) {
e = e || window.event;
if (e.wheelDelta) {//IE/Opera/Chrome
// alert(e.wheelDelta);
if (e.wheelDelta == -120) {
this.nextScoll(e);
}
} else if (e.detail) {//Firefox
// alert(e.detail);
if (e.detail == -3) {
this.nextScoll(e);
}
} else if (e.target) {//滾動條滾動事件
let scrollTop = e.target.scrollTop;
if (scrollTop > this.nowScrollTop) {//向下滾
console.log('向下');
this.nextScoll({ wheelDelta: -120 });
} else if (scrollTop < this.nowScrollTop) { //像上滾
console.log('向上');
}
setTimeout(() => {
this.nowScrollTop = scrollTop;
}, 0);
}
}
ngOnInit() {
// setTimeout(()=>{
// this.registerScrollEvent();
// },200);
// 默認按行政區划進行查詢
this.rvSegType = 0;
// 將傳入進來的parentCode賦值給查詢條件
this.query.parentCode = this.parentCode;
this.loadTree();
}
/**
* radioBox選擇事件
*/
rvSegTypeClick(data) {
this.pageIndex = 0;
this.treeList = [];
this.totalPage = 0;
this.totalRecords = 0;
this.rvSegType = data.index;
// console.log(this.selectedNode);
if (this.rvSegType == 0) {
this.hiddenAddv = true;
this.hiddenRvSeg = false;
this.query.parentCode = this.parentCode;
} else {
if (this.selectedNode && this.selectedNode != null) {
this.query.parentCode = this.selectedNode.data.value;
}
this.hiddenAddv = false;
this.hiddenRvSeg = true;
//this.rvSegType = 1切換到河流樹時候添加滾動條滾動事件
setTimeout(() => {
this.registerScrollEvent();
}, 200);
}
this.loadTree();
}
search() {
this.pageIndex = 0;
this.treeList = [];
this.totalPage = 0;
this.totalRecords = 0;
this.loadTree();
}
/**
* 根據查詢條件加載列表
*/
loadTree() {
//加載樹之前先清空
this.treeNodes = [];
this.loading = true;
let body = this.query;
let headers = {
headers: new Headers({
})
};
let url: string = 'addvTreeQuery';
//判斷選擇的篩選條件
if (this.rvSegType == 1) {
//選擇的是河流
url = 'rvTreeQuery';
}
this.http.post(`${this.resourceUrl}/${url}`, body, headers)
.subscribe(
(res) => this.onSuccess(res.json(), res.headers),
(res) => this.onError(res.json())
);
}
clickTree() {
this.emitData();
}
onSuccess(data, headers) {
this.loading = false;
if (+data.responseCode !== 100) {
this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);
return;
}
//選擇的是河流
if (this.rvSegType == 1) {
if (data.treeList && data.treeList.length > this.itemsPerPage) {
this.treeList = data.treeList;
//總條數
this.totalRecords = data.treeList.length;
//總頁數
this.totalPage = this.totalRecords > this.itemsPerPage ? (this.totalRecords % this.itemsPerPage > 0 ? (this.parseInt(this.totalRecords / this.itemsPerPage) + 1) : (this.totalRecords / this.itemsPerPage)) : 1;
this.treeNodes = this.treeList.slice(this.pageIndex, this.pageIndex + this.itemsPerPage);
this.pageIndex += this.itemsPerPage;
} else {
this.treeNodes = data.treeList;
}
}
else {
this.treeNodes = data.treeList;
}
this.selectedNode = data.treeList[0];
this.emitData();
}
nextScoll(event) {
let scrollLoad: boolean = false;
if (event.wheelDelta) {//IE/Opera/Chrome
if (event.wheelDelta == -120) {
scrollLoad = true;
}
} else if (event.detail) {//Firefox
if (event.detail == 3) {
scrollLoad = true;
}
}
if (scrollLoad && this.rvSegType == 1 && this.treeList.length > 0) {
if (this.pageIndex > this.totalRecords) {
if (this.pageIndex - this.itemsPerPage < this.totalRecords) {
let treeListTemp: any[] = this.treeList.slice(this.pageIndex - this.itemsPerPage, this.pageIndex);
this.pageIndex += this.itemsPerPage;
treeListTemp.forEach(element => {
this.treeNodes.push(element);
});
} else {
return;
}
} else {
if (this.pageIndex + this.itemsPerPage < this.totalRecords) {
let treeListTemp: any[] = this.treeList.slice(this.pageIndex, this.pageIndex + this.itemsPerPage);
this.pageIndex += this.itemsPerPage;
treeListTemp.forEach(element => {
this.treeNodes.push(element);
});
} else {
let treeListTemp: any[] = this.treeList.slice(this.pageIndex, this.totalPage);
this.pageIndex += this.itemsPerPage;
treeListTemp.forEach(element => {
this.treeNodes.push(element);
});
}
}
}
}
parseInt(e) {
return Number.parseInt(e + '');
}
onError(error) {
this.loading = false;
this.alertService.error(error.error, error.message, null);
}
getTitle(treeNode: TreeNode, title?: string) {
// if(title) {
let isPush: boolean = true;
this.allSelectedNode.forEach(element => {
if (element.data.value == treeNode.data.value) {
isPush = false;
}
});
if (isPush) {
this.allSelectedNode.push(treeNode);
}
// }
let titleStr: string = title ? title + '>' + treeNode.label : treeNode.label;
if (treeNode.parent) {
if (this.allSelectedNode.length > 0) {
isPush = true;
this.allSelectedNode.forEach(element => {
if (element.data.value == treeNode.parent.data.value) {
isPush = false;
}
});
if (isPush) {
this.allSelectedNode.push(treeNode.parent);
}
}
titleStr = titleStr + '>' + treeNode.parent.label
if (treeNode.parent.parent) {
titleStr = this.getTitle(treeNode.parent.parent, titleStr);
}
}
return titleStr;
}
fanxiang(titleStr: string) {
let titleStrNew: string = '';
if (titleStr != null) {
let titles: string[] = titleStr.split('>');
for (let i = titles.length - 1; i >= 0; i--) {
if (i == titles.length - 1) {
titleStrNew = titles[i];
} else {
titleStrNew = titleStrNew + '>' + titles[i];
}
}
}
return titleStrNew;
}
/**
* 根據不同的選中級別返回不同的數據
*/
private emitData() {
// 判斷選中的級別，根據不同的級別返回不同的數據
// 選中的是河段
// console.log(this.selectedNode) ;
this.allSelectedNode = [];
this.titleStr = this.getTitle(this.selectedNode);
this.titleStr = this.fanxiang(this.titleStr);
let result: any = {};
result.titleStr = this.titleStr;
if (this.allSelectedNode.length > 0) {
let temp: any[] = [];
for (let i = this.allSelectedNode.length - 1; i >= 0; i--) {
temp.push(this.allSelectedNode[i]);
}
this.allSelectedNode = temp;
// console.log(this.allSelectedNode);
}
result.allSelectedNode = this.allSelectedNode;
if (this.selectedNode.data.rvSegIdPath != null) {
result.type = '3';
result.rvSegIdPath = this.selectedNode.data.rvSegIdPath;
result.addvcdPath = this.selectedNode.data.addvcdPath;
}
else {
// 選中的是行政區划
if (this.rvSegType == 0) {
result.type = '1';
result.addvcdPath = this.selectedNode.data.addvcdPath;
}
// 選中的是河流選項
else {
result.type = '2';
result.addvcdPath = `/${this.parentCode}`;
result.rvCd = this.selectedNode.data.value;
}
}
this.onNodeSelect.emit(result);
}
}
2.頁面
<div class="data-table-wrap">
<div class="data-table-search">
<!--搜索-->
<div class="left">
<form class="form-inline" (ngSubmit)="search()">
<div class="form-group ipt-search">
<input type="text" class="form-control" name="searchName" [(ngModel)]="query.searchName">
<!--<i class="fa fa-search" (click)="search()"></i>-->
<span class="btn-search" (click)="search()"><i class="fa fa-search"></i></span>
</div>
</form>
</div>
<div class="right">
{{titleStr}}
</div>
</div>
<div class="tab">
<div id="tree-div" (mousewheel)="nextScoll($event)" (DOMMouseScroll)="nextScoll($event)">
<p-tabView (onChange)="rvSegTypeClick($event)">
<p-tabPanel header="按行政區划" [selected]="true">
<div *ngIf="hiddenAddv">
<p-tree class="areaTree" [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="clickTree()"></p-tree>
</div>
</p-tabPanel>
<p-tabPanel header="按河流">
<div *ngIf="hiddenRvSeg">
<p-tree class="areaTree" [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="clickTree()"></p-tree>
</div>
</p-tabPanel>
</p-tabView>
</div>
</div>
</div>