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

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

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

功能点：

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

前端准备

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

<!-- 以下是官方给的上图例子代码 -->
<el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <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来绑定<span v-if="calcCurrentData(data).approveCheckStatus === 1" class="status">已审核</span>

页面跳转

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

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()

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

---

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

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