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

目录
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
目录

引言 4
1.1 编写目的 4
1.2 读者对象 4
1.3 软件项目概述 4
1.4 文档概述 4
1.5 定义 4
软件的一般性描述 5
2.1软件产品与其环境之间的关系 5
2.2限制与约束 5
软件功能需求描述 5
3.1 软件功能概述 5
3.2 软件需求的用例模型 5
3.3 软件需求的分析模型 5
其它软件需求描述 5
4.1 性能要求 5
4.2 设计约束 6
4.3 界面要求 6
4.4 进度要求 6
其它软件需求描述
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>

在这里插入图片描述

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

猜你喜欢