getrebuild/rebuild
1
1
Fork 0
mirror of https://github.com/getrebuild/rebuild.git synced 2024-09-20 07:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

dialog

Browse source
This commit is contained in:
devezhao-corp 2018-08-03 04:06:38 +08:00
parent d24ecb9828
commit ce9b676b51
5 changed files with 88 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/main/webapp/admin/bizuser/user-edit.jsp Normal file
View file

@ -0,0 +1,42 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/_include/Head.jsp"%>
<title>用户管理</title>
<style type="text/css">
.footer{padding-bottom:0 !important;}
</style>
</head>
<body class="dialog">
<div class="main-content">
<form>
<div class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-sm-right">用户名</label>
<div class="col-12 col-sm-8 col-lg-6">
<input class="form-control form-control-sm" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-sm-right">邮箱</label>
<div class="col-12 col-sm-8 col-lg-6">
<input class="form-control form-control-sm" type="text">
</div>
</div>
<div class="form-group row footer">
<label class="col-12 col-sm-3 col-form-label text-sm-right"></label>
<div class="col-12 col-sm-8 col-lg-6">
<button class="btn btn-primary btn-space" type="button">保存</button>
<button class="btn btn-secondary btn-space" type="button" onclick="parent.rbModal.hide()">取消</button>
</div>
</div>
</form>
</div>
<%@ include file="/_include/Foot.jsp"%>
<script type="text/javascript">
//$(window).resize(function(){ setTimeoutDelay(function(){ parent.rbModal.loaded() }, 50, 'rbModal-resize') });
$(document).ready(function(){
});
</script>
</body>
</html>

8
src/main/webapp/admin/bizuser/user-list.jsp
View file

@ -31,7 +31,7 @@
</div>
<div class="col-sm-6">
<div class="dataTables_oper">
<button class="btn btn-space btn-primary" data-toggle="modal" data-target="#form-bp"><i class="icon zmdi zmdi-plus"></i> 新建</button>
<button class="btn btn-space btn-primary" onclick="rbModal.show('user-edit.htm')"><i class="icon zmdi zmdi-plus"></i> 新建</button>
<button class="btn btn-space btn-secondary" disabled="disabled"><i class="icon zmdi zmdi-delete"></i> 删除</button>
<div class="btn-group btn-space">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">更多 <i class="icon zmdi zmdi-chevron-down"></i></button>
@ -91,14 +91,10 @@
</div>
</div>
<div id="modalWarp"></div>
<%@ include file="/_include/Foot.jsp"%>
<script src="${baseUrl}/assets/js/rb-list.js" type="text/javascript"></script>
<script type="text/babel">
$(document).ready(function(){
ReactDOM.render(<RbModal title="新建用户" id="form-bp"/>, document.getElementById('modalWarp'));
});
const rbModal = ReactDOM.render(<RbModal title="新建用户" />, $('<div id="react-comps"></div>').appendTo(document.body)[0]);
</script>
<script type="text/javascript">
$(document).ready(function(){

12
src/main/webapp/assets/css/rb-page.css
View file

@ -32,4 +32,16 @@
.rb-aside .page-head {
margin-left: 280px;
}
.modal-body.iframe {
padding: 0 !important;
}
.modal-body.iframe iframe {
width: 100%;
height: 100%;
}
body.dialog {
background-color: #fff;
}

1
src/main/webapp/assets/js/rb-base.js
View file

@ -3,6 +3,7 @@
$.fn.extend({
'button': function(state) {
let el = $(this);
if (el.prop('nodeName') != 'BUTTON') return this;
if (state == 'loading') {
el.attr('disabled', true);
let loadingText = el.data('loading-text');

42
src/main/webapp/assets/js/rb-components.jsx
View file

@ -1,28 +1,48 @@
// 弹出窗口
// ~~!v1.0 弹出窗口
class RbModal extends React.Component {
constructor(props) {
super(props);
this.state = { title: props.title };
}
render() {
return (
<div className="modal fade colored-header colored-header-primary" id={this.props.id}>
<div className="modal fade colored-header colored-header-primary" ref="rbmodal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header modal-header-colored">
<h3 className="modal-title">{this.props.title}</h3>
<button className="close md-close" type="button" data-dismiss="modal"><span className="zmdi zmdi-close"></span></button>
<h3 className="modal-title">{this.state.title || ''}</h3>
<button className="close md-close" type="button" onClick={()=>this.hide()}><span className="zmdi zmdi-close"></span></button>
</div>
<div className="modal-body">
<div className="modal-body iframe hide" ref="rbmodal.body">
<iframe src={this.state.url || 'about:blank'} frameborder="0" scrolling="no" ref="rbmodal.iframe" onLoad={()=>this.loaded()} onResize={()=>this.loaded()}></iframe>
</div>
<div className="modal-footer">
<button className="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
<button className="btn btn-primary md-close" type="button">保存</button>
</div>
</div>
</div>
</div>
)
}
show(url) {
let that = this;
this.setState({ url: url }, function(){
$(that.refs['rbmodal']).modal({ show: true, backdrop: 'static' });
})
}
hide() {
$(this.refs['rbmodal']).modal('hide');
}
loaded() {
if (!this.state.url) return;
let that = this;
setTimeoutDelay(function(){
let iframe = $(that.refs['rbmodal.iframe']);
let height = iframe.contents().find('body').height();
if (height == 0 || height == that.__lastHeight) return;
$(that.refs['rbmodal.body']).height(height);
that.__lastHeight = height;
}, 50, 'RbModal-resize');
}
}
// 提示框
// ~~!v1.0 提示框
class RbAlter extends React.Component {
constructor(props) {
super(props);