学习记录(day16_2-element-ui条件查询前、后端效果实现，在分页查询的基础上修改)...

[TOC]

一、条件查询后端(在分页查询基础上修改)

OrderServiceImpl

/**
 * @author 庭前云落
 * @date 2019/11/25 16:33
 * @description
 */
@Service
@Transactional
public class OrderServiceImpl implements OrderService {
    @Resource
    private OrderMapper orderMapper;

    @Override
    public PageInfo<Order> findAll(Integer uid, OrderVo orderVo) {
        //1、设置分页
        PageHelper.startPage(orderVo.getPageNum(), orderVo.getPageSize());
        //处理数据
        if (orderVo.getBeginTime() != null && !"".equals(orderVo.getBeginTime())) {
            orderVo.setBeginTime(orderVo.getStatus() + "00:00:00");
        }
        if (orderVo.getEndTime() != null && !"".equals(orderVo.getEndTime())) {
            orderVo.setEndTime(orderVo.getEndTime() + "23:59:59");
        }
        if (orderVo.getTotalPrice() != null && !"".equals(orderVo.getTotalPrice())) {
            orderVo.setTotalPrice("%" + orderVo.getTotalPrice() + "%");
        }
        //2、查询所有
        List<Order> olist = orderMapper.findAll(uid, orderVo);
        //3、封装数据
        return new PageInfo<>(olist);
    }
}

OrderMapper

/**
 * @author 庭前云落
 * @date 2019/11/25 16:20
 * @description
 */
public interface OrderMapper extends Mapper<Order> {

    @Select("<script>" +
            "select * from t_order where uid = #{uid}" +
            "<if test=\"orderVo.status !=null and orderVo.status!=''\"> and status = #{orderVo.status} </if>"+
            "<if test=\"orderVo.beginTime!=null and orderVo.beginTime!=''\"> and create_time >= #{orderVo.beginTime} </if>" +
            "<if test=\"orderVo.endTime!=null and orderVo.endTime!=''\"> <![CDATA[and create_time <= #{orderVo.endTime}]]> </if>" +
            "<if test=\"orderVo.totalPrice!=null and orderVo.totalPrice!=''\">and total_price like #{orderVo.totalPrice}</if>"+
            "</script>")
    @Results({
            @Result(property = "oid",column = "oid"),
            @Result(property = "createTime",column = "create_time"),
            @Result(property = "totalPrice",column = "total_price"),
            @Result(property = "uid",column = "uid"),
    })
    List<Order> findAll(@Param("uid") Integer uid, @Param("orderVo")OrderVo orderVo);
}

用between-and判断查询时间

//"<if test=\"orderVo.beginTime!=null and orderVo.beginTime!='' and orderVo.endTime!=null and orderVo.endTime!='' \"> and create_time between #{orderVo.beginTime} and #{orderVo.endTime} </if>"+

二、条件查询前端(在分页查询基础上新增一个条件查询的表单)

Vue前端

   <!-- 查询条件表单 -->
    <el-form ref="form" :model="params" label-width="80px" size="mini" style="width:600px">
      <el-form-item label="状态">
        <el-radio-group v-model="params.status">
          <el-radio label>无</el-radio>
          <el-radio label="0">未付款</el-radio>
          <el-radio label="1">已付款</el-radio>
          <el-radio label="2">已发货</el-radio>
          <el-radio label="3">已收货</el-radio>
          <el-radio label="4">结束</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"  v-model="params.beginTime" style="width: 100%;">
        </el-date-picker>
        </el-col>
      <el-col style="text-align:center" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="params.endTime" style="width: 100%;">
          </el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="总金额">
        <el-input v-model="params.totalPrice"></el-input>
      </el-form-item>
      <el-form-item label="查询">
        <el-button type="primary" @click="findAll">查询</el-button>
      </el-form-item>
    </el-form>