+ Advanced Search page

+ Advanced Search page

2.1 Background

1.BaseQuery

public class BaseQuery { 
    // Current Page: Default 1L 
    Private Long Page = 1L; 
    the number of page // Default: 10L 
    Private Long pageSize = 5L; 
    // public field, meaning: Keyword 
    Private String the KEYWORDS; 
    // increase a gerStart (), used to set the first paging data this page is how many 
    public Long getStart () { 
        return ( the this. page - . 1) * the this. the pageSize; 
   } 
   ..... 
}    

2.IBaseService<T>

    // advanced query and paging 
    PageList Query ( BaseQuery BaseQuery);

3.BaseServiceImpl<T>

    // paging query: the total number of the current page data
    @Override
    public PageList query(BaseQuery baseQuery) {
        // current page data rows
        List<T> rows = baseMapper.queryRows(baseQuery);
        System.out.println("-----BaseServiceImpl层-------");
        // check out the total number of
        Long total = baseMapper.queryTotal(baseQuery);
        return new PageList(total,rows);
    }

4. basic_util ----> PageList<T>

/**
 * Page Tools
 *  total
 *  rows
 */
public class PageList<T> {

    private Long total; // total number of
    private List <T> rows = new ArrayList (); // this page query data

    public PageList(Long total, List<T> rows) {
        this.total = total;
        this.rows = rows;
    }

5.MountingsMapper.xml

<mapper namespace="cn.itsource.crm.mapper.MountingsMapper">
    <select id="findAll" resultType="Mountings">
        select * from mountings
    </select>

    <sql id="wheresql">
        <if test="keyWords != null and keyWords != ''">
            <where>
                and partsname like concat('%',#{keyWords},'%')
            </where>
        </if>
    </sql>
    <-! Advanced queries, the total number of ->
    <select id="queryTotal" resultType="long" parameterType="MountingsQuery">
        select count(*) from mountings
        <include refid="wheresql"></include>
    </select>
    <! - Current Page Total data ->
    <select id="queryRows" parameterType="MountingsQuery" resultType="Mountings">
        select * from mountings
        <include refid="wheresql"></include>
        limit #{start},#{pageSize}
    </select>

    <insert id="save" parameterType="Mountings">
        insert into mountings(partsname,price,num,warnnum,context,createtime)
        values(#{partsname},#{price},#{num},#{warnnum},#{context},#{createtime})
    </insert>
    <delete id="delete" parameterType="long">
        delete from mountings where id=#{id}
    </delete>
    <update id="update" parameterType="Mountings">
        update mountings set
        partsname=#{partsname},
        price=#{price},
        a = # {a},
        warnnum = # {warnnum},
        context=#{context},
        createtime=#{createtime}
         where id=#{id}
    </update>
    <select id="loadById" parameterType="long" resultType="Mountings">
        select * from mountings where id=#{id}
    </select>
</mapper>

6.MountingsController

    //Advanced Search
    @RequestMapping(value = "/query",method = RequestMethod.PATCH)
    @ResponseBody
    public PageList query(@RequestBody MountingsQuery mountingsQuery){
        System.out.println ( "Go to Advanced query");
        System.out.println(mountingsQuery);
        PageList pageList = mountingsService.query(mountingsQuery);
        for (Object row : pageList.getRows()) {
            System.out.println(row);
        }
        return pageList;
    }

2.2 front-end

2.2.1 Conditions inquiry

1. Prepare button: binding events

				<el-form-item>
					<el-button type="primary" v-on:click="getMountings">查询</el-button>
				</el-form-item>

2. Background to send a request to obtain the total number of res inside the returned data is always current page, refresh the page

            // Get a list of users
            getMountings() {
                let para = {
                    // Get the current page
                    page: this.page,
                    keyWords: this.filters.keyWords
                };
                // refresh effect
                this.listLoading = true;
                //NProgress.start();
                //getUserListPage(para).then((res) => {
                // send request axios
                this.$http.patch('/mountings/query', para).then(res => {
                    // total number of
                    this.total = res.data.total;
                    // The current total data page
                    this.mountings = res.data.rows;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },

2.2.2 Paging

1. Prepare tab strip

		<! - paging, Toolbars ->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" >
			</el-pagination>
		</el-col>

2. Call the paging method

            handleCurrentChange(val) {
                // val: Incoming want page information
                this.page = val;
                this.getMountings();
            },