首页 > 代码库 > 弹出框选择的做法

弹出框选择的做法

2024-10-02 08:43:39   216人阅读

1.创建 弹出页面

<div class="modal-header">
<h4 class="modal-title" id="mysysResLabel">选择资源</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
(click)="clear()">&times;</button>
</div>
<div class="modal-body">

<jhi-alert-error></jhi-alert-error>
<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="resName" [(ngModel)]="query.resName">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</div>
<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->
<p-dataTable #dt
[value]="sysRess"
[lazy]="true"
[rows]="itemsPerPage"
[paginator]="true"
[totalRecords]="totalRecords"
[(selection)]="selected"
dataKey="resId"
emptyMessage="没有记录"
(onLazyLoad)="lazyLoad($event)">
<p-column [style]="{‘width‘:‘38px‘}" [selectionMode]="options.multiple ? ‘multiple‘ : ‘single‘"></p-column>
<!--sortable是否可排序-->
<p-column field="resId" header="资源ID" [sortable]="true" *ngIf="false"></p-column>
<!--sortable是否可排序-->
<p-column field="resName" header="资源名称(英文)" [sortable]="true"></p-column>
<!--sortable是否可排序-->
<p-column field="resDesc" header="资源描述" [sortable]="true"></p-column>
<!--sortable是否可排序-->
<p-column field="httpType" header="http请求方式" [sortable]="true"></p-column>
<!--sortable是否可排序-->
<p-column field="apiPath" header="api路径" [sortable]="true"></p-column>
</p-dataTable>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="clear()">
<span class="fa fa-ban"></span>&nbsp;<span>取消</span>
</button>
<button type="button" class="btn btn-primary" (click)="submit()">
<span class="fa fa-floppy-o"></span>&nbsp;<span>确定</span>
</button>
</div>

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;
}

one rror(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;
}

one rror(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<this.selectedSysRes.length; i++) {
let res:any = {};
res = this.selectedSysRes[i];
res.menuId = this.wrSysMenu.menuId;
//判断是否存在资源
let bl: boolean = true;
for(let j=0; j<this.sysMenuRess.length; 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<this.sysMenuRess.length; 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.页面
 
<!--
* @创建时间: 2017-05-25 10:29:57
*/
-->
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

<div class="modal-header">
<h4 class="modal-title" id="myWrSysMenuLabel">
<div *ngIf="wrSysMenu.menuId != null">
修改菜单信息
</div>
<div *ngIf="wrSysMenu.menuId == null">
创建菜单信息
</div>
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="clear()">&times;</button>
</div>
<div class="modal-body">
<jhi-alert-error></jhi-alert-error>
<div class="form-group" *ngIf="false">
<label>功能模块ID</label>
<input type="text" class="form-control" name="id" [(ngModel)]="wrSysMenu.menuId" readonly>
</div>
<div class="form-group" hidden>
<label class="form-control-label">父级ID</label>
<input type="text" class="form-control" name="pid" #pidInput="ngModel" [(ngModel)]="wrSysMenu.pid" maxlength="128">
</div>
<div class="form-group">
<label>父级菜单</label>
<input type="text" class="form-control" name="id" [(ngModel)]="wrSysMenu.parentName" readonly>
</div>
<div class="form-group">
<label class="form-control-label">菜单名称</label>
<input type="text" class="form-control" name="menuName" #menuNameInput="ngModel" [(ngModel)]="wrSysMenu.menuName" maxlength="32" required>
<div *ngIf="menuNameInput.dirty && menuNameInput.invalid">
<small class="form-text text-danger" *ngIf="menuNameInput.errors.maxlength">
[菜单名称]不能超过32字符
</small>
<small class="form-text text-danger" *ngIf="menuNameInput.errors.required">
[菜单名称]不能为空
</small>
</div>
</div>
<div class="form-group" hidden>
<label class="form-control-label">功能模块全路径</label>
<input type="text" class="form-control" name="idPath" #idPathInput="ngModel" [(ngModel)]="wrSysMenu.idPath" readonly>
</div>
<div class="form-group">
<label class="form-control-label">访问地址</label>
<input type="text" class="form-control" name="path" #pathInput="ngModel" [(ngModel)]="wrSysMenu.path" maxlength="255" required>
<div *ngIf="pathInput.dirty && pathInput.invalid">
<small class="form-text text-danger" *ngIf="pathInput.errors.maxlength">
[访问地址]不能超过255字符
</small>
<small class="form-text text-danger" *ngIf="pathInput.errors.required">
[访问地址]不能为空
</small>
</div>
</div>
<div class="form-group" >
<label class="form-control-label">排序</label>
<input type="text" class="form-control" name="orderIndex" #orderIndexInput="ngModel" [(ngModel)]="wrSysMenu.orderIndex" required>
<div *ngIf="orderIndexInput.dirty && orderIndexInput.invalid">
<small class="form-text text-danger" *ngIf="orderIndexInput.errors.maxlength">
[排序]不能超过22字符
</small>
<small class="form-text text-danger" *ngIf="orderIndexInput.errors.required">
[排序]不能为空
</small>
</div>
</div>
<div class="form-group">
<label class="form-control-label">菜单图标</label>
<input type="text" class="form-control" name="icon" #iconInput="ngModel" [(ngModel)]="wrSysMenu.icon" maxlength="100">
<div *ngIf="iconInput.dirty && iconInput.invalid">
<small class="form-text text-danger" *ngIf="iconInput.errors.maxlength">
[菜单图标]不能超过100字符
</small>
</div>
</div>
 
<div class="form-group" hidden>
<label class="form-control-label">层级</label>
<input type="text" class="form-control" name="level" #levelInput="ngModel" [(ngModel)]="wrSysMenu.level" maxlength="22">
<div *ngIf="levelInput.dirty && levelInput.invalid">
<small class="form-text text-danger" *ngIf="levelInput.errors.maxlength">
[层级]不能超过22字符
</small>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" data-dismiss="modal" (click)="chooseSysResUser()">
<span class="fa fa-plus"></span>&nbsp;<span>选择资源</span>
</button>
</div>
<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->
<p-dataTable #dt [loading]="loading" [value]="sysMenuRess" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"
emptyMessage="没有记录" (onLazyLoad)="lazyLoad($event)">
<p-column field="menuResId" header="功能资源ID" [sortable]="true" [hidden]="true"></p-column>
<p-column field="menuId" header="功能模块ID" [sortable]="true" [hidden]="true"></p-column>
<p-column field="resId" header="资源ID" [sortable]="true" [hidden]="true"></p-column>
<p-column field="menuName" header="菜单名称" [sortable]="true" [hidden]="true"></p-column>
<p-column field="pid" header="父级ID" [sortable]="true" [hidden]="true"></p-column>
<p-column field="idPath" header="功能模块路径" [sortable]="true" [hidden]="true"></p-column>
<p-column field="resName" header="资源名称" [sortable]="true" [style]="{‘width‘:‘150px‘}"></p-column>
<p-column field="resDesc" header="资源描述" [sortable]="true" ></p-column>
<p-column field="httpType" header="http请求方式" [sortable]="true" [style]="{‘width‘:‘150px‘}"></p-column>
<p-column field="apiPath" header="api路径" [sortable]="true" *ngIf="false"></p-column>
<p-column styleClass="col-button" header="操作" [style]="{‘width‘:‘150px‘}">
<template let-wrSysMenu="rowData" pTemplate="body">
<button type="button" pButton label="删除" (click)="deleteRes(wrSysMenu.resId)"></button>
</template>
</p-column>
</p-dataTable>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="clear()">
<span class="fa fa-ban"></span>&nbsp;<span
>取消</span>
</button>
<button type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
<span class="fa fa-floppy-o"></span>&nbsp;<span>保存</span>
</button>
</div>
</form>
 
 

弹出框选择的做法


联系
我们