服务中心-咨询帮助: js拼接列表数据动态渲染显示

web/src/main/java/com/jeesite/modules/consult/web/ConsultHelpController.java

@@ -3,10 +3,13 @@ package com.jeesite.modules.consult.web;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
+import com.alibaba.fastjson.JSON;
 import com.jeesite.modules.consult.entity.ConsultHelp;
 import com.jeesite.modules.consult.entity.ConsultHelpSlave;
 import com.jeesite.modules.consult.service.ConsultHelpService;
 import com.jeesite.modules.consult.service.ConsultHelpSlaveService;
+import com.jeesite.modules.sys.entity.DictData;
+import com.jeesite.modules.sys.utils.DictUtils;
 import com.jeesite.modules.sys.utils.UserUtils;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -62,8 +65,8 @@ public class ConsultHelpController extends BaseController {
 	@RequiresPermissions("consult:consultHelp:view")
 	@RequestMapping(value = {"index", ""})
 	public String index(ConsultHelp consultHelp, Model model) {
-
 		model.addAttribute("data","这是一个静态数据");
+		model.addAttribute("dictMap", JSON.toJSONString(getDictMap("consult_type")));
 		return prefix + "/index";
 	}
 	
@@ -134,7 +137,7 @@ public class ConsultHelpController extends BaseController {
 			consultHelp.setUserId(UserUtils.getUser().getUserCode());
 		}
 		//具备分页信息的咨询帮助
-		Page<ConsultHelp> page = consultHelpService.findPage(consultHelp);
+        Page<ConsultHelp> page = consultHelpService.findPage(consultHelp);
 		List<ConsultHelp> list = page.getList();
 		List<ConsultHelpSlave> consultHelpSlaves = consultHelpSlaveService.findList(new ConsultHelpSlave());
 		if(!CollectionUtils.isEmpty(consultHelpSlaves)){
@@ -153,5 +156,16 @@ public class ConsultHelpController extends BaseController {
 
 		return page;
 	}
+
+	/**
+	 * 根据dict_type获取字典 map<字典value,字典label>
+	 * @param dictType
+	 * @return
+	 */
+	private Map<String,String> getDictMap(String dictType){
+		List<DictData> consultTypeDict = DictUtils.getDictList(dictType);
+		Map<String, String> dictMap = consultTypeDict.stream().collect(Collectors.toMap(DictData::getDictValue, DictData::getDictLabelOrig));
+		return dictMap;
+	}
 	
 }

web/src/main/resources/views/modules/consult/index.html

@@ -3,7 +3,7 @@
 	<div id='help' class="help" style="margin: 10px;background: #fff; ">
 		<div style="width: 100%;height: 100%;display: flex;justify-content: space-around;padding-top: 20px;">
 			<div style="width:98%;height: 100%;margin:1%">
-				<input type="text" id="searchType" value="全部">
+				<input type="hidden" id="searchType" value="全部">
 				<div style="width: 100%;padding: 10px 0; display: flex;align-items: center;justify-content: space-between;">
 					<div style="display: flex;align-items: center;">
 						<div>状态:</div>
@@ -34,7 +34,7 @@
 						</div>
 					</div>
 					<div class="input-group">
-						<input type="text" class="form-control" placeholder="请输入相关键词" aria-describedby="basic-addon2">
+						<input type="text" class="form-control" id="title" placeholder="请输入相关键词" aria-describedby="basic-addon2">
 						<span class="input-group-addon" id="basic-addon2">
                         <button style="border: none;" onclick="fetchData()">搜索</button>
                     </span>
@@ -45,7 +45,7 @@
 				</div>
 				<div style="width: 100%;height: 85%;overflow: auto;" class="frameBody">
 
-					<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">
+					<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;border: green 3px solid;display: none">
 						<div class="media">
 							<div class="media-left">
 								<a href="http://192.168.1.56:8081/fwzx/zxbz#">
@@ -62,7 +62,7 @@
 						<div style="width: 100%;display: flex;justify-content: flex-end;">
 							<a>回复</a> <span>|</span> <a>评论(20)</a>
 						</div>
-						<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">
+						<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;border: 2px red solid">
 							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
 								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
 									<div style="font-size: 16px;color:#2766b3;">
@@ -81,8 +81,17 @@
 								</div>
 								<div style="margin-top: 4px;">英语成绩要70分及以上</div>
 							</div>
+							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
+								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
+									<div style="font-size: 16px;color:#2766b3;">
+										小王同学:
+									</div>
+									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
+								</div>
+								<div style="margin-top: 4px;">英语成绩要70分及以上</div>
+							</div>
 						</div>
-						<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">
+						<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;border: 2px blue dashed">
 							<div style="color: #888;margin-right: 4px;">剩余3条评论</div>
 							<a>点击查看</a>
 							<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>
@@ -91,7 +100,7 @@
 
 				</div>
 
-				<div style="bottom: 0;width: 100%;text-align: center;">
+				<div style="bottom: 0;width: 100%;text-align: center;display: none">
 					<nav aria-label="Page navigation">
 						<ul class="pagination">
 							<li>
@@ -128,117 +137,99 @@
 <script src="${ctxStatic}/schedule/jquery-ui/jquery-ui.min.js"></script>
 <script type='text/javascript'>
 	var tempDataList = null;
+	var dictDataMap = '${dictMap}'
+	//处理咨询类型字典
+	var dictMap = new Map();
+	dictDataMap = JSON.parse(dictDataMap)
+	for(var key in dictDataMap){
+		dictMap.set(key,dictDataMap[key])
+	}
 	$(document).ready(function () {
-
-		// js.showErrorMessage('hello');
 		fetchData()
-
 	});
 
 	//获取遍历的list数据
 	function  fetchData(){
-
 		var searchType = $("#searchType").val();
-		js.ajaxSubmit("${ctx}/consult/consultHelp/allDataList?searchType="+searchType, function(data){
-			tempDataList = data.list
-			initDomEle(tempDataList)
+		var title = $("#title").val();
+		$.ajax({
+			url: "${ctx}/consult/consultHelp/allDataList",
+			data: { searchType: searchType,title: title},
+			dataType: "json",
+			type: 'Post',
+			async: false,
+			success: function (data) {
+				tempDataList = data.list
+				initDomEle(tempDataList)
+			}
 		});
 	}
 
-	function initDomEle(list){
-		console.log(list)
-
-		//todo  使用freemarker遍历渲染dom
+	function initDomEle(dataList){
 		$(".frameBody").empty();
-		var domEleOld = '<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">\n' +
-				'<div class="media">\n' +
-				'<div class="media-left">\n' +
-				'<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
-				'<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
-				'<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
-				'</div>\n' +
-				'</a>\n' +
-				'</div>\n' +
-				'<div class="media-body" style="">\n' +
-				'<h4 class="media-heading">${data}</h4>\n' +
-				' <div>怎么报英语四六级</div>\n' +
-				'</div>\n' +
-				'</div>\n' +
-				'<div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
-				'<a>回复</a> <span>|</span> <a>评论(20)</a>\n' +
-				'</div>\n' +
-				'<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +
-				'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
-				'<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
-				'<div style="font-size: 16px;color:#2766b3;">\n' +
-				'教务处:\n' +
-				'</div>\n' +
-				'<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
-				'</div>\n' +
-				'<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>\n' +
-				'</div>\n' +
-				'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
-				'<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
-				'<div style="font-size: 16px;color:#2766b3;">\n' +
-				'小王同学:\n' +
-				'</div>\n' +
-				'<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
-				'</div>\n' +
-				'<div style="margin-top: 4px;">英语成绩要70分及以上</div>\n' +
-				'</div>\n' +
-				'</div>\n' +
-				'<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
-				'<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
-				'<a>点击查看</a>\n' +
-				'<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
-				'</div>\n' +
-				'</div>';
+		//每一个咨询的主键id
+		var consultId = 'none'
+		var footPart = null
+		dataList.forEach(function (item){
+			//总内容div盒子部分
+			var domEle = '' +
+					'<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;" class="uuu">\n' +
+					'      <div class="media">\n' +
+					'       	<div class="media-left">\n' +
+					'        		<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
+					'         			<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
+					'          				<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
+					'         			</div>\n' +
+					'        		</a>\n' +
+					'       	</div>\n' +
+					'       	<div class="media-body" style="">\n' +
+					'        		<h4 class="media-heading">'+dictMap.get(item.consultType)+'</h4>\n' +
+					'        		<div>'+item.title+'</div>\n' +
+					'       	</div>\n' +
+					'      </div>\n' +
+					'      <div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
+					'       	<a>回复</a> <span>|</span> <a>评论('+item.consultHelpSlaves.length+')</a>\n' +
+					'      </div>\n'+
+					'</div>'
+
+			//所有回复评论的数据列表部分
+			var bodyContentOuter = null;
+			var bodyContentInner = '';
+			console.log(item.consultHelpSlaves)
+			if(item.consultHelpSlaves.length > 0){
+
+				bodyContentOuter = '' +
+						'<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +
+
+						'</div>\n';
+
+				item.consultHelpSlaves.forEach(function (sonItem){
+					bodyContentInner += ''+'' +
+							'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
+							'   <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
+							'       <div style="font-size: 16px;color:#2766b3;">\n' +
+							'          	'+sonItem.userName+':\n' +
+							'       </div>\n' +
+							'       <div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
+							'    </div>\n' +
+							'    <div style="margin-top: 4px;">'+sonItem.content+'</div>\n' +
+							'</div>\n';
+				});
+			}
+			//我要评论部分
+			if(consultId != item.id){
+				consultId = item.id;
+				footPart = '' +
+						'<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
+						'       	<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
+						'       	<a>点击查看</a>\n' +
+						'       	<button onclick="toAddComment(\''+item.id+'\')" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
+						'</div>';
+			}
+
+			bodyContentOuter == null ? $(".frameBody").append($(domEle).append($(footPart))) : $(".frameBody").append($(domEle).append(($(bodyContentOuter).append($(bodyContentInner)))).append($(footPart)));
 
-		var domEle = '<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">\n' +
-				'\t\t\t\t\t\t<div class="media">\n' +
-				'\t\t\t\t\t\t\t<div class="media-left">\n' +
-				'\t\t\t\t\t\t\t\t<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
-				'\t\t\t\t\t\t\t\t\t<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
-				'\t\t\t\t\t\t\t\t\t\t<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
-				'\t\t\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t\t</a>\n' +
-				'\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t<div class="media-body" style="">\n' +
-				'\t\t\t\t\t\t\t\t<h4 class="media-heading">${data}</h4>\n' +
-				'\t\t\t\t\t\t\t\t<div>怎么报英语四六级</div>\n' +
-				'\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
-				'\t\t\t\t\t\t\t<a>回复</a> <span>|</span> <a>评论(20)</a>\n' +
-				'\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +
-				'\t\t\t\t\t\t\t<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
-				'\t\t\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
-				'\t\t\t\t\t\t\t\t\t<div style="font-size: 16px;color:#2766b3;">\n' +
-				'\t\t\t\t\t\t\t\t\t\t教务处:\n' +
-				'\t\t\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t\t\t<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
-				'\t\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t\t<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>\n' +
-				'\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
-				'\t\t\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
-				'\t\t\t\t\t\t\t\t\t<div style="font-size: 16px;color:#2766b3;">\n' +
-				'\t\t\t\t\t\t\t\t\t\t小王同学:\n' +
-				'\t\t\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t\t\t<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
-				'\t\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t\t\t<div style="margin-top: 4px;">英语成绩要70分及以上</div>\n' +
-				'\t\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
-				'\t\t\t\t\t\t\t<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
-				'\t\t\t\t\t\t\t<a>点击查看</a>\n' +
-				'\t\t\t\t\t\t\t<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
-				'\t\t\t\t\t\t</div>\n' +
-				'\t\t\t\t\t</div>';
-
-		$(".frameBody").append($(domEle))
+		});
 	}
 
 	//跳转到添加咨询页面处
@@ -248,7 +239,6 @@
 
 	//发表评论
 	function toAddComment(id){
-		id="1534367119269007360"
 		js.addTabPage(null, "新增咨询评论", "${ctx}/consult/consultHelpSlave/form?consultId="+id)
 	}