Element Calendar日历使用案例

前言：公司项目有个功能需求是需要以日历的形式能直观查看这一天的数据是否被审查过

注：此程序采用springboot+vue+mybatis-plus设计

产品经理给的原型图如下：

功能点：

1. 日历样式
2. 数据接口
3. 数据绑定
4. 页面跳转

前端准备

作为前端菜鸡弱智，自己写样式肯定搞不定这样的于是查阅vue前端快速开发好兄弟Element，哈哈发现有个Calendar组件

<el-calendar>
  
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    p>
  template>
el-calendar>
<style>
  .is-selected {
    color: #1989FA;
  }
style>

(不得吐槽哈，element是的好用可是没有详细的案例虽然有api，但是要看懂实现还是有难度，对于像我这种前端白痴)

大麻烦前端样式搞定后，后端接口只需要通过接受你需要查询的月份来返回所在月份的数据即可

前端核心代码如下(仅供参考思路)

<template>
  <div class="app-container check-calendar">
    <cus-wraper full-height>
      <cus-title-card title="数据审核日历">
        <cus-filter-wraper>
          <el-date-picker v-model="month" type="month" :clearable="false" value-format="yyyy-MM" placeholder="请选择月份" />
        cus-filter-wraper>
        <el-calendar v-model="month">
          <template
            slot="dateCell"
            slot-scope="{date, data}"
          >
            <div class="data-container" :class="calcCurrentData(data) ? (calcCurrentData(data).approveCheckStatus === 0 ? 'un-approve': 'is-approve') : '' ">
              <p :class="{'not-current-month': data.type !== 'current-month'}">{{ data.day | filterCalendar }}p>
              <template v-if="calcCurrentData(data)">
                <span v-if="calcCurrentData(data).approveCheckStatus === 1" class="status">已审核span>
                <span v-else class="status">未审核span>
                <a @click="lookData(calcCurrentData(data))">查看数据a>
              template>
            div>
          template>
        el-calendar>
      cus-title-card>
    cus-wraper>
  div>
template>

export default {
data() {
  return {
      month: moment().format('YYYY-MM'),
      calendarData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(month) {
      approveCalendar({
        type: 1,
        date: month
      }).then(response => {
        this.calendarData = response.data
      })
    }
}

后端准备

后端得到参数，这里我设计的参数格式为{type: 1,date: month},month 格式为’YYYY-MM’因为要查月份日历数据，后端返回数据如下：

这里我们只需要字段approveCheckStatus的0或1来绑定已审核

页面跳转

通过路由跳转查看详细审核数据

lookData(data) {
      this.$router.push({ path: '/wam/data/data-approve/index', query: { date: data.dateData }})
    }

这里需要传递一个参数来告诉跳转页面需要查询的是哪一天的数据query: { date: data.dateData }

跳转页面index.vue中created()或者mounted()中来接受query,顺便格式一下日期

const queryDate = this.$route.query.date
    console.log(queryDate)
    if (queryDate) {
      this.listQuery.timeStart = moment(queryDate).format('YYYY-MM-DD HH:mm:ss')
      this.listQuery.timeEnd = moment(queryDate).format('YYYY-MM-DD HH:mm:ss')
    }
    this.getList()

最终便于可得到这样的效果：

---

每天向大佬学习一点点，当你觉得你自学能力很差，比如我，那就多多看看大佬的代码和大佬的博客，总会有收获~

欸，至少搬砖要会吧，不然怎么守门？