码迷，mamicode.com
首页 > 其他好文 > 详细

angular2之父子组件的调用

时间：2017-06-29 19:11:52      阅读：528      评论：0      收藏：0      [点我收藏+]

标签：line   lex   button   storage   ror   snap   nbsp   date()   显示   

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 onError(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>从&nbsp;
<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>
&nbsp;到&nbsp;
<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之父子组件的调用

标签：line   lex   button   storage   ror   snap   nbsp   date()   显示   

原文地址：http://www.cnblogs.com/zb347954263/p/7095819.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！