ElementPlus徽章组件：展示日期面板每天未完成的待办数量

目录

一.el-badge组件、日期选择器

1.核心前端代码

2.el-badge徽章组件

3.el-date-picker日期选择器

4.核心js代码

二.核心SQL

三.效果展示

---

技术栈：

①前端VUE

②前端组件库ElementPlus

③后端Springboot

④数据库Mysql

一.el-badge组件、日期选择器

1.核心前端代码

<el-date-picker
    v-model="todoDate"
    type="date"
    placeholder="您要查看哪一天的待办？"
    style="width: 200px;"
    @change="changeDay"
    @panel-change="changeMonth"
    clearable
>
    <!-- 自定义插槽 -->
    <template #default="{date}">
        <el-badge 
        :value="unfinishedTask.find(item => item.myDay === (date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')))?.unfishedCount || 0"    
        class="item" 
        :offset="[8, 5]" 
        :is-dot="false" 
        :hidden="!unfinishedTask.some(item => item.myDay === (date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')))"
        >
            <!-- <span>{{ date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0') }}</span> -->
            <span>{{date.getDate()}}</span>
        </el-badge>
    </template>
</el-date-picker>

2.el-badge徽章组件

value：小红点的数字

offset：小红点的偏移量（可以进行位置微调）

is-dot：为true就只展示小红点；为false可以额外展示数字

hidden：为true就隐藏红点

3.el-date-picker日期选择器

主要理解以下两点：

①自定义插槽<template #default></template>，只有使用这个插槽时，才能给日期面板的每日单元格添加徽章组件，不然你这个el-badge徽章都不知道加在哪里；说白了这个插槽，就代表了每一天的那个单元格。

②@change事件，在日期被切换时触发（比如从2026-01-01切到了2026-01-02号），由于日期切换时，可能直接跨月份，所以需要查询最新月份的每日未完成待办数量；

③@panel-change事件，在日期面板被切换时触发（比如从2025的12月，切换到了2026的1月），我们在这个方法中，查询当前月的每日未完成待办数;

4.核心js代码

//变量11：当前日期面板所处的月份（举例：2026-01）,初始值就是今天所处的年月
const panelMonth = ref(new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0'));
//变量12：渲染日期选择器的小红点的对象
const unfinishedTask = ref([]);


//方法14:查询当前月份每天未完成的待办数量
const queryUnfinishedCount = async()=>{
    //1.构建入参
    const req = {
        userId:user.id,
        time:panelMonth.value
    }
    //2.发送请求
    const res = await getUnFinishedCount(req);
    unfinishedTask.value = res.data;
    //3.预览响应结果
    //alert(panelMonth.value)
    //alert(JSON.stringify(unfinishedTask.value));

}
queryUnfinishedCount();

//方法15：切换月份时（比如从2025年11月切到了2025年12月），要重新查询12月的每天未完成待办数（因为旧数据是11月的每天未完成代办数）
//说白了就是：当日期面板发生变化时，触发的函数
const changeMonth = async(Date)=>{
    //1.更新当前日期面板月份panelMonth（变量11）
    const year = Date.getFullYear();
    const month = Date.getMonth() + 1; // getMonth()返回0-11，需要+1
    panelMonth.value = `${year}-${month.toString().padStart(2, '0')}`;
    //alert(panelMonth.value)
    //2.重新查询当前日期面板所有天的未完成待办数
    queryUnfinishedCount();
}

//方法16:日期变化时，触发的事件
const changeDay = (Date)=>{
    //1、更新待办列表
    doQuery();
    //2、更新日期面板未完成待办数
    //2-1更新日期面板月份
    const year = Date.getFullYear();
    const month = Date.getMonth() + 1; // getMonth()返回0-11，需要+1
    panelMonth.value = `${year}-${month.toString().padStart(2, '0')}`;
    //alert(panelMonth.value);
    //2-2重新查询当前日期面板所有天的未完成待办数
    queryUnfinishedCount();
}

二.核心SQL

@Select("SELECT " +
        "    DATE(create_time) AS myDay, " +
        "    COUNT(*) AS unfishedCount " +
        "FROM todo_task " +
        "WHERE " +
        "    user_id = #{userId} AND " +
        "    is_deleted = 0 AND " +
        "    status IN ('0', '1') AND " +
        "    DATE_FORMAT(create_time, '%Y-%m') IN ( " +
        "        DATE_FORMAT(STR_TO_DATE(CONCAT(#{time}, '-01'), '%Y-%m-%d') - INTERVAL 1 MONTH, '%Y-%m'), " +
        "        #{time}, " +
        "        DATE_FORMAT(STR_TO_DATE(CONCAT(#{time}, '-01'), '%Y-%m-%d') + INTERVAL 1 MONTH, '%Y-%m') " +
        "    ) " +
        "GROUP BY DATE(create_time)")
public List<Map> getUnFinishedCount(GetUnFinishedCountDto dto);

代码解读：

这个 SQL 查询用于统计用户在指定月份及其前后一个月 中，每天的未完成任务数量。

主要逻辑：

1、查询目标：

• 按日期分组，统计每个日期有多少个未完成的任务
• myDay：任务创建日期（仅日期部分）
• unfishedCount：该日期未完成的任务数量

2、筛选条件：

• user_id = #{userId}：指定用户

• is_deleted = 0：未删除的任务

• status IN ('0', '1')：状态为 '0' 或 '1'（代表未完成状态）

• 时间范围：#{time} 参数指定的月份以及前一个月和后一个月（可弥补前端日期面板不显示非当月未完成待办数的缺陷、提高查询效率）

3、时间范围逻辑：

• #{time} 参数格式应为 'YYYY-MM'（如：'2024-01'）

• 通过 CONCAT(#{time}, '-01') 补全为完整日期

• 使用 - INTERVAL 1 MONTH 和 + INTERVAL 1 MONTH 获取前后月份

• 最终查询 三个月 的数据（前月 + 本月 + 后月）

---

示例说明：

假设参数为 #{time} = '2024-01'，则查询的时间范围包括：

• 2023年12月（前一个月）

• 2024年1月（本月）

• 2024年2月（后一个月）

---

返回结果示例：

[
  {"myDay": "2023-12-15", "unfishedCount": 5},
  {"myDay": "2023-12-16", "unfishedCount": 3},
  {"myDay": "2024-01-10", "unfishedCount": 8},
  ...
]

三.效果展示

本篇文章只是给出了核心代码和思路，具体感兴趣可以自己动手试一试。

以上就是本篇文章的全部内容，喜欢的话可以留个免费的关注呦~~~