首页 > 代码库 > angular2之父子组件的调用
angular2之父子组件的调用
1.父组件ts
/**
* 描述:查询分析
* @version:1.0.0
* @author: zb
* @创建时间: 2017-06-08 15:37:59
*/
import { Component, OnInit, OnDestroy, ViewChild } from ‘@angular/core‘;
import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from ‘@angular/router‘;
import { Http, Headers } from ‘@angular/http‘;
import { Observable } from ‘rxjs/Rx‘;
import { EventManager, AlertService } from ‘ng-jhipster‘;
import { Subscription } from ‘rxjs/Rx‘;
import { ITEMS_PER_PAGE, Principal } from ‘../shared‘; // 分页设置，权限验证等
import { API_URL } from ‘../app.constants‘;
import { TreeModule, TreeNode } from ‘primeng/primeng‘;
import { TabViewModule, Message } from ‘primeng/primeng‘;
import { WrRvSegMgmtComponent, WrRvRecMgmtComponent, BaseComponentsMgmtComponent, WrRvRecMgmtDetailComponent, WrRvLogMgmtComponent, WrRvLogMgmtDetailComponent } from ‘./‘;
import { WrRvRecChartComponent, WrRvLogChartComponent, WrRvSegMgmtDetailComponent } from ‘./‘;
import { BaseComponentsChartComponent } from ‘./‘;
import { PdoBCountMgmtDetailComponent, StBCountMgmtDetailComponent, WrRvSegPsMgmtDetailComponent, WrIntBMgmtDetailComponent } from ‘./‘;
import { LocalStorageService, SessionStorageService } from ‘ng2-webstorage‘;
@Component({
selector: ‘wr-query-analyze‘,
styles: [`
p-tree{
float:left;
margin-right:0.5rem;
}
p-datatable{
display:flex;
}
p-tabView{
display:flex;
padding: 0em 0em 0em;
}
.form-inline button{
margin-left:0.5rem;
}
h2{
margin:0.5rem 0;
}
.data-table-wrap{
// display:inline-block;
}
.data-table-wrap p-tree{
float: left;
height: 48.9rem;
margin-right: 1rem;
}
:host >>> .ui-tree{
height: 100%;
width:16em;
margin-top:0.5rem;
}
.areaTable{
display: flex;
}
:host >>> .col-button{
text-align:center;
}
:host >>> .col-button button{
margin:0.5rem 0;
}
:host >>> .data-table-search{
display: flex;
margin-top:0.5rem;
margin-bottom:0.5rem;
}
:host >>> .form-group:nth-child(2){
margin:0 1rem;
}
:host >>> .form-inline{
flex:1;
-webkit-box-flex:1;
}
:host >>> .form-inline .form-control {
display: inline-block;
width: auto;
margin-left: 4px;
vertical-align: middle;
}
:host >>> .modal-dialog{
margin-top:15%;
}
p-calendar{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .dialog-datepick{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .ui-inputtext {
display: -webkit-box;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
}
:host >>> .btn-update{
position: absolute;
right: 25px;
top: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
:host >>> .ui-tabview-nav{
border:0px;
border-bottom:1px solid #d9d9d9;
padding:0 !important;
}
:host >>> .ui-tabview .ui-tabview-panel{
padding:1em 0;
}
:host >>> .ui-tabview{
width:100%;
}
.ui-tabview-panel{
padding:0;
}
`],
templateUrl: ‘./wr-queryAnalyze.component.html‘
})
export class WrQueryAnalyzeComponent implements OnInit, OnDestroy {
parentCode: string;
// 河段树选择的节点
selectedNode: TreeNode;
// 查询条件
query: any = {};
itemsPerPage: number = ITEMS_PER_PAGE;
totalRecords: number;
sortBy: string;
page: number;
loading: boolean = true;
index: number = 0;
hiddenRec: boolean = true;
hiddenRecDetail: boolean = true;
hiddenLog: boolean = true;
hiddenLogDetail: boolean = true;
rvRecId: string;
hiddenAll: boolean = true;
hiddenPdoBDetail: boolean = true;
hiddenStBDetail: boolean = true;
baseComponentsId: string;
// hiddenRvSegPs: boolean = true;
hiddenRvSegPsDetail: boolean = true;
hiddenIntBDetail: boolean = true;
hiddenSeg: boolean = false;
hiddenSegDetail: boolean = true;
@ViewChild(‘wrRvRecChart‘)
private wrRvRecChart: WrRvRecChartComponent;
@ViewChild(‘wrRvReclist‘)
private wrRvReclist: WrRvRecMgmtComponent;
@ViewChild(‘wrRvRecDetail‘)
private wrRvRecDetail: WrRvRecMgmtDetailComponent;
@ViewChild(‘pdoBDetail‘)
private pdoBDetail: PdoBCountMgmtDetailComponent;
@ViewChild(‘stBDetail‘)
private stBDetail: StBCountMgmtDetailComponent;
@ViewChild(‘RvSegPsDetail‘)
private RvSegPsDetail: WrRvSegPsMgmtDetailComponent;
@ViewChild(‘IntBDetail‘)
private IntBDetail: WrIntBMgmtDetailComponent;
@ViewChild(‘jhiWrRvSeg‘)
private jhiWrRvSeg: WrRvSegMgmtComponent;
@ViewChild(‘baseComponents‘)
private baseComponents: BaseComponentsMgmtComponent;
@ViewChild(‘jhiWrRvLog‘)
private jhiWrRvLog: WrRvLogMgmtComponent;
@ViewChild(‘wrRvLogDetail‘)
private wrRvLogDetail: WrRvLogMgmtDetailComponent;
@ViewChild(‘baseComponentsChart‘)
private baseComponentsChart: BaseComponentsChartComponent;
@ViewChild(‘wrRvLogChart‘)
private wrRvLogChart: WrRvLogChartComponent;
@ViewChild(‘wrRvSegDetail‘)
private wrRvSegDetail: WrRvSegMgmtDetailComponent;
account: any;
/**
* 巡河统计构造函数
* @param http
* @param alertService
*/
constructor(
private http: Http,
private router: Router,
private $localStorage: LocalStorageService,
private $sessionStorage: SessionStorageService,
private eventManager: EventManager, // 事件管理
private alertService: AlertService) { }
/**
* 页面初期加载
*/
ngOnInit() {
// 示例里面使用荣昌区，实际用的时候应该是根据登录人的所在区域来获取
this.account = this.$localStorage.retrieve(‘account‘) || this.$sessionStorage.retrieve(‘account‘);
if (this.account.addvcd != null) {
this.parentCode = this.account.addvcd;
}
// else {
// this.parentCode = "500153000000";
// }
}
//第一级tabView 点击切换加载
onTabChange(event) {
if (event.index == 0) {//河段信息
this.index = 0;
this.hiddenSeg = false;
this.hiddenSegDetail = true;
this.jhiWrRvSeg.selectedNode = this.selectedNode;
this.jhiWrRvSeg.page = 0;
this.jhiWrRvSeg.loadAll();
}
if (event.index == 1) {//基础设施与部件
this.index = 1;
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
// if (event.index == 2) {//水质信息
// this.index = 2;
// }
if (event.index == 2) {//巡河信息
this.index = 2;
this.hiddenRecDetail = true; //隐藏详细巡河信息
this.hiddenRec = false; //显示巡河信息列表
this.wrRvReclist.selectedNode = this.selectedNode;
this.wrRvReclist.page = 0;
this.wrRvReclist.loadAll();
}
if (event.index == 3) {//河道事件
this.index = 3;
this.hiddenLogDetail = true; //隐藏详细巡河信息
this.hiddenLog = false; //显示巡河信息列表
// this.wrRvLogDetail = wrRvLogDetail;
// this.jhiWrRvLog = jhiWrRvLog;
this.jhiWrRvLog.selectedNode = this.selectedNode;
this.jhiWrRvLog.query = {};
this.jhiWrRvLog.query.ts = ‘‘;
this.jhiWrRvLog.query.ud = ‘‘;
this.jhiWrRvLog.msgs = [];
this.jhiWrRvLog.page = 0;
this.jhiWrRvLog.loadAll();
}
}
//第二级河段信息tabView 点击切换加载
onTabSegChange(event) {
if (event.index == 0) {//河段信息
this.index = 0;
this.hiddenSeg = false;
this.hiddenSegDetail = true;
this.jhiWrRvSeg.selectedNode = this.selectedNode;
this.jhiWrRvSeg.page = 0;
this.jhiWrRvSeg.loadAll();
}
}
/**
* 巡河信息查看详情
* @param rvSegId
*/
loadSegDetail(rvSegId) {
if (rvSegId && rvSegId != null && rvSegId != ‘‘) {
this.hiddenSeg = true;
this.hiddenSegDetail = false;
this.wrRvSegDetail.rvSegId = rvSegId;
this.wrRvSegDetail.loadAll();
}
}
/**
* 从巡河详细返回 到列表页面
* @param back
*/
backSegList(back) {
if (back != null && back != ‘‘ && back == ‘backSegList‘) {
this.hiddenSegDetail = true;
this.hiddenSeg = false;
this.jhiWrRvSeg.selectedNode = this.selectedNode;
this.jhiWrRvSeg.page = 0;
this.jhiWrRvSeg.loadAll();
}
}
/**
* 巡河信息查看详情
* @param rvRecId
*/
loadRecDetail(rvRecId) {
if (rvRecId && rvRecId != null && rvRecId != ‘‘) {
this.hiddenRec = true;
this.hiddenRecDetail = false;
this.wrRvRecDetail.rvRecId = rvRecId;
this.wrRvRecDetail.load();
}
}
/**
* 从巡河详细返回 到列表页面
* @param back
*/
backRecList(back) {
if (back != null && back != ‘‘ && back == ‘backRecList‘) {
this.hiddenRecDetail = true;
this.hiddenRec = false;
this.wrRvReclist.selectedNode = this.selectedNode;
this.wrRvReclist.page = 0;
this.wrRvReclist.loadAll();
}
}
//第二级巡河信息tabView 点击切换加载
onTabRecChange(event) {
if (event.index == 0) {//巡河信息
this.index = 2;
this.hiddenRecDetail = true; //隐藏详细巡河信息
this.hiddenRec = false; //显示巡河信息列表
this.wrRvReclist.selectedNode = this.selectedNode;
this.wrRvReclist.query = {};
this.wrRvReclist.page = 0;
this.wrRvReclist.loadAll();
}
if (event.index == 1) {//巡河信息统计分析
this.index = 2.1;
this.hiddenRecDetail = true; //隐藏详细巡河信息
this.hiddenRec = true; ///隐藏巡河信息列表
this.wrRvRecChart.queryChar = {};
this.wrRvRecChart.selectedNode = this.selectedNode;
this.wrRvRecChart.queryChar.beginTm = new Date(new Date().setMonth((new Date().getMonth() - 3)));
this.wrRvRecChart.queryChar.endTm = new Date();
this.wrRvRecChart.loadChar();
}
}
//第二级基础设施与部件 tabView 点击切换加载
onTabComponentChange(event) {
console.log(event);
if (event.index == 0) {//基础设施与部件
this.index = 1;
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
if (event.index == 1) {//基础设施与部件统计
this.index = 1.1;
this.hiddenAll = true;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponentsChart.selectedNode = this.selectedNode;
this.baseComponentsChart.ngOnInit();
}
}
//第二级河道事件tabView 点击切换加载
onTabLogChange(event) {
console.log(event);
if (event.index == 0) {//河道事件
this.index = 3;
this.hiddenLogDetail = true; //隐藏详细巡河信息
this.hiddenLog = false; //显示巡河信息列表
this.jhiWrRvLog.selectedNode = this.selectedNode;
this.jhiWrRvLog.query = {};
this.jhiWrRvLog.query.ts = ‘‘;
this.jhiWrRvLog.query.ud = ‘‘;
this.jhiWrRvLog.msgs = [];
this.jhiWrRvLog.page = 0;
this.jhiWrRvLog.loadAll();
}
if (event.index == 1) {//河道事件统计分析
this.index = 3.1;
this.hiddenLogDetail = true; //隐藏详细巡河信息
this.hiddenLog = true; ///隐藏巡河信息列表
// this.wrRvLogChart = wrRvLogChart;
this.wrRvLogChart.selectedNode = this.selectedNode;
this.wrRvLogChart.ngOnInit();
}
}
/**
* 巡河信息查看详情
* @param wrRvLogId
*/
loadLogDetail(wrRvLogId) {
if (wrRvLogId && wrRvLogId != null && wrRvLogId != ‘‘) {
this.hiddenLog = true;
this.hiddenLogDetail = false;
this.wrRvLogDetail.wrRvLogId = wrRvLogId;
this.wrRvLogDetail.load();
}
}
/**
* 基础设施与部件 查看详情
* @param rvRecId
*/
loadDetailAll(event) {
console.log(event);
// 入河排污口 的详情 bdc82aa7-b2da-47ed-8b09-2aeb152a4aaf
if (event.comType == ‘3‘) {
if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {
this.hiddenAll = true;
this.hiddenPdoBDetail = false;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.pdoBDetail.baseComponentsId = event.baseComponentsId;
this.pdoBDetail.load();
}
}
// 水文测站 的详情 ad29b755-6eee-4791-8161-8879684d65cc
else if (event.comType == ‘4‘) {
if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {
this.hiddenAll = true;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = false;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.stBDetail.baseComponentsId = event.baseComponentsId;
this.stBDetail.load();
}
}
// 公示牌 的详情 5806fa4b-36f8-4ac9-ada0-d5b5ee4f80ae
else if (event.comType == ‘9‘) {
if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {
this.hiddenAll = true;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = false;
this.hiddenIntBDetail = true;
this.RvSegPsDetail.rvSegPsId = event.baseComponentsId;
this.RvSegPsDetail.load();
}
}
// 取水口 的详情 aba27a9b-58b4-4177-afff-cbd1dcd3446c
else if (event.comType == ‘1‘) {
if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {
this.hiddenAll = true;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = false;
this.IntBDetail.intCd = event.baseComponentsId;
this.IntBDetail.load();
}
}
}
/**
* 从入河排污口详细返回 到列表页面
* @param back
*/
backPdoBList(back) {
if (back != null && back != ‘‘ && back == ‘backPdoBList‘) {
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
}
/**
* 从水文测站详细返回 到列表页面
* @param back
*/
backStBList(back) {
if (back != null && back != ‘‘ && back == ‘backStBList‘) {
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
}
/**
* 从公示牌详细返回 到列表页面
* @param back
*/
backRvSegPsList(back) {
if (back != null && back != ‘‘ && back == ‘backRvSegPsList‘) {
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
}
/**
* 从巡河详细返回 到列表页面
* @param back
*/
backLogList(back) {
if (back != null && back != ‘‘ && back == ‘backLogList‘) {
this.hiddenLogDetail = true;
this.hiddenLog = false;
this.jhiWrRvLog.selectedNode = this.selectedNode;
this.jhiWrRvLog.page = 0;
this.jhiWrRvLog.loadAll();
}
}
/**
* 从取水口详细返回 到列表页面
* @param back
*/
backIntBList(back) {
if (back != null && back != ‘‘ && back == ‘backIntBList‘) {
this.hiddenAll = false;
this.hiddenPdoBDetail = true;
this.hiddenStBDetail = true;
this.hiddenRvSegPsDetail = true;
this.hiddenIntBDetail = true;
this.baseComponents.selectedNode = this.selectedNode;
this.baseComponents.page = 0;
this.baseComponents.loadAll();
}
}
/**
* 页面销毁时的操作
*/
ngOnDestroy() {
}
/**
* 河段树的节点选择事件
* @param node 选中的树节点
*/
onNodeSelect(node) {
this.loading = false;
this.selectedNode = node;
if (this.index == 0) { //加载河段信息
this.jhiWrRvSeg.selectedNode = node;
this.jhiWrRvSeg.page = 0;
this.jhiWrRvSeg.loadAll();
}
if (this.index == 1) {//基础设施与部件
this.baseComponents.selectedNode = node;
this.baseComponents.page = 0;
this.baseComponents.query = {};
this.baseComponents.rvSegIdPath = null;
this.baseComponents.loadAll();
}
if (this.index == 1.1) {//基础设施与部件统计
this.baseComponentsChart.selectedNode = node;
this.baseComponentsChart.selectedNode = this.selectedNode;
this.baseComponentsChart.ngOnInit();
}
// if (this.index == 2) {//水质信息
// }
// if (this.index == 2.1) {//水质信息统计
// }
if (this.index == 2) {//巡河信息
this.wrRvReclist.selectedNode = this.selectedNode;
this.wrRvReclist.page = 0;
this.wrRvReclist.loadAll();
}
if (this.index == 2.1) { //巡河信息统计
this.hiddenRecDetail = true; //隐藏详细巡河信息
this.hiddenRec = true; ///隐藏巡河信息列表
this.wrRvRecChart.selectedNode = this.selectedNode;
this.wrRvRecChart.loadChar();
}
if (this.index == 3) {//
this.jhiWrRvLog.selectedNode = this.selectedNode;
this.jhiWrRvLog.page = 0;
this.jhiWrRvLog.loadAll();
}
if (this.index == 3.1) {
this.index = 3.1;
this.wrRvLogChart.selectedNode = this.selectedNode;
this.wrRvLogChart.ngOnInit();
}
}
}
2.父页面
<div style="width: 1910px;">
<jhi-alert></jhi-alert>
<div class="data-table-wrap">
<rv-seg-query [parentCode]="parentCode" (onNodeSelect)="onNodeSelect($event)"></rv-seg-query>
<div class="data-table-loading" *ngIf="loading">
<i class="loading"></i>
</div>
<p-tabView (onChange)="onTabChange($event)" [selected]="true">
<p-tabPanel header="河段信息">
<wr-rv-seg-list [hidden]="hiddenSeg" #jhiWrRvSeg [selectedNode]="selectedNode" (loadSegDetail)="loadSegDetail($event)"></wr-rv-seg-list>
<wr-rv-seg-detail [hidden]="hiddenSegDetail" #wrRvSegDetail [rvSegId]="rvSegId" (backSegList)="backSegList($event)"></wr-rv-seg-detail>
</p-tabPanel>
<p-tabPanel header="基础设施与部件">
<p-tabView (onChange)="onTabComponentChange($event)">
<p-tabPanel header="信息查询">
<base-cpmponents-list [hidden]="hiddenAll" #baseComponents [selectedNode]="selectedNode" (loadDetailAll)="loadDetailAll($event)"></base-cpmponents-list>
<wr-pdob-detail [hidden]="hiddenPdoBDetail" #pdoBDetail [baseComponentsId]="baseComponentsId" (backPdoBList)="backPdoBList($event)"></wr-pdob-detail>
<wr-stb-detail [hidden]="hiddenStBDetail" #stBDetail [baseComponentsId]="baseComponentsId" (backStBList)="backStBList($event)"></wr-stb-detail>
<wr-rv-seg-ps-detail [hidden]="hiddenRvSegPsDetail" #RvSegPsDetail [rvSegPsId]="rvSegPsId" (backRvSegPsList)="backRvSegPsList($event)"></wr-rv-seg-ps-detail>
<wr-int-b-detail [hidden]="hiddenIntBDetail" #IntBDetail [intCd]="intCd" (backIntBList)="backIntBList($event)"></wr-int-b-detail>
</p-tabPanel>
<p-tabPanel header="统计分析">
<base-cpmponents-chart #baseComponentsChart [selectedNode]="selectedNode"></base-cpmponents-chart>
</p-tabPanel>
</p-tabView>
</p-tabPanel>
<!--<p-tabPanel header="水质信息">
水质信息...........
</p-tabPanel>-->
<p-tabPanel header="巡河信息">
<p-tabView (onChange)="onTabRecChange($event)">
<p-tabPanel header="信息查询">
<wr-rv-rec-list [hidden]="hiddenRec" #wrRvReclist [selectedNode]="selectedNode" (loadRecDetail)="loadRecDetail($event)"></wr-rv-rec-list>
<wr-rv-rec-detail [hidden]="hiddenRecDetail" #wrRvRecDetail [rvRecId]="rvRecId" (backRecList)="backRecList($event)"></wr-rv-rec-detail>
</p-tabPanel>
<p-tabPanel header="统计分析">
<wr-rv-rec-chart #wrRvRecChart [selectedNode]="selectedNode"></wr-rv-rec-chart>
</p-tabPanel>
</p-tabView>
</p-tabPanel>
<p-tabPanel header="河道事件">
<p-tabView (onChange)="onTabLogChange($event)">
<p-tabPanel header="信息查询">
<wr-rv-log-list [hidden]="hiddenLog" #jhiWrRvLog [selectedNode]="selectedNode" (loadLogDetail)="loadLogDetail($event)"></wr-rv-log-list>
<wr-rv-log-detail [hidden]="hiddenLogDetail" #wrRvLogDetail [wrRvLogId]="wrRvLogId" [selectedNode]="selectedNode" (backLogList)="backLogList($event)"></wr-rv-log-detail>
</p-tabPanel>
<p-tabPanel header="统计分析">
<wr-rv-log-chart #wrRvLogChart [selectedNode]="selectedNode"></wr-rv-log-chart>
</p-tabPanel>
</p-tabView>
</p-tabPanel>
</p-tabView>
</div>
</div>
3.子组件ts
/**
* 描述:[TB_WR_RV_REC][巡河记录]表的列表组件
* @version:1.0.0
* @author: zb
* @创建时间: 2017-06-08 18:22:35
*/
import { Component, OnInit, OnDestroy ,Injector,Input,Output, EventEmitter} from ‘@angular/core‘;
import { Response } from ‘@angular/http‘;
import { EventManager, AlertService} from ‘ng-jhipster‘;
import { Subscription } from ‘rxjs/Rx‘;
import { Http, Headers } from ‘@angular/http‘;
import { ITEMS_PER_PAGE, Principal,ChooseAddvUserService } from ‘../shared‘; // 分页设置，权限验证等
import { API_URL } from ‘../app.constants‘;
@Component({
selector: ‘wr-rv-rec-list‘,
styles:[`
p-tree{
float:left;
margin-right:0.5rem;
}
p-datatable{
display:flex;
}
.form-inline button{
margin-left:0.5rem;
}
h2{
margin:0.5rem 0;
}
.data-table-wrap p-tree{
float: left;
height: 50rem;
margin-right: 1rem;
}
:host >>> .ui-tree{
height: 100%;
}
.areaTable{
display: flex;
}
:host >>> .col-button{
text-align:center;
}
:host >>> .col-button button{
margin:0.5rem 0;
}
:host >>> .data-table-search{
display: flex;
margin-top:0.5rem;
margin-bottom:0.5rem;
}
:host >>> .form-group:nth-child(2){
margin:0 1rem;
}
:host >>> .form-inline{
flex:1;
-webkit-box-flex:1;
}
:host >>> .modal-dialog{
margin-top:15%;
}
p-calendar{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .dialog-datepick{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .ui-inputtext {
display: -webkit-box;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
}
:host >>> .btn-update{
position: absolute;
right: 25px;
top: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
`],
templateUrl: ‘./wr-rvRec-management.component.html‘
})
export class WrRvRecMgmtComponent implements OnInit, OnDestroy {
// 河段树选择的节点
@Input() selectedNode: any;
@Output() loadRecDetail = new EventEmitter();
wrRvRecs: any[];
error: any;
success: any;
itemsPerPage: any = ITEMS_PER_PAGE; // 读取配置，每页显示多少条
page: any = 0; // 默认显示第一页
sortBy: any; // 排序
totalRecords: number; // 总页数
loading: boolean;
// 查询条件
query: any = {};
private resourceUrl = `${API_URL}/api/wrRvRecI/queryRec`;
constructor(
private alertService: AlertService, // 错误提示相关的service
private principal: Principal, // 权限验证
private eventManager: EventManager, // 事件管理
private http: Http // 后台访问
) {}
ngOnInit() {
console.log(this.selectedNode);
this.itemsPerPage=15;
}
/**
* 根据查询条件加载列表
*/
loadAll () {
// 在树没有加载之前不加载表格的数据
if (this.selectedNode == null) {
return;
}
this.loading = true;
//选择的是行政区划
if(this.selectedNode.type == "1") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = this.selectedNode.addvcdPath;
this.query.rvCd = null;
this.query.rvSegIdPath = null;
//选择的是河流
} else if(this.selectedNode.type == "2") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = this.selectedNode.addvcdPath;
this.query.rvCd = this.selectedNode.rvCd;
this.query.rvSegIdPath = null;
//选择的是河段
} else if(this.selectedNode.type == "3") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = null;
this.query.rvCd = null;
this.query.rvSegIdPath = this.selectedNode.rvSegIdPath;
}
let body = this.query;
let headers = {
headers: new Headers({
pageIndex: this.page,
pageSize: this.itemsPerPage,
orderBy: this.sortBy,
})
};
this.http.post(`${this.resourceUrl}`, body, headers)
.subscribe(
(res) => this.onSuccess(res.json(), res.headers),
(res) => this.onError(res.json())
);
}
/**
* dataTable进行排序、分页、查询都会触发onLazyLoad事件
* @param e 参数包含分页信息、排序信息、查询信息等
*/
lazyLoad (e) {
// console.log(e);
this.sortBy = e.sortField ? e.sortField + ‘ ‘ + (e.sortOrder === 1 ? ‘asc‘ : ‘desc‘) : null;
this.page = e.first / e.rows;
// 树节点加载出来以后再进行grid的加载
if(this.selectedNode != null) {
this.loadAll();
}
}
loadView(rvRecId?: string){
this.loadRecDetail.emit(rvRecId) ;
}
/**
* 河段树的节点选择事件
* @param node 选中的树节点
*/
onNodeSelect(node) {
this.selectedNode = node;
//选择的是行政区划
if(this.selectedNode.type == "1") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = this.selectedNode.addvcdPath;
this.query.rvCd = null;
this.query.rvSegIdPath = null;
//选择的是河流
} else if(this.selectedNode.type == "2") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = this.selectedNode.addvcdPath;
this.query.rvCd = this.selectedNode.rvCd;
this.query.rvSegIdPath = null;
//选择的是河段
} else if(this.selectedNode.type == "3") {
this.query.type = this.selectedNode.type;
this.query.addvcdPath = null;
this.query.rvCd = null;
this.query.rvSegIdPath = this.selectedNode.rvSegIdPath;
}
// 设置pageIndex到第一页
this.page = 0;
this.loadAll();
}
/**
* 搜索
*/
search () {
// TODO 这里搜索的时候需要组织搜索条件
this.page = 0; // 搜索的时候重置分页
this.loadAll();
}
/**
* 列表查询成功之后的回调
* @param data 返回的数据
* @param headers 响应headers
*/
private onSuccess(data, headers) {
if (+data.responseCode !== 100) {
this.alertService.error(data.messageList[0].key, data.messageList[0].message, null); // TODO 需要显示多个message
this.loading = false;
return;
}
this.wrRvRecs = data.rvRecList;
this.totalRecords = data.pageControllerInfo.totalRecordCount;
this.loading = false;
//if(data.rvRecList != null && data.rvRecList.length>0) {
this.loadView(‘‘);
//}
}
ngOnDestroy() {
}
/**
* 失败之后的回调
* @param error 错误
*/
private one rror(error) {
this.alertService.error(error.error, error.message, null);
}
}
4.子组件页面
<!--
/**
* 描述:巡河信息
* @version:1.0.0
* @author: zb
* @创建时间: 2017-06-08 13:31:35
*/
-->
<div>
<jhi-alert></jhi-alert>
<div class="data-table-wrap">
<!--搜索loading-->
<div class="data-table-loading" *ngIf="loading">
<i class="loading"></i>
</div>
<div class="data-table-search">
<!--搜索-->
<form class="form-inline" (ngSubmit)="search()">
<div class="form-group">
<label>河段名称：</label>
<input type="text" class="form-control" name="searchName" [(ngModel)]="query.searchName">
</div>
<div class="form-group">
<label>请选择时间：</label>从
<p-calendar [styleClass]="‘dialog-datepick‘" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputStyleClass="form-control" name="beginTm" [(ngModel)]="query.beginTm" dateFormat="yy-mm-dd">
</p-calendar>
到
<p-calendar [styleClass]="‘dialog-datepick‘" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputStyleClass="form-control" name="endTm" [(ngModel)]="query.endTm" dateFormat="yy-mm-dd">
</p-calendar>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</div>
<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->
<p-dataTable #dt [loading]="loading" [value]="wrRvRecs" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"
emptyMessage="没有记录" (onLazyLoad)="lazyLoad($event)">
<p-column header="序号" [sortable]="false" [style]="{‘width‘:‘50px‘}">
<template let-rowIndex="rowIndex" pTemplate="body">
<span>{{rowIndex+1}}</span>
</template>
</p-column>
<p-column field="rvRecId" header="巡河记录ID" [hidden]="true"></p-column>
<p-column field="rvSegNm" header="河段名称" [style]="{‘width‘:‘300px‘}"></p-column>
<p-column field="rvSt" header="巡河进度" [style]="{‘width‘:‘110px‘}" [hidden]="true"></p-column>
<p-column field="empId" header="巡河人ID" [hidden]="true"></p-column>
<p-column field="empNm" header="巡河人" [style]="{‘width‘:‘100px‘}"></p-column>
<!--sortable是否可排序，template格式化-->
<p-column field="begTm" header="巡河日期" [style]="{‘width‘:‘150px‘}">
<template let-col let-wrRvRec="rowData" pTemplate="body">
{{wrRvRec[col.field] | date:‘yyyy-MM-dd‘}}
</template>
</p-column>
<p-column field="begTm" header="开始时间" [style]="{‘width‘:‘180px‘}">
<template let-col let-wrRvRec="rowData" pTemplate="body">
{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}
</template>
</p-column>
<!--<p-column field="creTm" header="创建时间" [hidden]="true">
<template let-col let-wrRvRec="rowData" pTemplate="body">
{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}
</template>
</p-column>
<p-column field="endTm" header="结束时间" [hidden]="true">
<template let-col let-wrRvRec="rowData" pTemplate="body">
{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}
</template>
</p-column>-->
<p-column field="wl" header="巡河时长(秒)" [style]="{‘width‘:‘150px‘}" [hidden]="true"></p-column>
<p-column field="times" header="巡河时长" [style]="{‘width‘:‘160px‘}"></p-column>
<p-column field="dis" header="巡河路程(公里)" [style]="{‘width‘:‘150px‘}"></p-column>
<p-column field="bujianCount" header="记录部件数量" [style]="{‘width‘:‘150px‘}"></p-column>
<p-column styleClass="col-button" header="操作" [style]="{‘width‘:‘150px‘}">
<template let-wrRvRec="rowData" pTemplate="body">
<button type="button" pButton label="详细" (click)="loadView(wrRvRec.rvRecId)"></button>
</template>
</p-column>
</p-dataTable>
</div>
</div>
angular2之父子组件的调用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。