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

本文实例为大家分享了基于element日历组件实现签卡记录的具体代码，供大家参考，具体内容如下使用element日历组件为基础，实现可以查看每天签卡记录templatedivclass=n-co...

本文实例为大家分享了基于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="bl编程ock">
     <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)">
        &jslt;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>

结果如图：

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