基于element日历组件实现签卡记录

本文实例为大家分享了基于element日历组件实现签卡记录的具体代码，供大家参考，具体内容如下

使用element日历组件为基础，实现可以查看每天签卡记录

<template>
? <div class="n-container">
? ? <div style="padding: 40px">
? ? ? <el-col :span="24">
? ? ? ? <div class="title">
? ? ? ? ? <div class="tpadding">我的考勤</div>
? ? ? ? ? <el-divider></el-divider>
? ? ? ? </div>
? ? ? </el-col>
? ? ? <el-col :span="24">
? ? ? ? <div class="block">
? ? ? ? ? <el-calendar v-model="recordTime" :first-day-of-week="7">
? ? ? ? ? ? <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
? ? ? ? ? ? <template slot="dateCell" slot-scope="{ date, data }">
? ? ? ? ? ? ? <!--自定义内容-->
? ? ? ? ? ? ? <div slot="reference" class="histyle" @click="getDateAtte(data)">
? ? ? ? ? ? ? ? <div class="calendar-day">
? ? ? ? ? ? ? ? ? <el-popover
? ? ? ? ? ? ? ? ? ? placement="left"
? ? ? ? ? ? ? ? ? ? visible-arrow="false"
? ? ? ? ? ? ? ? ? ? width="500"
? ? ? ? ? ? ? ? ? ? trigger="click"
? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <el-table :data="recordList">
? ? ? ? ? ? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? ? ? ? ? width="140"
? ? ? ? ? ? ? ? ? ? ? ? property="signState"
? ? ? ? ? ? ? ? ? ? ? ? label="状态类型"
? ? ? ? ? ? ? ? ? ? ? ></el-table-column> ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? ? ? ? ? width="140"
? ? ? ? ? ? ? ? ? ? ? ? property="signTime"
? ? ? ? ? ? ? ? ? ? ? ? label="实际签卡时间"
? ? ? ? ? ? ? ? ? ? ? ></el-table-column>
? ? ? ? ? ? ? ? ? ? ? <!-- <el-table-column
? ? ? ? ? ? ? ? ? ? ? ? width="120"
? ? ? ? ? ? ? ? ? ? ? ? property="checkintime"
? ? ? ? ? ? ? ? ? ? ? ? label="应签卡时间"
? ? ? ? ? ? ? ? ? ? ? ></el-table-column> -->
?
? ? ? ? ? ? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? property="attmachinename"
? ? ? ? ? ? ? ? ? ? ? ? label="考勤机名称"
? ? ? ? ? ? ? ? ? ? ? ></el-table-column>
? ? ? ? ? ? ? ? ? ? </el-table>
? ? ? ? ? ? ? ? ? ? <div slot="reference">
? ? ? ? ? ? ? ? ? ? ? {{ data.day.split("-").slice(2).join("-") }}
? ? ? ? ? ? ? ? ? ? ? <!-- <i class="el-icon-warning-outline is_waring"></i> -->
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? </el-popover>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </template>
? ? ? ? ? </el-calendar>
? ? ? ? </div>
? ? ? </el-col>
? ? </div>
? </div>
</template>
?
<script>
import { listRecord } from "@/api/self/attendance";
export default {
? data() {
? ? return {
? ? ? recordTime: this.selectofearmonth,
? ? ? nosignList: [],
? ? ? queryParams: {
? ? ? ? userId: this.userIdVal,
? ? ? ? signTime: this.dt,
? ? ? },
? ? ? recordList: [],
? ? };
? },
? props: ["selectofearmonth", "dt", "userIdVal"],
? created() {},
? watch: {
? ? selectofearmonth: {
? ? ? handler(newVal, oldVal) {
? ? ? ? this.recordTime = this.parseTime(newVal, "{y}-{m}");
? ? ? ? this.getDateAtte();
? ? ? },
? ? },
? },
? methods: {
? ? getDateAtte(data) {
? ? ? this.queryParams.signTime = data.day;
? ? ? if (
? ? ? ? this.queryParams.signTime == null ||
? ? ? ? this.queryParams.signTime == ""
? ? ? ) {
? ? ? ? return "时间不能为空";
? ? ? }
? ? ? if (this.queryParams.userId == null || this.queryParams.userId == "") {
? ? ? ? return "用户ID不能为空";
? ? ? }
? ? ? listRecord(this.queryParams).then((data) => {
? ? ? ? if (data.code != 200) {
? ? ? ? ? return;
? ? ? ? }
? ? ? ? this.recordList = data.rows;
? ? ? });
? ? },
? ? //处理请求回的数据，与日历数据相挂钩
? ? dealMyDate(v) {
? ? ? let len = this.saveMothData.length;
? ? ? let res = {};
? ? ? for (let i = 0; i < len; i++) {
? ? ? ? if (this.saveMothData[i].memoDate == v) {
? ? ? ? ? res.hasMemo = true;
? ? ? ? ? res.memoLevel = this.saveMothData[i].memoLevel;
? ? ? ? ? res.memoTime = this.saveMothData[i].memoTime;
? ? ? ? ? break;
? ? ? ? }
? ? ? }
? ? ? return res;
? ? },
? ? //点击日历上每一天更新备忘录列表
? ? updateMemo(data) {
? ? ? this.chooseDay = data.day;
? ? ? this.memorandumCurrentPage = 1;
? ? ? const param = {
? ? ? ? pageNum: this.memorandumCurrentPage,
? ? ? ? pageSize: this.memorandumPageSize,
? ? ? ? param: {
? ? ? ? ? day: data.day,
? ? ? ? ? emplId: this.emplId,
? ? ? ? },
? ? ? };
? ? ? this.queryMemoList(param);
? ? },
? ? //查询备忘录列表
? ? queryMemoList(data, flag) {
? ? ? var param;
? ? ? if (data) {
? ? ? ? //
? ? ? ? param = data;
? ? ? ? param.emplId = this.emplId;
? ? ? } else {
? ? ? ? //不传data的情况，有可能是初次加载或者不传month也不传day
? ? ? ? param = {
? ? ? ? ? param: {
? ? ? ? ? ? emplId: this.emplId,
? ? ? ? ? },
? ? ? ? ? pageNum: this.memorandumCurrentPage,
? ? ? ? ? pageSize: this.memorandumPageSize,
? ? ? ? };
? ? ? }
? ? },
? },
};
</script>
?
<style scope>
.n-container {
? padding: 0px;
? box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
? height: 500px;
? margin-bottom: 10px;
}
.title {
? font-size: 16px;
? font-weight: bold;
? text-align: left;
}
.tpadding {
? padding-top: 12px;
}
.is-selected {
? color: #2936f3;
? font-size: 17px;
? margin-top: 5px;
}
.histyle {
? height: 35px;
}
.el-calendar-table .el-calendar-day {
? height: 30px;
}
.is_waring {
? color: rgb(236, 134, 17);
}
.is_right {
? color: rgb(145, 176, 235);
}
</style>

结果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于基于element日历组件实现签卡记录的详细内容...