【SSH项目实战】国税协同平台-31.我要投诉功能1

我们之前完成了投诉回复和保存功能，这次我们将要完成历史受理信息的显示

以及数据回显功能，当然还有用户编写投诉信息的入口，我们这次继续。

可以注意到，在deilUI.jsp上我们之前的投诉人信息显示，不管是匿名还是不匿名，投诉人的姓名、手机号码都是显示出来的:

[html]  view plain copy

1. <tr>  
2.     <td class="tdBg">投诉人姓名：</td>  
3.     <td><s:property value="complain.compName"/></td>  
4. </tr>  
5. <tr>  
6.      <td class="tdBg">投诉人手机：</td>  
7.      <td>  
8.      <s:property value="complain.compMobile"/>  
9.      </td>  
10. </tr>  

我们要做到匿名的用户名称不显示，手机第4-7位不显示(变为*号)，所以，我们要在deilUI.jsp上修改这一块，先去判断用户是否匿名状态， 不匿名就直接显示用户手机号码，如果匿名了，在手机号码位数合理的情况下，隐藏第5-8位:

[html]  view plain copy

1. <tr>  
2.     <td class="tdBg">投诉人姓名：</td>  
3.     <td><s:if test="!complain.isNm"><s:property value="complain.compName"/></s:if></td>  
4. </tr>  
5. <tr>  
6.     <td class="tdBg">投诉人手机：</td>  
7.     <td>  
8.     <s:if test="!complain.isNm">  
9.     <s:property value="complain.compMobile"/>  
10.     </s:if><s:elseif test="%{complain.compMobile.length() > 10}">  
11.     <s:property value="%{complain.compMobile.substring(0,3) + '****' + complain.compMobile.substring(7,11)}"/>  
12.     </s:elseif>  
13.     </td>  
14. </tr>  

这样在投诉人匿名的时候就不会显示投诉人的姓名和完整的手机号码了。

接下来我们来添加历史回复信息显示的功能。这是我们什么都没有加时的jsp界面上的静态数据:

[html]  view plain copy

1. <tr>  
2.     <td colspan="2">  
3.         <fieldset style="border: solid 1px #c0c0c0;margin-top:5px;">  
4.         <legend style="color:green;font-weight:bold;">回复 </legend>  
5.             <div style="width:100%; text-align:center;color:#ccc;maring-top:5px;">  
6.             回复部门：xxx    
7.             回复人：xxx    
8.             回复时间：xxx  
9.             </div>  
10.             <div style="width:100%;maring-top:10px;font-size:13px;padding-left:5px;">  
11.             xxx  
12.             </div>  
13.         </fieldset>  
14.     </td>  
15. </tr>  

因为我们每次进入恢复投诉界面的时候，已经进行了“懒加载”，我们的历史回复信息也是会加载进来的，这个时候我们只要使用struts去遍历它就可以了。修改后的这一块的代码为:

[html]  view plain copy

1. <tr>  
2.     <td colspan="2">  
3.       <s:iterator value="complain.complainReplies" status="st">  
4.         <fieldset style="border: solid 1px #c0c0c0;margin-top:5px;">  
5.         <legend style="color:green;font-weight:bold;">回复<s:property value="#st.count"/> </legend>  
6.             <div style="width:100%; text-align:center;color:#ccc;maring-top:5px;">  
7.             回复部门：<s:property value="replyDept"/>    
8.             回复人：<s:property value="replyer"/>    
9.             回复时间：<s:date name="replyTime" format="yyyy-MM-dd HH:mm"/>  
10.             </div>  
11.             <div style="width:100%;maring-top:10px;font-size:13px;padding-left:5px;">  
12.             <s:property value="replyContent"/>  
13.             </div>  
14.         </fieldset>  
15.       </s:iterator>  
16.     </td>  
17. </tr>  

测试，我们点击之前我们回复过的投诉信息，然后在历史回复栏中显示:


这样我们就完成了历史受理信息的显示。

我们接下来完成投诉入口、分页与数据回显的功能
先来搞定投诉入口，我们的普通用户上网需要投诉，就直接在“工作主页”中去投诉即可:

我们的投诉信息保存不能写在Complain的Action中，因为普通用户可能没有操作权限，所以我们要将这个方法写在公共的Action中，即系统主界面的Action------HomeAction:

[java]  view plain copy

1. package cn.edu.hpu.tax.core.action;  
2.   
3. import com.opensymphony.xwork2.ActionSupport;  
4.   
5. public class HomeAction extends ActionSupport{  
6.   
7.     //跳转到首页  
8.     public String execute(){  
9.           
10.         return "home";  
11.     }  
12.       
13. }  

我们在HomeAction中添加跳转至投诉信息填写页面的方法:

[java]  view plain copy

1. package cn.edu.hpu.tax.core.action;  
2.   
3. import com.opensymphony.xwork2.ActionSupport;  
4.   
5. public class HomeAction extends ActionSupport{  
6.   
7.     //跳转到首页  
8.     public String execute(){  
9.           
10.         return "home";  
11.     }  
12.       
13.     //跳转到投诉信息编辑页面  
14.     public String complainAddUI(){  
15.         return "complainAddUI";  
16.     }  
17. }  

然后在主页“我要投诉”地方加上超链接:

[html]  view plain copy

1. <div class="lc_grzxbt">  
2.         <h1>我的投诉</h1>  
3.         <div style="float:right;padding-top:3px;">  
4.         <s:a action="home_complainAddUI"namespace="/sys" target="_blank">  
5.         我要投诉</s:a>    
6.         </div>  
7. </div>  

然后拿到美工给我们的投诉信息编辑页面:

[html]  view plain copy

1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
2. <%  
3.     pageContext.setAttribute("basePath", request.getContextPath()+"/") ;  
4. %>  
5. <html>  
6. <head>  
7.     <%@include file="/common/header.jsp"%>  
8.     <title>我要投诉</title>  
9.     <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.config.js"></script>  
10.     <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.all.min.js"> </script>  
11.     <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/lang/zh-cn/zh-cn.js"></script>  
12.   
13.   
14.     <script>  
15.         window.UEDITOR_HOME_URL = "${basePath }js/ueditor/";  
16.         var ue = UE.getEditor('editor');  
17.           
18.         //根据部门查询该部门下的用户列表  
19.         function doSelectDept(){  
20.           
21.     }  
22.     </script>  
23.       
24. </head>  
25. <body>  
26. <form id="form" name="form" action="" method="post" enctype="multipart/form-data">  
27.     <div class="vp_d_1">  
28.         <div style="width:1%;float:left;">    </div>  
29.         <div class="vp_d_1_1">  
30.             <div class="content_info">  
31.     <div class="c_crumbs"><div><b></b><strong>工作主页</strong> - 我要投诉</div></div>  
32.     <div class="tableH2">我要投诉</div>  
33.     <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >  
34.         <tr>  
35.             <td class="tdBg" width="250px">投诉标题：</td>  
36.             <td><s:textfield name="comp.compTitle"/></td>  
37.         </tr>  
38.         <tr>  
39.             <td class="tdBg">被投诉人部门：</td>  
40.             <td><s:select id="toCompDept" name="user.dept" list="#{'':'请选择','部门A':'部门A','部门B':'部门B' }" onchange="doSelectDept()"/></td>  
41.         </tr>  
42.         <tr>  
43.             <td class="tdBg">被投诉人姓名：</td>  
44.             <td>  
45.                    
46.             </td>  
47.         </tr>  
48.         <tr>  
49.             <td class="tdBg">投诉内容：</td>  
50.             <td><s:textarea id="editor" name="comp.compContent" cssStyle="width:90%;height:160px;" /></td>  
51.         </tr>  
52.         <tr>  
53.             <td class="tdBg">是否匿名投诉：</td>  
54.             <td><s:radio name="comp.isNm" list="#{'0':'非匿名投诉','1':'匿名投诉' }" value="0"/></td>  
55.         </tr>  
56.          
57.     </table>  
58.   
59.   
60.     <div class="tc mt20">  
61.         <input type="button" class="btnB2" value="保存" />  
62.               
63.         <input type="button"  onclick="javascript:window.close()" class="btnB2" value="关闭" />  
64.     </div>  
65.     </div></div>  
66.     <div style="width:1%;float:left;">    </div>  
67.     </div>  
68. </form>  
69. </body>  
70. </html>  

点击“我要投诉”之后的效果:


可以看到，我们有个最重要的功能，就是投诉部门选择之后就会有各个部门的人显示在“投诉人”这个框框中。
显然，要完成这个功能，我们就需要写一个js方法，利用ajax根据部门名称去查询该部门下的所有人员姓名，然后显示在“投诉人”这个框框中。

我们在doSelectDept()方法中去完成这个功能:

[javascript]  view plain copy

1. //根据部门查询该部门下的用户列表  
2. function doSelectDept(){  
3.     //1、获取部门  
4.     var dept = $("#toCompDept option:selected").val();  
5.     if(dept != ""){  
6.         //2、根据部门查询列表  
7.         $.ajax({  
8.             url:"${basePath}sys/home_getUserJson.action",  
9.             data:{"dept":dept},  
10.             type:"post",  
11.             dataType:"json",//返回数据类型  
12.             success: function(data){  
13.                 //2.1、将用户列表设置到被投诉人下拉框中  
14.                 if(data != null && data != "" && data != undefined){  
15.                     if("success" == data.msg){  
16.                         var toCompName = $("#toCompName");  
17.                         toCompName.empty();  
18.                         //使用each标签将userList的数据遍历出来  
19.                         $.each(data.userList, function(index, user){  
20.                             toCompName.append("<option value='" + user.name + "'>" + user.name + "</option>");  
21.                         });  
22.                     } else {alert("获取被投诉人列表失败！");}  
23.                 } else {  
24.                     alert("获取被投诉人列表失败！");  
25.                 }  
26.             },  
27.             error:function(){alert("获取被投诉人列表失败！");}  
28.         });  
29.     } else {  
30.         //清空被投诉人列表下拉框  
31.         $("#toCompName").empty();  
32.     }  
33. }  

然后我们在“投诉人”这个框中去显示我们获取的该部门的人员列表:

[html]  view plain copy

1. <tr>  
2.     <td class="tdBg">被投诉人姓名：</td>  
3.     <td>  
4.         <select id="toCompName" name="comp.toCompName">  
5.         </select>  
6.     </td>  
7. </tr>  

然后我们在homeAction中去完成我们ajax方法中的getUserJson方法:

[javascript]  view plain copy

1. public void getUserJson(){  
2.     try {  
3.         //1.获取部门  
4.         String dept = ServletActionContext.getRequest()  
5.                 .getParameter("dept");  
6.         if (StringUtils.isNotBlank(dept)) {  
7.             //2.根据部门查询用户列表  
8.             QueryHelper queryHelper = new QueryHelper(User.class, "u");  
9.             queryHelper.addCondition("u.dept = ?", dept);  
10.             List<User> userList = userService.findObjects(queryHelper);  
11.             //创建Json对象  
12.             JSONObject jso = new JSONObject();  
13.             jso.put("msg", "success");  
14.             jso.accumulate("userList", userList);  
15.   
16.   
17.             //3.输出用户列表以json格式字符串形式输出  
18.             HttpServletResponse response = ServletActionContext  
19.                     .getResponse();  
20.             response.setContentType("text/json");  
21.             ServletOutputStream outputStream = response.getOutputStream();  
22.             outputStream.write(jso.toString().getBytes("utf-8"));  
23.             outputStream.close();  
24.         }  
25.     } catch (Exception e) {  
26.         e.printStackTrace();  
27.     }  
28.       
29. }  

其中创建json对象我们要引入下列jar包:
commons-beanutils-1.8.0.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk12.jar

测试:

但是刚刚我们的getUserJson()方法是在没有使用框架的情况下去写的，我们现在使用SSH框架了，可以更简洁的写这个方法，所以我们修改getUserJson()方法:

[java]  view plain copy

1. public String getUserJson2(){  
2.     try {  
3.         //1.获取部门  
4.         String dept = ServletActionContext.getRequest()  
5.                 .getParameter("dept");  
6.         if (StringUtils.isNotBlank(dept)) {  
7.             //2.根据部门查询用户列表  
8.             QueryHelper queryHelper = new QueryHelper(User.class, "u");  
9.             queryHelper.addCondition("u.dept = ?", dept);  
10.             return_map=new HashMap<String,Object>();  
11.             return_map.put("msg", "success");  
12.             return_map.put("userList", userService.findObjects(queryHelper));  
13.         }  
14.     } catch (Exception e) {  
15.         e.printStackTrace();  
16.     }  
17.     return SUCCESS;  
18. }  

上面的return_map是Map对象，包装要返回的数据类型，要作为HomeAction的全局变量，并添加get和set方法:

[java]  view plain copy

1. private Map<String,Object> return_map;  
2.   
3. public Map<String, Object> getReturn_map() {  
4.     return return_map;  
5. }  
6.   
7. public void setReturn_map(Map<String, Object> returnMap) {  
8.     return_map = returnMap;  
9. }  

然后home-struts.xml配置文件中加以下配置:

[html]  view plain copy

1. <package name="sysHomeJson-action" namespace="/sys" extends="json-default">  
2.     <action name="home_getUserJson2" class="cn.edu.hpu.tax.core.action.HomeAction" method="getUserJson2">  
3.         <result type="json">  
4.             <param name="root">return_map</param>  
5.         </result>  
6.     </action>  
7. </package>  

最后别忘记引入 struts2-json-plugin-2.3.20.jar 的jar包(用来包装json)

可以看到，在getUserJson2()方法中并没有拼接json串，我们只是利用struts的返回数据包装机制，来使用“<result type="json"></result>”配置使其将Action中返回的数据(值栈中的return_map)包装成json数据。

这种写法充分利用了struts框架返回json数据的优势，而且效果与之前是一样的。

测试之后，结果和之前一样: