1.创建 弹出页面
选择资源
[value]="sysRess"
[lazy]="true"
[rows]="itemsPerPage"
[paginator]="true"
[totalRecords]="totalRecords"
[(selection)]="selected"
dataKey="resId"
emptyMessage="没有记录"
(onLazyLoad)="lazyLoad($event)">
取消
确定
2.创建 弹出页面的conponent.ts文件
import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { EventManager, AlertService } from 'ng-jhipster';
import { ITEMS_PER_PAGE, Principal } from '../'; // 分页设置，权限验证等
import { API_URL } from '../../app.constants';
@Component({
selector: 'choose-sysRes',
templateUrl: './choose-sysRes.html'
})
export class ChooseSysResComponent implements OnInit {
private resourceUrl = `${API_URL}/api/wrSysRes`;
sysRess: any[];
itemsPerPage: any = ITEMS_PER_PAGE; // 读取配置，每页显示多少条
page: any = 0; // 默认显示第一页
sortBy: any; // 排序
totalRecords: number; // 总页数
loading = true;
query = {};
selected;
options: any;
activeModal;
constructor(
private http: Http,
// private activeModal: NgbActiveModal, //当前活动的dialog
private alertService: AlertService, //错误管理
private eventManager: EventManager // 事件管理
) {}
ngOnInit() {}
loadAll() {
this.loading = true;
let body = this.query;
let options = {
headers: new Headers({
pageIndex: this.page,
pageSize: this.itemsPerPage,
orderBy: this.sortBy
})
};
this.http.post(`${this.resourceUrl}/page`, body, options )
.subscribe(
(res) => this.onSuccess(res.json(), res.headers),
(res) => this.onError(res.json())
);
}
lazyLoad(e) {
this.sortBy = e.sortField ? e.sortField + ' ' + (e.sortOrder === 1 ? 'asc' : 'desc') : null;
this.page = e.first / e.rows;
this.loadAll();
}
search() {
this.page = 0;
this.loadAll();
}
onSuccess(data, headers) {
this.loading = false;
if (+data.responseCode !== 100) {
this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);
return;
}
this.sysRess = data.i0216F0004RespL001List;
this.totalRecords = data.pageControllerInfo.totalRecordCount;
}
onError(error) {
this.loading = false;
this.alertService.error(error.error, error.message, null);
}
/**
* 关闭弹窗
*/
clear() {
this.activeModal.dismiss('cancel');
}
/**
* 点击弹窗的确认按钮，触发sysResChoosed事件，将选中的用户传递出去
*/
submit() {
this.eventManager.broadcast({
name: 'sysResChoosed',
content: this.selected
});
this.clear();
}
}
@Injectable()
export class ChooseSysResService {
constructor(
private modalService: NgbModal
) {}
/**
* 弹出选择用户的窗口
* @param options 可以接收一个参数，传递给component。如multiple，可扩展
*/
open(options?) {
let modalRef = this.modalService.open(ChooseSysResComponent, {
size: 'lg',
backdrop: 'static'
});
modalRef.componentInstance.options = options || {};
modalRef.componentInstance.activeModal = modalRef;
}
}
3.加入到index.ts文件中，这样外面才能调用
export * from './alert/alert.component';
export * from './alert/alert-error.component';
export * from './shared-components/linkage.component';
export * from './shared-components/dic.component';
export * from './shared-components/rvSeg.component';
export * from './dialogs/choose-user';
export * from './dialogs/choose-addv';
export * from './dialogs/choose-org';
export * from './dialogs/choose-rvSeg';
export * from './dialogs/choose-rv';
export * from './dialogs/choose-addvUser';
export * from './dialogs/choose-orgUser';
export * from './dialogs/choose-sysRes';
export * from './auth/csrf.service';
export * from './auth/state-storage.service';
export * from './auth/account.service';
export * from './auth/auth-jwt.service';
export * from './auth/auth.service';
export * from './auth/principal.service';
export * from './auth/has-any-authority.directive';
export * from './tracker/tracker.service';
export * from './login/login.component';
export * from './login/login.service';
export * from './login/login-modal.service';
export * from './constants/pagination.constants';
export * from './user/account.model';
export * from './user/user.model';
export * from './user/user.service';
export * from './shared-libs-primeng.module';
export * from './shared-libs.module';
export * from './shared-common.module';
export * from './shared.module';
export * from './auth/user-route-access-service';
export * from './model/filePath.model';
export * from './constants/wrSwsB.constants';
export * from './constants/wrIntB.constants';
4.在模块文件shared-common.module.ts中加入组件
import { NgModule, Sanitizer } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { AlertService } from 'ng-jhipster';
import {
SchintacloudSharedLibsModule,
JhiAlertComponent,
JhiAlertErrorComponent,
LinkageComponent,
DicComponent,
RvSegComponent,
ChooseUserComponent,
ChooseUserService,
ChooseAddvComponent,
ChooseAddvService,
ChooseOrgComponent,
ChooseOrgService,
ChooseRvSegComponent,
ChooseRvSegService,
ChooseRvComponent,
ChooseRvService,
ChooseAddvUserComponent,
ChooseAddvUserService,
ChooseOrgUserComponent,
ChooseOrgUserService,
ChooseSysResComponent,
ChooseSysResService
} from './';
export function alertServiceProvider(sanitizer: Sanitizer) {
// set below to true to make alerts look like toast
let isToast = false;
return new AlertService(sanitizer, isToast);
}
@NgModule({
imports: [
SchintacloudSharedLibsModule
],
declarations: [
JhiAlertComponent,
JhiAlertErrorComponent,
LinkageComponent,
DicComponent,
RvSegComponent,
ChooseUserComponent,
ChooseAddvComponent,
ChooseOrgComponent,
ChooseRvSegComponent,
ChooseRvComponent,
ChooseAddvUserComponent,
ChooseOrgUserComponent,
ChooseSysResComponent
],
entryComponents: [
ChooseUserComponent,
ChooseAddvComponent,
ChooseOrgComponent,
ChooseRvSegComponent,
ChooseRvComponent,
ChooseAddvUserComponent,
ChooseOrgUserComponent,
ChooseSysResComponent
],
providers: [
{
provide: AlertService,
useFactory: alertServiceProvider,
deps: [Sanitizer]
},
Title,
ChooseUserService,
ChooseAddvService,
ChooseOrgService,
ChooseRvSegService,
ChooseRvService,
ChooseAddvUserService,
ChooseOrgUserService,
ChooseSysResService
],
exports: [
SchintacloudSharedLibsModule,
JhiAlertComponent,
JhiAlertErrorComponent,
LinkageComponent,
DicComponent,
RvSegComponent,
ChooseUserComponent,
ChooseAddvComponent,
ChooseOrgComponent,
ChooseRvSegComponent,
ChooseRvComponent,
ChooseAddvUserComponent,
ChooseOrgUserComponent,
ChooseSysResComponent
]
})
export class SchintacloudSharedCommonModule {}
5.外部调用 ，
（红色标记）
/**
* @创建时间: 2017-05-25 10:29:57
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgbActiveModal, NgbModalRef, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { EventManager, AlertService } from 'ng-jhipster';
import { WrSysMenuModalService } from './wrSysMenu-modal.service';
import { WrSysMenu } from './wrSysMenu.model';
import { WrSysMenuService } from './wrSysMenu.service';
import { API_URL } from '../app.constants';
import { Http, Headers } from '@angular/http';
import { Subscription } from 'rxjs/Rx';
import { ChooseSysResService } from '../shared';
import { ITEMS_PER_PAGE, Principal } from '../shared'; // 分页设置，权限验证等
@Component({
selector: 'jhi-wrSysMenu-mgmt-dialog',
styles:[`
.form-group{
display: -webkit-box;
}
.form-group label {
display: -webkit-box;
margin-bottom: 0;
width: 6rem;
-webkit-box-align: center;
}
.form-control.ng-valid[required], .form-control.ng-valid.required{
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.form-control{
display: -webkit-box;
-webkit-box-flex: 1;
}
.form-group{
position:relative;
}
.form-group .btn-primary{
margin-left: 0.5rem;
}
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;
}
.address .form-control{
width: 86%;
}
:host >>> .ui-dropdown, .ui-multiselect{
border:1px solid #d6d6d6;
}
p-datatable{
display:flex;
}
.data-table-wrap p-tree{
float: left;
height: 50rem;
margin-right: 1rem;
}
:host >>> .col-button{
text-align:center;
}
:host >>> .col-button button{
margin:0.5rem 0;
}
`],
templateUrl: './wrSysMenu-management-dialog.component.html'
})
export class WrSysMenuMgmtDialogComponent implements OnInit, OnDestroy {
private resourceUrl = `${API_URL}/api/wrSysMenu`;
sysMenuRess:any[];
wrSysMenu: any;
loading: boolean;
isSaving: Boolean;
eventSubscriber: Subscription;
page: any = 0; // 默认显示第一页
sortBy: any; // 排序
totalRecords: number; // 总页数
// 查询条件
query: any = {};
itemsPerPage: any = ITEMS_PER_PAGE;// 读取配置，每页显示多少条
chooseWrSysRes:any;
selectedSysRes;
chooseSysResSub:any;
constructor (
private http: Http,// 后台访问
public activeModal: NgbActiveModal,
private wrSysMenuService: WrSysMenuService,
private chooseSysResService: ChooseSysResService,
private alertService: AlertService, // 错误提示相关的service
private principal: Principal, // 权限验证
private eventManager: EventManager // 事件管理
) {}
ngOnInit() {
this.isSaving = false;
if (this.wrSysMenu.menuId !== null) {
this.query.menuId = this.wrSysMenu.menuId;
} else {
this.query.menuId = '-1';
}
this.registerChooseSysResCallback();
}
// 销毁一些订阅 之类的
ngOnDestroy() {
this.eventManager.destroy(this.chooseSysResSub);
}
/**
* 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;
if(this.query.menuId != null ){
this.loadRes();
}
}
/**
* 搜索
*/
search () {
// TODO 这里搜索的时候需要组织搜索条件
this.page = 0; // 搜索的时候重置分页
this.loadRes();
}
/**
* 加载数据
*/
loadRes() {
this.loading = true;
let body = this.query ||{};
let headers = {
headers: new Headers({
pageIndex: this.page,
pageSize: this.itemsPerPage,
orderBy: this.sortBy
})
};
this.http.post(`${this.resourceUrl}/res`, body, headers)
.subscribe(
(res) => this.onSuccessRes(res.json(), res.headers),
(res) => this.onError(res.json())
);
}
/**
* 列表查询成功之后的回调
* @param data 返回的数据
* @param headers 响应headers
*/
private onSuccessRes(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.sysMenuRess = data.i0208F0007RespL001List;
this.totalRecords = data.pageControllerInfo.totalRecordCount;
this.loading = false;
}
onError(error) {
this.loading = false;
this.alertService.error(error.error, error.message, null);
}
clear() {
this.activeModal.dismiss('cancel');
}
// 注册资源选择回调，返回的是选中资源信息
// addvUserChoosed为固定写死
registerChooseSysResCallback() {
this.chooseSysResSub = this.eventManager.subscribe('sysResChoosed', (response) => {
this.selectedSysRes = response.content;
if(this.selectedSysRes != null && this.selectedSysRes.length>0) {
for(let i=0; i
let res:any = {};
res = this.selectedSysRes[i];
res.menuId = this.wrSysMenu.menuId;
//判断是否存在资源
let bl: boolean = true;
for(let j=0; j
if(this.sysMenuRess[j].resId == this.selectedSysRes[i].resId) {
bl = false;
}
}
if(bl) {
this.sysMenuRess.push(res);
}
}
}
console.log(this.selectedSysRes);
});
}
//删除资源
deleteRes(resId:string){
if(this.sysMenuRess != null && this.sysMenuRess.length>0){
for(let j=0; j
if(resId == this.sysMenuRess[j].resId) {
this.sysMenuRess.pop();
}
}
}
}
// 选择资源
chooseSysResUser() {
this.chooseSysResService.open({
//如果需要多选，传入这个参数
multiple: true
});
}
/**
* 保存，根据是否有id，来做更新或创建处理
*/
save() {
this.isSaving = true;
// 如果有id，表示编辑，那么更新
this.wrSysMenu.sysReslist = this.sysMenuRess;
if (this.wrSysMenu.menuId !== null) {
this.wrSysMenuService.update(this.wrSysMenu).subscribe(response => this.onSaveSuccess(response), () => this.onSaveError());
} else {
// 否则创建
this.wrSysMenuService.create(this.wrSysMenu).subscribe(response => this.onSaveSuccess(response), () => this.onSaveError());
}
}
/**
* 保存成功
* @param result response结果
*/
private onSaveSuccess(result) {
this.isSaving = false;
let res = result.json();
if (+res.responseCode !== 100) {
// 如果code不是100，提示错误
this.eventManager.broadcast( {name: 'schintacloudApp.httpError', content: result} );
return;
}
// 成功则重新加载列表
this.eventManager.broadcast({ name: 'wrSysMenuListModification', content: 'OK' });
// 关闭dialog
this.activeModal.dismiss(result);
}
private onSaveError() {
this.isSaving = false;
}
}
@Component({
selector: 'jhi-wrSysMenu-dialog',
template: ''
})
export class WrSysMenuDialogComponent implements OnInit, OnDestroy {
modalRef: NgbModalRef;
routeSub: any;
constructor (
private route: ActivatedRoute,
private wrSysMenuModalService: WrSysMenuModalService
) {}
ngOnInit() {
this.routeSub = this.route.params.subscribe(params => {
if ( params['id'] ) {
// 如果有参数id，表示编辑
this.modalRef = this.wrSysMenuModalService.open(WrSysMenuMgmtDialogComponent, params['id'],params['type']);
} else {
// 否则表示新增
this.modalRef = this.wrSysMenuModalService.open(WrSysMenuMgmtDialogComponent);
}
});
}
ngOnDestroy() {
this.routeSub.unsubscribe();
}
}
6.页面
修改菜单信息
创建菜单信息
[菜单名称]不能超过32字符
[菜单名称]不能为空
[访问地址]不能超过255字符
[访问地址]不能为空
[排序]不能超过22字符
[排序]不能为空
[菜单图标]不能超过100字符
[层级]不能超过22字符
选择资源
emptyMessage="没有记录" (onLazyLoad)="lazyLoad($event)">
>取消
保存