基于Vue+SpringBoot+MySQL的人事管理系统（档案+工资+统计）

目录
1引言 1
1.1研发背景 1
1.2研发的目的及意义 1
1.3国内外研发现状 1
2项目概述 1
3系统分析 2
3.1系统可行性分析 2
3.1.1运营可行 2
3.1.2技术可行性 2
3.1.3经济可行性 3
3.2系统流程分析 3
3.2.1系统访问控制流程图 3
3.2.2系统业务操作流图 4
4系统设计 5
4.1系统功能模块设计 5
4.2系统概念模型设计 5
4.2物理数据模型设计 6
5系统实现 8
5.1 公共模块 9
5.1.1主页 9
5.1.2在线聊天 10
5.2 员工资料 10
5.2.1基本资料 10
5.2.2 高级资料 11
5.3.人事管理 11
5.3.1员工奖惩. 11
5.3.2员工培训 11
5.3.3员工好评 11
5.3.4员工调动 11
5.4工资管理 12
5.4.1工资账套管理 12
5.4.2员工账套设置 12
5.4.3工资表管理 12
5.5统计管理 13
5.5.1员工积分统计 13
5.5.2人事信息统计 13
5.5.3人事记录统计 13
5.6系统管理 14
5.5.1基础信设置 14
5.6.2系统管理 15
5.6.3操作日志管理 16
5.6.4操作员管理 16
6系统测试 16
6.1 软件测试的目的 16
6.2 功能测试 16
6.3 测试结论 17
结束语 17
参考文献 19
致 谢 20
2项目概述
人事管理系统功能包括人事通讯,员工信息,人事考评,奖惩,培训管理,薪资管理,统计分析,和系统管理六大模块,对应人事工作基本流程:新员工入职档案建立,调动,辞职,员工信息的查询及工资管理等方面.系统管理可以根据不同的角色分配菜单权限设置,不同的用户授予不同角色,对人事结构,单位结构进行整体调配设置.在线聊天可以实现操作员之间讯息的及时通讯.
项目基于MVVM的前后端分离开发模式进行开发.MVVM即模型(Model)-视图(View)-视图模型(View Model),实现了数据视图的双向绑定.相对于MVC模式和MVP来说,MVVM是一个比较新的开发架构,它是一种将MVP模式与WPF相结合应用方式发展演变而成的新型开发架.[1]
前后端分离是指将前端和后端从之前的全部由后端负责中分离开来,不再共用一个Server,前端作为一个独立Serve存在.[2]前后端通过接口使用HTTP协议交互,本项目使用vu实体属性outer做前端路由处理.页面跳转不在由后端处理,前后端只是数据的交互.前后端分离的好处在于降低了前后端的耦合性.当面对不同的硬件场景时,需要构建不同的界面,前后端分离之后,只需要扩展前端项目即可,不需要修改后端服务.
在动态权限处理方面,使用安全框架Spring Security,基于RBAC（Role-Based Access Control ）角色的访问控制模型,由该模型主要由鉴权和授权构成,鉴权基于Servlet中Filter原理处理,授权由系统管理员操作.RBAC 的主要思想是：权限是和角色相关的,而用户则被分配相应的角色作为其成员,这样就大大简化了权限的管理.[3]

<template style="width: 100%;height: 100%;" >
  <div v-loading.fullscreen.lock="loading"
       class="login"
       element-loading-spinner="fa fa-spinner fa-pulse fa-3x fa-fw">
    <el-form :rules="rules"
             :model="loginFrom"
             class="logContainer"
             ref="loginFrom"
             @keydown.enter.native="loginSubmit">
      <h2 class="logtitle"><i class="fa fa-drupal fa-2x"
             style="color: #505458" />&nbsp;人 事 管 理</h2>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="loginFrom.username"
                  placeholder="请输入用户名"
                  auto-complete="off">
          <i slot="prefix"
             class="el-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="loginFrom.password"
                  placeholder="请输入密码"
                  auto-complete="off">
          <i slot="prefix"
             class="el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="loginFrom.code"
                  auto-complete="off"
                  placeholder="验证码"
                  style="width: 63%"
                  @keyup.enter.native="loginSubmit">
          <i slot="prefix"
             class="el-icon-view"></i>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl"
               @click="getCode">
        </div>
      </el-form-item>
      <el-checkbox v-model="loginFrom.rememberMe"
                   style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>
      <el-button type="primary"
                 style="width: 100%"
                 @click="loginSubmit">登录</el-button>
    </el-form>
  </div>
</template>

<script>
// import {postKeyValueRequest} from '../utils/api';
// 在main.js里以插件形似全局导入

export default {
  data () {
    return {
      codeUrl: '',
      cookiePass: '',
      loading: false,
      redirect: undefined,
      loginFrom: {
        username: 'admin',
        password: '123',
        code: '',
        rememberMe:''
      },
      checked: true,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 25, message: '长度在 5 到 25 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: blur() },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created () {
    this.getCode()

  },
  methods: {

    getCode () {
      this.getRequest("/auth/code").then(resp => {
          if(resp){
          console.log(resp)
        this.codeUrl = resp.img;
        this.loginForm.uuid = resp.uuid;
        console.log(this.codeUrl );
        }
      });
    },
    loginSubmit () {
      //提交前空值校验
      this.$refs.loginFrom.validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.loading = true;
          this.postKeyValueRequest('/doLogin', this.loginFrom
          ).then(data => {
            this.loading = false;
            if (data) {

              //方法将 JavaScript 的json对象转换为字符串。
              //将得到数存储在SessionStorage里
              window.sessionStorage.setItem("user", JSON.stringify(data.obj))
              //获取路由对象
              this.$router.replace('/home')
            }
          })
        } else {
          this.$notify.info({
            title: '系 统 讯 息',
            message: '输入框信息不完整哦!',
            showClose: false,
            offset: 100,
            duration: 5000,
            customClass: 'fontclass'
          });
        }
      });

    }
  }
}
</script>

<style >
.fontclass {
  font-size: 35px;
  font-family: 站酷庆科黄油体;
}

.login {
  background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
   background-image: url(../assets/images/timg.jpg); 
}
.logContainer {
  /* //圆角边框*/
  border-radius: 15px;
  /*背景裁剪在背景边框内部*/
  background-clip: padding-box;
  /*//外边距*/
  margin: 250px auto;
  /*//宽度*/
  width: 350px;
  /*//内边距*/
  padding: 35px 35px 15px 35px;
  /*//背景色*/
  background: transparent;
  background-image: radial-gradient(#ffffff, transparent);
  /*// 边框样式*/
  border: 1px solid #eaeaea;
  /*// 边框阴影*/
  box-shadow: 0 0 25px #cac6c6;
}
.logtitle {
  margin: 0px auto 20px auto;
  text-align: center;
  color: #505458;
  font-family: 站酷庆科黄油体;
}
.loginRen {
  text-align: center;
  margin: 0px 0px 35px 0px;
}
.fontclass {
  font-size: 35px;
  font-family: 站酷庆科黄油体;
}
.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;
}
.login-code img {
  cursor: pointer;
  vertical-align: middle;
}
</style>