学生请假系统学习二

学生页面有新增请假的按钮的组件 和 请假列表的渲染

 

 

 

学生页面新增请假需要进行开始时间 和 结束时间的过滤

<template slot-scope="scope">{{scope.row.start|filterdate("yyyy-mm-dd hh: dd: ss")}}</template>

在main.js中写这个filter过滤的方法

Vue.filter("filterdate", (date, str) => {
  let datatoday = new Date(date)
  let year = datatoday.getFullYear()
  let month = datatoday.getMonth()
  let d = datatoday.getDate()
  let hours = datatoday.getHours()
  let m = datatoday.getMinutes()
  let s = datatoday.getSeconds()
  return str.replace("yyyy", year).replace("mm", month < 10 ? "0" + month : month).replace("dd", d).replace("hh", hours).replace("dd", m).replace("ss", s)


})

 

 

 

 

 

 

 

 

 

学生请假列表对应的组件

<template>
<div>
<add-Leave @additem="additem"></add-Leave>


    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="username" label="姓名" width="150"></el-table-column>
      <el-table-column prop="reason" label="请假理由" width="120"></el-table-column>
      <el-table-column label="开始时间" width="120">
        <template slot-scope="scope">{{scope.row.start|filterdate("yyyy-mm-dd hh: dd: ss")}}</template>
      </el-table-column>
      <el-table-column prop="end" label="结束时间" width="120"></el-table-column>
      <el-table-column prop="extend" label="附件" width="300"></el-table-column>
      <el-table-column fixed="right" label="状态">
        <template slot-scope="scope">
          <el-button type="warning" v-if="scope.row.type == 1">待审批</el-button>
          <el-button type="danger" v-else-if="scope.row.type == 3">已拒绝</el-button>
          <el-button type="success" v-else>成功按钮</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

学生请假列表对应的组件对应的方法

<script>
import addLeave from "../components/addLeaves.vue";
import leavesModel from "../model/leavesModel";
export default {
  data() {
    return {
      list: []
    };
  },

  components: {
    addLeave
  },
  async created() {
    let { data } = await leavesModel.query();
    console.log(data);
    this.list = data.data;
  },
  methods: {
    additem(item) {
      this.list.push(item);
    }
  }
};
</script>

查询学生请假的数据 有多少条数据  注意使用token  因为token里面有对应登录学生的userid  username  usertype

使用的接口

 query: (params) => {
        return axios({
            method: "get",
            url: "/api/leaves/studentquery",
            params,
            headers: {
                token: localStorage.getItem("token")

            }

        })
    },

 

新增学生请假的数据

新增的组件

<template>
  <div>
    <el-button type="primary" @click="showDialog">新增请假</el-button>

    <el-dialog title="新增请假信息" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 请假理由 -->
        <el-form-item label="请假理由" prop="reason">
          <el-input type="text" v-model="ruleForm.reason"></el-input>
        </el-form-item>
        <!-- 请假的开始时间 -->
        <el-form-item label="请假的开始时间" prop="start">
          <el-date-picker v-model="ruleForm.start" type="datetime" placeholder="选择开始时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="请假的的结束时间" prop="end">
          <el-date-picker v-model="ruleForm.end" type="datetime" placeholder="选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="附件" prop="extend"></el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

新增请假的对应的数据

<script>
import leavesModel from "../model/leavesModel";
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        reason: "",
        start: "",
        end: "",
        extend: ""
      },
      rules: {
        reason: [
          { required: true, message: "请假理由不能为空", trigger: "blur" }
        ],
        start: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        end: [{ required: true, message: "结束时间不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        //表单验证成功 才进行数据请求  去连接接口
        if (valid) {
          let start = new Date(this.ruleForm.start);
          let end = new Date(this.ruleForm.end);
          if (end > start) {
            console.log("时间没有问题");
            let { data } = await leavesModel.add({
              start,
              end,
              reason: this.ruleForm.reason
            });
            if (data.code == 1) {
              this.$emit("additem", data.data[0]);
              this.resetForm();
            } else {
              alert(data.msg);
            }
            console.log(data);
          } else {
            alert("结束时间要比开始时间大");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    }
  }
};
</script>

新增请假的接口

 add: (data) => {
        return axios({
            method: "post",
            url: "/api/leaves/add",
            data,
            headers: {
                token: localStorage.getItem("token")
            }

        })



    }