mirror of
https://github.com/getrebuild/rebuild.git
synced 2025-02-24 22:35:04 +08:00
advfilter
This commit is contained in:
parent
57df267608
commit
8f0f5b28de
7 changed files with 335 additions and 57 deletions
|
@ -72,7 +72,9 @@ public class MetadataGet extends BaseControll {
|
|||
for (Field e : PortalMetaSorter.sortFields(entityBase)) {
|
||||
Map<String, String> map = new HashMap<>();
|
||||
map.put("name", e.getName());
|
||||
map.put("label", EasyMeta.getLabel(e));
|
||||
EasyMeta easyMeta = new EasyMeta(e);
|
||||
map.put("label", easyMeta.getLabel());
|
||||
map.put("type", easyMeta.getDisplayType(false));
|
||||
list.add(map);
|
||||
}
|
||||
writeSuccess(response, list);
|
||||
|
|
|
@ -53,8 +53,9 @@ public class UserProfileControll extends BaseControll {
|
|||
return createModelAndView("/user-profile/account.jsp", "User", getRequestUser(request));
|
||||
}
|
||||
|
||||
@RequestMapping("/people/{user}")
|
||||
@RequestMapping({ "/people/{user}", "/userhome/{user}" })
|
||||
public ModelAndView pagePeople(@PathVariable String user, HttpServletRequest request) throws IOException {
|
||||
// TODO 用户首页
|
||||
return createModelAndView("/user-profile/user-home.jsp", "User", getRequestUser(request));
|
||||
}
|
||||
|
||||
|
|
|
@ -20733,7 +20733,6 @@ fieldset[disabled] .btn-color.btn-evernote:hover {
|
|||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.custom-radio .custom-control-label:before {
|
||||
|
|
|
@ -33,29 +33,31 @@
|
|||
color: #0d5bdd !important;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown > .nav-link:hover>.icon, .bottom-widget > a:hover>.icon {
|
||||
.navbar-nav .dropdown>.nav-link:hover>.icon, .bottom-widget>a:hover>.icon
|
||||
{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.rb-color-header .rb-top-header .rb-navbar-header .rb-toggle-left-sidebar .icon {
|
||||
color: rgba(255,255,255,.6)
|
||||
.rb-color-header .rb-top-header .rb-navbar-header .rb-toggle-left-sidebar .icon
|
||||
{
|
||||
color: rgba(255, 255, 255, .6)
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.alert-icon.min > .icon {
|
||||
.alert-icon.min>.icon {
|
||||
width: 42px;
|
||||
font-size: 1.6rem
|
||||
}
|
||||
.alert-icon.min > .message {
|
||||
|
||||
.alert-icon.min>.message {
|
||||
padding: 0.8rem;
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
|
||||
.input-search,
|
||||
.input-search input {
|
||||
.input-search, .input-search input {
|
||||
width: 220px;
|
||||
height: 2.8rem;
|
||||
}
|
||||
|
@ -66,8 +68,7 @@
|
|||
min-width: auto;
|
||||
}
|
||||
|
||||
.input-search button .icon,
|
||||
.adv-search button .icon {
|
||||
.input-search button .icon, .adv-search button .icon {
|
||||
font-size: 1.55rem !important;
|
||||
color: #737373;
|
||||
}
|
||||
|
@ -132,8 +133,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.rbmodal.show,
|
||||
.rbview.show {
|
||||
.rbmodal.show, .rbview.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
@ -177,13 +177,12 @@ body.dialog .main-content {
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dialog-footer > .float-left > .custom-control {
|
||||
margin:0;
|
||||
margin-top:6px
|
||||
.dialog-footer>.float-left>.custom-control {
|
||||
margin: 0;
|
||||
margin-top: 6px
|
||||
}
|
||||
|
||||
body.dialog .main-content .footer,
|
||||
.rbform .footer {
|
||||
body.dialog .main-content .footer, .rbform .footer {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
|
@ -227,7 +226,6 @@ a {
|
|||
}
|
||||
|
||||
/* for Form page */
|
||||
|
||||
.rbform>form>.alert {
|
||||
margin: 20px;
|
||||
margin-bottom: 0;
|
||||
|
@ -286,8 +284,7 @@ a {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.img-field a.img-upload b,
|
||||
.file-field .img-thumbnail b {
|
||||
.img-field a.img-upload b, .file-field .img-thumbnail b {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
@ -301,13 +298,12 @@ a {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.img-field a.img-upload:hover b,
|
||||
.file-field .img-thumbnail:hover b {
|
||||
.img-field a.img-upload:hover b, .file-field .img-thumbnail:hover b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img-field a.img-upload:hover b:hover,
|
||||
.file-field .img-thumbnail:hover b:hover {
|
||||
.img-field a.img-upload:hover b:hover, .file-field .img-thumbnail:hover b:hover
|
||||
{
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
|
@ -438,8 +434,7 @@ a {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.ui-mprogress .bar-bg,
|
||||
.ui-mprogress .buffer-bg {
|
||||
.ui-mprogress .bar-bg, .ui-mprogress .buffer-bg {
|
||||
z-index: 1051;
|
||||
}
|
||||
|
||||
|
@ -448,10 +443,8 @@ a {
|
|||
}
|
||||
|
||||
/* for DataList page */
|
||||
|
||||
.rb-datatable-body,
|
||||
.rb-datatable-body .rb-scroller,
|
||||
.rb-datatable-body .rb-loading {
|
||||
.rb-datatable-body, .rb-datatable-body .rb-scroller, .rb-datatable-body .rb-loading
|
||||
{
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
|
@ -463,7 +456,6 @@ a {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.list-nodata {
|
||||
text-align: center;
|
||||
padding-top: 36px;
|
||||
|
@ -489,8 +481,7 @@ a {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-list .table th,
|
||||
.data-list .table td {
|
||||
.data-list .table th, .data-list .table td {
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
|
@ -515,7 +506,7 @@ a {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.data-list .table thead th>div>span{
|
||||
.data-list .table thead th>div>span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
@ -554,8 +545,7 @@ i.split.ui-draggable-dragging {
|
|||
content: '\f2f9';
|
||||
}
|
||||
|
||||
.data-list .table td,
|
||||
.data-list .table td>div {
|
||||
.data-list .table td, .data-list .table td>div {
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -565,8 +555,7 @@ i.split.ui-draggable-dragging {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-list .table td,
|
||||
.data-list .table td>div.nmw {
|
||||
.data-list .table td, .data-list .table td>div.nmw {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
|
@ -618,14 +607,17 @@ i.split.ui-draggable-dragging {
|
|||
border-bottom: 0 solid;
|
||||
}
|
||||
|
||||
.column-url {}
|
||||
.column-url {
|
||||
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.column-url:hover {
|
||||
.link:hover, .column-url:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.column-empty {}
|
||||
.column-empty {
|
||||
|
||||
}
|
||||
|
||||
.text-3dot {
|
||||
overflow: hidden;
|
||||
|
@ -658,9 +650,22 @@ i.split.ui-draggable-dragging {
|
|||
padding: 11px 15px
|
||||
}
|
||||
|
||||
.sortable-box-title{margin-top:9px;}
|
||||
.sortable-swap{position:relative;}
|
||||
.sortable-swap>.zmdi-swap{position:absolute;font-size:2rem;color:#aaa;right:-10px;top:50%;margin-top:-1rem;}
|
||||
.sortable-box-title {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.sortable-swap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sortable-swap>.zmdi-swap {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
right: -10px;
|
||||
top: 50%;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.sortable-box {
|
||||
border: 1px solid #eee;
|
||||
|
@ -677,6 +682,7 @@ i.split.ui-draggable-dragging {
|
|||
.sortable-box.h380 {
|
||||
height: 388px;
|
||||
}
|
||||
|
||||
.sortable-box.h380 .dd-list {
|
||||
height: 380px;
|
||||
}
|
||||
|
@ -685,6 +691,7 @@ i.split.ui-draggable-dragging {
|
|||
margin: 2px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sortable-box .dd-placeholder {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
@ -714,19 +721,36 @@ i.split.ui-draggable-dragging {
|
|||
font-size: 1.23rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.sortable-box .dd-list .dd3-action a:hover .zmdi {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.sortable-box .dd-list .dd3-item:hover > .dd3-action {
|
||||
.sortable-box .dd-list .dd3-item:hover>.dd3-action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sortable-box .unset-list .dd-handle{padding-right:30px}
|
||||
.sortable-box .unset-list .dd-handle::before{content:'\f278';font:normal normal normal 14px/1 'Material-Design-Iconic-Font';float:right;font-size:1.6rem;color:#999;float:right;margin-right:-20px}
|
||||
.sortable-box .unset-list .dd-item:hover .dd-handle::before{color:#fff}
|
||||
.sortable-box .unset-list .dd-handle {
|
||||
padding-right: 30px
|
||||
}
|
||||
|
||||
.sortable-box .dd-list .dd3-item.active>.dd3-content{background-color:#dedede !important}
|
||||
.sortable-box .unset-list .dd-handle::before {
|
||||
content: '\f278';
|
||||
font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
|
||||
float: right;
|
||||
font-size: 1.6rem;
|
||||
color: #999;
|
||||
float: right;
|
||||
margin-right: -20px
|
||||
}
|
||||
|
||||
.sortable-box .unset-list .dd-item:hover .dd-handle::before {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.sortable-box .dd-list .dd3-item.active>.dd3-content {
|
||||
background-color: #dedede !important
|
||||
}
|
||||
|
||||
.rb-left-sidebar .bottom-widget {
|
||||
padding: 3px 16px;
|
||||
|
@ -871,7 +895,8 @@ i.split.ui-draggable-dragging {
|
|||
padding: 6px 9px;
|
||||
cursor: default;
|
||||
}
|
||||
.dept-tree > ul > li > a {
|
||||
|
||||
.dept-tree>ul>li>a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
@ -892,6 +917,7 @@ i.split.ui-draggable-dragging {
|
|||
top: 1px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dept-tree li>div.action a {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
|
@ -900,13 +926,108 @@ i.split.ui-draggable-dragging {
|
|||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: #fff !important;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.dept-tree li>div.action a:hover{
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
|
||||
.dept-tree li>div.action a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dept-tree ul>li.active:hover>div.action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* AdvFilter */
|
||||
.adv-filter-warp {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.adv-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.adv-filter .item+.item {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.adv-filter .item.plus a {
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.adv-filter .item.plus a .icon {
|
||||
font-size: 1.4rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -1px
|
||||
}
|
||||
|
||||
.adv-filter .item .field {
|
||||
padding-left: 38px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.adv-filter .item .field em {
|
||||
float: left;
|
||||
margin-left: -25px;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
padding-top: 10px;
|
||||
color: #777;
|
||||
}
|
||||
.adv-filter .item .field i.zmdi {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 15px;
|
||||
font-size: 1.4rem;
|
||||
color: #999;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.adv-filter .item .field i.zmdi:hover{
|
||||
color: #0d5bdd;
|
||||
}
|
||||
.adv-filter .item:hover .field i.zmdi {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adv-filter .item .op {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.adv-filter .item .val input+input{
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.adv-filter .select2-container--default .select2-selection--single {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.adv-filter .select2-container--default .select2-selection--single .select2-selection__rendered,
|
||||
.adv-filter .form-control-sm {
|
||||
height: 34px !important;
|
||||
line-height: 34px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.adv-filter .form-control-sm {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.adv-filter .select2-container--default .select2-selection--single .select2-selection__arrow b:after
|
||||
{
|
||||
line-height: 34px;
|
||||
}
|
||||
.adv-filter+.adv-filter {
|
||||
border-top:1px solid #eee;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
|
@ -5,5 +5,150 @@ class AdvFilter extends React.Component {
|
|||
this.state = { ...props }
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="adv-filter-warp shadow rounded">
|
||||
<div className="adv-filter">
|
||||
<div className="filter-option">
|
||||
</div>
|
||||
<div className="filter-items">
|
||||
{(this.state.items || []).map((item)=>{
|
||||
return item
|
||||
})}
|
||||
<div className="item plus"><a href="javascript:;" onClick={()=>this.addItem()}><i className="zmdi zmdi-plus-circle icon"></i> 新增条件</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="adv-filter">
|
||||
<div className="item">
|
||||
<label className="custom-control custom-control-sm custom-checkbox custom-control-inline">
|
||||
<input className="custom-control-input" type="checkbox" onClick={()=>this.toggleAdvexp()} />
|
||||
<span className="custom-control-label"> 启用高级表达式</span>
|
||||
</label>
|
||||
</div>
|
||||
{this.state.enableAdvexp !== true ? null :
|
||||
<div className="mb-3">
|
||||
<input className="form-control form-control-sm form-control-success" ref="adv-exp" value={this.state.advexp} />
|
||||
</div>
|
||||
}
|
||||
<div className="item">
|
||||
<button className="btn btn-primary" type="button">应用</button>
|
||||
|
||||
<button className="btn btn-secondary" type="button">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
componentDidMount() {
|
||||
let that = this
|
||||
$.get(rb.baseUrl + '/commons/metadata/fields?entity=' + this.state.entity, function(res){
|
||||
that.fields = res.data
|
||||
})
|
||||
}
|
||||
|
||||
addItem(){
|
||||
if (!this.fields) return
|
||||
let _items = this.state.items || []
|
||||
if (_items.length >= 10){ rb.notice('最多可设置10个条件'); return}
|
||||
|
||||
_items.push(<FilterItem index={_items.length + 1} fields={this.fields} $$$parent={this} key={'item-' + $random()} />)
|
||||
let advexp = []
|
||||
for (let i = 1; i <= _items.length; i++) advexp.push(i)
|
||||
this.setState({ items: _items, advexp: advexp.join(' OR ') })
|
||||
}
|
||||
delItem(del){
|
||||
let _items = []
|
||||
for (let i = 0; i < this.state.items.length; i++){
|
||||
let item = this.state.items[i]
|
||||
if (item.props.index != del.props.index) _items.push(item)
|
||||
}
|
||||
let advexp = []
|
||||
for (let i = 1; i <= _items.length; i++) advexp.push(i)
|
||||
this.setState({ items: _items, advexp: advexp.join(' OR ') })
|
||||
}
|
||||
|
||||
toggleAdvexp() {
|
||||
this.setState({ enableAdvexp: this.state.enableAdvexp !== true })
|
||||
}
|
||||
}
|
||||
|
||||
class FilterItem extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { ...props }
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="row item" key={'item-' + this.state.index}>
|
||||
<div className="col-sm-5 field">
|
||||
<em>{this.state.index}</em>
|
||||
<i className="zmdi zmdi-minus-circle" title="移除条件" onClick={()=>this.props.$$$parent.delItem(this)}></i>
|
||||
<select className="form-control form-control-sm" ref="filter-field">
|
||||
{this.state.fields.map((item)=>{
|
||||
return <option value={item.name + '----' + item.type} key={'field-' + item.name}>{item.label}</option>
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-sm-2 op">
|
||||
{this.renderOp()}
|
||||
</div>
|
||||
<div className="col-sm-5 val">
|
||||
{this.renderVal()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
renderOp(){
|
||||
let op = [ ['lk','包含'], ['nlk','不包含'], ['eq','等于'], ['neq','不等于'], ['nl','为空'], ['nt','不为空'] ]
|
||||
if (this.state.type == 'NUMBER' || this.state.type == 'DECIMAL'){
|
||||
op = [ ['gt','大于'], ['lt','小于'], ['bw','区间'], ['eq','等于'] ]
|
||||
} else if (this.state.type == 'DATE' || this.state.type == 'DATETIME'){
|
||||
op = [ ['gt','大于'], ['lt','小于'], ['bw','区间'], ['bfd','...天前'], ['bfm','...月前'], ['afd','...天后'], ['afm','...月后'] ]
|
||||
} else if (this.state.type == 'FILE' || this.state.type == 'IMAGE'){
|
||||
op = [ ['nl','为空'], ['nt','不为空'] ]
|
||||
}
|
||||
this.__op = op
|
||||
|
||||
return (
|
||||
<select className="form-control form-control-sm" ref="filter-op">
|
||||
{op.map((item)=>{
|
||||
return <option value={item[0]} key={'op-' + item.join('-')}>{item[1]}</option>
|
||||
})}
|
||||
</select>
|
||||
)
|
||||
}
|
||||
renderVal(){
|
||||
return this.state.op != 'bw' ? (this.state.op == 'nl' || this.state.op == 'nt' ? null : <input className="form-control form-control-sm" ref="filter-val" />) : (<div>
|
||||
<input className="form-control form-control-sm" ref="filter-val" />
|
||||
<input className="form-control form-control-sm" ref="filter-val-2" />
|
||||
</div>)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let that = this
|
||||
let s2field = $(this.refs['filter-field']).select2({
|
||||
language: 'zh-CN',
|
||||
placeholder: '选择字段',
|
||||
width: '100%',
|
||||
}).on('change.select2', function(e){
|
||||
let ft = e.target.value.split('----')
|
||||
that.setState({ field: ft[0], type: ft[1] }, function(){
|
||||
s2op.val(that.__op[0][0]).trigger('change')
|
||||
})
|
||||
})
|
||||
let s2op = $(this.refs['filter-op']).select2({
|
||||
language: 'zh-CN',
|
||||
placeholder: '选择操作',
|
||||
width: '100%',
|
||||
}).on('change.select2', function(e){
|
||||
that.setState({ op: e.target.value }, function(){
|
||||
$(that.refs['filter-val']).focus()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// -- Usage
|
||||
|
||||
rb.AdvFilter = {
|
||||
|
||||
}
|
|
@ -204,4 +204,9 @@ const $storage = {
|
|||
if (window.localStorage) localStorage.removeItem(key)
|
||||
else $.removeCookie(key)
|
||||
}
|
||||
}
|
||||
|
||||
let random_times = 0
|
||||
const $random = function(){
|
||||
return new Date().getTime() + '-' + random_times++
|
||||
}
|
|
@ -18,11 +18,16 @@
|
|||
<div class="rb-content">
|
||||
<div class="main-content container-fluid">
|
||||
<h3 class="text-center">首页可配置仪表盘</h3>
|
||||
<div id="advfilter"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%@ include file="/_include/Foot.jsp"%>
|
||||
<script type="text/javascript">
|
||||
<script src="${baseUrl}/assets/js/rb-advfilter.jsx" type="text/babel"></script>
|
||||
<script type="text/babel">
|
||||
$(document).ready(function(){
|
||||
renderRbcomp(<AdvFilter entity="ceshiziduan" trigger="" />, 'advfilter')
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue