基于Vue+Springboot+Mysql的员工管理系统

朴灿烈づ我的快乐病毒、 2024-03-24 12:46 51阅读 0赞

目录  
1、引言 4  
1.1 编写目的 4  
1.2 读者对象 4  
1.3 软件项目概述 4  
1.4 文档概述 4  
1.5 定义 4  
2、软件设计约束 4  
2.1 软件设计目标和原则 5  
2.2 软件设计的约束和限制 5  
3、软件设计 5  
3.1 软件体系结构设计 5  
3.2 用户界面设计 6  
3.3 用例设计 6  
3.4 类设计 6  
3.5 数据设计 6  
目录

1.  引言 4  
    1.1 编写目的 4  
    1.2 读者对象 4  
    1.3 软件项目概述 4  
    1.4 文档概述 4  
    1.5 定义 4
2.  软件的一般性描述 5  
    2.1软件产品与其环境之间的关系 5  
    2.2限制与约束 5
3.  软件功能需求描述 5  
    3.1 软件功能概述 5  
    3.2 软件需求的用例模型 5  
    3.3 软件需求的分析模型 5
4.  其它软件需求描述 5  
    4.1 性能要求 5  
    4.2 设计约束 6  
    4.3 界面要求 6  
    4.4 进度要求 6
5.  其它软件需求描述  
    4.1 性能要求  
    根据用户对本系统的要求，确定系统在响应时间、可靠性、安全等方面有较高的性能要求。  
    界面需求  
    页面内容：主题突出，站点定义、术语和行文格式统一、规范、明确，栏目、菜单设置和布局合理，传递的信息准确、及时。内容丰富，文字准确，语句通顺；专用术语规范，行文格式统一规范。  
    导航结构：页面具有明确的导航指示，且便于理解，方便用户使用。  
    技术环境：页面大小适当；无错误链接和空链接；采用样式处理，控制字体大小和版面布局。  
    艺术风格：界面、版面形象清新悦目、布局合理,字号大小适宜、字体选择合理，前后一致，美观大方；动与静搭配恰当,动静效果好；色彩和谐自然,与主题内容相协调。  
    响应时间需求  
    无论是客户端和管理端，当用户登录，进行任何操作的时候，系统应该及时的进行反应，反应的时间在5秒以内。系统应能监测出各种非正常情况，如与设备的通信中断，无法连接数据库服务器等，及时给出提示信息，避免出现长时间等待甚至无响应。  
    开放性需求  
    系统应具有十分的灵活性，以适应将来功能扩展的需求。  
    可扩展性需求  
    系统设计要求能够体现扩展性要求，以适应将来功能扩展的需求。

4.2 设计约束  
后台开发语言：Java 版本1.8  
开发框架：  
o前端：Vue  
o后端：Springboot  
操作系统：  
oWeb端：Windows10  
o后台：Windows10  
开发工具：Jetbrains Intelij IDEA  
数据库：Mysql  
浏览器：Chrome  
系统安全性需求  
系统有严格的权限管理功能，各功能模块需有相应的权限方能进入。系统需能够防止各类误操作可能造成的数据丢失，破坏。防止用户非法获取网页以及内容。  
可靠性需求  
系统应保证7X24内不当机，保证20人可以同时在客户端登录，系统正常运行，正确提示相关内容。

4.3 界面要求  
页面内容：主题突出，站点定义、术语和行文格式统一、规范、明确，栏目、菜单设置和布局合理，传递的信息准确、及时。内容丰富，文字准确，语句通顺；专用术语规范，行文格式统一规范。  
导航结构：页面具有明确的导航指示，且便于理解，方便用户使用。  
技术环境：页面大小适当；无错误链接和空链接；采用样式处理，控制字体大小和版面布局。  
艺术风格：界面、版面形象清新悦目、布局合理,字号大小适宜、字体选择合理，前后一致，美观大方；动与静搭配恰当,动静效果好；色彩和谐自然,与主题内容相协调。

<template>
    
        <el-row>
            <el-col :span="4">
    
                <el-menu
                        :uniqueOpened="true"
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <template #title>
                            <router-link :to="{path: '/SubHomePage',query:{id:id}}">
                                主页
                            </router-link>
                        </template>
                    </el-menu-item>
    
    
                    <el-submenu index="2">
                    <template #title>
                        <i class="el-icon-menu"></i>
                        <span>请假</span>
                    </template>
                    <el-menu-item-group>
                        <template #title>分组一</template>
                        <el-menu-item index="2-1">
                            <router-link :to="{path:'/leaveapply',query:{id:id}}" background="red">申请请假</router-link>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <router-link :to="{path:'/leavestate',query:{id:id}}">审核状态</router-link>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <router-link :to="{path:'/leavehistory',query:{id:id}}">历史信息</router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
    
                    <el-submenu index="3">
                        <template #title>
                            <i class="el-icon-location"></i>
                            <span>加班</span>
                        </template>
                        <el-menu-item-group>
                            <template #title>分组一</template>
                            <el-menu-item index="3-1">
                                <router-link :to="{path: '/WorkOvertimeApply',query:{id:id}}">
                                    加班申请
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="3-2">
                                <router-link :to="{path: '/WorkOvertimeAuditStatus',query:{id:id}}">
                                    审核状态
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="3-3">
                                <router-link :to="{path: '/WorkOvertimeHistory',query:{id:id}}">
                                    历史信息
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
    
                    <el-submenu index="4">
                        <template #title>
                            <i class="el-icon-location"></i>
                            <span>审批</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">
                                <router-link :to="{path:'/leavecheck',query:{id:id}}">请假审批</router-link>
                            </el-menu-item>
                            <el-menu-item index="4-2">
                                <router-link :to="{path: '/Confirm',query:{id:id}}">
                                    加班审批
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
    
                    <el-menu-item index="5" v-if="flag==='1'">
                        <i class="el-icon-setting"></i>
                        <router-link :to="{path:'/set'}">设置</router-link>
                    </el-menu-item>
                    <el-button :type="typecolor" @click="checkup()" circle style="width:100px;height:100px;"
                               :disabled="isdisable">上班打卡
                    </el-button>
                    <br>
                    <el-button :type="typecolor1" @click="checkup1()" circle style="width:100px;height:100px;"
                               :disabled="isdisable1">下班打卡
                    </el-button>
                    <br>
    
                </el-menu>
            </el-col>
    
            <el-main>
                <router-view></router-view>
            </el-main>
    
        </el-row>
    
    
    </template>
    
    <script>
        /* eslint-disable */
        import {
        defineComponent, h} from 'vue'
        import {
        ElMessage} from 'element-plus'
        import moment from "moment"
    
        export default defineComponent({
        
            name: "Homepage",
            data() {
        
                return {
        
    
                    id: '',
                    flag:'0',
                    imgSrc: require('../assets/save.jpg'),
                    Cwa :{
        
                        epnum:20210000,
                        ename:'',
                        work_date:'2021-11-1 00:00:00',
                        work_start:'2021-11-1 00:00:00',
                        work_end: '2021-11-1 00:00:00',
                        work_descrip:''
                    },
                    typecolor: "info",
                    typecolor1: "info",
                    isdisable: true,
                    isdisable1: true,
                    checktable: [
                        {
        
                            epnum: 66666,
                            ename: '陈项',
                            workdate: '',
                            workstartdatetime: '',
                            workenddatetime: '',
                            workdescriptext: '',
                        }
                    ]
                }
            },
            beforeRouteEnter: (to, from, next) => {
        
                next(vm => {
        
                    vm.getParams();
    
                });
    
            },
            methods: {
        
                predo(){
        
                    let timestamp0 = moment(new Date()).format("YYYY-MM-DD")+" 21:00:00";
                    let timestamp1 = moment(new Date()).format("YYYY-MM-DD")+" 21:30:00";
                    let timestamp2 = new Date(timestamp0).getTime();
                    let timestamp3 = new Date(timestamp1).getTime();
                    let timestamp4 = new Date().getTime();
                   /* typecolor: "primary",
                        typecolor1: "primary",
                        isdisable: false,
                        isdisable1: false,*/
                    console.log(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"))
                    if(timestamp2<=timestamp4 & timestamp4<=timestamp3){
        
                        this.typecolor = 'primary';
                        this.isdisable= false;
                    }else{
        
                        this.typecolor = 'info';
                        this.isdisable= true;
                    }
                    console.log(timestamp2)
                    console.log(timestamp3)
                    console.log(timestamp4)
                },
                predo1(){
        
                    let timestamp0 = moment(new Date()).format("YYYY-MM-DD")+" 21:00:00";
                    let timestamp1 = moment(new Date()).format("YYYY-MM-DD")+" 21:30:00";
                    let timestamp2 = new Date(timestamp0).getTime();
                    let timestamp3 = new Date(timestamp1).getTime();
                    let timestamp4 = new Date().getTime();
                    /* typecolor: "primary",
                         typecolor1: "primary",
                         isdisable: false,
                         isdisable1: false,*/
                    if(timestamp2<=timestamp4 && timestamp4<=timestamp3){
        
                        this.typecolor1 = 'primary';
                        this.isdisable1= false;
                    }else{
        
                        this.typecolor1 = 'info';
                        this.isdisable1= true;
                    }
                    console.log(timestamp2)
                    console.log(timestamp3)
                    console.log(timestamp4)
                },
                getParams() {
        
                    this.id = this.$route.params.id;
                    this.flag = this.$route.params.flag;
                    console.log(this.flag);
                    this.$router.push({
        path:'/SubHomePage',query:{
        id:this.id}})
                    this.Cwa.epnum =this.id;
                    this.predo()
                    this.predo1()
    
                    this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
                    console.log(this.Cwa)
                    this.axios({
        
                        method:'post',
                        url:"http://localhost:8081/ems/employee/saveCwa",
                        data:this.Cwa,
    
                    }).then((res)=>{
        
                        console.log( '打卡日期更新成功')
    
                        /*
                            typecolor1: "info",
                            isdisable: false,
                            isdisable1: true,*/
                    });
    
    
                },
                handleOpen(key, keyPath) {
        
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
        
                    console.log(key, keyPath);
                },
                checkup(){
        
                    console.log(this.Cwa)
                    this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
                    this.Cwa.work_start = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    
                    this.axios({
        
                        method:'post',
                        url:"http://localhost:8081/ems/employee/updateCwa",
                        data:this.Cwa,
    
                    }).then(()=>{
        
    
                        console.log( '打卡成功')
                        this.typecolor ="primary"
                        this.isdisable = true
                    });
    
                },
                checkup1(){
        
                    console.log(this.Cwa)
                    this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
                    this.Cwa.work_end = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    
                    this.axios({
        
                        method:'post',
                        url:"http://localhost:8081/ems/employee/updateCwaend",
                        data:this.Cwa,
    
                    }).then(()=>{
        
    
                        console.log( '打卡成功')
                        this.typecolor ="primary"
                        this.isdisable1 = true
                    });
    
                }
            },
    
           /* created() {
                this.$router.push({path:'/SubHomePage',query:{id:this.id}})
            },*/
            setup() {
        
                return {
        
                    open() {
        
                        console.log(this.Cwa)
    
    
    
                    },
                    openVn() {
        
                        ElMessage({
        
                            message: h('p', null, [
                                h('span', null, '内容可以是 '),
                                h('i', {
        style: 'color: teal'}, 'VNode')
                            ])
                        });
                    }
                }
            }
        })
    </script>
    
    <style scoped>
        a {
        
            color: white;
            text-decoration: none;
    
        }
        .text {
        
            font-size: 14px;
        }
    
        .item {
        
            margin-bottom: 18px;
        }
    
        .clearfix:before,
        .clearfix:after {
        
            display: table;
            content: "";
        }
    
        .clearfix:after {
        
            clear: both
        }
    
        .box-card {
        
            width: 480px;
        }
    
    
    </style>

![在这里插入图片描述][d0f78d1c8f2f42d1a00f79a45bd8dd9d.png_pic_center]  
![在这里插入图片描述][d56f114d94b04e5fac88560f7ad98c49.png_pic_center]  
![在这里插入图片描述][db7d9efe49aa4ee4b7ff6b4d16b5ea9b.png_pic_center]  
![在这里插入图片描述][4d552048fa224d5597de014f79020c31.png_pic_center]  
![在这里插入图片描述][59d97c976187415dbbca14861effe0bf.png_pic_center]  
![在这里插入图片描述][89a7193fc2094cbb93378f00ecff5275.png_pic_center]  
![在这里插入图片描述][09114f61e8d345ada587c7af758e5659.png_pic_center]  
![在这里插入图片描述][024794db30b2469297aba0200504bfc9.png_pic_center]  
![在这里插入图片描述][0a7307527306427593b00fffc236800e.png_pic_center]  
![在这里插入图片描述][bd78662104e24878949d598be4c05327.png_pic_center]  
![在这里插入图片描述][b6c2ac54862648df911e2aa0ba08ac9a.png_pic_center]  
![在这里插入图片描述][6bd6c92d5a074a5bb7e0ee479f68c637.png_pic_center]  
![在这里插入图片描述][4b154d9e68ff4403bb5920f8c176db8f.png_pic_center]  
![在这里插入图片描述][4b2589ef6d0c47b4ad0440fb99a09ca6.png_pic_center]  
![在这里插入图片描述][cc0831c8fc1c4f9885d31fdcc51d5f23.png_pic_center]  
![在这里插入图片描述][8a282a69a57740658f363291391fc2b6.png_pic_center]  
![在这里插入图片描述][e546cb07db6943df8d612131cbddaedc.png_pic_center]  
![在这里插入图片描述][602db4d2969b408385e4fd45b9a24ddd.png_pic_center]  
![在这里插入图片描述][e9ce9c9116c14fa0bfeb44a3e70380e2.png_pic_center]  
![在这里插入图片描述][8dd0865f44d14ab0af4fcbd51bd23e84.png_pic_center]  
![在这里插入图片描述][f2a3cb10ea5f4da9b228bd693d45ebbd.png_pic_center]

[d0f78d1c8f2f42d1a00f79a45bd8dd9d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/45c26914202f428f85443dcebe5391ac.png
[d56f114d94b04e5fac88560f7ad98c49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d8f4e489b4204423837e5daf58fb1526.png
[db7d9efe49aa4ee4b7ff6b4d16b5ea9b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3da53d8415434a7b8ed22fdb8bea8943.png
[4d552048fa224d5597de014f79020c31.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6a5cd8697efd42209e8774c3d8c213b7.png
[59d97c976187415dbbca14861effe0bf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9b181693dece4a4b827be0088bbbad51.png
[89a7193fc2094cbb93378f00ecff5275.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/086edf01b99a4c5a92b5170f20edbe4a.png
[09114f61e8d345ada587c7af758e5659.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/34339350d6924d1f9302868b5ef7e660.png
[024794db30b2469297aba0200504bfc9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b79aee421723477195fc232c7000875b.png
[0a7307527306427593b00fffc236800e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/98f426211d6f4379b2a3ee96dfd566c3.png
[bd78662104e24878949d598be4c05327.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/136dc84712d94e649696abb304c44b32.png
[b6c2ac54862648df911e2aa0ba08ac9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9b4990a7786f4f06b9703bb04180c06f.png
[6bd6c92d5a074a5bb7e0ee479f68c637.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e027d3d846b94f01b4500a092e03fd82.png
[4b154d9e68ff4403bb5920f8c176db8f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/32d8435695fb4499b8543f7270d4196d.png
[4b2589ef6d0c47b4ad0440fb99a09ca6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/deeb35173ed443b09795b4c86614c10a.png
[cc0831c8fc1c4f9885d31fdcc51d5f23.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/61a0bf641adf415c806be70c7b301c12.png
[8a282a69a57740658f363291391fc2b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1c09c2a37ce24c468ee63e8dc3cebf8d.png
[e546cb07db6943df8d612131cbddaedc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5800b4449fd24891b2263d553c818a13.png
[602db4d2969b408385e4fd45b9a24ddd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b1e338d3bc994770ace2cc8fd437167b.png
[e9ce9c9116c14fa0bfeb44a3e70380e2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9c1160997e504cb5b48ba565b6e17b6f.png
[8dd0865f44d14ab0af4fcbd51bd23e84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4616748f23b14249be4a7a5d647edd7f.png
[f2a3cb10ea5f4da9b228bd693d45ebbd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9a14ccbc2e5c4653aeb0d20ae55882c2.png