1,交互页面过滤器
package com.wisesoft.portal.filter;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
@Data
public class EnterpriseFilter {
private String keywords;
public static final String ORDER_TYPE_SYNTHETICAL = "synthetical";
public static final String ORDER_TYPE_PAGEVIEW = "pageview";
public static final String ORDER_TYPE_NEWEST = "newest";
public static final String ORDER_TYPE_AREA = "area";
private int limit = 12;
private int curr = 1;
private List<String> economics;
private List<String> citys;
private List<String> enterpriseTypes;
private List<String> sysTrades;
private List<String> labels;
private Double leftArea;
private Double rightArea;
private String orderType = ORDER_TYPE_SYNTHETICAL;
private String orderByType = "asc";
public List<EchoData> convertEchoData() {
List<EchoData> echoDatas = new ArrayList<>(4);
echoDatas.add(new EchoData("economics", economics, false));
echoDatas.add(new EchoData("citys", citys, false));
echoDatas.add(new EchoData("labels", labels, true));
echoDatas.add(new EchoData("enterpriseTypes", enterpriseTypes, true));
echoDatas.add(new EchoData("sysTrades", sysTrades, true));
return echoDatas;
}
}
2,Controller代码
@ApiOperation(value = "列表页面")
@RequestMapping(value = "/index")
public String enterpriseList(Model model, @Validated EnterpriseFilter filter, BindingResult bindingResult) {
Pager pager = new Pager();
pager.setPageSize(filter.getLimit());
pager.setPageNumber(filter.getCurr());
model.addAllAttributes(enterpriseInfoService.selectEnterpriseVO(pager,filter));
return "portal/enterprise/index";
}
3,Service代码
@Override
public Map<String, ?> selectEnterpriseVO(Pager pager, EnterpriseFilter filter) {
Map<String, Object> attributes = new HashMap<>();
// 区域分类
List<RegionVO> regionVOList = economicZoneService.getRegionVOList();
attributes.put("regionVOList", regionVOList);
// 行业分类
List<KV<String, String>> sysTradeKv = tradeService.getSysTradeKv();
attributes.put("sysTradeKv", sysTradeKv);
// 企业标签
List<KV<String, String>> enterpriseLabelKv = SysCodeUtils.getSysCodeList(SysCodeConstants.ENTERPRISE_LABEL);
attributes.put("enterpriseLabelKv", enterpriseLabelKv);
Map<String, String> enterpriseLabelMap = ApplicationUtils.kvsToMap(enterpriseLabelKv);
//企业分类
List<KV<String, String>> enterpriseTypeKv = SysCodeUtils.getSysCodeList(SysCodeConstants.ENP_TYPE);
attributes.put("enterpriseTypeKv", enterpriseTypeKv);
StringBuffer sql = new StringBuffer();
List<Object> params = new ArrayList<>();
List<EnterpriseVO> enterpriseVOList = new ArrayList<>();
sql.append("SELECT info.enp_id enpId,basic.enp_name enpName,info.label labels,info.cover_img coverImg,investment.plan_investment planInvestment");
sql.append(" from pml_enterprise_info info JOIN pml_enterprise_basic basic on info.enp_id=basic.id ");
sql.append(" LEFT JOIN (SELECT a.* FROM pml_enterprise_investment a JOIN (SELECT enp_id,user_id, ");
sql.append(" max(version) as version FROM pml_enterprise_investment group by enp_id,user_id) as ");
sql.append(" investment_tb ON a.enp_id=investment_tb.enp_id AND a.user_id=investment_tb.user_id ");
sql.append(" and a.version = investment_tb.version) investment ON info.enp_id = investment.enp_id ");
sql.append(" WHERE info.audit_status = ? and info.publish_status = ? and basic.audit_status = ? and basic.auth_status = ?");
params.add(CommonConstants.AuditStatus.AUDIT_PASS);
params.add(CommonConstants.STATUS_TAG_YES);
params.add(CommonConstants.AuditStatus.AUDIT_PASS);
params.add(CommonConstants.AuthStatus.AUTHENTICATED);
// 区域分类
List<String> citys = filter.getCitys();
if (citys != null && !citys.isEmpty()) {
sql.append(" and basic.register_city in ('").append(StringUtils.join(citys, "','")).append("') ");
} else {
List<String> economics = filter.getEconomics();
if (economics != null && !economics.isEmpty()) {
sql.append(" and basic.register_city in (select city_code from pml_sys_city_info where economic_zone in ('")
.append(StringUtils.join(economics, "','")).append("')) ");
}
}
// 企业行业
List<String> trades = filter.getSysTrades();
if (trades != null && !trades.isEmpty()) {
sql.append(" and basic.id in (select enp_id from pml_enterprise_trade where trade_id in ('")
.append(StringUtils.join(trades, "','")).append("')) ");
}
//企业类型筛选
List<String> enterpriseTypes = filter.getEnterpriseTypes();
if(enterpriseTypes != null && !enterpriseTypes.isEmpty()){
sql.append(" and basic.enp_type in ('").append(StringUtils.join(enterpriseTypes, "','")).append("') ");
}
// 企业标签
List<String> labels = filter.getLabels();
if (labels != null && !labels.isEmpty()) {
sql.append(" and info.id in (select biz_id from pml_biz_multival where multi_value in ('")
.append(StringUtils.join(labels, "','")).append("') and multi_field = ? ) ");
params.add(MultiFieldConstants.ENTERPRISE_LABEL);
}
// 面积筛选
Double leftArea = filter.getLeftArea();
if (leftArea != null) {
sql.append(" and basic.present_total_area >= ? ");
params.add(leftArea);
}
Double rightArea = filter.getRightArea();
if (rightArea != null) {
sql.append(" and basic.present_total_area <= ? ");
params.add(rightArea);
}
//关键字搜索
String keywords = filter.getKeywords();
if(keywords != null){
sql.append(" and basic.enp_name like ?");
params.add("%"+keywords+"%");
}
// 排序
if (EnterpriseFilter.ORDER_TYPE_SYNTHETICAL.equals(filter.getOrderType())) {
sql.append(" order by basic.register_city asc ");
} else if (EnterpriseFilter.ORDER_TYPE_NEWEST.equals(filter.getOrderType())) {
sql.append(" order by basic.modify_time desc ");
} else if (EnterpriseFilter.ORDER_TYPE_AREA.equals(filter.getOrderType())) {
if ("asc".equalsIgnoreCase(filter.getOrderByType())) {
sql.append(" order by basic.present_employee_scale asc ");
} else {
sql.append(" order by basic.present_employee_scale desc ");
}
}
pager = baseDao.findByMapPager(pager, sql.toString(), params.toArray());
List<Object> list = pager.getList();
List<String> enpIds = new ArrayList<>();
list.forEach(m -> {
Map<String, String> map = (Map<String, String>) m;
String enpId = MapUtils.getString(map, "enpId");
enpIds.add(enpId);
});
Map<String, List<String>> enterpriseTradeNameMap = enterpriseTradeService.getEnterpriseTradeName(enpIds);
if (!list.isEmpty())
list.forEach(m -> {
Map<String, String> map = (Map<String, String>) m;
EnterpriseVO enterpriseVO = new EnterpriseVO();
String enpId = MapUtils.getString(map, "enpId");
enterpriseVO.setEnpId(enpId);
enterpriseVO.setEnpName(MapUtils.getString(map, "enpName"));
List<String> label =
bizMultivalService.getMultiValueNames(Arrays.asList(StringUtils.split(MapUtils.getString(map, "labels"), CommonConstants.SEPARATOR)), enterpriseLabelMap);
enterpriseVO.setLabels(label);
enterpriseVO.setPlanInvestment(new BigDecimal(MapUtils.getString(map, "planInvestment")));
enterpriseVO.setCoverImg(MapUtils.getString(map, "coverImg"));
enterpriseVO.setTrades(StringUtils.join(enterpriseTradeNameMap.get(enpId), CommonConstants.SEPARATOR));
enterpriseVOList.add(enterpriseVO);
});
pager.setList(enterpriseVOList);
attributes.put("pager", pager);
attributes.put("filter", filter);
attributes.put("echoData", JsonUtils.objectToString(filter.convertEchoData()));
return attributes;
}
4,前端业务代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title>园区二级列表</title>
<link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/base.css"/>
<link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/style.css"/>
</head>
<body>
<div class="f-min-h-full second-page">
<jsp:include page="/WEB-INF/jsp/portal/common/common_header_enp.jsp"></jsp:include>
<div class="enterpaise-selects">
<div class="g-box1200">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">按区域查找 <i class="gyyq-iconfont"></i></li>
<li><a href="${base}/portal/enterprise/map.dhtml">按地图查找</a></li>
</ul>
<div class="layui-tab-content">
<button class="layui-btn filt-btn hide-select">展开筛选<i class="gyyq-iconfont"></i></button>
<div class="area-select-box">
<div class="has_chosen f-clear">
<span class="title">您已经选择:</span>
<div class="items-box"></div>
</div>
<div class="modules_level_box">
<div class="modules_select modules_select1" selectindex="economics">
<span class="title">区域分类:</span>
<div class="radio_select">
<div class="items_box">
<span class="item" data-id="">全部</span>
<c:forEach items="${regionVOList}" var="item">
<span class="item <c:if test="${fn:contains(filter.economics, item.id)}">active</c:if>"
data-id="${item.id}">${item.name}</span>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn more-btn">更多</button>
<button class="layui-btn multi-btn">多选</button>
</div>
</div>
<div class="multi_select">
<div class="items_box f-clear">
<c:forEach items="${regionVOList}" var="item">
<div class="item">
<input type="checkbox" id="${item.id}" data-id="${item.id}"/><label
for="${item.id}">${item.name}</label>
</div>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn sure-btn">确定</button>
<button class="layui-btn cancel-btn">取消</button>
</div>
</div>
</div>
<div class="modules_select modules_select2" selectindex="citys" style="display: block;">
<span class="title">区域分类:</span>
<div class="radio_select">
<div class="items_box">
<c:forEach items="${regionVOList}" var="item">
<c:forEach items="${item.cities}" var="city">
<span class="item <c:if test="${fn:contains(filter.citys, city.id)}">active</c:if>"
data-id="${city.id}"
data-economic="${item.id}">${city.name}</span>
</c:forEach>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn more-btn">更多</button>
<button class="layui-btn multi-btn">多选</button>
</div>
</div>
<div class="multi_select">
<div class="items_box f-clear">
<c:forEach items="${regionVOList}" var="item">
<c:forEach items="${item.cities}" var="city">
<div class="item">
<input type="checkbox" id="${city.id}"
data-economic="${item.id}" data-id="${city.id}"/>
<label for="${city.id}">${city.name}</label>
</div>
</c:forEach>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn sure-btn">确定</button>
<button class="layui-btn cancel-btn">取消</button>
</div>
</div>
</div>
</div>
<div class="modules_box">
<div class="modules_select" selectindex="enterpriseTypes">
<span class="title">企业分类:</span>
<div class="radio_select">
<div class="items_box">
<c:forEach items="${enterpriseTypeKv}" var="item">
<span class="item <c:if test="${fn:contains(filter.enterpriseTypes, item.key)}">active</c:if>"
data-id="${item.key}">${item.value}</span>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn more-btn">更多</button>
<button class="layui-btn multi-btn">多选</button>
</div>
</div>
<div class="multi_select">
<div class="items_box f-clear">
<c:forEach items="${enterpriseTypeKv}" var="item">
<div class="item">
<input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
for="${item.key}">${item.value}</label>
</div>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn sure-btn">确定</button>
<button class="layui-btn cancel-btn">取消</button>
</div>
</div>
</div>
<div class="modules_select" selectindex="sysTrades">
<span class="title">行业分类:</span>
<div class="radio_select">
<div class="items_box">
<c:forEach items="${sysTradeKv}" var="item">
<span class="item <c:if test="${fn:contains(filter.sysTrades, item.key)}">active</c:if>"
data-id="${item.key}">${item.value}</span>
</c:forEach>
</div>
<div class="btns_box">f
<button class="layui-btn more-btn">更多</button>
<button class="layui-btn multi-btn">多选</button>
</div>
</div>
<div class="multi_select">
<div class="items_box f-clear">
<c:forEach items="${sysTradeKv}" var="item">
<div class="item">
<input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
for="${item.key}">${item.value}</label>
</div>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn sure-btn">确定</button>
<button class="layui-btn cancel-btn">取消</button>
</div>
</div>
</div>
</div>
<div class="modules_box">
<div class="modules_select" selectindex="labels">
<span class="title">企业标签:</span>
<div class="radio_select">
<div class="items_box">
<c:forEach items="${enterpriseLabelKv}" var="item">
<span class="item <c:if test="${fn:contains(filter.labels, item.key)}">active</c:if>"
data-id="${item.key}">${item.value}</span>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn more-btn">更多</button>
<button class="layui-btn multi-btn">多选</button>
</div>
</div>
<div class="multi_select">
<div class="items_box f-clear">
<c:forEach items="${enterpriseLabelKv}" var="item">
<div class="item">
<input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
for="${item.key}">${item.value}</label>
</div>
</c:forEach>
</div>
<div class="btns_box">
<button class="layui-btn sure-btn">确定</button>
<button class="layui-btn cancel-btn">取消</button>
</div>
</div>
</div>
</div>
</div>
<div class="sort-row layui-form-item">
<div class="sort-items-box f-clear">
<div class="sort-item <c:if test="${filter.orderType == 'synthetical'}">active</c:if>"
data-type="synthetical">综合<i class="gyyq-iconfont"></i></div>
<%--<div class="sort-item <c:if test="${filter.orderType == 'pageview'}">active</c:if>"--%>
<%--data-type="pageview">浏览量<i class="gyyq-iconfont"></i></div>--%>
<div class="sort-item <c:if test="${filter.orderType == 'newest'}">active</c:if>"
data-type="newest">最新<i class="gyyq-iconfont"></i></div>
<div class="sort-item rent-item <c:if test="${filter.orderType == 'area'}">active</c:if> <c:if test="${filter.orderByType == 'asc'}">asc</c:if>"
data-type="area">面积
<div class="rent-icon"><i class="gyyq-iconfont up"></i><i
class="gyyq-iconfont down"></i></div>
</div>
</div>
<div class="layui-inline">
<div class="f-clear rent-range">
<div class="layui-input-inline">
<input type="text" name="leftArea" placeholder="亩" autocomplete="off"
class="layui-input" value="${filter.leftArea}">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" name="rightArea" placeholder="亩" autocomplete="off"
class="layui-input" value="${filter.rightArea}">
</div>
</div>
<!--<div style="width:135px;height:40px;background:#000;"></div>-->
<div class="rent-bottom-btns f-clear">
<button class="layui-btn layui-btn-nobg" id="clearBtn">清空</button>
<button class="layui-btn layui-btn-gyyq" id="confirmBtn">确定</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="second-body">
<div class="g-box1200">
<div class="layui-row layui-col-space20">
<c:forEach items="${pager.list}" var="item">
<div class="layui-col-3">
<div class="enterpaise-item">
<a href="${base}/portal/enterprise/detail.dhtml?id=${item.enpId}" class="item-con">
<div class="item-line1">
<img class="company-img" src="../image/img22.png" alt="" />
<p class="companytit">${item.enpName}</p>
<p class="invescale">拟投资规模:<span>${item.planInvestment}</span>万元</p>
</div>
<div class="item-line2"><span>意向经济区:</span>川南经济区</div>
<div class="item-line2"><span>所属行业:</span>${item.trades} </div>
<div class="item-labels f-clear">
<c:forEach items="${item.labels}" var="label">
<span>${label}</span>
</c:forEach>
</div>
</a>
<div class="item-foot layui-row">
<div class="layui-col-4">
<div class="foot-btn foot-left"><i class="gyyq-iconfont"></i>加入对比</div>
</div>
<div class="layui-col-4">
<div class="foot-btn foot-center"><i class="gyyq-iconfont"></i>收藏</div>
</div>
<div class="layui-col-4">
<div class="foot-btn foot-right"><i class="gyyq-iconfont"></i>分享</div>
</div>
</div>
</div>
</div>
</c:forEach>
<div class="layui-col-12">
<div class="f-info-c" id="laypage1"></div>
</div>
</div>
</div>
</div>
<div class="right-fixed-menu">
<div class="menu-list-box">
<ul class="menu-list">
<li><i class="gyyq-iconfont"></i><a href="" class="left-btn">个人中心</a></li>
<li><i class="gyyq-iconfont"></i><span class="left-btn">加入对比</span></li>
<li><i class="gyyq-iconfont"></i></li>
<li><i class="gyyq-iconfont"></i></li>
<li><i class="gyyq-iconfont"></i></li>
</ul>
</div>
</div>
<jsp:include page="/WEB-INF/jsp/portal/common/common_consulting.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/portal/common/common_footer2.jsp"></jsp:include>
</div>
</body>
<script type="text/javascript" src="${base}/static/webv2/layui/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/webv2/layui/layui.js"></script>
<script>
layui.use(['jquery', 'form', 'laypage'], function () {
var $ = layui.jquery, form = layui.form, laypage = layui.laypage;
$(".menu-list li").mouseover(function () {
$(this).addClass('active');
}).mouseout(function () {
$(this).removeClass('active');
});
//头像信息显示/隐藏交互
$('.user-info').on('click', function () {
event.stopPropagation();
$('.user-info .user-list').show(500);
});
$(document).on('click', function () {
$('.user-info .user-list').hide(500);
});
//分页
laypage.render({
elem: 'laypage1',
theme: '#2181c7',
curr: parseInt('${pager.pageNumber}'),
count: parseInt('${pager.totalCount}'),
jump: function (obj, first) {
if (!first) {
dataFilter(obj.curr);
}
}
});
//筛选展开与收起操作
$('.filt-btn').on('click', function () {
$('.area-select-box').toggle();
if ($(this).hasClass('hide-select')) {
$(this).html('收起筛选<i class="gyyq-iconfont"></i>').removeClass('hide-select');
} else {
$(this).html('展开筛选<i class="gyyq-iconfont"></i>').addClass('hide-select');
}
});
//以下为一级的筛选操作
//多选确认操作
$('.modules_box .sure-btn').on('click', function () {
var $selected = $('<span class="item"></span>');
$selected.attr('selectindex', $(this).parents('.modules_select').attr('selectindex'));
var texts = [], values = [];
$(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
if ($(item).find('input').prop('checked') == true) {
texts.push($(item).find('label').text());
values.push($(item).find('input').attr('data-id'));
$(item).find('input').prop('checked', false);
}
});
$selected.text($(this).parents('.modules_select').find('.title').text() + texts.join('、'));
$selected.attr('data-id', values.join(','));
$('.has_chosen .items-box').append($selected);
dataFilter();
$(this).parents('.modules_select').removeClass('multi');
$(this).parents('.modules_select').hide();
});
//单击选中操作
$('.modules_box .radio_select .item').on('click', function () {
var dataId = $(this).attr('data-id');
var $selected = $('<span class="item"></span>');
$selected.attr('selectindex', $(this).parents('.modules_select').attr('selectindex'));
$selected.text($(this).parents('.modules_select').find('.title').text() + $(this).text());
$selected.attr('data-id', dataId);
$('.has_chosen .items-box').append($selected);
dataFilter();
$(this).parents('.radio_select').removeClass('more_box');
$(this).parents('.modules_select').hide();
});
//以下为多级的筛选操作
//多选确认操作
$('.modules_level_box .sure-btn').on('click', function () {
var selectindex = $(this).parents('.modules_select').attr('selectindex');
var $selected = $('<span class="item"></span>');
$selected.attr('selectindex', selectindex);
var texts = [], values = [];
var $modulesSelect = $('div.modules_select[selectindex="' + selectindex + '"]');
$(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
if ($(item).find('input').prop('checked') == true) {
var dataId = $(item).find('input').attr('data-id');
texts.push($(item).find('label').text());
values.push(dataId);
$(item).find('input').prop('checked', false);
$modulesSelect.find('span.item[data-id="' + dataId + '"]').addClass('active');
}
});
$selected.text($(this).parents('.modules_select').find('.title').text() + texts.join('、'));
$selected.attr('data-id', values.join(','));
if ($('.has_chosen .items-box').find('.item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').length) {
$('.has_chosen .items-box .item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').remove();
}
if (selectindex === 'economics') {
$('div.has_chosen span.item[selectindex="citys"]').remove();
$('div.modules_select2 span.item').removeClass('active');
} else if (selectindex === 'citys') {
$('div.has_chosen span.item[selectindex="economics"]').remove();
$('div.modules_select1 span.item').removeClass('active');
}
$('.has_chosen .items-box').append($selected);
dataFilter();
$(this).parents('.modules_level_box').find('.modules_select').removeClass('multi');
// $(this).parents('.modules_level_box').find('.modules_select').hide();
// $(this).parents('.modules_level_box').find('.item').removeClass('active');
});
//单击选中操作
$('.modules_level_box .radio_select .item').on('click', function () {
var dataId = $(this).attr('data-id');
var selectindex = $(this).parents('.modules_select').attr('selectindex');
var $selected = $('<span class="item"></span>');
$selected.attr('selectindex', selectindex);
$selected.text($(this).parents('.modules_select').find('.title').text() + $(this).text());
$selected.attr('data-id', dataId);
if ($('.has_chosen .items-box').find('.item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').length) {
$('.has_chosen .items-box .item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').remove();
}
if (dataId) {
$('.has_chosen .items-box').append($selected);
}
if ($(this).parents('.modules_select').hasClass('modules_select1')) {
//在这里切换对应的二级的数据
$(this).parents('.items_box').find('.item').removeClass('active');
$(this).addClass('active');
var $select2 = $(this).parents('.modules_level_box').find('.modules_select2');
var economicId = $(this).attr('data-id');
$('div.has_chosen span.item[selectindex="citys"]').remove();
$('div.modules_select2 span.item').removeClass('active');
$select2.find('span.item').each(function () {
if (!$(this).attr('data-economic') || !economicId) {
$(this).show();
} else {
if ($(this).attr('data-economic') === economicId) {
$(this).show();
} else {
$(this).hide();
}
}
});
$select2.find('div.item').each(function () {
if (!$(this).find('input').attr('data-economic') || !economicId) {
$(this).show();
} else {
if ($(this).find('input').attr('data-economic') === economicId) {
$(this).show();
} else {
$(this).hide();
}
}
});
$select2.show();
$(this).parents('.modules_level_box').find('.modules_select3').hide();
} else if ($(this).parents('.modules_select').hasClass('modules_select2')) {
//在这里切换对应的三级的数据
$('div.has_chosen span.item[selectindex="economics"]').remove();
$('div.modules_select1 span.item').removeClass('active');
$(this).parents('.items_box').find('.item').removeClass('active');
$(this).addClass('active');
$(this).parents('.modules_level_box').find('.modules_select3').show();
} else if ($(this).parents('.modules_select').hasClass('modules_select3')) {
$(this).parents('.modules_level_box').find('.item').removeClass('active');
$(this).parents('.modules_level_box').find('.radio_select').removeClass('more_box');
$(this).parents('.modules_level_box').find('.modules_select').hide();
}
dataFilter();
});
//更多操作
$('.more-btn').on('click', function () {
$(this).parents('.radio_select').toggleClass('more_box');
var btn_text = $(this).text();
switch (btn_text) {
case '更多':
$(this).text('收起');
break;
case '收起':
$(this).text('更多');
break;
}
});
//多选操作
$('.multi-btn').on('click', function () {
$(this).parents('.modules_select').addClass('multi');
});
//多选取消操作
$('.cancel-btn').on('click', function () {
$(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
$(item).find('input').prop('checked', false);
});
$(this).parents('.modules_select').removeClass('multi');
});
//已选中区域,单击取消操作
$('.has_chosen .items-box').on('click', '.item', function () {
var index = $(this).attr('selectindex');
$(this).remove();
var $modulesSelect = $('.modules_select[selectindex=' + index + ']');
$modulesSelect.show();
$modulesSelect.find('span.item').removeClass('active');
dataFilter();
})
//排序操作
$('.sort-row .layui-inline').mouseenter(function () {
$(this).addClass('rent-hover');
}).mouseleave(function (e) {
$(this).removeClass('rent-hover');
});
$('.sort-item').on('click', function () {
if (!$(this).hasClass('active')) {
$('.sort-item').removeClass('active');
$(this).addClass('active');
}
if ($(this).hasClass('rent-item')) {
$(this).toggleClass('asc');
} else {
$('input[name="leftArea"]').val('');
$('input[name="rightArea"]').val('');
}
dataFilter();
});
$('#clearBtn').on('click', function () {
$('input[name="leftArea"]').val('');
$('input[name="rightArea"]').val('');
dataFilter();
});
$('#confirmBtn').on('click', function () {
dataFilter();
});
$('#search').on('click', function () {
dataFilter();
});
//筛选回显
/**
* 筛选回显
* @param params = [{ selectindex:,//选中类别selectindex
* dataId:[],//选中项的 data-id
* shrinkFlag://是否收缩的标志true/fasle
* }]
*/
function filtEcho(params) {
$('.filt-btn').trigger('click');
params.forEach(function (item, index) {
if (!item.dataId) {
return;
}
var title = $('.modules_select[selectindex=' + item.selectindex + ']').find('.title').text();
var str = '<span class="item" selectindex="' + item.selectindex + '" data-id="' + item.dataId.join(",") + '">' + title;
if (item.shrinkFlag) {
$('.modules_select[selectindex=' + item.selectindex + ']').hide();
}
for (var i = 0; i < item.dataId.length; i++) {
str += $('.modules_select .radio_select .item[data-id=' + item.dataId[i] + ']').text() + '、';
}
str = str.slice(0, str.length - 1);
str += '</span>';
$('.has_chosen .items-box').append(str);
});
}
// 触发默认操作
filtEcho(JSON.parse('${echoData}' || '[]'));
// 过滤操作
function dataFilter(curr) {
curr = curr || 1;
var $submitForm = $('<form method="POST"></form>');
$(document.body).append($submitForm);
$submitForm.attr('action', '${base}/portal/enterprise/index.dhtml');
$('div.has_chosen span.item').each(function () {
var selectindex = $(this).attr('selectindex');
var dataId = $(this).attr('data-id');
if (dataId) {
var dataIds = dataId.split(',');
for (var i = 0; i < dataIds.length; i++) {
$submitForm.append('<input type="hidden" name="' + selectindex + '" value="' + dataIds[i] + '" />');
}
}
});
$submitForm.append('<input type="hidden" name="leftArea" value="' + $('input[name="leftArea"]').val() + '" />');
$submitForm.append('<input type="hidden" name="rightArea" value="' + $('input[name="rightArea"]').val() + '" />');
$submitForm.append('<input type="hidden" name="curr" value="' + curr + '" />');
$submitForm.append('<input type="hidden" name="keywords" value="' + $('input[name="keywords"]').val() + '" />');
var orderType = $('div.sort-item').filter('.active').attr('data-type');
$submitForm.append('<input type="hidden" name="orderType" value="' + orderType + '" />');
if (orderType === 'area') {
if ($('div.sort-item').filter('.asc').length) {
$submitForm.append('<input type="hidden" name="orderByType" value="asc" />');
} else {
$submitForm.append('<input type="hidden" name="orderByType" value="desc" />');
}
}
$submitForm.submit();
}
})
</script>
</html>