1、代码生成操作
1、首先安装好本地若以管理系统的前后端环境
2、进入系统工具的代码生成模板
3、点击导入数据库中的想生成代码的表
4、勾选点击生成按钮会生成一个包含前后端的zip文件
5、如图：
2、后端代码
Controller层
package com.ruoyi.system.controller;
import java.util.List;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ruoyi.common.log.annotation.Log;
import com.ruoyi.common.log.enums.BusinessType;
import com.ruoyi.common.security.annotation.RequiresPermissions;
import com.ruoyi.system.domain.SysUser;
import com.ruoyi.system.service.ISysUserService;
import com.ruoyi.common.core.web.controller.BaseController;
import com.ruoyi.common.core.web.domain.AjaxResult;
import com.ruoyi.common.core.utils.poi.ExcelUtil;
import com.ruoyi.common.core.web.page.TableDataInfo;
/**
* 用户信息Controller
*
* @author ruoyi
* @date 2022-12-07
*/
@RestController
@RequestMapping("/user")
public class SysUserController extends BaseController
{
@Autowired
private ISysUserService sysUserService;
/**
* 查询用户信息列表
*/
@RequiresPermissions("system:user:list")
@GetMapping("/list")
public TableDataInfo list(SysUser sysUser)
{
startPage();
List<SysUser> list = sysUserService.selectSysUserList(sysUser);
return getDataTable(list);
}
/**
* 导出用户信息列表
*/
@RequiresPermissions("system:user:export")
@Log(title = "用户信息", businessType = BusinessType.EXPORT)
@PostMapping("/export")
public void export(HttpServletResponse response, SysUser sysUser)
{
List<SysUser> list = sysUserService.selectSysUserList(sysUser);
ExcelUtil<SysUser> util = new ExcelUtil<SysUser>(SysUser.class);
util.exportExcel(response, list, "用户信息数据");
}
/**
* 获取用户信息详细信息
*/
@RequiresPermissions("system:user:query")
@GetMapping(value = "/{userId}")
public AjaxResult getInfo(@PathVariable("userId") Long userId)
{
return AjaxResult.success(sysUserService.selectSysUserByUserId(userId));
}
/**
* 新增用户信息
*/
@RequiresPermissions("system:user:add")
@Log(title = "用户信息", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody SysUser sysUser)
{
return toAjax(sysUserService.insertSysUser(sysUser));
}
/**
* 修改用户信息
*/
@RequiresPermissions("system:user:edit")
@Log(title = "用户信息", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody SysUser sysUser)
{
return toAjax(sysUserService.updateSysUser(sysUser));
}
/**
* 删除用户信息
*/
@RequiresPermissions("system:user:remove")
@Log(title = "用户信息", businessType = BusinessType.DELETE)
@DeleteMapping("/{userIds}")
public AjaxResult remove(@PathVariable Long[] userIds)
{
return toAjax(sysUserService.deleteSysUserByUserIds(userIds));
}
}Service层
package com.ruoyi.system.service;
import java.util.List;
import com.ruoyi.system.domain.SysUser;
/**
* 用户信息Service接口
*
* @author ruoyi
* @date 2022-12-07
*/
public interface ISysUserService
{
/**
* 查询用户信息
*
* @param userId 用户信息主键
* @return 用户信息
*/
public SysUser selectSysUserByUserId(Long userId);
/**
* 查询用户信息列表
*
* @param sysUser 用户信息
* @return 用户信息集合
*/
public List<SysUser> selectSysUserList(SysUser sysUser);
/**
* 新增用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
public int insertSysUser(SysUser sysUser);
/**
* 修改用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
public int updateSysUser(SysUser sysUser);
/**
* 批量删除用户信息
*
* @param userIds 需要删除的用户信息主键集合
* @return 结果
*/
public int deleteSysUserByUserIds(Long[] userIds);
/**
* 删除用户信息信息
*
* @param userId 用户信息主键
* @return 结果
*/
public int deleteSysUserByUserId(Long userId);
}impl层
package com.ruoyi.system.service.impl;
import java.util.List;
import com.ruoyi.common.core.utils.DateUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ruoyi.system.mapper.SysUserMapper;
import com.ruoyi.system.domain.SysUser;
import com.ruoyi.system.service.ISysUserService;
/**
* 用户信息Service业务层处理
*
* @author ruoyi
* @date 2022-12-07
*/
@Service
public class SysUserServiceImpl implements ISysUserService
{
@Autowired
private SysUserMapper sysUserMapper;
/**
* 查询用户信息
*
* @param userId 用户信息主键
* @return 用户信息
*/
@Override
public SysUser selectSysUserByUserId(Long userId)
{
return sysUserMapper.selectSysUserByUserId(userId);
}
/**
* 查询用户信息列表
*
* @param sysUser 用户信息
* @return 用户信息
*/
@Override
public List<SysUser> selectSysUserList(SysUser sysUser)
{
return sysUserMapper.selectSysUserList(sysUser);
}
/**
* 新增用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
@Override
public int insertSysUser(SysUser sysUser)
{
sysUser.setCreateTime(DateUtils.getNowDate());
return sysUserMapper.insertSysUser(sysUser);
}
/**
* 修改用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
@Override
public int updateSysUser(SysUser sysUser)
{
sysUser.setUpdateTime(DateUtils.getNowDate());
return sysUserMapper.updateSysUser(sysUser);
}
/**
* 批量删除用户信息
*
* @param userIds 需要删除的用户信息主键
* @return 结果
*/
@Override
public int deleteSysUserByUserIds(Long[] userIds)
{
return sysUserMapper.deleteSysUserByUserIds(userIds);
}
/**
* 删除用户信息信息
*
* @param userId 用户信息主键
* @return 结果
*/
@Override
public int deleteSysUserByUserId(Long userId)
{
return sysUserMapper.deleteSysUserByUserId(userId);
}
}mapper层
package com.ruoyi.system.mapper;
import java.util.List;
import com.ruoyi.system.domain.SysUser;
/**
* 用户信息Mapper接口
*
* @author ruoyi
* @date 2022-12-07
*/
public interface SysUserMapper
{
/**
* 查询用户信息
*
* @param userId 用户信息主键
* @return 用户信息
*/
public SysUser selectSysUserByUserId(Long userId);
/**
* 查询用户信息列表
*
* @param sysUser 用户信息
* @return 用户信息集合
*/
public List<SysUser> selectSysUserList(SysUser sysUser);
/**
* 新增用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
public int insertSysUser(SysUser sysUser);
/**
* 修改用户信息
*
* @param sysUser 用户信息
* @return 结果
*/
public int updateSysUser(SysUser sysUser);
/**
* 删除用户信息
*
* @param userId 用户信息主键
* @return 结果
*/
public int deleteSysUserByUserId(Long userId);
/**
* 批量删除用户信息
*
* @param userIds 需要删除的数据主键集合
* @return 结果
*/
public int deleteSysUserByUserIds(Long[] userIds);
}domain层
package com.ruoyi.system.domain;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.ruoyi.common.core.annotation.Excel;
import com.ruoyi.common.core.web.domain.BaseEntity;
/**
* 用户信息对象 sys_user
*
* @author ruoyi
* @date 2022-12-07
*/
public class SysUser extends BaseEntity
{
private static final long serialVersionUID = 1L;
/** 用户ID */
private Long userId;
/** 部门ID */
@Excel(name = "部门ID")
private Long deptId;
/** 用户账号 */
@Excel(name = "用户账号")
private String userName;
/** 用户昵称 */
@Excel(name = "用户昵称")
private String nickName;
/** 用户类型（00系统用户） */
@Excel(name = "用户类型", readConverterExp = "0=0系统用户")
private String userType;
/** 用户邮箱 */
@Excel(name = "用户邮箱")
private String email;
/** 手机号码 */
@Excel(name = "手机号码")
private String phonenumber;
/** 用户性别（0男 1女 2未知） */
@Excel(name = "用户性别", readConverterExp = "0=男,1=女,2=未知")
private String sex;
/** 头像地址 */
@Excel(name = "头像地址")
private String avatar;
/** 密码 */
@Excel(name = "密码")
private String password;
/** 帐号状态（0正常 1停用） */
@Excel(name = "帐号状态", readConverterExp = "0=正常,1=停用")
private String status;
/** 删除标志（0代表存在 2代表删除） */
private String delFlag;
/** 最后登录IP */
@Excel(name = "最后登录IP")
private String loginIp;
/** 最后登录时间 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "最后登录时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date loginDate;
public void setUserId(Long userId)
{
this.userId = userId;
}
public Long getUserId()
{
return userId;
}
public void setDeptId(Long deptId)
{
this.deptId = deptId;
}
public Long getDeptId()
{
return deptId;
}
public void setUserName(String userName)
{
this.userName = userName;
}
public String getUserName()
{
return userName;
}
public void setNickName(String nickName)
{
this.nickName = nickName;
}
public String getNickName()
{
return nickName;
}
public void setUserType(String userType)
{
this.userType = userType;
}
public String getUserType()
{
return userType;
}
public void setEmail(String email)
{
this.email = email;
}
public String getEmail()
{
return email;
}
public void setPhonenumber(String phonenumber)
{
this.phonenumber = phonenumber;
}
public String getPhonenumber()
{
return phonenumber;
}
public void setSex(String sex)
{
this.sex = sex;
}
public String getSex()
{
return sex;
}
public void setAvatar(String avatar)
{
this.avatar = avatar;
}
public String getAvatar()
{
return avatar;
}
public void setPassword(String password)
{
this.password = password;
}
public String getPassword()
{
return password;
}
public void setStatus(String status)
{
this.status = status;
}
public String getStatus()
{
return status;
}
public void setDelFlag(String delFlag)
{
this.delFlag = delFlag;
}
public String getDelFlag()
{
return delFlag;
}
public void setLoginIp(String loginIp)
{
this.loginIp = loginIp;
}
public String getLoginIp()
{
return loginIp;
}
public void setLoginDate(Date loginDate)
{
this.loginDate = loginDate;
}
public Date getLoginDate()
{
return loginDate;
}
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
.append("userId", getUserId())
.append("deptId", getDeptId())
.append("userName", getUserName())
.append("nickName", getNickName())
.append("userType", getUserType())
.append("email", getEmail())
.append("phonenumber", getPhonenumber())
.append("sex", getSex())
.append("avatar", getAvatar())
.append("password", getPassword())
.append("status", getStatus())
.append("delFlag", getDelFlag())
.append("loginIp", getLoginIp())
.append("loginDate", getLoginDate())
.append("createBy", getCreateBy())
.append("createTime", getCreateTime())
.append("updateBy", getUpdateBy())
.append("updateTime", getUpdateTime())
.append("remark", getRemark())
.toString();
}
}mapper.xml层
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.system.mapper.SysUserMapper">
<resultMap type="SysUser" id="SysUserResult">
<result property="userId" column="user_id" />
<result property="deptId" column="dept_id" />
<result property="userName" column="user_name" />
<result property="nickName" column="nick_name" />
<result property="userType" column="user_type" />
<result property="email" column="email" />
<result property="phonenumber" column="phonenumber" />
<result property="sex" column="sex" />
<result property="avatar" column="avatar" />
<result property="password" column="password" />
<result property="status" column="status" />
<result property="delFlag" column="del_flag" />
<result property="loginIp" column="login_ip" />
<result property="loginDate" column="login_date" />
<result property="createBy" column="create_by" />
<result property="createTime" column="create_time" />
<result property="updateBy" column="update_by" />
<result property="updateTime" column="update_time" />
<result property="remark" column="remark" />
</resultMap>
<sql id="selectSysUserVo">
select user_id, dept_id, user_name, nick_name, user_type, email, phonenumber, sex, avatar, password, status, del_flag, login_ip, login_date, create_by, create_time, update_by, update_time, remark from sys_user
</sql>
<select id="selectSysUserList" parameterType="SysUser" resultMap="SysUserResult">
<include refid="selectSysUserVo"/>
<where>
<if test="deptId != null "> and dept_id = #{deptId}</if>
<if test="userName != null and userName != ''"> and user_name like concat('%', #{userName}, '%')</if>
<if test="nickName != null and nickName != ''"> and nick_name like concat('%', #{nickName}, '%')</if>
<if test="userType != null and userType != ''"> and user_type = #{userType}</if>
<if test="email != null and email != ''"> and email = #{email}</if>
<if test="phonenumber != null and phonenumber != ''"> and phonenumber = #{phonenumber}</if>
<if test="sex != null and sex != ''"> and sex = #{sex}</if>
<if test="avatar != null and avatar != ''"> and avatar = #{avatar}</if>
<if test="password != null and password != ''"> and password = #{password}</if>
<if test="status != null and status != ''"> and status = #{status}</if>
<if test="loginIp != null and loginIp != ''"> and login_ip = #{loginIp}</if>
<if test="loginDate != null "> and login_date = #{loginDate}</if>
</where>
</select>
<select id="selectSysUserByUserId" parameterType="Long" resultMap="SysUserResult">
<include refid="selectSysUserVo"/>
where user_id = #{userId}
</select>
<insert id="insertSysUser" parameterType="SysUser" useGeneratedKeys="true" keyProperty="userId">
insert into sys_user
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="deptId != null">dept_id,</if>
<if test="userName != null and userName != ''">user_name,</if>
<if test="nickName != null and nickName != ''">nick_name,</if>
<if test="userType != null">user_type,</if>
<if test="email != null">email,</if>
<if test="phonenumber != null">phonenumber,</if>
<if test="sex != null">sex,</if>
<if test="avatar != null">avatar,</if>
<if test="password != null">password,</if>
<if test="status != null">status,</if>
<if test="delFlag != null">del_flag,</if>
<if test="loginIp != null">login_ip,</if>
<if test="loginDate != null">login_date,</if>
<if test="createBy != null">create_by,</if>
<if test="createTime != null">create_time,</if>
<if test="updateBy != null">update_by,</if>
<if test="updateTime != null">update_time,</if>
<if test="remark != null">remark,</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="deptId != null">#{deptId},</if>
<if test="userName != null and userName != ''">#{userName},</if>
<if test="nickName != null and nickName != ''">#{nickName},</if>
<if test="userType != null">#{userType},</if>
<if test="email != null">#{email},</if>
<if test="phonenumber != null">#{phonenumber},</if>
<if test="sex != null">#{sex},</if>
<if test="avatar != null">#{avatar},</if>
<if test="password != null">#{password},</if>
<if test="status != null">#{status},</if>
<if test="delFlag != null">#{delFlag},</if>
<if test="loginIp != null">#{loginIp},</if>
<if test="loginDate != null">#{loginDate},</if>
<if test="createBy != null">#{createBy},</if>
<if test="createTime != null">#{createTime},</if>
<if test="updateBy != null">#{updateBy},</if>
<if test="updateTime != null">#{updateTime},</if>
<if test="remark != null">#{remark},</if>
</trim>
</insert>
<update id="updateSysUser" parameterType="SysUser">
update sys_user
<trim prefix="SET" suffixOverrides=",">
<if test="deptId != null">dept_id = #{deptId},</if>
<if test="userName != null and userName != ''">user_name = #{userName},</if>
<if test="nickName != null and nickName != ''">nick_name = #{nickName},</if>
<if test="userType != null">user_type = #{userType},</if>
<if test="email != null">email = #{email},</if>
<if test="phonenumber != null">phonenumber = #{phonenumber},</if>
<if test="sex != null">sex = #{sex},</if>
<if test="avatar != null">avatar = #{avatar},</if>
<if test="password != null">password = #{password},</if>
<if test="status != null">status = #{status},</if>
<if test="delFlag != null">del_flag = #{delFlag},</if>
<if test="loginIp != null">login_ip = #{loginIp},</if>
<if test="loginDate != null">login_date = #{loginDate},</if>
<if test="createBy != null">create_by = #{createBy},</if>
<if test="createTime != null">create_time = #{createTime},</if>
<if test="updateBy != null">update_by = #{updateBy},</if>
<if test="updateTime != null">update_time = #{updateTime},</if>
<if test="remark != null">remark = #{remark},</if>
</trim>
where user_id = #{userId}
</update>
<delete id="deleteSysUserByUserId" parameterType="Long">
delete from sys_user where user_id = #{userId}
</delete>
<delete id="deleteSysUserByUserIds" parameterType="String">
delete from sys_user where user_id in
<foreach item="userId" collection="array" open="(" separator="," close=")">
#{userId}
</foreach>
</delete>
</mapper>3、前端代码
api
user.js文件
import request from '@/utils/request'
// 查询用户信息列表
export function listUser(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query
})
}
// 查询用户信息详细
export function getUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'get'
})
}
// 新增用户信息
export function addUser(data) {
return request({
url: '/system/user',
method: 'post',
data: data
})
}
// 修改用户信息
export function updateUser(data) {
return request({
url: '/system/user',
method: 'put',
data: data
})
}
// 删除用户信息
export function delUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'delete'
})
}views
index.vue文件
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="部门ID" prop="deptId">
<el-input
v-model="queryParams.deptId"
placeholder="请输入部门ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户账号" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户账号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户昵称" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入用户昵称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户邮箱" prop="email">
<el-input
v-model="queryParams.email"
placeholder="请输入用户邮箱"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="头像地址" prop="avatar">
<el-input
v-model="queryParams.avatar"
placeholder="请输入头像地址"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="queryParams.password"
placeholder="请输入密码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最后登录IP" prop="loginIp">
<el-input
v-model="queryParams.loginIp"
placeholder="请输入最后登录IP"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最后登录时间" prop="loginDate">
<el-date-picker clearable
v-model="queryParams.loginDate"
type="date"
value-format="yyyy-MM-dd"
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-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户ID" align="center" prop="userId" />
<el-table-column label="部门ID" align="center" prop="deptId" />
<el-table-column label="用户账号" align="center" prop="userName" />
<el-table-column label="用户昵称" align="center" prop="nickName" />
<el-table-column label="用户类型" align="center" prop="userType" />
<el-table-column label="用户邮箱" align="center" prop="email" />
<el-table-column label="手机号码" align="center" prop="phonenumber" />
<el-table-column label="用户性别" align="center" prop="sex" />
<el-table-column label="头像地址" align="center" prop="avatar" />
<el-table-column label="密码" align="center" prop="password" />
<el-table-column label="帐号状态" align="center" prop="status" />
<el-table-column label="最后登录IP" align="center" prop="loginIp" />
<el-table-column label="最后登录时间" align="center" prop="loginDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.loginDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改用户信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="部门ID" prop="deptId">
<el-input v-model="form.deptId" placeholder="请输入部门ID" />
</el-form-item>
<el-form-item label="用户账号" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户账号" />
</el-form-item>
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" />
</el-form-item>
<el-form-item label="用户邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入用户邮箱" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="头像地址" prop="avatar">
<el-input v-model="form.avatar" placeholder="请输入头像地址" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item label="删除标志" prop="delFlag">
<el-input v-model="form.delFlag" placeholder="请输入删除标志" />
</el-form-item>
<el-form-item label="最后登录IP" prop="loginIp">
<el-input v-model="form.loginIp" placeholder="请输入最后登录IP" />
</el-form-item>
<el-form-item label="最后登录时间" prop="loginDate">
<el-date-picker clearable
v-model="form.loginDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择最后登录时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser } from "@/api/system/user";
export default {
name: "User",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户信息表格数据
userList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deptId: null,
userName: null,
nickName: null,
userType: null,
email: null,
phonenumber: null,
sex: null,
avatar: null,
password: null,
status: null,
loginIp: null,
loginDate: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
userName: [
{ required: true, message: "用户账号不能为空", trigger: "blur" }
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询用户信息列表 */
getList() {
this.loading = true;
listUser(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
userId: null,
deptId: null,
userName: null,
nickName: null,
userType: null,
email: null,
phonenumber: null,
sex: null,
avatar: null,
password: null,
status: "0",
delFlag: null,
loginIp: null,
loginDate: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加用户信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const userId = row.userId || this.ids
getUser(userId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改用户信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.userId != null) {
updateUser(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal.confirm('是否确认删除用户信息编号为"' + userIds + '"的数据项？').then(function() {
return delUser(userIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/user/export', {
...this.queryParams
}, `user_${new Date().getTime()}.xlsx`)
}
}
};
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
