rbac权限和多级请假设计的流程演示和前端页面实现

登录账号:t6普通用户 t7部门经理 m8总经理 密码都为:test

多级请假:7级及以下申请请假需要部门经理审核,若是请假时长超过72小时,则需要总经理审核,7级申请请将需要总经理审核,总经理请假自动审核通过。申请和审核流程都需要生产消息通知。

(前后端不分离)

业务流程测试:王美美[高级研发工程师](7级以下用户)登录并申请请假(超过了72小时需要部门经理和总经理申请)

王美美请假(查过72小时),需要部门经理和总经理审核


部门经理(7级)登录消息通知审核消息并处理审核

部门经理审核通过

王美美查看部门经理审核结果

部门经理审核通过,需要总经理审核(8级)登录,首页消息通知审核通过

首页系统通知

审批通过

总经理审核通过,王美美查看审核结果

如果部门经理审核不通过,则总经理不需要处理也没有系统通知

登录页面

login.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网OA办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style>
        .login-box {
            border: 1px solid #DCDFE6;
            width: 350px;
            margin: 180px auto;
            padding: 35px 35px 15px 35px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: 0 0 25px #909399;
        }
        .login-title{
            text-align: center;
            margin: 0 auto 40px auto;
            color: #303133;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="loginForm" label-width="80px" :rules="rules" :model="form" class="login-box">
        <h2 class="login-title">慕课网OA办公系统</h2>
        <el-form-item label="账号" prop="username">
            <el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width:200px">登录</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    const Main = {
        data() {
            return {
                form: {
                    username: ''
                    ,password: ''
                }
                ,rules:{
                    username: [
                        {required: true,message : '账号不能为空' , trigger:'blur'}
                    ],
                    password:[
                        {required: true,message : '密码不能为空' , trigger:'blur'}
                    ]
                }
            }
        }
        ,methods : {
            onSubmit(formName){
                const form = this.$refs[formName];
                form.validate((valid) => {
                    if(valid){
                        console.info("表单校验成功,准备提交数据");
                        const form = this.form;
                        const $message=this.$message;
                        const params=new URLSearchParams();
                        params.append("username",form.username);
                        params.append("password",form.password);
                        axios.post("/api/login",params,{}).then(function(response){
                            console.info(response);
                            const json=response.data;
                            if(json.code==0){
                                sessionStorage.uid=json.data.user.userId;
                                sessionStorage.eid=json.data.user.employeeId;
                                window.location.href="/index.html"
                            }else{
                                $message.error({message:json.message,offset:100});
                            }
                        })
                    }
                })
            }
        }
    };
    //初始化Vue,绑定Main中的数据,利用ElementPlus对#app容器进行重新渲染
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>

首页

index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网办公OA系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style>
        .el-header {
            background-color: rgb(238, 241, 246);
            color: #333;
            line-height: 60px;
        }
        html,body,#app,.el-container {
            padding: 0px;
            margin: 0px;
            height: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height:100%;border:1px solid #eee">
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <span style="font-size: 18px;color:darkcyan">慕课网办公OA系统</span>
                    </el-col>
                    <el-col :span="12" style="text-align:right">
                           <el-dropdown>
                               <i class="el-icon-s-check" style="font-size:18px;margin-right: 15px">
                                   <span style="margin-right: 15px">{{employee.name}}[{{employee.title}}]</span>
                               </i>
                               <template #dropdown>
                                   <el-dropdown-menu>
                                       <el-dropdown-item v-on:click="logout">退出</el-dropdown-item>
                                   </el-dropdown-menu>
                               </template>
                           </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px" style="max-height:100%;background-color: rgb(238, 241, 246)">
                    <!--默认展开第一个模块功能-->
                    <el-menu :default-openeds="['0']">
                        <template v-for="(n,idx) in nodeList">
                            <el-submenu :index="idx.toString()">
                                <template #title><i class="el-icon-s-tools"></i>{{n.node.nodeName}}</template>
                                <template v-for="func in n.children">
                                    <el-menu-item :index="func.nodeId.toString()" v-on:click="showPage(func.url)">{{func.nodeName}}</el-menu-item>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main>
                    <iframe id="main" name="main" src="/notice.html" style="width:100%;height:100%;border: 0px"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <script>
        const Main = {
            data(){
                return {
                    nodeList:[],
                    employee:{}
                }
            }
            ,methods:{
                showPage(url){
                    document.getElementById("main").src = url;
                }
                ,logout(){
                    sessionStorage.clear();
                    window.location.href = "/login.html";
                }
            }
            ,mounted(){
                const objApp = this;
                const eid = sessionStorage.eid;
                const uid = sessionStorage.uid;
                axios.get("/api/user_info?uid=" + uid + "&eid=" + eid)
                .then(function(response){
                    const json = response.data;
                    json.data.nodeList.forEach(function (item){
                        objApp.nodeList.push(item);
                    })
                    console.info(objApp.nodeList);
                    objApp.employee = json.data.employee;
                })
            }
        };
        const app = Vue.createApp(Main);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>

请假申请页面

leave_form.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请单</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/element-plus/locale/zh-cn.js"></script>
    <script src="/assets/axios/axios.js"></script>

    <style>
        .el-form {
            border: 1px solid #DCDFE6;
            width: 600px;
            margin: 180px auto;
            padding: 35px 35px 15px 35px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: 0 0 25px #909399;
        }
    </style>

</head>
<body>
<div id="app">
    <el-form ref="leaveForm" :model="form" :rules="rules" label-width="80px">
        <el-descriptions title="请假申请单" :column="1" border>
            <el-descriptions-item label="部门">{{department.departmentName}}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{employee.name}}[{{employee.title}}]
            </el-descriptions-item>
            <el-descriptions-item label="请假类型">

                <el-select v-model="form.formType" style="width: 100%">
                    <el-option label="事假" value="1"></el-option>
                    <el-option label="病假" value="2"></el-option>
                    <el-option label="工伤假" value="3"></el-option>
                    <el-option label="婚嫁" value="4"></el-option>
                    <el-option label="产假" value="5"></el-option>
                    <el-option label="丧假" value="6"></el-option>
                </el-select>

            </el-descriptions-item>
            <el-descriptions-item label="请假时间">
                <el-form-item prop="timeRange" label-width="0px">
                    <div class="block">
                        <el-date-picker
                                v-model="form.timeRange"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="changeTimeRange">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="请假原因">
                <el-form-item prop="reason" label-width="0px">
                    <el-input type="text" placeholder="请输入请假原因" v-model="form.reason"/>
                </el-form-item>
            </el-descriptions-item>

        </el-descriptions>
        <div style="text-align: center;padding-top: 30px">
            <el-button type="primary" v-on:click="onSubmit('leaveForm')" >立即申请</el-button>
        </div>
    </el-form>

</div>

<script>

    var Main = {
        data() {
            return {
                employee:{},
                department:{},
                form: {
                    formType: "1",
                    timeRange: "",
                    startTime: "",
                    endTime: "",
                    reason: "",
                    eid: ""
                },
                // 表单验证,需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    timeRange: [
                        {required: true, message: '请选择请假时间', trigger: 'blur'}
                    ],
                    reason: [
                        {required: true, message: '请填写请假原因', trigger: 'blur'}
                    ]
                }
            }
        }
        ,methods:{
            changeTimeRange : function(){
                console.info(this.form.timeRange);
                this.form.startTime = this.form.timeRange[0].getTime();
                this.form.endTime = this.form.timeRange[1].getTime();
            }
            ,onSubmit(formName){
                const objApp = this;
                const formData = this.form;
                const $message = this.$message;
                this.$refs[formName].validate(function(valid){
                    if(valid){
                        const params = new URLSearchParams();
                        params.append("formType", formData.formType);
                        params.append("startTime", formData.startTime);
                        params.append("endTime", formData.endTime);
                        params.append("reason", formData.reason);
                        params.append("eid", sessionStorage.eid);
                        axios.post("/api/leave/create",params)
                            .then(function(response){
                                console.info(response);
                                const json = response.data;
                                if(json.code == "0"){
                                    objApp.$alert("请假单已提交,等待上级审批",{
                                        callback:function(){
                                            window.location.href = "/notice.html";
                                        }
                                    })
                                }else{
                                    $message.error({message:json.message,offset:100})
                                }
                            })
                    }
                })
            }
        }
        ,mounted(){
            const objApp = this;
            axios.get("/api/user_info?uid=" + sessionStorage.uid + "&eid=" + sessionStorage.eid)
            .then(function(response){
                console.info(response);
                objApp.employee = response.data.data.employee;
                objApp.department = response.data.data.department;
            })
        }
    };
    ElementPlus.locale(ElementPlus.lang.zhCn);
    const app = Vue.createApp(Main);
    app.use(ElementPlus, ElementPlus.lang.zhCn);
    app.mount("#app");
</script>
</body>
</html>

请假审核页面

audit.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style >

        .info .el-col,.info .el-select ,.info .el-input{
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>请假审批</h2>
    <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                property="ctime"
                label="申请时间"
                width="180">
        </el-table-column>
        <el-table-column
                property="ftype"
                label="类型"
                width="120">
        </el-table-column>
        <el-table-column
                property="department_name"
                label="部门"
                width="120">
        </el-table-column>
        <el-table-column
                property="name"
                label="员工"
                width="120">
        </el-table-column>
        <el-table-column
                property="stime"
                label="起始时间"
                width="180">
        </el-table-column>
        <el-table-column
                property="etime"
                label="结束时间"
                width="180">
        </el-table-column>
        <el-table-column
                property="reason"
                label="请假原因">
        </el-table-column>
    </el-table>

    <el-dialog title="请假审批" v-model="dialogFormVisible" width="500px" center>
        <el-descriptions  :column="2" border>
            <el-descriptions-item label="部门">{{currentRow.department_name}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{currentRow.name}}</el-descriptions-item>
            <el-descriptions-item label="起始时间" >{{currentRow.stime}}</el-descriptions-item>
            <el-descriptions-item label="结束时间" >{{currentRow.etime}}</el-descriptions-item>
            <el-descriptions-item label="请假原因" :span="2">
                {{currentRow.reason}}
            </el-descriptions-item>
        </el-descriptions>


        <div class="info" >
            <el-form :model="form" ref="auditForm">
                <el-select v-model="form.result" placeholder="是否同意" style="width: 100%">
                    <el-option label="同意" value="approved"></el-option>
                    <el-option label="驳回" value="refused"></el-option>
                </el-select>
                <el-input v-model="form.reason" placeholder="请输入审批意见" autocomplete="off"></el-input>
            </el-form>
            <span class="dialog-footer">
              <el-button type="primary" v-on:click="onSubmit('auditForm')" style="width: 100%">确认提交</el-button>
            </span>
        </div>
    </el-dialog>
</div>

<script>
    function formatDate(time){
        var newDate = new Date(time);
        return newDate.getFullYear() + "-" +
            (newDate.getMonth() + 1) + "-" + newDate.getDate()
            + " " + newDate.getHours() + "时";
    }

    var Main = {
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    result:"approved",
                    reason:""
                },
                formLabelWidth: '120px',
                tableData: [{
                    ctime:"2021-5-29 18时",
                    ftype:"事假",
                    stime:"2021-5-31 0时",
                    etime:"2021-6-3 0时",
                    department_name:"研发部",
                    name:"王美美",
                    reason:"测试数据"
                }],
                currentRow: null
            }
        }
        ,methods: {
            handleCurrentChange(val) {
                this.currentRow = val;
                console.info(val);
                this.dialogFormVisible = true;
            }
            ,onSubmit(formName){
                const objApp = this;
                this.$refs[formName].validate(function(valid){
                    if(valid){
                        const params = new URLSearchParams();
                        params.append("formId", objApp.currentRow.form_id);
                        params.append("result", objApp.form.result);
                        params.append("reason", objApp.form.reason);
                        params.append("eid", sessionStorage.eid);
                        axios.post("/api/leave/audit" , params)
                            .then(function(response){
                                const json = response.data;
                                console.info(json);
                                if(json.code=="0"){
                                    objApp.$alert("请假已审批完毕" , {
                                        callback:function(){
                                            window.location.href = "/notice.html";
                                        }
                                    })
                                }else{
                                    objApp.$message.error({message:json.message,offset:100})
                                }
                            })
                    }
                })
            }
        }

        ,mounted(){
            const objApp = this;
            const $message = this.$message;
            axios.get("/api/leave/list?eid=" + sessionStorage.eid)
                .then(function(response){
                    const json = response.data;
                    if(json.code == '0'){
                        objApp.tableData.splice(0, objApp.tableData.length);
                        const formList = json.data.list;
                        formList.forEach(function(item){
                            switch (item.form_type){
                                case 1:
                                    item.ftype = "事假";
                                    break;
                                case 2:
                                    item.ftype = "病假";
                                    break;
                                case 3:
                                    item.ftype = "工伤假";
                                    break;
                                case 4:
                                    item.ftype = "婚假";
                                    break;
                                case 5:
                                    item.ftype = "产假";
                                    break;
                                case 6:
                                    item.ftype = "丧假";
                                    break;
                            }
                            item.stime = formatDate(item.start_time);
                            item.etime = formatDate(item.end_time);
                            item.ctime = formatDate(item.create_time);
                            objApp.tableData.push(item);
                        })
                    }else{
                        $message.error({message:json.message,offset:100})
                    }
                })
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>

消息页面

notice.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统通知</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <script src="/assets/oa/security.js"></script>
</head>
<body>
<div id="app">
    <h2>系统通知</h2>
    <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%">
        <el-table-column
                property="index"
                label="序号"
                width="50">
        </el-table-column>
        <el-table-column
                property="ctime"
                label="通知时间"
                width="180">
        </el-table-column>

        <el-table-column
                property="content"
                label="通知内容">
        </el-table-column>
    </el-table>

</div>

<script>

    var Main = {
        data() {
            return {
                tableData: []
            }
        }
        ,mounted() {
            const objApp = this;
            axios.get("/api/notice/list?eid=" + sessionStorage.eid)
                .then(function (response) {
                    objApp.tableData.splice(0, objApp.tableData.length);
                    response.data.data.list.forEach(function (item,index) {
                        var date = new Date(item.createTime);
                        item.ctime = date.getFullYear() + "-" +
                            (date.getMonth() + 1) + "-" + date.getDate()
                            + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                        item.index = index + 1;
                        objApp.tableData.push(item);
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>
相关推荐
mghio1 小时前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰3 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试