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 列, 然后添加条件搜索表单
111
搜索
重置
{{ parseTime(scope.row.createTime) }}
修改
删除
重置
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 = getDicts5、获取字典方法
创建 src / api / system / dict / data.js 文件 ，内容：
import request from '@/utils/request'
// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
return request({
url: '/system/dict/data/dictType/' + dictType,
method: 'get'
})
}
6、全局挂载重置表单方法
在 src / main.js 中，新增重置表单方法
import { addDateRange, parseTime, resetForm } from '@/utils/ruoyi'
Vue.prototype.resetForm = resetForm
7、重置表单方法
在 src / utils / ruoyi.js 文件中，新增重置表单方法：
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields()
}
}8、Controller层代码
package com.ruoyi.project.system.controller;
/**
* 数据字典信息
*
* @author ruoyi
*/
@RestController
@RequestMapping("/system/dict/data")
@CrossOrigin
public class SysDictDataController extends BaseController {
@Resource
private ISysDictDataService dictDataService;
/**
* 根据字典类型查询字典数据信息
*/
@GetMapping(value = "/dictType/{dictType}")
public AjaxResult dictType(@PathVariable String dictType)
{
return AjaxResult.success(dictDataService.selectDictDataByType(dictType));
}
}
9、Service接口层
package com.ruoyi.project.system.service;
/**
* 字典 业务层
*
* @author ruoyi
*/
public interface ISysDictDataService {
/**
* 根据字典类型查询字典数据
*
* @param dictType 字典类型
* @return 字典数据集合信息
*/
public List selectDictDataByType(String dictType);
}
10、Service接口实现类层
package com.ruoyi.project.system.service.impl;
/**
* 字典 业务层处理
*
* @author ruoyi
*/
@Service
public class SysDictDataServiceImpl implements ISysDictDataService {
@Resource
private SysDictDataMapper dictDataMapper;
/**
* 根据字典类型查询字典数据
*
* @param dictType 字典类型
* @return 字典数据集合信息
*/
@Override
public List selectDictDataByType(String dictType) {
return dictDataMapper.selectDictDataByType(dictType);
}
}
11、Mapper接口
package com.ruoyi.project.system.mapper;
/**
* 字典表 数据层
*
* @author ruoyi
*/
public interface SysDictDataMapper {
/**
* 根据字典类型查询字典数据
*
* @param dictType 字典类型
* @return 字典数据集合信息
*/
public List selectDictDataByType(String dictType);
}
12、Model实体类
package com.ruoyi.project.system.domain;
/**
* 字典数据表 sys_dict_data
*
* @author ruoyi
*/
public class SysDictData extends BaseEntity
{
private static final long serialVersionUID = 1L;
/** 字典编码 */
private Long dictCode;
/** 字典排序 */
private Long dictSort;
/** 字典标签 */
private String dictLabel;
/** 字典键值 */
private String dictValue;
/** 字典类型 */
private String dictType;
/** 样式属性（其他样式扩展） */
private String cssClass;
/** 表格字典样式 */
private String listClass;
/** 是否默认（Y是 N否） */
private String isDefault;
/** 状态（0正常 1停用） */
private String status;
public Long getDictCode()
{
return dictCode;
}
public void setDictCode(Long dictCode)
{
this.dictCode = dictCode;
}
public Long getDictSort()
{
return dictSort;
}
public void setDictSort(Long dictSort)
{
this.dictSort = dictSort;
}
public String getDictLabel()
{
return dictLabel;
}
public void setDictLabel(String dictLabel)
{
this.dictLabel = dictLabel;
}
public String getDictValue()
{
return dictValue;
}
public void setDictValue(String dictValue)
{
this.dictValue = dictValue;
}
public String getDictType()
{
return dictType;
}
public void setDictType(String dictType)
{
this.dictType = dictType;
}
public String getCssClass()
{
return cssClass;
}
public void setCssClass(String cssClass)
{
this.cssClass = cssClass;
}
public String getListClass()
{
return listClass;
}
public void setListClass(String listClass)
{
this.listClass = listClass;
}
public boolean getDefault()
{
return UserConstants.YES.equals(this.isDefault) ? true : false;
}
public String getIsDefault()
{
return isDefault;
}
public void setIsDefault(String isDefault)
{
this.isDefault = isDefault;
}
public String getStatus()
{
return status;
}
public void setStatus(String status)
{
this.status = status;
}
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
.append("dictCode", getDictCode())
.append("dictSort", getDictSort())
.append("dictLabel", getDictLabel())
.append("dictValue", getDictValue())
.append("dictType", getDictType())
.append("cssClass", getCssClass())
.append("listClass", getListClass())
.append("isDefault", getIsDefault())
.append("status", getStatus())
.append("createBy", getCreateBy())
.append("createTime", getCreateTime())
.append("updateBy", getUpdateBy())
.append("updateTime", getUpdateTime())
.append("remark", getRemark())
.toString();
}
}
13、常量类
package com.ruoyi.common.constant;
public class UserConstants {
/** 是否为系统默认（是） */
public static final String YES = "Y";
}
14、映射描述文件
select dict_code, dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark
from sys_dict_data