CRM第三天:完成客户管理的分页查询,图片上传,条件查询,修改客户,删除客户的功能

CRM客户关系管理系统三继续。

目录

1.CRM:客户管理模块查询客户(分页)

1.1修改left.jsp

1.2编写Action中findAll的方法

1.3编写Service

1.4编写DAO

1.5配置页面跳转

1.6编写list.jsp

2.CRM:客户管理-保存客户上传客户资质

2.1文件上传知识回顾

2.1.1什么是文件上传

2.1.2文件上传技术

2.1.3文件上传要求

2.2文件上传代码实现

2.2.1第一步:修改添加页面

2.2.2第二步:修改action中的save方法

2.2.3第三步:把文件的路径存入数据库

2.2.4第四步:配置文件上传的拦截器(大小,格式)

3. CRM:客户管理-删除客户

3.1修改查询页面

3.2编写Action

3.3编写Service

3.4编写Dao

4. CRM:客户管理-修改客户

4.1修改列表页面

4.2编写action

4.3编写service

4.4编写Dao

4.4配置跳转页面

5. CRM:客户管理-按条件查询客户

5.1在列表页面异步加载查询条件的数据

5.2点击查询提交到action

5.3编写action


 

1.CRM:客户管理模块查询客户(分页)

1.1修改left.jsp

<li><a

                   href="${pageContext.request.contextPath }/customer_findAll.action">客户列表</a></li>

 

1.2编写Action中findAll的方法

   

//查询客户列表方法

    public String findAll(){

        //接收分页参数

        //最好使用DetachedCriteria对象(带分页的条件查询)

        DetachedCriteria detachedCriteria=DetachedCriteria.forClass(Customer.class);

        //调用业务层查询

        PageBean<Customer> pageBean=customerService.findByPage(detachedCriteria,page,pageSize);

        ActionContext.getContext().getValueStack().push(pageBean);

       

        return "findAll";

    }

1.3编写Service

  

  //客户分页查询业务层方法

    @Override

   public PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer pageSize) {

        PageBean<Customer> pageBean=new PageBean<Customer>();

        //封装当前页数

        pageBean.setPage(page);

        //封装每页记录数

        pageBean.setPageSize(pageSize);

        //封装总记录数,调用Dao查询

        Integer totalCount=customerDao.findCount(detachedCriteria);

        pageBean.setTotalCount(totalCount);

        //封装总页数

        Double tc=totalCount.doubleValue();

        Double num=Math.ceil(tc/pageSize);

        pageBean.setTotalPage(num.intValue());

        //封装每页显示数据的集合

        Integer begin=(page-1)*pageSize;

        List<Customer> list=customerDao.findByPage(detachedCriteria,begin,pageSize);

        pageBean.setList(list);

        return pageBean;



    }

1.4编写DAO

   

// 带条件统计个数

    @Override

    public Integer findCount(DetachedCriteria detachedCriteria) {

        detachedCriteria.setProjection(Projections.rowCount());

        List<Long> count=(List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);

        if(count.size()>0){

            return count.get(0).intValue();

        }

        return null;

    }



    // 带条件分页查询客户

    @Override

    public List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer pageSize) {

        detachedCriteria.setProjection(null);

       

        return (List<Customer>) this.getHibernateTemplate().findByCriteria(detachedCriteria, begin, pageSize);

    }

1.5配置页面跳转

<!-- 客户管理Action -->

        <action name="customer_*" class="customerAction" method="{1}">

            <result name="saveUI" >/customer/add.jsp</result>

            <result name="findAll">/customer/list.jsp</result>

        </action>

1.6编写list.jsp

<div class="main" style="overflow-y:auto">

    

      <div class="container">

        <div class="main_top">

       <div id="table" class="mt10">

        <div class="box span10 oh">

              <table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table">

                <tr>

                   <th width="100">客户名称</th>

                   <th width="100">客户级别</th>

                   <th width="100">客户来源</th>

                   <th width="100">客户所属行业</th>

                   <th width="100">电话</th>

                   <th width="100">手机</th>

                   <th width="130">操作</th>

                 </tr>

                 <s:iterator value="list">

                

                <tr class="tr">

                   <td><s:property value="cust_name"/></td>

                   <td><s:property value="baseDictLevel.dict_item_name"/></td>

                   <td><s:property value="baseDictSource.dict_item_name"/></td>

                   <td><s:property value="baseDictIndustry.dict_item_name"/></td>

                   <td><s:property value="cust_phone"/></td>

                   <td><s:property value="cust_mobile"/></td>

                   <td>

                      <input type="button" name="button" class="btn btn82 btn_add" value="修改">

                      <input type="button" name="button" class="btn btn82 btn_del" value="删除">

                   </td>

               

                 </tr>

                 </s:iterator>

               

              </table>

              <div class="page mt10">

                <form name="customerForm" action="${pageContext.request.contextPath }/customer_findAll.action" method="post">

                <div class="pagination">

                  <ul>

                      <li class="disabled">

                      <span>

                                                                     共<s:property value="totalCount"/>条记录,

                                                                     共 <s:property value="totalPage"/>页</span>

                      </li>

                     <li>

                        <span>

                                                                每页显示记录数:

                        <select name="pageSize" onchange="to_page()">

                            <option value="3" <s:if test="pageSize==3">selected</s:if>>3条记录</option>

                            <option value="5" <s:if test="pageSize==5">selected</s:if>>5条记录</option>

                            <option value="10" <s:if test="pageSize==10">selected</s:if>>10条记录</option>

                        </select>

                        

                        </span>

                     </li>

                    

                     

                      <s:if test="page!=1">

                          <li><a href="javascript:to_page(1)">首页</a></li>

                          <li><a href="javascript:to_page(<s:property value="page-1" />)">上一页</a></li>

                      </s:if>

                     

                      <s:iterator var="i" begin="1" end="totalPage">

                          <s:if test="#i==page">

                           <li class="active"><span><s:property value="#i"/> </span></li>

                          </s:if>

                          <s:else>

                          <li><a href="javascript:to_page(<s:property value="#i" />)"><s:property value="#i"/></a></li>

                          </s:else>

                      </s:iterator>

                     

                      <s:if test="page!=totalPage">

                          <li><a href="javascript:to_page(<s:property value="page+1" />)">下一页</a></li>

                          <li><a href="javascript:to_page(<s:property value="totalPage" />)">末页</a></li>

                      </s:if>

                      <li>到第

                         <input class="input-text lh25" type="text" id="page" name="page" size="2" height="10px"/>页

                         <input class="ext_btn" type="button" value="GO" onclick="to_page()" />

                        

                     </li>

                  </ul>

                </div>

                </form>

                

              </div>

        </div>

     </div>

    </div>

    </div>

   

    </div>



2.CRM:客户管理-保存客户上传客户资质

2.1文件上传知识回顾

2.1.1什么是文件上传

将本地文件通过流的形式上传到服务器。

 

2.1.2文件上传技术

jspSmartUpload:(很少用)

   jspSmartUpload是一个可免费使用的全功能的文件上传下载组件,适于嵌入执行上传下载操作的JSP文件中。该组件有以下几个特点:

  1. 使用简单。在JSP文件中仅仅书写三五行java代码就可以搞定文件的上传或下载,方便。
  2. 能全程控制上传。利用jspSmartUpload组件提供的对象及其操作方法,可以获得全部上传文件的信息(包括文件名,大小,类型,扩展名,文件数据等),方便存取。
  3. 能对上传的文件在大小、类型等方面做出限制。如此可以滤掉不符合要求的文件。
  4. 下载灵活。仅写两行代码,就能把Web服务器变成文件服务器。不管文件在Web服务器的目录下或在其它任何目录下,都可以利用jspSmartUpload进行下载。

Fileupload:

    FileUpload 是 Apache commons下面的一个子项目,用来实现Java环境下面的文件上传功能,与常见的SmartUpload齐名。

Servlet3.0

      1. 文件上传
      2. 注解开发
      3. 文件上传

Struts2框架:

     底层实现是fileUpload,对FileUpload进行了封装。

    

    

2.1.3文件上传要求

1.表单的提交方式必须为post。

2.表单中需要提供<input type=”file” name=”upload”/>,而且这个文件必须有name属性。

3.表单中enctype属性设置为multipart/form-data。

 

2.2文件上传代码实现

2.2.1第一步:修改添加页面

提供文件上传项:

<tr>

                  <td class="td_right">文件:</td>

                  <td class=""><input type="file" name="file" class="input-text lh30" size="10"></td>

                 </tr>

 

修改表单属性:

<form action="${pageContext.request.contextPath }/customer_save.action" method="post" enctype="multipart/form-data" class="jqtransform">

 

2.2.2第二步:修改action中的save方法

Struts2的文件上传:在action中提供三个属性,对这个三个属性提供set方法。

  1. 字符串类型:上传项名称+FileName;
  2. 文件类型:上传项名称;
  3. 字符串类型:上传项名称+ContentType;
  

/**  



* @Title: CustomerAction.java



* @Package com.albertyy.crm.web.action



* @Description: TODO



* @author yangxianyang  



* @date 2018年12月16日 下午4:07:41



* @version V1.0  



*/



package com.albertyy.crm.web.action;



import java.io.File;

import java.io.IOException;



import javax.servlet.ServletContext;



import org.apache.commons.io.FileUtils;

import org.apache.struts2.ServletActionContext;

import org.hibernate.criterion.DetachedCriteria;



import com.albertyy.crm.entity.Customer;

import com.albertyy.crm.service.CustomerService;

import com.albertyy.crm.utils.PageBean;

import com.albertyy.crm.utils.UploadUtils;

import com.opensymphony.xwork2.ActionContext;

import com.opensymphony.xwork2.ActionSupport;

import com.opensymphony.xwork2.ModelDriven;



/**

 *        项目名称:CRM   类名称:CustomerAction   类描述:  客户管理Action 创建人:yangyangyang  

 * 创建时间:2018年12月16日 下午4:07:41   修改人:yangyangyang   修改时间:2018年12月16日 下午4:07:41  

 * 修改备注:   @version       

 */



public class CustomerAction extends ActionSupport implements ModelDriven<Customer> {

     // 模型驱动使用的对象

     private Customer customer = new Customer();



     @Override

     public Customer getModel() {

         // TODO Auto-generated method stub

         return customer;

     }



     // 接收分页参数

     private Integer page = 1;



     public void setPage(Integer page) {

         if (page == null) {

              page = 1;

         }

         this.page = page;

     }



     private Integer pageSize = 5;



     public void setPageSize(Integer pageSize) {

         if (pageSize == null) {

              pageSize = 5;

         }

         this.pageSize = pageSize;

     }



     // 注入Services

     private CustomerService customerService;



     public void setCustomerService(CustomerService customerService) {

         this.customerService = customerService;

     }

    /*

     * 文件上传提供的三个属性

     */

     private String fileFileName;//文件名称

     private File file;//上传的文件

     private String fileContentType;//文件类型

     public void setFileFileName(String fileFileName) {

         this.fileFileName = fileFileName;

     }



     public void setFile(File file) {

         this.file = file;

     }



     public void setFileContentType(String fileContentType) {

         this.fileContentType = fileContentType;

     }



     // 客户管理跳转到添加页面

     public String saveUI() {

         return "saveUI";

     }



     // 保存客户的方法

     public String save() {

         //上传文件

         if(file!=null){

              //设置上传路径

              ActionContext actionContext = ActionContext.getContext();

              ServletContext servletContext = (ServletContext)actionContext.get(ServletActionContext.SERVLET_CONTEXT);

              String path = servletContext.getRealPath("/")+"upload";

              System.out.println(file);

              //为了防止一个目录下存放相同的文件名:使用随机文件名

              String uuidFileName=UploadUtils.getUuidFileName(fileFileName);

              //为了防止一个目录下存放的文件过多:目录分离

              String realPath=UploadUtils.getPath(uuidFileName);

              //创建目录

              String url=path+realPath;

              File ml=new File(url);

              if(!ml.exists()){

                   ml.mkdirs();

              }

              //文件上传

              File dictFile=new File(url+"/"+uuidFileName);

              try {

                   FileUtils.copyFile(file, dictFile);

              } catch (IOException e) {

                   // TODO Auto-generated catch block

                   e.printStackTrace();

              }

         }

        

         //保存客户

         customerService.save(customer);

         // 跳转到查询页面

         // 接收分页参数

         // 最好使用DetachedCriteria对象(带分页的条件查询)

         DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

         // 调用业务层查询

         PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

         ActionContext.getContext().getValueStack().push(pageBean);



         return "findAll";

     }



     // 查询客户列表方法

     public String findAll() {

         // 接收分页参数

         // 最好使用DetachedCriteria对象(带分页的条件查询)

         DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

         // 调用业务层查询

         PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

         ActionContext.getContext().getValueStack().push(pageBean);



         return "findAll";

     }

}

2.2.3第三步:把文件的路径存入数据库

修改实体:

private Long cust_id;

     private String cust_name;

     /*private String cust_source;

     private String cust_industry;

     private String cust_level;*/

     private String cust_phone;

     private String cust_mobile;

     private String cust_image;

     //客户和字典的关系是多对一,所以需要在多的一方,放一的一方的对象

     private BaseDict baseDictSource;

     private BaseDict baseDictIndustry;

     private BaseDict baseDictLevel;

    

修改映射:

<property name="cust_image" column="cust_image"/>

修改保存方法:

//设置image的值

              customer.setCust_image(url+"/"+uuidFileName);

 

2.2.4第四步:配置文件上传的拦截器(大小,格式)

 

<!-- 客户管理Action -->

         <action name="customer_*" class="customerAction" method="{1}">

              <result name="saveUI" >/customer/add.jsp</result>

              <result name="findAll">/customer/list.jsp</result>

              <result name="input">/customer/add.jsp</result>

              <!-- 配置文件上传拦截器 -->

              <interceptor-ref name="defaultStack">

                  <param name="fileUpload.maximumSize">2097152</param>

                  <param name="fileUpload.allowedExtensions">.jpg,.bmp,.png,.txt,.gif</param>

              </interceptor-ref>

         </action>

 

 

3. CRM:客户管理-删除客户

3.1修改查询页面

<script>

     function toDelete(id) {

         if (confirm("确定删除该条数据吗?")) {

              location.href = "${pageContext.request.contextPath}/customer_delete.action?cust_id="

                       + id;

         }

     }

</script>

3.2编写Action

//删除客户的方法

     public String delete(){

         customer=customerService.findById(customer.getCust_id());

         //删除图片

         String cust_image=customer.getCust_image();

         if(cust_image!=null&&!cust_image.trim().equals("")){

             File file=new File(cust_image);

             if(file.exists()){

             file.delete();

             }

         }

         //删除客户

         customerService.delete(customer);

         return "deleteSuccess";

}

3.3编写Service

//根据id查询客户

     @Override

     public Customer findById(Long cust_id) {

         return customerDao.findById(cust_id) ;

     }

     //删除客户

     @Override

     public void delete(Customer customer) {

         customerDao.delete(customer);

        

     }



3.4编写Dao

 

 //根据id查询
	@Override
	public Customer findById(Long cust_id) {
		return this.getHibernateTemplate().get(Customer.class,cust_id);
	}

    //删除客户

     @Override

     public void delete(Customer customer) {

         this.getHibernateTemplate().delete(customer);

     }

 

 

 

4. CRM:客户管理-修改客户

4.1修改列表页面

此处使用弹窗作为修改页面:弹窗使用方法:https://blog.csdn.net/qq_23853743/article/details/85072719

弹窗页面:

<!-- 修改窗口 -->

                                 <div id="updateBox" class="update" style="display:none;">

                                  

       

              <form action="${pageContext.request.contextPath }/customer_update.action" method="post" enctype="multipart/form-data" class="jqtransform" >

                 <input type="hidden" name="cust_id" id="cust_id">

                 <input type="hidden" name="cust_image" id="cust_image">

               <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">

                 <tr>

                  <td class="td_right">客户名称:</td>

                  <td class="">

                    <input type="text" name="cust_name" id="cust_name" class="input-text lh30" value="" size="40">

                  </td>

                 

                </tr>

                 <tr >

                  <td class="td_right">信息来源:</td>

                  <td class="">



                    <span class="fl">

                      <div class="select_border">

                        <div class="select_containers ">

                        <select name="baseDictSource.dict_id" id="cust_source" class="select">

                        <option>-----</option>

            

                        </select>

                        </div>

                      </div>

                    </span>

                  </td>

                 </tr>

                <tr >

                  <td class="td_right">所属行业:</td>

                  <td class="">



                    <span class="fl">

                      <div class="select_border">

                        <div class="select_containers ">

                        <select name="baseDictIndustry.dict_id" id="cust_industry" class="select">

                        <option>-----</option>

                        </select>

                        </div>

                      </div>

                    </span>

                  </td>

                 </tr>

                 <tr >

                  <td class="td_right">客户级别:</td>

                  <td class="">



                    <span class="fl">

                      <div class="select_border">

                        <div class="select_containers ">

                        <select name="baseDictLevel.dict_id" id="cust_level" class="select">

                        <option>-----</option>

                        </select>

                        </div>

                      </div>

                    </span>

                  </td>

                 </tr>

                  <tr>

                  <td class="td_right">固定电话:</td>

                  <td class="">

                    <input type="text" name="cust_phone" id="cust_phone" class="input-text lh30" size="40">

                  </td>

                 

                </tr>

                  <tr>

                  <td class="td_right">移动电话:</td>

                  <td class="">

                    <input type="text" name="cust_mobile" id="cust_mobile" class="input-text lh30" size="40">

                  </td>

                 

                </tr>

                 <tr>

                  <td class="td_right">相关文件:</td>

                  <td class=""><input type="file" name="file"  class="input-text lh30" size="10"></td>

                 </tr>

               

                 <tr>

                   <td class="td_right">&nbsp;</td>

                   <td class="">

                    <input id="updateForm" type="submit" name="button" class="btn btn82 btn_save2" value="修改"  >

                    <input type="reset" name="button" class="btn btn82 btn_res" value="重置">

                   </td>

                 </tr>

               </table>

               </form>

               <s:fielderror></s:fielderror>

            </div>

异步提交JS代码:


/*

 *客户查询页面js

 */

//删除弹窗

function toDelete(id) {



     var btnFn = function() {

         location.href = "${pageContext.request.contextPath}/customer_delete.action?cust_id="

                   + id;

         return false;

     };



     easyDialog.open({

         container : {

              header : '确认删除',

              content : '您确定要删除该条数据吗?',

              yesFn : btnFn,

              noFn : true

         }

     });

};



// 修改弹窗

function toUpdate(id) {

     customerInfo(id);

    

     var content = $('#updateBox').html();

    

     var btnFn = function() {

        $("input#updateForm").click();;

         return false;

     };



     easyDialog.open({

         container : {

              header : '修改用户信息',

              content : content,

              yesFn : btnFn,

              noFn : true

         }

     });

     // $('.easyDialog_wrapper').css('width','400px');

     $('.easyDialog_text').css('height', '350px');

    

};

//异步请求加载要修改的客户的信息

function customerInfo(id){

     // 加载客户信息

     $.post("${pageContext.request.contextPath }/customer_edit.action",{"cust_id":id},function(data){

         //遍历JOSN类型的数据

         $.each(data,function(name,value){

             

              $("select#"+name+" option[value='"+value+"']").prop("selected","selected");

              $("input#"+name).val(value);

             

         });

        

     },"json");

}



//页面加载,异步查询字典数据

//页面加载函数就会执行:

$(function(){

     // 加载客户来源

     $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"002"},function(data){

         //遍历JOSN类型的数据

         $(data).each(function(i,n){

              $("select#cust_source").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

         });

     },"json");

    

     // 加载客户所属行业

     $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"001"},function(data){

         //遍历JOSN类型的数据

         $(data).each(function(i,n){

              $("select#cust_industry").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

         });

     },"json");

    

     // 加载客户级别

     $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"006"},function(data){

         //遍历JOSN类型的数据

         $(data).each(function(i,n){

              $("select#cust_level").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

         });

     },"json");

});

4.2编写action

// 用户修改异步查询信息的方法

     public String edit() {

         customer = customerService.findById(customer.getCust_id());

         //把需要传送的数据封装成map集合

         Map map=new TreeMap();

         map.put("cust_id", customer.getCust_id());

         map.put("cust_name", customer.getCust_name());

         map.put("cust_source", customer.getBaseDictSource().getDict_id());

         map.put("cust_industry", customer.getBaseDictIndustry().getDict_id());

         map.put("cust_level", customer.getBaseDictLevel().getDict_id());

         map.put("cust_phone", customer.getCust_phone());

         map.put("cust_mobile", customer.getCust_mobile());

         map.put("cust_image", customer.getCust_image());



         // 转成json

        JSONObject jsonObject = JSONObject.fromObject(map);

        

         //System.out.println(jsonObject);

         // 将JSON数据传到页面

         try {

              ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");

              ServletActionContext.getResponse().getWriter().println(jsonObject.toString());

         } catch (IOException e) {

              e.printStackTrace();

         }

         return NONE;

     }

    

     // 客户修改的方法

     public String update() {

         // 修改图片,获得原来的图片同时,上传新图片

         if (file != null) {

              String cust_image = customer.getCust_image();

              if (cust_image != null && !cust_image.trim().equals("")) {

                   File exitfile = new File(cust_image);

                   if (exitfile.exists()) {

                       exitfile.delete();

                   }

              }



              // 上传图片

              // 设置上传路径

              String directory = "/upload";

              String path = ServletActionContext.getServletContext().getRealPath(directory);



              // System.out.println(file);

              // 为了防止一个目录下存放相同的文件名:使用随机文件名

              String uuidFileName = UploadUtils.getUuidFileName(fileFileName);

              // 为了防止一个目录下存放的文件过多:目录分离

              String realPath = UploadUtils.getPath(uuidFileName);

              // 创建目录

              String url = path + realPath;

              File ml = new File(url);

              if (!ml.exists()) {

                   ml.mkdirs();

              }

              // 文件上传

              File dictFile = new File(url + "/" + uuidFileName);

              try {

                   FileUtils.copyFile(file, dictFile);

              } catch (IOException e) {

                   // TODO Auto-generated catch block

                   e.printStackTrace();

              }

              //重新设置image的值

              customer.setCust_image(url + "/" + uuidFileName);

         }



         customerService.update(customer);

         return "updateSuccess";

}

4.3编写service

//根据id查询客户

     @Override

     public Customer findById(Long cust_id) {

         return customerDao.findById(cust_id) ;

     }

        

     //修改客户业务层方法

     @Override

     public void update(Customer customer) {

         customerDao.update(customer);

}

 

4.4编写Dao

//根据id查询

     @Override

     public Customer findById(Long cust_id) {

         return this.getHibernateTemplate().get(Customer.class,cust_id);

     }

    //删除客户

     @Override

     public void delete(Customer customer) {

         this.getHibernateTemplate().delete(customer);

     }

    //修改客户方法

     @Override

     public void update(Customer customer) {

         this.getHibernateTemplate().update(customer);

}

4.4配置跳转页面

 

<!-- 客户管理Action -->

         <action name="customer_*" class="customerAction" method="{1}">

              <result name="saveUI" >/customer/add.jsp</result>

              <result name="findAll">/customer/list.jsp</result>

              <result name="deleteSuccess" type="redirect">/customer_findAll.action</result>

              <result name="updateSuccess" type="redirect">/customer_findAll.action</result>

              <result name="input">/customer/add.jsp</result>

              <!-- 配置文件上传拦截器 -->

              <interceptor-ref name="defaultStack">

                  <param name="fileUpload.maximumSize">5242880</param>

                  <param name="fileUpload.allowedExtensions">.jpg,.bmp,.png,.txt,.gif</param>

              </interceptor-ref>

     </action>

5. CRM:客户管理-按条件查询客户

在客户列表上显示出相应条件,根据输入条件查询客户。

 


<form name="customerForm"

                   action="${pageContext.request.contextPath }/customer_findAll.action"

                   method="post">



                   <div id="search_bar" class="mt10">

                       <div class="box">

                            <div class="box_border">

                                 <div class="box_top">

                                     <b class="pl15">搜索</b>

                                 </div>

                                 <div class="box_center pt10 pb10">

                                     <table class="form_table" cellspacing="0" cellpadding="0"

                                          border="0">

                                          <tbody>

                                               <tr>

                                                   <td>客户名称:</td>

                                                   <td><input type="text" name="cust_name"

                                                        value="<s:property value="cust_name" />"

                                                        class="input-text lh25" size="10"></td>

                                                   <td>客户来源:</td>

                                                   <td><span class="fl">

                                                             <div class="select_border">

                                                                 <div class="select_containers ">

                                                                      <select id="tjcust_source" name="baseDictSource.dict_id"

                                                                           class="select">

                                                                           <option value="">请选择</option>



                                                                      </select>

                                                                 </div>

                                                             </div>

                                                   </span></td>

                                                   <td>客户行业:</td>

                                                   <td><span class="fl">

                                                             <div class="select_border">

                                                                 <div class="select_containers ">

                                                                      <select id="tjcust_industry"

                                                                           name="baseDictIndustry.dict_id" class="select">

                                                                           <option value="">请选择</option>



                                                                      </select>

                                                                 </div>

                                                             </div>

                                                   </span></td>

                                                   <td>客户级别:</td>

                                                   <td><span class="fl">

                                                             <div class="select_border">

                                                                 <div class="select_containers ">

                                                                      <select id="tjcust_level" name="baseDictLevel.dict_id"

                                                                           class="select">

                                                                           <option value="">请选择</option>



                                                                      </select>

                                                                 </div>

                                                             </div>

                                                   </span></td>





                                                   <td><input type="submit" name="button"

                                                        class="btn btn82 btn_search" value="查询"></td>

                                               </tr>



                                          </tbody>

                                     </table>

                                 </div>



                            </div>

                       </div>

                   </div>



                   <div id="table" class="mt10">

                       <div class="box span10 oh">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0"

                                 class="list_table">

                                 <tr>

                                     <th width="100">客户名称</th>

                                     <th width="100">客户级别</th>

                                     <th width="100">客户来源</th>

                                     <th width="100">客户所属行业</th>

                                      <th width="100">电话</th>

                                     <th width="100">手机</th>

                                     <th width="130">操作</th>

                                 </tr>

                                 <s:iterator value="list">



                                     <tr class="tr">

                                          <td><s:property value="cust_name" /></td>

                                          <td><s:property value="baseDictLevel.dict_item_name" /></td>

                                          <td><s:property value="baseDictSource.dict_item_name" /></td>

                                          <td><s:property value="baseDictIndustry.dict_item_name" /></td>

                                          <td><s:property value="cust_phone" /></td>

                                          <td><s:property value="cust_mobile" /></td>

                                          <td><input type="button" name="button"

                                               class="btn btn82 btn_add" id="modifyBtn"

                                               onclick="toUpdate('<s:property value="cust_id"/>')" value="修改">

                                               <input type="button" name="button" class="btn btn82 btn_del"

                                               onclick="toDelete('<s:property value="cust_id"/>')" value="删除"></td>



                                     </tr>

                                 </s:iterator>



                            </table>

                            <div class="page mt10">



                                 <div class="pagination">

                                     <ul>

                                          <li class="disabled"><span> 共<s:property

                                                        value="totalCount" />条记录, 共 <s:property value="totalPage" />页

                                          </span></li>

                                          <li><span> 每页显示记录数: <select name="pageSize"

                                                   onchange="to_page()">

                                                        <option value="5" <s:if test="pageSize==5">selected</s:if>>5条</option>

                                                        <option value="10" <s:if test="pageSize==10">selected</s:if>>10条</option>

                                                        <option value="20" <s:if test="pageSize==20">selected</s:if>>20条</option>

                                               </select>



                                          </span></li>





                                          <s:if test="page!=1">

                                               <li><a href="javascript:to_page(1)">首页</a></li>

                                               <li><a

                                                   href="javascript:to_page(<s:property value="page-1" />)">上一页</a></li>

                                          </s:if>



                                          <s:iterator var="i" begin="1" end="totalPage">

                                               <s:if test="#i==page">

                                                   <li class="active"><span><s:property value="#i" />

                                                   </span></li>

                                               </s:if>

                                               <s:else>

                                                   <li><a

                                                        href="javascript:to_page(<s:property value="#i" />)"><s:property

                                                                 value="#i" /></a></li>

                                               </s:else>

                                          </s:iterator>



                                          <s:if test="page!=totalPage">

                                               <li><a

                                                   href="javascript:to_page(<s:property value="page+1" />)">下一页</a></li>

                                               <li><a

                                                   href="javascript:to_page(<s:property value="totalPage" />)">末页</a></li>

                                          </s:if>

                                          <li>到第 <input class="input-text lh25" type="text"

                                               id="page" name="page" size="2" height="10px" />页 <input

                                               class="ext_btn" type="button" value="GO" onclick="to_page()" />



                                          </li>

                                     </ul>

                                 </div>

                            </div>

              </form>

 

5.1在列表页面异步加载查询条件的数据

//查询条件异步查询字典数据

     //页面加载函数就会执行:

     $(function() {

         // 加载客户来源

         $

                   .post(

                            "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

                            {

                                 "dict_type_code" : "002"

                            },

                            function(data) {

                                 //遍历JOSN类型的数据

                                 $(data).each(

                                          function(i, n) {

                                               $("#tjcust_source").append(

                                                        "<option value='"+n.dict_id+"'>"

                                                                 + n.dict_item_name

                                                                 + "</option>");

                                          });

                                

                                 //回显选中的数据

                                 $(

                                          "#tjcust_source option[value='${model.baseDictSource.dict_id}']")

                                          .prop("selected", "selected");

                            }, "json");



         // 加载客户所属行业

         $

                   .post(

                            "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

                            {

                                 "dict_type_code" : "001"

                            },

                            function(data) {

                                 //遍历JOSN类型的数据

                                 $(data).each(

                                          function(i, n) {

                                               $("#tjcust_industry").append(

                                                        "<option value='"+n.dict_id+"'>"

                                                                 + n.dict_item_name

                                                                 + "</option>");

                                          });

                                 $(

                                          "#tjcust_industry option[value='${model.baseDictIndustry.dict_id}']")

                                          .prop("selected", "selected");

                            }, "json");



         // 加载客户级别

         $

                  .post(

                            "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

                            {

                                 "dict_type_code" : "006"

                            },

                            function(data) {

                                 //遍历JOSN类型的数据

                                 $(data).each(

                                          function(i, n) {

                                               $("#tjcust_level").append(

                                                        "<option value='"+n.dict_id+"'>"

                                                                 + n.dict_item_name

                                                                 + "</option>");

                                          });

                                 $(

                                          "#tjcust_level option[value='${model.baseDictLevel.dict_id}']")

                                          .prop("selected", "selected");

                            }, "json");

     });

5.2点击查询提交到action

<form name="customerForm"

                   action="${pageContext.request.contextPath }/customer_findAll.action"

                   method="post">

 

5.3编写action

// 查询客户列表方法

     public String findAll() {

         // 接收分页参数

         // 最好使用DetachedCriteria对象(带分页的条件查询)

          DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

         // 设置条件

         if (customer.getCust_name() != null && !customer.getCust_name().trim().equals("")) {

              detachedCriteria.add(Restrictions.like("cust_name", customer.getCust_name() + "%"));

         }

         if (customer.getBaseDictSource() != null) {

              if (customer.getBaseDictSource().getDict_id() != null

                       && !customer.getBaseDictSource().getDict_id().trim().equals("")) {

                   detachedCriteria

                            .add(Restrictions.like("baseDictSource.dict_id", customer.getBaseDictSource().getDict_id()));

              }



         }

         if (customer.getBaseDictIndustry() != null) {

              if (customer.getBaseDictIndustry().getDict_id() != null

                       && !customer.getBaseDictIndustry().getDict_id().trim().equals("")) {

                   detachedCriteria.add(

                            Restrictions.like("baseDictIndustry.dict_id", customer.getBaseDictIndustry().getDict_id()));

              }



         }

         if (customer.getBaseDictLevel() != null) {

              if (customer.getBaseDictLevel().getDict_id() != null

                       && !customer.getBaseDictLevel().getDict_id().trim().equals("")) {

                   detachedCriteria

                            .add(Restrictions.like("baseDictLevel.dict_id", customer.getBaseDictLevel().getDict_id()));

              }



         }



         // 调用业务层查询

         PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

         ActionContext.getContext().getValueStack().push(pageBean);



         return "findAll";

     }

 

这时Service和Dao都没有发生变化,不需要修改。

 

 

 

在做这些的时候遇到了一些bug,有时一个bug能找一两个小时,特别是前端JS交互这方面,许多知识点都忘了,边在网上查资料边编写代码,导致进度有点慢。这应该是因为自己最近没有做过项目的原因吧,学而不思则罔,古人诚不欺我,看来自己以后还需要多加强练习才行,现在后台的框架和前端页面都基本搭建好了,后边进度应该会快一些了。

 

原文地址:https://www.cnblogs.com/yangxianyang/p/13675633.html