advfilter

This commit is contained in:
FangfangZhao 2018-11-06 02:19:17 +08:00
parent 57df267608
commit 8f0f5b28de
7 changed files with 335 additions and 57 deletions

View file

@ -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);

View file

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

View file

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

View file

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

View file

@ -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>
&nbsp;&nbsp;
<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 = {
}

View file

@ -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++
}

View file

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