请假审批项目二:学生请假

在登录事件完成 接口的调用和token的存储  这样登录以后 跳转到指定的页面

  submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm.username);
          // console.log(this.ruleForm.userpwd);
        userinfo.login({
          username:this.ruleForm.username,
          userpwd:this.ruleForm.userpwd
        }).then((res)=>{
          let  data  =res.data;
          if(data.code==1){

            window.localStorage.setItem("token",data.token);
            // this.$router.addRouters([{path:"/teacher",name:"teacher",component:Teacher}])
            this.$router.push({
              name:data.name
            })

          }else{
            alert(data.msg);
          }

        })

          //做什么  调用接口  验证数据
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

我们首先完成学生的请假功能效果如下

点击请假按钮  弹框 

框有个form表单  

点击框里面确定按钮  完成表单验证

表单验证 包括 正则验证和时间验证(开始时间小于结束时间)

新增以后  数据同步刷新列表

 

代码

<template>
     <div class="add">
      <el-button type="primary" plain @click="dialogFormVisible = true"
        >请假</el-button
      >
      <el-dialog title="新增请假信息" :visible.sync="dialogFormVisible">
        <el-form :model="form"     :rules="rules" ref="myform">
          <el-form-item label="请假理由" :label-width="formLabelWidth" prop="leaveInfo">
            <el-input v-model="form.leaveInfo" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="开始时间" :label-width="formLabelWidth" prop="start">
            <el-date-picker
              v-model="form.start"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间" :label-width="formLabelWidth" prop="end">
            <el-date-picker
              v-model="form.end"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addLeave"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
</template>
<script>
import  leaveModel  from  "../../model/leaveModel";
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth:"120px",
      form: {
        leaveInfo: "",
        start: "",
        end: "",
      },
     rules: {
        leaveInfo: [
          { required: true, message: "请假理由不能为空", trigger: "blur" },
          {
            pattern: /^.{2,15}$/i,
            message: "长度2到15为",
            trigger: "blur",
          },
        ],
        start: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
        end: [
          { required: true, message: "结束不能为空", trigger: "blur" },
        ],
      },

    };
  },
  methods:{
      cancel(){
            //清空表单  关闭弹出层
            this.$refs["myform"].resetFields();
            this.dialogFormVisible = false;
        
      },
      addLeave(){
          this.$refs["myform"].validate((flag)=>{
              //在验证结束时间比开始时间大
              let leaveInfo = this.form.leaveInfo;
              let leaveStart = this.form.start;//请假开始时间
              let leaveEnd= this.form.end; //请假结束时间

              if(new Date(leaveEnd)>=new Date(leaveStart)){
                    //时间合法
                    
                    //调用接口  传递数据
                    leaveModel.add({
                        reason:leaveInfo,
                        leaveStart,
                        leaveEnd
                    }).then(res=>{
                       // console.log(res);
                        if(res.data.code==1) {//如果新增成功
                         this.$emit("additem",{
                                reason:leaveInfo,
                                leaveStart,
                                leaveEnd,
                                type:1
                            })
                            //成功以后关闭
                            this.dialogFormVisible = false;
                            this.$refs["myform"].resetFields();
                           
                        }else{
                            alert(res.data.msg);

                        }  
                    })


              }else{
                  alert("请重新选择时间");
              }
          })
      }

  }
};
</script>

 

后端接口 

1:接收 数据

2:解析token

3:判断权限

4:返回结果

请假的数据层

var mongoose = require("./db.js");
var schema = mongoose.Schema; //模型生成器(表生成器)

//建立表 并且指定字段
var leaveSchema = new schema({
    userid: String, //用户编号
    reason: String, //请假理由
    leaveStart:Date,//请假开始时间
    leaveEnd:Date, //请假结束时间
    pic:String,//提交的附件
    type:Number,//审批状态  1:待审批  2:审批通过 3:拒绝
});

//转成数据模型导出
module.exports = mongoose.model("leaveinfo", leaveSchema);

业务层

let  leaveModel =require("../model/leaveModel");

let  leaveinfo = {
     query:(info)=>{
          return  leaveModel.find(info)
     },
     add:(info)=>{
      return  leaveModel.insertMany([info])
     }
}
module.exports = leaveinfo;//导出

控制层

var express = require('express');
var router = express.Router();
var jwt = require("jsonwebtoken");
var  leaveModel  = require("../service/leaveinfo");

router.get("/studentleavelist",(req,res,next)=>{
        let token = req.headers.token;//接收token

        jwt.verify(token,"key",function(err,info){
                if(!err){
                    let {_id,type}=info;
                    if(type==2){//学生的类别

                        //根据id去查询
                        leaveModel.query({
                            userid:_id
                        }).then((data)=>{
                            res.json({
                                code:1,
                                list:data
                            })
                        })




                    }else{
                        res.json({
                            code:2,
                            msg:"权限异常"
                        })  
                    }
                }else{
                    res.json({
                        code:0,
                        msg:"token异常"
                    })
                }

        })
 

})

/* GET home page. */
router.post('/add', function(req, res, next) {//leaves/add
        //要什么信息?

        let  token  = req.headers.token;//接收token
        let  {reason,leaveStart,leaveEnd}=req.body;
        // console.log(reason);
        // console.log(token);
        //解析token 才能得到userid type
        jwt.verify(token,"key",function(err,info){
            // console.log(err);
            // console.log(info);
            if(!err){
                console.log(info);
                let  userid = info["_id"];
                
                leaveModel.add({
                    userid,
                    reason,
                    leaveStart,
                    leaveEnd,
                    type:1
                }).then((list)=>{
                    console.log(list);
                    if(list.length){
                        res.json({
                            code:1,
                            msg:"新增成功"
                        })
                    }else{
                        res.json({
                            code:0,
                            msg:"新增失败"
                        })
                    }
                })            
            }else{
               // console.log("过期了");
                res.json({
                    code:0,
                    msg:"token异常请重新登录"
                })
            }
         })

       


});

module.exports = router;

新增以后列表效果

 

代码如下  关于ele中table的使用

包含了 

组件的事件传递

filter的数据过滤

Date的原型扩展

table中自定义列

列表页面权限进入

<template>
  <div>
    <add-leave @additem="addItem"></add-leave>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="reason" label="请假理由"> </el-table-column>
      <el-table-column label="开始时间">
        <template slot-scope="scope">
          <el-button type="text" size="small">{{
            scope.row.leaveStart | filterDate
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template slot-scope="scope">
          <el-button type="text" size="small">{{
            new Date(scope.row.leaveEnd).dateFormate("yyyy-mm-dd")
          }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small">{{ scope.row.type }}</el-button> -->
          <el-button type="success" v-show="scope.row.type==2">已通过</el-button>
          <el-button type="warning" v-show="scope.row.type==1">待审批</el-button>
          <el-button type="danger" v-show="scope.row.type==3">已拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import addLeave from "../components/student/AddLeave";
import leaveModel from "../model/leaveModel";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods:{
      addItem(item){
          console.log(item);
          this.tableData.push(item);
      }
  },
  filters: {
    filterDate(date) {
      return new Date(date).dateFormate("yyyy年mm月dd日");
    },
  },
  components: {
    "add-leave": addLeave,
  },
  created() {
    leaveModel.query().then((res) => {
        if(res.data.code==1){//不等于1就都返回登录
            this.tableData = res.data.list;
        }else{
            this.$router.push("/")
        }
     
    });
  },
};
</script>