學習記錄(day16_2-element-ui條件查詢前、後端效果實現，在分頁查詢的基礎上修改)

[TOC]

1、條件查詢後端(在分頁查詢基礎上修改)

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) {
        //一、設置分頁
        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() + "%");
        }
        //二、查詢全部
        List<Order> olist = orderMapper.findAll(uid, orderVo);
        //三、封裝數據
        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);
}

2、條件查詢前端(在分頁查詢基礎上新增一個條件查詢的表單)

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>