59-尚硅谷-硅谷通用权限项目-用户管理模块-用户列表前端（下）

下面呢，我们开始编写列表的方法，跟之前角色类似，那下面我来写一下，首先第一个在方法中呢，咱们加上一个默认值，如果说你不传递页数，默认就差第一页，然后下面最后赋值这些点配置，等于配置写完之后，下面我们做一个处理，大家看啊，刚才咱说的就是这个地方，我们来看到在这里就是IUI中这个这个组件，这个组件呢有个特点，各位看这个地方。它有什么特点呢？它表示啊查这么一个就是范围中的值，开始和结束时间这一组件就是你的开始和结束必须要进行选择，当然可以用别的组件，咱就以它为例，所以下面我们做个判断，如果两个里边都有值，咱们进行赋值，没有值的话，那咱就不进行这个查询，下面我来写一下，就是日期时间的这么一个判断。写到这里，咱们加上一个if。

然后if里边呢，做个判断，这次点create times，如果说它不等于空，并且它的两个里边就是开始结束时间都有值，这次点可time点上LS。等于二表示咱们开始结束，里边都有值，都有值之后下面我们做一个负值，这次点设置OBD。里边有一个创建的开始和结束时间，这两个我们从后端这里边名字中咱们复制一下，我们找一下啊。找到这个。大家看啊，开始是这个名字。然后等于这点create。下标我们加上零，然后第二个跟它类似，第二个呢，我们直接复制一下。

用它咱们快速改一下。这个我们叫and。然后它的下标是一，所以这时候我们写到条件部分，然后下面我们调用接口进行实现，用API中咱们刚才这个方法。我们找到get配置的。在方法中呢，我们传递三个参数，第一个当前页，第二个每页进入数，第三个条件对象，Search o BG。然后加上点赞。Response箭头函数，最终得到我们想要这个结果。那这个我从这里课件中复制一下，一个是集合，一个是总计数数。所以大家看啊，现在咱就把这个列表方法我们就完成了。

完成之后我们看一下页面部分，跟咱之前写的一样，这是分页条的部分，然后上面是条件查询部分，所以现在这功能我们就完成，完成之后最后我们通过页面来做个测试，看一下最终的效果是怎么样的，咱们来最终试一下。首先大家看啊，这个是不是在转呀，那咱们找到前端中，咱们改个值，这个值我就直接改成false了，然后改成之后我们再来看一下，大家看现在数据是不是就完成显示，这就是一个条件分析查询，咱为了看到明确，我把这个改一下，让它每页显示三条记录。然后咱们再来看。然后大家看啊，目前分页是不是能看到数据都有，然后下面咱们是个条件查询，首先是一个时间，这个时间呢，咱可以选这个，呃，但这东西不是特别好用，咱也可以自己手动改一下，两值都需要有，那比如现在我查询9月14号到10月13号这个数据点搜索，应该就是这条数据现在完成，呃，这重置还没有写，咱一会儿实现，那比如说我再查一个啊关键字根据这些可以查询，那我们就查一个姓张的这个人的数据点搜索。

各位看到张三丰张翠山是不是都查到，然后这些功能后面我们会实现，所以目前用户的条件分页查询我们就实现出来了，实现之后这里边有一个重置，这重置咱直接复制过来，就是把它的值给它清空，然后刷新页面得到你的所有数据。那把重置方法我写到这里。然后咱们再试一下啊，就是把你的条件对象清空，时间清空，然后包括里边刷新页面。

最终我们做一个测试，我先查询姓张的数据，是不是查到两条数据，然后我点重置，各位看到是不是查询全部，以上就是用户的列表功能的最终实现。