今天写了一个多条件查询,查询条件之间还有级联关系的小功能。我的前端水平实在有限,自我感觉代码写的实在不成样子,也就将将能够实现功能,样式更是毫无可言。
先看我实现的页面:
学校年级班级级联,主要是靠@change,下拉选靠遍历集合,把查询条件统统放到一个对象里,点击搜索,把参数传到后台。这个页面是有分页的查询。
页面代码:
第一部分:
<TabPane icon="logo-twitter" label="客户端用户" name="forward">
<!--条件筛选-->
<div>
选择学校:
<select name="school" width='300px' v-model="condition.school"
@change="selectGradeAndEclass(condition.school)">
<option v-for="item in condition.schoolList" :value="item.id">{{ item.name }}</option>
</select>
选择年级:
<select name="grade" width='300px' v-model="condition.grade"
@change="selectEclass(condition.school,condition.grade)">
<option v-for="item in condition.gradeList" :value="item.id">{{ item.name }}</option>
</select>
选择班级:
<select name="eclass" width='300px' v-model="condition.eclass">
<option v-for="item in condition.eclassList" :value="item.id">{{ item.name }}</option>
</select>
选择角色:
<select name="eclass" width='300px' v-model="condition.role">
<option v-for="item in condition.roleList" :value="item.id">{{ item.name }}</option>
</select>
姓名:
<input type="text" v-model="condition.name" placeholder="请输入姓名">
<button @click="conditonSearch(condition)">搜索</button>
</div>
<el-table :data="userList" border size="mini" style="width: 100%">
<el-table-column label="用户姓名" width="150" prop="username"></el-table-column>
<el-table-column label="手机号" width="150" prop="phone"></el-table-column>
<el-table-column label="角色名称" align="center" prop="role.name" width="300">
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<button v-if="scope.row.role.id ==6 || scope.row.role.id == 7 || scope.row.role.id == 8"
style="margin-left: 10px"
class="layui-btn layui-btn-normal layui-btn-xs" @click="editUserSave(scope.row)">编辑
</button>
</template>
</el-table-column>
</el-table>
<Row class="margin-top-10 evaluate-table-con1" style="margin-top: 10px;" v-if="countUser>0">
<Page :total="countUser" transfer show-sizer @on-change="pageChangeUser"
@on-page-size-change="sizeChangeUser"
show-total/>
</Row>
</TabPane>
第二部分:
export default {
name: "manager",
data() {
return {
condition: {//筛选条件
school: null,
grade: null,
eclass: null,
role: null,
name: null,
schoolList: [],
gradeList: [],
eclassList: [],
roleList: []
},
第三部分:
methods: {
//条件查询
conditonSearch(conditon) {
this.getDataUser();
},
getDataUser() { // 获取管理端用户
let that = this;
var loading = layer.msg('正在加载,请稍后...', {icon: 16, time: false, shade: 0.1});
if (that.condition != null) {
that.userquery['school.id'] = that.condition.school,
that.userquery['grade.id'] = that.condition.grade,
that.userquery['eclass.id'] = that.condition.eclass,
that.userquery['role.id'] = that.condition.role,
that.userquery['username'] = that.condition.name
}
manager.user.list(that.userquery, res => {
appUtils.hideLoading(this)
if (res.state) {
that.userList = res.data;
that.countUser = res.count;
that.condition.school = null;
that.condition.grade = null;
that.condition.eclass = null;
that.condition.role = null;
that.condition.name = null;
} else {
layer.msg(res.msg, {icon: 2})
}
layer.close(loading)
})
},
// 当前页数
pageChangeUser(val) {
this.userquery.page = val
this.getDataUser()
},
// 每页显示条数
sizeChangeUser(val) {
this.userquery.limit = val
this.userquery.page = 1
this.getDataUser()
},
},
mounted() {
this.getData();
this.getRole();
this.getSchool();
this.getEclass();
this.getDataUser()
}
后台代码:
@ApiOperation("客户端用户分页查询")
@RequestMapping(value = "user-list", method = RequestMethod.POST)
@ValidateGroup(fileds = {
@ValidateFiled(index = 0, notNull = true, filedName = "page", msg = "缺少page参数!"),
@ValidateFiled(index = 0, notNull = true, filedName = "limit", msg = "缺少limit参数!")
})
@ApiImplicitParams({
@ApiImplicitParam(name = "page", value = "当前页", defaultValue = "1", dataType = "Integer", paramType = "query", required = true),
@ApiImplicitParam(name = "limit", value = "每页条数", defaultValue = "10", dataType = "Integer", paramType = "query", required = true)
})
@Permission("user:user:view")
public String userList(User model, HttpServletRequest request, HttpServletResponse response) {
//用对象接,前台那样传的数据可以直接给属性附上值
Manager m = SessionUtils.getManagerSession(request);
PageBean<User> pageBean = new PageBean<User>(model.getPage(), model.getLimit());
model.setPageBean(pageBean);
model = service.findByPage(model);
pageBean = model.getPageBean();
return new BackSuccess(pageBean.getData()).put("count", pageBean.getTotalCount());
}
SQL:
<!--分页查询-->
<select id="findByPage" resultMap="Entity">
SELECT
*
<include refid="TableName"/>
<include refid="Joins"/>
WHERE a.del_flag = #{DEL_FLAG_NORMAL}
<if test="school!=null and school.id!=null">
AND d.id = #{school.id}
</if>
<if test="grade!=null and grade.id!=null">
AND (a.grade_id = #{grade.id} OR i.id = #{grade.id})
</if>
<if test="eclass!=null and eclass.id!=null">
AND k.id = #{eclass.id}
</if>
<if test="username!=null and username!=''">
AND a.username LIKE concat('%',#{ username },'%')
</if>
<if test="role!=null and role.id!=null">
AND a.role_id =#{role.id}
</if>
GROUP BY a.id
<include refid="sql_limit_condition"/>
) AS a
<include refid="Joins"/>
</select>
<!--分页条数-->
<select id="findCount" resultType="java.lang.Integer">
SELECT COUNT(1) from
<include refid="TableName"/>
<include refid="Joins"/>
WHERE a.del_flag = #{DEL_FLAG_NORMAL}
<if test="school!=null and school.id!=null">
AND d.id = #{school.id}
</if>
<if test="grade!=null and grade.id!=null">
AND (a.grade_id = #{grade.id} OR i.id = #{grade.id})
</if>
<if test="eclass!=null and eclass.id!=null">
AND k.id = #{eclass.id}
</if>
<if test="username!=null and username!=''">
AND a.username LIKE concat('%',#{ username },'%')
</if>
<if test="role!=null and role.id!=null">
AND a.role_id =#{role.id}
</if>
GROUP BY a.id
) AS a
</select>
<sql id="sql_limit_condition">
LIMIT #{pageBean.paged},#{pageBean.pageSize}
</sql>
我的大体认知就是先通过select(下拉选)也好,input(文本输入框)也好把有用的数据 (也就是查询条件的值)拿到手,在统一传到后台去,还有重要的一点就是这个SQL是支持多条件查询的(用if加判断)。
写代码之前网上搜罗,发现一博客。
https://blog.csdn.net/Zhooson/article/details/81003018
最后啰嗦一句,我的代码之所以看着很乱,可能这个页面用的vue,饿了么,js,jquery还有什么太杂了吧。谁让写这个页面的人的水平都不一样,用的技术也都不一样呢。