人事管理系统项目（三）

最新推荐文章于 2023-12-26 13:35:45 发布
最新推荐文章于 2023-12-26 13:35:45 发布
阅读量473 收藏 6
点赞数 2
分类专栏： 人事管理系统项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysc18402950481/article/details/109081539
版权

人事管理系统项目（三）

主页面点击添加员工、离职员工等按钮时也会弹出页面，下面来写这个页面样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.css">

    <style>
        .empStatus {
            display: inline-block;
            width: 60px;
            height: 30px;
            border-radius: 2px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;

        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="my-2">
            <button class="btn btn-primary" id="btnAddEmp">添加新员工</button>
            <button class="btn btn-danger" id="btnLeave">批量离职</button>
        </div>
        <div class="empInfo">
            <table id="empTable" class="text-center"></table>
        </div>


        <div id="win-add-emp" class="px-2 py-2" style="display: none">
            <form>
                <div class="form-group">
                    <label>员工姓名</label>
                    <input type="text" class="form-control" name="emp_name">
                </div>

                <div class="form-group">
                    <label>性别</label>
                    <div class="form-control border-0">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="male" name="emp_sex" class="custom-control-input" value="1">
                            <label class="custom-control-label" for="male">男</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" name="emp_sex" id="female" class="custom-control-input" value="0">
                            <label class="custom-control-label" for="female">女</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>联系电话</label>
                    <input type="text" class="form-control" name="emp_phone">
                </div>

                <div class="form-group">
                    <label>出生日期</label>
                    <input type="date" class="form-control" name="emp_birthday">
                </div>

                <div class="form-group">
                    <label>入职时间</label>
                    <input type="date" class="form-control" name="emp_entry_date">
                </div>

                <div class="form-group custom-control-inline">
                    <div class="custom-control custom-control-inline">
                        <label style="width: 80px">部门</label>
                        <select class="custom-select mx-2" id="dept" name="dept">
                            <option value="">请选择部门</option>
                        </select>
                    </div>

                    <div class="custom-control custom-control-inline">
                        <label style="width: 80px">职位</label>
                        <select class="custom-select mx-2" id="post" name="post_id">
                            <option value="">请选择职位</option>
                        </select>
                    </div>
                </div>
                <div class="form-group text-center">
                    <button type="button" id="doAddEmp" class="btn btn-primary btn-lg btn-block">添加</button>
                </div>


            </form>
        </div>


        <!--添加离职员工开始-->
        <div id="win-add-leave" class="mx-3 mt-2" style="display: none">
            <h2 align="center">添加离职员工信息</h2>
            <form id="leaveForm">
                <div class="form-group">
                    <label>员工姓名:</label>
                    <span id="emp_name"></span>
                    <input type="hidden" name="emp_id" id="emp_id" />
                </div>
                <div class="form-group">
                    <label>离职原因</label>
                    <textarea class="form-control" name="leave_reasons" rows="3"></textarea>
                </div>

                <div class="form-group text-center">
                    <button type="button" id="doAddLeave" class="btn btn-primary btn-lg btn-block">提交</button>
                </div>
            </form>
        </div>


        <!--添加离职员工结束-->
        <input type="checkbox" disabled style="cursor: no-drop;" />

    </div>

    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-table.min.js"></script>
    <script src="/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="/layer-v3.1.1/layer/layer.js"></script>
    <script>
        let winLeaveIndex;//离职框
        $('#empTable').bootstrapTable({
            url: 'emp.do?operate=getEmpInfo',//返回JSON数组的服务器地址,JSON数组中的数据就是表格中显示的列数据
            theadClasses: 'thead-dark ',
            /**
             * columns中设置每列的数据
             *  列标题:title属性设置
             *  列数据绑定:field属性绑定列数据,field的值为json数组中对象的属性名
             */
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: 'emp_id',
                    title: '编号'
                }, {
                    field: 'emp_name',
                    title: '姓名'
                }, {
                    field: 'emp_sex',
                    title: '性别',
                    //格式化列,参数为单元格的值
                    formatter: function (value) {
                        console.log(value);
                        return value == 0 ? "女" : "男";//return结果为界面显示的内容
                    }
                }, {
                    field: 'emp_phone',
                    title: '联系电话'
                }, {
                    field: 'emp_birthday',
                    title: '出生日期'
                }, {
                    field: 'emp_entry_time',
                    title: '入职时间'
                }, {
                    field: 'dept_name',
                    title: '部门'
                }, {
                    field: 'post_name',
                    title: '职位'
                }, {
                    field: 'emp_status',
                    title: '状态',
                    formatter: function (value) {
                        if (value == 0) {
                            return "<span class='btn-primary empStatus' >在职</span>"
                        } else {
                            return "<span class='btn-secondary empStatus'>离职</span>"
                        }
                    }
                }, {
                    title: '操作',
                    formatter: function (value, row, index, field) {
                        let link_status = "<a href='#' id='emp_status' class='btn btn-outline-danger'><i class='fa fa-times-circle'></i> 离职</a>";
                        if (row.emp_status == 1) {
                            link_status = "<a href='#' id='emp_status'   class='btn btn-outline-danger disabled' ><i class='fa fa-times-circle'></i> 离职</a>";
                        }
                        return [//设置界面实现的内容
                            "<a href='#' class='btn btn-outline-primary mx-2'><i class=\"fa fa-pencil\"></i> 编辑</a>",
                            link_status
                        ].join("")

                    }
                }],
            /******分页设置开始*********/
            //当开启分页后，bootstrap会自动向服务端传递分页参数
            pagination:true,//启用bootstraptable分页,设置为true在表格下方显示一个分页栏
            pageSize:5,//设置每页显示的记录数，默认值为10
            pageList:[5,8,10],//设置每页显示记录数的可选列表
            pageNumber:1,//设置初始化页码，默认值为1
            sidePagination:'server',//设置分页的方向(客户端分页,服务端分页),默认为客户端分页(client)
            //当值为limit时向服务端传递的分页参数的参数名为offset,limit这两个参数来表示要查询的页码和每页的记录数
            //但是我们更多的使用pageNumber和pageSize这两个参数名做为查询页码和查询记录数的名字，所以我们要把查询参数的类型
            //这是为不是limit的值(可以为任意值),只要不是limit那么参数名就为pageNumber和pageSize
            queryParamsType:'myParams',//查询参数类型的默认值为limit
            /******分页设置结束*********/
        });
    </script>
</body>

</html>

样式图片如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
到这里为止，前端页面就全部写完了，接下来就开始编写后端内容来把前端这些功能一一实现。

ysc18402950481
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C#项目实战——【实例】企业人事管理系统（一）：1、系统分析；2、系统设计；3、系统运行环境；
做有价值的事，积累有价值的笔记！
12-25 4083
（1）项目目标项目应符合SMART原则，把项目要完成的工作用清晰的语言描述出来。企业人事管理系统的主要目标是为企业的管理者提供一套能够方便地对企业内部人员的变更及调动等进行管理的软件。（2）应交付成果项目开发完成后，交付的内容如下：☑ 以光盘的形式提供企业人事管理系统的源程序、系统数据库文件、系统打包文件和系统使用说明书。☑ 系统发布后，进行无偿维护和服务6个月，超过6个月进行系统有偿维护与服务。（3）项目开发环境。
java-使用java实现人事管理系统-项目源码
最新发布
01-16
java_使用java实现人事管理系统_项目源码
基于SpringBoot+Vue的大学生创新创业项目管理系统（源码+文档+包运行）
qq_33638415的博客
12-26 1163
随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了大创管理系统的开发全过程。通过分析大创管理系统管理的不足，创建了一个计算机管理大创管理系统的方案。文章介绍了大创管理系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。本大创管理系统有院系管理员，指导老师以及学生三个角色。学生功能有优秀项目，项目信息，评审方案，大创资讯，项目申报管理，项目中检管理，项目结项管理，项目评审管理，专家评审管理。
Java-基于SSM的人事管理系统
weixin_52721608的博客
09-02 1433
管理员可以对工资查询管理进行获取员工工号、姓名、部门、工资月份、基本工资、绩效工资、加班工资、全勤、迟到早退、请假、个税、社保代缴、实发工资、登记时间、是否审核、审核回复等信息进行修改、删除等操作。在工资查询管理页面可以查看员工工号、姓名、部门、工资月份、基本工资、绩效工资、加班工资、全勤、迟到早退、请假、个税、社保代缴、实发工资、登记时间、是否审核、审核回复等内容，并进行修改等操作。管理员对员工管理进行获取员工工号、姓名、部门、性别、手机、邮箱、身份证、照片进行删除、修改以及查看等操作。
java项目之人事管理系统（ssm+mysql+jsp）
sinat_26552841的博客
07-25 640
人事管理系统实现了以下功能： 管理员：个人中心、公告信息管理、部门管理、职位管理、员工管理、员工培训管理、奖惩信息管理、员工工资管理、员工事务管理、管理员管理。 员工：公告信息管理、员工培训管理、奖惩信息管理、员工工资管理、员工事务管理等功能。
人事管理系统
Desiy的博客
03-11 1387
目录1.项目介绍2.搭建后端项目2.1.数据库2.2.插件安装2.3.创建父工程2.4.创建子项目2.5.修改子项目pom文件 1.项目介绍 本项目的目的是实现中小型企业的在线人事办公系统，V人事在线办公系统是一个用来管理日常的办公事务的一个系统，他能够设计到的内柔包括：日常的各种流程审批，新闻，通知，公告，文件信息，财务，人事，费用，行政等等。其最主要的作用就是通过线上的方式，方便管理，更加简单，更加高效，更加规范，能够提高整体的管理运营水平。 本项目在技术方面采用最主流的前后端分离开发模式，后端使用业界
springboot企业人事管理系统.rar
08-21
基于springboot搭建的企业人事管理系统 功能截图查看链接：https://blog.csdn.net/weixin_39311781/article/details/114525984
基于Springboot的人事管理系统
07-27
基于Springboot框架开发的人事管理系统共分为四个角色：系统管理员、财务专员、人事专员、普通用户 管理员角色包含以下功能： 管理员拥有所有功能：绩效考核（考核设置）、招聘管理（招聘需求、面试计划）、档案...
JavaEE-人事管理系统
04-04
包括用户管理，部门管理，职位管理，员工管理，公告管理，下载中心六个模块的增删改查，其中有注册，登录，分页查询，文档的上传与下载等功能
基于 Spring Boot 框架的人事管理系统的设计与实现 完整论文 +代码+毕设 +ppt
02-03
本设计旨在实现微型人事管理信息系统,功能主要由人事在线通信、员工资料、人事信息管理、薪资调整分配、统计分析管理和系统设置管理系统构成.系统实现了员工信息编辑、人事信息入库展示分析、工资套帐处理及系统的...
hr人事管理系统项目
04-27
HR 平台功能要求 1）区分用户权限，角色不同，权限不同。 如 1：超级管理员：拥有全部权限 2：员工管理员：只能对员工信息管理 2）员工信息管理 记录员工的基本信息，对员工详细信息进行管理。 3）内部培训课程： 管理员可对课程信息进行不同的操作（如：增、删、改、查），普通用户可对其进行浏览。 4）管理系统 管理员分为超级管理员和普通管理员，超级管理员只能有一个，不能删除。 5）登录日志 记录管理员的登录时间（包括年、月、日、时、分、秒）。 6）奖惩记录 通过奖惩机制，可有效的激发员工的工作热情。 7）人事变动 发生人事调动时，要进行员工调动记录，把原工作部门、职务等工作信息记录在案。
人事管理系统-项目案例
01-06
人事管理系统-项目案例-源码
项目管理系统
08-10
“数据库综合实验”课程，题目：项目管理系统。C#实现， 本系统旨在协助用户管理自己的项目。项目管理系统可以登记项目的详细信息，从不同的角度对项目进行统计，监控项目的进度，对项目进行维护，安排项目的人员调度。使用本系统能够大大降低项目管理的复杂度，让项目管理者能够高效、快捷、准确地掌握项目相关信息，其简单的操作界面和强大的数据库操作功能能给使用者带来巨大的经济效益。
人事管理系统项目（一）
ysc18402950481的博客
10-14 1215
人事管理系统项目 大家好，今天分享一个比较基础的人事管理小项目，这个项目涉及到的框架有前端的jquery,Layui,bootstrap； ```java 在这里插入代码片 # 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ## 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器
基于SSM的人事管理系统(附源码和SQL)
热门推荐
weixin_44200984的博客
12-17 1万+
目录1.前言2.所用技术3.效果图部分展示4.源码地址 1.前言     本项目是SSM的人事管理系统，主要分为员工模块，部门模块，考核及工资的管理等，且分普通账户和管理员账户登陆。项目架子已搭好，大家可敬请发挥，后续有空将持续更新! 注：可登陆管理员账户：control 密码：control。 2.所用技术 请见图二 3.效果图部分展示 4.源码地...
人事管理系统项目合集
weixin_40190849的博客
08-31 751
大家好，我是章鱼猫。前几天，有读者留言：「有没有开源的人事管理系统」。今天章鱼猫就应大家的要求，给大家分享几个非常不错的人事管理系统。1、微人事微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发，项目加入常见的企业级应用所涉及到的技术点，例如 Redis、RabbitMQ 等。后端技术栈：Spring BootSpring SecurityMyBatisMy...
springboot毕设项目：基于推荐算法的景点攻略网站1rf50（java+VUE+Mybatis+Maven+Mysql）
m0_72488307的博客
08-03 2611
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。springboot毕设项目：基于推荐算法的景点攻略网站1rf50（java+VUE+Mybatis+Maven+Mysql）若包含，则为maven项目，否则为非maven项目。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。...
Java项目:企业人事管理系统(java+SSM+JSP+CSS+JavaScript+mysql)
常年被追砍的博客
05-08 1002
源码获取：博客首页 "资源" 里下载！ 项目介绍 企业人事管理系统，可以实现简单的企业内部的管理. 主要有管理员、人事专员、员工三种角色。 管理员功能：登录、分发工资、管理其他角色账号 员工功能：注册、登录、打卡、查看工资、请假 人事专员：登录、查看员工信息列表、查看(编辑)考勤情况、请假审批 环境要求 1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomca.
人事管理系统java项目
05-21
下面是人事管理系统java项目的基本框架和技术栈： 1. 前端开发：采用HTML、CSS、JavaScript、jQuery等技术实现页面布局和交互效果，Bootstrap、Layui等前端框架可以加速开发过程。 2. 后端开发：采用Java语言，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值