【Vue3+Vite】实现周计划日程打卡表

最新推荐文章于 2025-10-20 15:16:44 发布

原创

最新推荐文章于 2025-10-20 15:16:44 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #vue

效果图：

请添加图片描述

实现功能：显示当前一周的任务表格、评定优先级、通过点击✔或者✘来进行任务打卡，显示已完成或者未完成，展示任务详情、任务时间…

script

<script setup>
import {
   
    onMounted, ref } from "vue";
import moment from "moment";
// 头部星期
const weeks = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
// 日程打卡内容
const timePeriodList = ref( [
      {
   
   
        startTime: "13:30:00",
        endTime: "15:30:00",
        cate: "读一篇英语文章，复习昨天的单词，新记50个单词",
        commnd_type: "学习任务",
        id: 22,
        missionTime: "2024-07-23",
        name: "英语作业",
        period: 1,
        priority: 1,
        isItCompleted: null,
      },
      {
   
   
        startTime: "9:10:00",
        endTime: "9:30:00",
        cate: "打扫卧室卫生，洗被子",
        commnd_type: "日常任务",
        id: 23,
        missionTime: "2024-07-25",
        name: "家务",
        period: 0,
        priority: 0,
        isItCompleted: null,
      }, 
      {
   
   
        startTime: "17:30:00",
        endTime: "18:30:00",
        cate: "热身运动、跑步三公里、俯卧撑100个",
        commnd_type: "日常任务",
        id: 24,
        missionTime: "2024-07-25",
        name: "锻炼",
        period: 0,
        priority: 0,
        isItCompleted: null,
      },
      {
   
   
        startTime: "13:30:00",
        endTime: "15:30:00",
        cate: "读一篇英语文章，复习昨天的单词，新记50个单词",
        commnd_type: "学习任务",
        id: 25,
        missionTime: "2024-07-26",
        name: "英语作业",
        period: 1,
        priority: 1,
        isItCompleted: null,
      }
    ],
);
// 时间
const systemDate = new Date();
// 月份
const months = ref([]);
const dealDate = (date) => {
   
   
  months.value = [""];
  getWeek(date);
  const curSystem = moment(new Date()).format

最低0.47元/天解锁文章