弹出框选择的做法

Posted 2020-09-21 对雪书空武

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹出框选择的做法相关的知识，希望对你有一定的参考价值。

1.创建弹出页面

<button type="button" class="close" data-dismiss="modal" aria-hidden="true"

(click)="clear()">×</button>

</div>

<jhi-alert-error></jhi-alert-error>

</div>

</div>

</form>

</div>

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

<p-column field="resId" header="资源ID" [sortable]="true" *ngIf="false"></p-column>

<p-column field="resName" header="资源名称(英文)" [sortable]="true"></p-column>

<p-column field="resDesc" header="资源描述" [sortable]="true"></p-column>

<p-column field="httpType" header="http请求方式" [sortable]="true"></p-column>

<p-column field="apiPath" header="api路径" [sortable]="true"></p-column>

</p-dataTable>

</div>

</button>

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

}

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

-->

修改菜单信息

</div>

创建菜单信息

</div>

</h4>

</div>

<jhi-alert-error></jhi-alert-error>

<label>功能模块ID</label>

</div>

</div>

</div>

[菜单名称]不能超过32字符

</small>

[菜单名称]不能为空

</small>

</div>

<label class="form-control-label">功能模块全路径</label>

</div>

[访问地址]不能超过255字符

</small>

[访问地址]不能为空

</small>

</div>

[排序]不能超过22字符

</small>

[排序]不能为空

</small>

</div>

[菜单图标]不能超过100字符

</small>

</div>

[层级]不能超过22字符

</small>

</div>

</button>

</div>

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

</p-column>

</p-dataTable>

</div>

<span class="fa fa-ban"></span> <span

>取消</span>

</button>

</button>

</div>

</form>

以上是关于弹出框选择的做法的主要内容，如果未能解决你的问题，请参考以下文章

JS弹出框点击获取值后，自动关闭弹出框，然后刷新页面，文本框里里显示选择的信息。

XCUITest 如何关闭日期选择器弹出框

弹出框控件在选择不同的表视图行时更改其位置

带有弹出框的自定义选择，打开时更改颜色

Python 弹出框代码

在表格视图中选择项目后无法关闭弹出框