首页 > 其他分享 >022.开发请假申请View层(2)

022.开发请假申请View层(2)

时间:2022-12-18 23:01:09浏览次数:43  
标签:请假 const form params 022 message data response View

1.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>

 

标签:请假,const,form,params,022,message,data,response,View
From: https://www.cnblogs.com/LLL0617/p/16991206.html

相关文章

  • 021.开发请假申请View层(1)
    1.leave_form.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>请假申请单</title><!--引入样式--><linkrel="styles......
  • Modern C++ Overview (综览)
    PartI:Language(第一篇:语言)大局观——简直像个新语言给出一个完整实例,展示(几乎)所有新特性的样貌,让学员从真实代码中一次性窥得(几乎)全豹,得知即将面对的新知和挑战......
  • #yyds干货盘点#【愚公系列】2022年09月 微信小程序-WebGL画正方形
    前言WebGL(全写WebGraphicsLibrary)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起,通过增加OpenGLES2.0的一个JavaScript绑定,WebGL可以为......
  • 100 Interview Questions for Software Developers-软件开发者面试百问
    ​​http://www.noop.nl/2009/01/100-interview-questions-for-software-developers.html​​​​​​Hiringsmartsoftwaredevelopersisnoteasy.Ifyou'renotcar......
  • 020.开发请假Controller层
    1.LeaveFormServlet.java(src\main\java\com\imooc\oa\controller)packagecom.imooc.oa.controller;importcom.imooc.oa.entity.LeaveForm;importcom.imooc.oa.servi......
  • Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
    A.AddPlusMinusSign如果有偶数个1,显然可以通过加减各一半的方式达到和为0;否则可以达到和为1。需要注意如果序列的第一个数是1,则它的前面只能填加号。时间复杂度\(O(n......
  • Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
    A.AddPlusMinusSign如果有偶数个1,显然可以通过加减各一半的方式达到和为0;否则可以达到和为1。需要注意如果序列的第一个数是1,则它的前面只能填加号。时间复杂度\(O(n......
  • Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
    A.AddPlusMinusSign如果有偶数个1,显然可以通过加减各一半的方式达到和为0;否则可以达到和为1。需要注意如果序列的第一个数是1,则它的前面只能填加号。时间复杂度\(O(n......
  • Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
    A.AddPlusMinusSign如果有偶数个1,显然可以通过加减各一半的方式达到和为0;否则可以达到和为1。需要注意如果序列的第一个数是1,则它的前面只能填加号。时间复杂度\(O(n......
  • ICPC2022南京站游记
    第二次打南京了,去年是在南京拿的第一块铜(上海太卷了打了次铁)Day0南京站的热身赛真就万年不变,一直用那套袋鼠题。Day1开局我直接先敲板子,试图跟榜秒杀签到题,不久后\(I\)......