springboot+vue小白升级之路11-请假申请，请假审核功能

最新推荐文章于 2024-05-05 23:36:24 发布

虾米大王

最新推荐文章于 2024-05-05 23:36:24 发布

阅读量283

点赞数 3

分类专栏： springboot Java Vue 文章标签： spring boot vue.js 后端

本文链接：https://blog.csdn.net/modern358/article/details/134408121

版权

Java 同时被 3 个专栏收录

1267 篇文章 4 订阅

订阅专栏

Vue

661 篇文章 4 订阅

订阅专栏

springboot

112 篇文章 0 订阅

订阅专栏

这部分代码，我们接着上一个的，就不全部贴出来了。

把与这个功能有关的代码贴出来，大家参考。

pom.xml

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.30</version>
        </dependency>

        <!--swagger依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <!--swagger ui-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
        </dependency>
        <!-- jwt验证       -->
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.10.3</version>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.7</version>
        </dependency>
        <!-- excel导出修复bug       -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>4.1.2</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>org.apache.commons</groupId>-->
<!--            <artifactId>commons-compress</artifactId>-->
<!--            <version>1.21</version>-->
<!--        </dependency>-->
    </dependencies>

application.properties

server.port=8089

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=mysql123
#日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#配置别名
mybatis-plus.type-aliases-package=com.shrimpking.pojo
#开启逻辑删除，标识字段
mybatis-plus.global-config.db-config.logic-delete-field=is_deleted
#删除
mybatis-plus.global-config.db-config.logic-delete-value=1
#未删除
mybatis-plus.global-config.db-config.logic-not-delete-value=0
#swagger
spring.mvc.pathmatch.matching-strategy=ant_path_matcher

数据库表

drop table if exists an_audit;
create table an_audit(
	id int not null auto_increment primary key comment '主键id',
	name varchar(100) not null comment '请假缘由',
	`time` datetime default CURRENT_TIMESTAMP comment '请假日期',
	`day` varchar(10) default null comment '请假天数',
	user_id int not null comment '用户id',
	`status` tinyint default 0 comment '审核状态，0未审核，1已通过，2未通过',
	reason varchar(200) default null comment '审核意见'
) comment '请假审核表';
insert into an_audit values (1,'请假','2022-01-01','3天',1,0,'');

pojo

audit.java

package com.shrimpking.pojo;

import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.time.LocalDateTime;
import java.io.Serializable;
import java.util.Date;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;

/**
 * <p>
 * 请假审核表
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-14
 */
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("an_audit")
@ApiModel(value="Audit对象", description="请假审核表")
public class Audit implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "主键id")
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    @ApiModelProperty(value = "请假缘由")
    private String name;

    @ApiModelProperty(value = "请假日期")
    private Date time;

    @ApiModelProperty(value = "请假天数")
    private String day;

    @ApiModelProperty(value = "用户id")
    private Integer userId;

    @ApiModelProperty(value = "审核状态，0未审核，1已通过，2未通过")
    private Integer status;

    @ApiModelProperty(value = "审核意见")
    private String reason;


}

mapper

auditMapper.java

package com.shrimpking.mapper;

import com.shrimpking.pojo.Audit;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

/**
 * <p>
 * 请假审核表 Mapper 接口
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-14
 */
public interface AuditMapper extends BaseMapper<Audit> {

}

service

auditService.java

package com.shrimpking.service;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.shrimpking.pojo.Audit;
import com.baomidou.mybatisplus.extension.service.IService;
import com.shrimpking.pojo.Book;
import com.shrimpking.req.AuditParams;
import com.shrimpking.req.QueryParams;

/**
 * <p>
 * 请假审核表 服务类
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-14
 */
public interface AuditService extends IService<Audit> {

    IPage<Audit> findBySearchPage(AuditParams auditParams);
}

serviceImpl

auditServiceImpl.java

package com.shrimpking.service.impl;

import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.shrimpking.exception.CustomException;
import com.shrimpking.pojo.Audit;
import com.shrimpking.mapper.AuditMapper;
import com.shrimpking.pojo.Book;
import com.shrimpking.pojo.User;
import com.shrimpking.req.AuditParams;
import com.shrimpking.req.QueryParams;
import com.shrimpking.service.AuditService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.shrimpking.utils.JwtUtils;
import org.springframework.stereotype.Service;

/**
 * <p>
 * 请假审核表 服务实现类
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-14
 */
@Service
public class AuditServiceImpl extends ServiceImpl<AuditMapper, Audit> implements AuditService {

    @Override
    public IPage<Audit> findBySearchPage(AuditParams auditParams)
    {
        //声明分页
        IPage<Audit> page = new Page<>(auditParams.getCurrentPage(), auditParams.getPageSize());
        //声明查询条件
        LambdaQueryWrapper<Audit> queryWrapper = new LambdaQueryWrapper<>();
        //请假名称不为空，有条件值时，加入此条件
        queryWrapper.like(
                StringUtils.isNotBlank(auditParams.getName()),
                Audit::getName, auditParams.getName());
        //auditParams.getStatus() != null,
        queryWrapper.eq(ObjectUtil.isNotEmpty(auditParams.getStatus()),
                    Audit::getStatus, auditParams.getStatus());
        //获取token中的当前用户
        User user = JwtUtils.getCurrentUser();
        //权限是学生的
//        Boolean flag = false;
//        if(user != null && user.getRole().equals("ROLE_STUDENT")){
//            flag = true;
//        }
//        queryWrapper.eq(flag,Audit::getUserId,auditParams.getUserId());
        if(user != null){
            queryWrapper.eq(user.getRole().equals("ROLE_STUDENT"),
                            Audit::getUserId,auditParams.getUserId());
        } else {
            throw new CustomException("从token中未获取到用户信息，请重新登录！");
        }
        queryWrapper.orderByDesc(Audit::getId);
        //返回结果
        return this.baseMapper.selectPage(page, queryWrapper);
    }
}

controller

auditController.java

package com.shrimpking.controller;


import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.shrimpking.pojo.Audit;
import com.shrimpking.pojo.Book;
import com.shrimpking.req.AuditParams;
import com.shrimpking.req.BookParams;
import com.shrimpking.req.QueryParams;
import com.shrimpking.res.Result;
import com.shrimpking.service.AuditService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * <p>
 * 请假审核表 前端控制器
 * </p>
 *
 * @author shrimpking
 * @since 2023-11-14
 */
@RestController
@RequestMapping("/audit")
public class AuditController {

    @Autowired
    private AuditService auditService;

    /**
     * 有查询条件时，获取分页数据
     * @param queryParams
     * @return
     */
    @GetMapping("/searchPage")
    public Result findBySearchPage(AuditParams auditParams){
        IPage<Audit> list = this.auditService.findBySearchPage(auditParams);
        return Result.success(list);
    }

    @PostMapping("/save")
    public Result save(@RequestBody Audit audit){
        boolean save = this.auditService.save(audit);
        if(!save) return Result.error("保存失败");
        return Result.success("保存成功");
    }

    @PostMapping("/update")
    public Result update(@RequestBody Audit audit){
        boolean save = this.auditService.updateById(audit);
        if(!save) return Result.error("更新失败");
        return Result.success("更新成功");
    }

    @DeleteMapping("/delete")
    public Result delete(@RequestParam("id") Integer id){
        boolean remove = this.auditService.removeById(id);
        if(!remove) return Result.error("删除失败");
        return Result.success("删除成功");
    }
}

req

auditParams.java

package com.shrimpking.req;

import lombok.Data;
import lombok.EqualsAndHashCode;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/11/12 21:10
 */

@Data
@EqualsAndHashCode(callSuper = true)
public class AuditParams extends QueryParams
{
    private Integer status;
    private Integer userId;
}

jwtutils.java

package com.shrimpking.utils;

import ch.qos.logback.classic.turbo.TurboFilter;
import cn.hutool.core.date.DateUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.shrimpking.exception.CustomException;
import com.shrimpking.pojo.User;
import com.shrimpking.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.security.oauth2.resource.OAuth2ResourceServerProperties;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import javax.annotation.PostConstruct;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;
import java.util.Objects;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/11/12 14:49
 */
@Slf4j
@Component
public class JwtUtils
{
    private static UserService staticUserService;

    @Autowired
    private UserService userService;

    @PostConstruct
    public void setUserService(){
        staticUserService = userService;
    }

    /**
     * 生成token
     * @param adminId
     * @param sign
     * @return
     */
    public static String createToken(String userId,String pwdToSign){
        return JWT.create()
                //将user id保存到里面，作为载荷
                .withAudience(userId)
                //2个小时以后过期
                .withExpiresAt(DateUtil.offsetHour(new Date(),2))
                //以password作为签名
                .sign(Algorithm.HMAC256(pwdToSign));
    }

    /**
     * 获取当前用户
     * @return
     */
    public static User getCurrentUser(){
        //声明token
        String token = null;
        try
        {
            //获取请求
            HttpServletRequest request
                    = ((ServletRequestAttributes)Objects.requireNonNull(RequestContextHolder.getRequestAttributes())).getRequest();
            //从请求头部获取token
            token = request.getHeader("z-token");

            //如果头部没有，请请求参数获取token
            if(StringUtils.isBlank(token)){
                token = request.getParameter("token");
            }

            //如果token没有，返回null
            if(StringUtils.isBlank(token)){
                log.error("获取当前登录用户信息失败，token={}",token);
                return null;
            }
            //解析token
            String userId = JWT.decode(token).getAudience().get(0);
            //返回用户
            return staticUserService.getById(userId);
        }catch (Exception e){
            log.error("获取当前登录用户信息失败，token={}",token,e);
            return null;
        }
    }

    /**
     * 验证token
     * @param token
     * @return
     */
    public static Boolean verify(String token){

        //用户id
        String userId;
        //用户
        User user;
        try
        {
            //解析token，获取id
            userId = JWT.decode(token).getAudience().get(0);
            //根据id，获取用户
            user = staticUserService.getById(userId);
        }catch (Exception e){
            String errorMsg = "非法token，验证失败，请重新登录!";
            log.error(errorMsg + ",token=" + token ,e);
            throw  new CustomException(errorMsg);
        }
        //未查到用户
        if(user == null){
            throw new CustomException("用户不存在，请重新登录!");
        }

        try
        {
            //解析过程中，无异常，说明验证成功
            JWTVerifier verifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
            verifier.verify(token);
        }catch (JWTVerificationException e){
            throw new CustomException("token验证失败，请重新登录");
        }

        return true;
    }
}

router

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name:'LoginView',
    component: ()=> import('@/views/LoginView.vue'),
  },
  {
    path:'/register',
    name: 'Register',
    component: ()=> import('@/views/RegisterView.vue'),
  },
  {
    path: '/',
    redirect: '/home',
    name: 'Layout',
    component: ()=> import('@/views/Layout.vue'),
    children:[
      {
        path: 'home',
        name: 'HomeView',
        component: ()=> import('@/views/HomeView.vue')
      },
      {
        path: 'admin',
        name: 'AdminView',
        component: ()=> import('@/views/User/AdminView.vue'),
      },
      {
        path:'user',
        name:'UserView',
        component: ()=> import('@/views/User/UserView.vue'),
      },
      {
        path:'book',
        name:'BookView',
        component: ()=> import('@/views/Info/BookView.vue'),
      },
      {
        path:'type',
        name:'BookType',
        component: ()=> import('@/views/Info/BookType.vue'),
      },
      {
        path:'audit',
        name:'AuditView',
        component: ()=> import('@/views/AuditView.vue'),
      },
    ]
  },
]

const router = new VueRouter({
  routes
})

//白名单
const IGNORE_URLS = ['/login','/register'];

//前置守卫
router.beforeEach((to, from, next) => {
  //在白名单中，放行
  if(IGNORE_URLS.includes(to.path)){
    next();
  }
  //获取用户
  let admin = JSON.parse(window.localStorage.getItem('access-admin'));
  if(!admin && !IGNORE_URLS.includes(to.path)){
    //没有登录 ，没有在白名单中，跳转登录
    return next('/login');
  }

  next();
});

export default router

audit.vue

<template>
    <div>
        <!-- 搜索区域       -->
        <div style="margin-bottom:15px;">
            <el-input
                    v-model="searchForm.name"
                    style="width:200px;"
                    placeholder="请输入请假缘由"
                    @clear="doSearch"
                    @keypress.native.enter="doSearch"
                    clearable>
            </el-input>
            <el-select
                    v-model="searchForm.status"
                    placeholder="请选择审核状态"
                    style="margin-left: 10px;"
                    @clear="doSearch"
                    clearable>
                <el-option label="未审核" value="0"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="未通过" value="2"></el-option>
            </el-select>
            <el-button
                    type="warning"
                    style="margin-left: 10px;"
                    icon="el-icon-search"
                    @click="doSearch">查询</el-button>
            <el-button
                    type="primary"
                    style="margin-left: 10px;"
                    icon="el-icon-toilet-paper"
                    @click="clearSearch">清空</el-button>
            <el-button
                    type="primary"
                    style="margin-left: 10px;"
                    icon="el-icon-plus" @click="addBtn"
                    v-if="admin.role !== 'ROLE_TEACHER'">新增</el-button>
        </div>
        <!-- 表格区域       -->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="请假缘由">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="请假日期">
                <template slot-scope="scope">
                    <span>{{ scope.row.time != null ? scope.row.time.toString().substring(0,10):'' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="day"
                    label="请假天数">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户">
                <template slot-scope="scope">
                    <span> {{ userList.find( (item)=> item.id === scope.row.userId).name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审核状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 0">未审核</span>
                    <span v-if="scope.row.status === 1">已通过</span>
                    <span v-if="scope.row.status === 2">未通过</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="审核意见">
            </el-table-column>
            <el-table-column label="操作" width="280px">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            icon="el-icon-edit"
                            @click="editBtn(scope.row)"
                            v-if="admin.role !== 'ROLE_TEACHER'">编辑</el-button>
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            @click="deleteBtn(scope.row)"
                            v-if="admin.role !== 'ROLE_TEACHER'">删除</el-button>
                    <el-button
                            type="success"
                            icon="el-icon-edit"
                            @click="auditBtn(scope.row)"
                            v-if="admin.role !== 'ROLE_STUDENT'">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域       -->
        <div style="margin-top:15px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchForm.currentPage"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="searchForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--  对话框      -->
        <div>
            <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogFormVisible"
                    :close-on-click-modal="false"
                    @close="closeDialog"
                    width="35%">
                <el-form
                        :model="addForm"
                        :rules="rules"
                        ref="addForm"
                        :label-width="formLabelWidth"
                        label-position="left">
                    <el-form-item label="请假缘由" prop="name">
                        <el-input v-model="addForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="请假时间" prop="time">
                        <el-date-picker
                                v-model="addForm.time"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="请假天数" prop="day">
                        <el-input v-model="addForm.day" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="用户" prop="userId">
                        <el-select
                                v-model="addForm.userId"
                                :disabled="['ROLE_TEACHER','ROLE_STUDENT'].includes(admin.role)">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetBtn" v-show="dialogTitle === '新增请假'">重 置</el-button>
                    <el-button type="primary" @click="submitBtn">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 审核对话框       -->
        <div>
            <el-dialog
                    title="请假审核"
                    :visible.sync="auditDialogVisible"
                    :close-on-click-modal="false"
                    @close="closeDialog"
                    width="35%">
                <el-form
                        :model="addForm"
                        :rules="rules"
                        ref="addForm"
                        :label-width="formLabelWidth"
                        label-position="left">
                    <el-form-item label="审核状态" prop="status">
                        <el-radio v-model="addForm.status" :label="0">未审核</el-radio>
                        <el-radio v-model="addForm.status" :label="1">通过</el-radio>
                        <el-radio v-model="addForm.status" :label="2">不通过</el-radio>
                    </el-form-item>
                    <el-form-item label="审核意见" prop="reason">
                        <el-input v-model="addForm.reason" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitBtn">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "AuditView",
        computed: {
            admin(){
                return JSON.parse(window.localStorage.getItem('access-admin')) || { name: '未登录'};
            }
        },
        data() {
            return {
                //审核对话框
                auditDialogVisible: false,
                //用户列表
                userList:[],
                //添加表单
                addForm:{
                    name:'',
                    time:'',
                    day:'',
                    userId:'',
                    status:'',
                    reason:'',
                },
                rules:{
                    name:[{required: true, message: '请输入请假缘由', trigger: 'blur'}],
                    time:[{required: true, message: '请选择日期', trigger: 'blur'}],
                    day:[{required: true, message: '请输入请假天数', trigger: 'blur'}],
                    userId:[{required: true, message: '请选择用户', trigger: 'change'}],
                    status:[{required: true, message: '请选择审核状态', trigger: 'change'}],
                    reason:[{required: true, message: '请输入审核意见', trigger: 'blur'}],
                },
                //表单标题宽度
                formLabelWidth:'80px',
                //对话框标题
                dialogTitle:'',
                //对话框
                dialogFormVisible: false,
                //搜索条件
                searchForm:{
                    name: '',
                    status: '',
                    userId: '',
                    currentPage: 1,
                    pageSize: 5
                },
                tableData: [],
                total:0
            }
        },
        methods: {
            //审核
            auditBtn(row){
                let obj = JSON.parse(JSON.stringify(row));
                this.addForm = obj;
                this.auditDialogVisible = true;
            },
            //获取用户
            getUserList(){
                request.get('/user/findAll').then(res=>{
                    if(res.code === '200'){
                        this.userList = res.data;
                    }
                })
            },
            //删除
            deleteBtn(row){
                this.$confirm(`您确定要删除【${row.name}】吗`,'删除提示',{
                    confirmButtonText:'删除',
                    cancelButtonText:'取消',
                    type:'warning',
                }).then(()=>{
                    request.delete('/audit/delete',{
                        params:{ id : row.id}
                    }).then(res => {
                        if(res.code === '200'){
                            this.$message.success(res.data);
                            this.doSearch();
                        }
                    })
                }).catch(_=>{
                    this.$message.warning('已取消删除');
                })
            },
            //编辑
            editBtn(row){
                let obj = JSON.parse(JSON.stringify(row));
                this.addForm = obj;
                this.dialogTitle = "编辑请假";
                this.dialogFormVisible = true;
            },
            //关闭对话框
            closeDialog(){
                this.resetBtn();
                this.dialogFormVisible = false;
                this.auditDialogVisible = false;
            },
            //新增保存
            submitBtn(){
                this.$refs.addForm.validate((valid)=>{
                    if(valid){
                        //校验通过
                        //有id，编辑，没有id是新增
                        request.post(this.addForm.id ? '/audit/update':'/audit/save',this.addForm)
                            .then(res=>{
                                if(res.code === '200'){
                                    this.$message.success(res.data);
                                    this.resetBtn();
                                    this.dialogFormVisible = false;
                                    this.auditDialogVisible = false;
                                    this.doSearch();
                                }else {
                                    this.$message.error(res.msg);
                                }
                            })
                    }
                })
            },
            //新增重置
            resetBtn(){
                this.$refs.addForm.resetFields();
                //修复bug
                this.addForm = {};
                //默认用户自己
                this.addForm.userId = this.admin.id;
            },
            addBtn(){
                //默认用户自己
                this.addForm.userId = this.admin.id;
                this.dialogTitle = '新增请假';
                this.dialogFormVisible = true;
            },
            clearSearch(){
                this.searchForm.name = '';
                this.searchForm.status = '';
                this.doSearch();
            },
            //搜索
            doSearch(){
                //修复bug
                this.searchForm.currentPage = 1;
                this.getData();

            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val;
                this.searchForm.currentPage = 1;
                this.getData();
            },
            handleCurrentChange(val) {
                this.searchForm.currentPage = val;
                this.getData();
            },
            //获取数据
            getData(){
                request.get('/audit/searchPage',{
                    params: this.searchForm
                }).then(res=>{
                    if(res.code === '200'){
                        //console.log(res)
                        this.tableData = res.data.records; //数据
                        this.searchForm.currentPage = res.data.current; //当前页
                        this.searchForm.pageSize = res.data.size; //页条数
                        this.total = res.data.total; //总条数
                    }else {
                        this.$message.error(res.msg);
                    }
                });
            }
        },
        created(){
            //如果是学生，只查询自己的数据
            this.searchForm.userId = this.admin.id;
            //获取数据
            this.getData();
            //获取用户列表
            this.getUserList();
        }
    }
</script>

<style scoped>

</style>

layout.vue

<template>
    <div>
        <el-container class="container">
            <el-header class="header-area">
                <img src="@/assets/logo.png" alt="logo" class="logo">
                <span class="title">手牵手带小白做毕设</span>
                <span class="admin-info">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        用户:&nbsp;&nbsp; <strong>{{ admin.name }}</strong>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </el-header>
            <el-container class="middle-area">
                <el-aside  class="left-aside">
                    <el-menu
                            :default-active="$route.path"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            router>
                        <el-menu-item index="/home">
                            <i class="el-icon-menu"></i>
                            <span slot="title">系统首页</span>
                        </el-menu-item>
                        <el-submenu index="/admin" v-if="admin.role === 'ROLE_ADMIN'">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/admin">用户信息</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="/book">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>信息管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/book">图书信息</el-menu-item>
                                <el-menu-item index="/type">图书分类</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="/audit">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>请假管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/audit">请假申请</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Layout",
        computed: {
            admin(){
                return JSON.parse(window.localStorage.getItem('access-admin')) || { name: '未登录'};
            }
        },
        methods: {
            //下拉菜单命令
            handleCommand(command){
                if (command === 'logout') {
                    this.logout();
                }
            },
            //退出
            logout(){
                window.localStorage.clear();
                this.$message.success('退出成功!');
                this.$router.replace('/login');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container{
        height: 100vh;

        .header-area{
            background-color: #4c535a;

            .logo {
                width: 40px;
                position: relative;
                top: 10px;
            }

            .title{
                font-size: 20px;
                margin-left: 15px;
                color: white;
            }

            .admin-info{
                float: right;
                margin-right: 30px;
                line-height: 60px;
                .el-dropdown-link{
                    color: #cccccc;
                }
            }

        }

        .middle-area{

            .left-aside{
                overflow: hidden;
                height: 100%;
                /*background-color: #545c64;*/
                width:230px  !important;

                .el-menu-vertical-demo{
                    height: 100%;
                }


            }



        }

    }
</style>