带下拉框，级联的多条件查询

今天写了一个多条件查询，查询条件之间还有级联关系的小功能。我的前端水平实在有限，自我感觉代码写的实在不成样子，也就将将能够实现功能，样式更是毫无可言。

先看我实现的页面：

学校年级班级级联，主要是靠@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) {
//需要给page和limit赋值，不然这两个值还是没走查询时候存得那个值
        this.userquery.page = 1;
        this.userquery.limit = 10;
        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还有什么太杂了吧。谁让写这个页面的人的水平都不一样，用的技术也都不一样呢。