Vue前端项目-用户管理-条件搜索界面

1、用户管理页面

2、导入Element-UI相关组件

3、添加全局样式

4、全局挂载获取字典的方法

5、获取字典方法

6、全局挂载重置表单方法

7、重置表单方法

8、Controller层代码

9、Service接口层

10、Service接口实现类层

11、Mapper接口

12、Model实体类

13、常量类

14、映射描述文件

实现效果图：

1、用户管理页面

在 src / views / system / user / index.vue 中,将布局分成 2 列, 然后添加条件搜索表单

<template><div class="app-container"><el-row :gutter="20"><el-col :span="4" :xs="24">111</el-col><el-col :span="20" :xs="24"><el-form :model="queryParams" label-width="68px" ref="queryForm" :inline="true"><el-form-item label="用户名称" prop="userName"><el-input v-model="queryParams.userName" placeholder="请输入用户名称"clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="手机号码" prop="phonenumber" ><el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码"clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small" style="width: 240px"><el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/></el-select></el-form-item><el-form-item label="创建时间"><el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button></el-form-item></el-form><!-- 用户管理列表 --><el-table :data="userList"><el-table-columntype="selection"width="40"align="center"/><el-table-columnlabel="用户编号"align="center"prop="userId"/><el-table-columnlabel="用户名称"align="center"prop="userName"/><el-table-columnlabel="用户昵称"align="center"prop="nickName"/><el-table-columnlabel="部门"align="center"prop="dept.deptName"/><el-table-columnlabel="手机号码"align="center"prop="phonenumber"width="120"/><el-table-columnlabel="状态"align="center"><!-- 通过 slot-scope="scope" 接收数据 --><template slot-scope="scope"><!-- scope.row 接收这一行数据 active-value: switch 打开时的值, inactive-value: switch 关闭时的值 --><el-switchv-model="scope.row.status"active-value="0"inactive-value="1"></el-switch></template></el-table-column><el-table-columnlabel="创建时间"align="center"prop="createTime"width="160"><template slot-scope="scope"><span>{{ parseTime(scope.row.createTime) }}</span></template></el-table-column><el-table-columnlabel="操作"align="center"width="180"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)">修改</el-button><el-buttonv-if="scope.row.userId !== 1"size="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)">删除</el-button><el-buttonsize="mini"type="text"icon="el-icon-key"@click="handleResetPwd(scope.row)">重置</el-button></template></el-table-column></el-table><!-- 分页组件 --><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/></el-col></el-row></div>
</template><script type="text/ecmascript-6">
import { listUser } from '@/api/system/user'
export default {name: '',data() {return {// 用户表格数据userList: null,// 总条数total: 0,// 查询参数queryParams: {pageNum: 1,pageSize: 10,userName: undefined,phonenumber: undefined,status: undefined,deptId: undefined},// 日期范围dateRange: [],// 状态数据字典statusOptions: []}},components: {},methods: {/** 查询用户列表 */getList() {// addDateRange 方法在 main.js中全局挂载listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.userList = response.rowsthis.total = response.total// this.loading = false;})},/** 搜索按钮操作 */handleQuery() {this.queryParams.page = 1this.getList()},/** 重置按钮操作 */resetQuery() {this.dateRange = []this.resetForm('queryForm')this.handleQuery()}},created() {this.getList()this.getDicts('sys_normal_disable').then(response => {this.statusOptions = response.data})}
}
</script><style lang="scss" scoped>
</style>

2、导入Element-UI相关组件

在 src / plugins / element.js 中添加相关组件

import { DatePicker, Select, Option, Row, Col } from 'element-ui'Vue.use(DatePicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Row)
Vue.use(Col)

3、添加全局样式

在 src / assets / styles / index.scss 中, 新增全局样式

label {font-weight: 700;
}
//main-container全局样式
.app-container {padding: 20px;
}

4、全局挂载获取字典的方法

在 src / veiws / system / user / index.vue 中的created方法调用了 this.getDicts('sys_normal_disable') 来获取 用户状态数据(下拉框)

因此需要在 main.js 中全局挂载这个方法才能使用.

在 src / main.js 中

import { getDicts } from '@/api/system/dict/data'Vue.prototype.getDicts = getDicts