若依管理系统代码生成器生成的CURD模板

刺骨的言语ヽ痛彻心扉 2023-10-04 20:17 63阅读 0赞

### 1、代码生成操作 ###

> 1、首先安装好本地若以管理系统的前后端环境  
> 2、进入系统工具的代码生成模板  
> 3、点击导入数据库中的想生成代码的表  
> 4、勾选点击生成按钮会生成一个包含前后端的zip文件  
> 5、如图：

![在这里插入图片描述][836f47e0d34a4569bcf639148548194b.png]

### 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>

[836f47e0d34a4569bcf639148548194b.png]: https://img-blog.csdnimg.cn/836f47e0d34a4569bcf639148548194b.png