微信小程序 工作日历 周计划日报 修改等提报和状态展示功能,支持h5,Android ,ios,基于uniapp,适配vue2和vue3

Work-calendar

介绍 (底部附链接)

基于uni-calendar做的定制化开发,主要功能为工作日历展示和提报组件

​ 1.支持周计划日报状态展示且可配置

​ 2.支持农历展示配置,回到当日,月份切换

​ 3.日历,周报,日报等点击事件封装

​ 4.支持休假展示

在这里插入图片描述
在这里插入图片描述

使用说明

1.下载插件到工程中,并在业务代码中引入

import Calendar from '@/components/calendar-zhikuany/calendar.vue'

2.布局中引入插件,并配置所需要的展示信息

<template><view><calendar ref="calendar" :date="date" @monthSwitch="monthSwitch" @change="handleSelect"@weekPlanClick="weekPlanClick" @datePlanClick="datePlanClick" lunar :showDay="prop.showDay":showPlan="prop.showPlan" :showMonth="prop.showMonth" :needState="prop.needState" /></view>
</template>/*** Calendar 日历* @property {String} date 自定义当前时间,默认为今天* @property {String} text.size 文字大小* @property {String} text.color 文字颜色* @property {Boolean} lunar 显示农历* @property {Boolean} showPlan 展示周计划* @property {Boolean} showDay 展示日报* @property {String} startDate 日期选择范围-开始日期* @property {String} endDate 日期选择范围-结束日期* @property {Boolean} range 范围选择* @property {Boolean} showMonth 是否选择月份为背景* @property {Boolean} needState 周计划日报是否需要审核* @event {Function} change 日期改变,* @event {Function} monthSwitch 切换月份时触发*/

3.设置本月周报日报假期数据

	/*** 设置数据*/const setDate = (year : number, month : number) => {// 获取当月第一天和最后一天// const firstDay = new Date(year, month, 1);// const lastDay = new Date(year, month + 1, 0); // 下个月第0天 = 本月最后一天uni.showLoading({title: ''})//仿照调用接口 设置工作日历数据setTimeout(() => {uni.hideLoading()//测试周报和日报数据 为 9月12号date.value = '2025-09-12'calendar.value.setPlanList(planList)}, 1000)}

4.核心数据设置逻辑

 /*** 获取每周数据* @param {Object} dateData*/_getWeek(dateData) {const {year,month} = this.getDate(dateData)let firstDay = new Date(year, month - 1, 1).getDay()// 调整为周一作为第一天(0=周一,6=周日)let adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;let currentDay = new Date(year, month, 0).getDate()let dates = {lastMonthDays: this._getLastMonthDays(adjustedFirstDay, this.getDate(dateData)), // 上个月末尾几天currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数nextMonthDays: [], // 下个月开始几天weeks: []}let canlender = []const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)this.canlender = canlenderlet weekTemp = {}let weekplan = {} //每周的周计划// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天for (let i = 0; i < canlender.length; i++) {//获取本周的周计划数据if (i % 7 === 0) {//本周开始日期const weekBeginDate = canlender[i].fullDate// console.log('开始',weekBeginDate)//获取计划状态weekplan = {}for (let i = 0; i < this.planList.length; i++) {if (this.planList[i]) {const item = this.planList[i]// console.log(item.monday)if (item.beginDate == weekBeginDate) {weekplan = item// console.log('weekplan', weekplan)break}}}weekTemp[parseInt(i / 7)] = {weeks: new Array(7),planCode: weekplan.planCode,planId: weekplan.planId,attachIds: weekplan.attachIds,// fileUrl: weekplan.fileUrl,weekWorkPlan: weekplan.weekWorkPlan,workSummary: weekplan.workSummary,coordinateHelp: weekplan.coordinateHelp,dataState: this.isEmpty(weekplan.dataState) ? weekplan.dataState : 1,// dataState: weekplan.dataState //周计划 状态}}//每天的计划状态var dayPlan = {}switch (i % 7) {case 0: //周一// dayPlan.dayStatus = weekplan.mondayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.mondayStatus) ? weekplan.mondayStatus : 2dayPlan.isHoliday = weekplan.mondayIsHolidaybreak;case 1:// dayPlan.dayStatus = weekplan.tuesdayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.tuesdayStatus) ? weekplan.tuesdayStatus : 2dayPlan.isHoliday = weekplan.tuesdayIsHolidaybreak;case 2:// dayPlan.dayStatus = weekplan.wednesdayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.wednesdayStatus) ? weekplan.wednesdayStatus : 2dayPlan.isHoliday = weekplan.wednesdayIsHolidaybreak;case 3:// dayPlan.dayStatus = weekplan.thursdayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.thursdayStatus) ? weekplan.thursdayStatus : 2dayPlan.isHoliday = weekplan.thursdayIsHolidaybreak;case 4:// dayPlan.dayStatus = weekplan.fridayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.fridayStatus) ? weekplan.fridayStatus : 2dayPlan.isHoliday = weekplan.fridayIsHolidaybreak;case 5:// dayPlan.dayStatus = weekplan.saturdayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.saturdayStatus) ? weekplan.saturdayStatus : 2dayPlan.isHoliday = weekplan.saturdayIsHolidaybreak;case 6:// dayPlan.dayStatus = weekplan.sundayStatusdayPlan.dayStatus = this.isEmptyWithZero(weekplan.sundayStatus) ? weekplan.sundayStatus : 2dayPlan.isHoliday = weekplan.sundayIsHolidaybreak;}// console.log('swich',dayPlan)weekTemp[parseInt(i / 7)].weeks[i % 7] = {...canlender[i],...dayPlan}}this.weeks = weekTempconsole.log(this.weeks)}

完整示例

<template><view><calendar ref="calendar" :date="date" @monthSwitch="monthSwitch" @change="handleSelect"@weekPlanClick="weekPlanClick" @datePlanClick="datePlanClick" lunar :showDay="prop.showDay":showPlan="prop.showPlan" :showMonth="prop.showMonth" :needState="prop.needState" /></view>
</template><script setup lang="ts">import { ref, onMounted } from 'vue'import { onLoad, onShow } from '@dcloudio/uni-app'import { planList } from './data.js'import Calendar from '@/components/calendar-zhikuany/calendar.vue'/*** 本组件是基于uni-calendar(V1.5.5)之上增加了一些个性化功能点,如打卡日历,日历日程,日历排班,打卡排班等功能* 小点的位置 point.position [1, 2, 3, 4, 5, 6] 红点位置,[左上角, 右上角, 右下角, 左下角, 上中间, 下中间]* 小点的颜色  point.color 如 #000 #fff* 日期数字下方的自定义文本  info* text.size 自定义文本字体大小 如 12 14 16* text.color 自定义文本颜色 如 #000 #fff*/const calendar = ref({})const date = ref('')const query = defineProps<{ prop : string }>()const prop : any = ref({})//页面加载onLoad(() => {//解析配置参数prop.value = JSON.parse(query.prop)})onShow(() => {initDate()})//获取当月所有日期的数组 初始化数据const initDate = () => {const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // 月份从 0 开始(0=1月)setDate(year, month);}/*** 设置数据*/const setDate = (year : number, month : number) => {// 获取当月第一天和最后一天// const firstDay = new Date(year, month, 1);// const lastDay = new Date(year, month + 1, 0); // 下个月第0天 = 本月最后一天uni.showLoading({title: ''})//仿照调用接口 设置工作日历数据setTimeout(() => {uni.hideLoading()//测试周报和日报数据 为 9月12号date.value = '2025-09-12'calendar.value.setPlanList(planList)}, 1000)}/*** 选中*/const handleSelect = (e : any) => {console.log(e)if (e.extraInfo.date) {// do something}}//周计划点击const weekPlanClick = (item : any) => {console.log(item)if (item.dataState == 1 || item.dataState == 0) {//审核中或者审核通过uni.showToast({title: JSON.stringify(item),icon: 'none',duration: 2000})} else {if (!checkWeekRange(item.beginDate, item.endDate)) {uni.showToast({title: '只能提交当本周或下周的周计划',icon: 'none'})return}uni.showToast({title: '跳转周计划填报页面',icon: 'none',duration: 2000})}}/*** 判断给定的日期范围是否属于本周或下周* @param {string} beginDate - 开始日期,格式为 "YYYY-MM-DD"* @param {string} endDate - 结束日期,格式为 "YYYY-MM-DD"* @returns {string} - 返回 "本周"、"下周" 或 "不在本周或下周"*/function checkWeekRange(beginDate : any, endDate : any) : Boolean {// 将字符串日期转换为Date对象const begin = new Date(beginDate);const end = new Date(endDate);begin.setHours(0, 0, 0, 0)end.setHours(0, 0, 0, 0)console.log(begin + '  ' + end)// 获取当前日期const today = new Date();today.setHours(0, 0, 0, 0); // 清除时间部分// 计算当前周的起始和结束日期(周一至周日)const currentWeekStart = new Date(today);const dayOfWeek = today.getDay(); // 0是周日,1是周一,...,6是周六const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // 调整为周一作为一周的第一天currentWeekStart.setDate(today.getDate() + diffToMonday);currentWeekStart.setHours(0, 0, 0, 0);const currentWeekEnd = new Date(currentWeekStart);currentWeekEnd.setDate(currentWeekStart.getDate() + 6);// 计算下周的起始和结束日期const nextWeekStart = new Date(currentWeekStart);nextWeekStart.setDate(currentWeekStart.getDate() + 7);const nextWeekEnd = new Date(currentWeekEnd);nextWeekEnd.setDate(currentWeekEnd.getDate() + 7);console.log(currentWeekStart + '  ' + currentWeekEnd)// 检查日期范围是否完全在本周内const isCurrentWeek = begin >= currentWeekStart && end <= currentWeekEnd;console.log(nextWeekStart + '  ' + nextWeekEnd)// 检查日期范围是否完全在下周内const isNextWeek = begin >= nextWeekStart && end <= nextWeekEnd;// 检查日期范围是否跨越本周和下周(部分在本周,部分在下周)const isOverlapping = (begin <= currentWeekEnd && end >= nextWeekStart);if (isCurrentWeek) {console.log('本周')return true;} else if (isNextWeek || isOverlapping) {console.log('下周')return true;} else {console.log('非本周或下周')return false;}}//是否属于当前周const isInRange = (bengin : any, end : any) => {const benginDate = new Date(bengin)const endDate = new Date(end)const currentDate = new Date()return currentDate >= benginDate && currentDate <= endDate}//日报点击const datePlanClick = (item : any) => {console.log(item)//展示周计划的时候需要校验周计划状态if (prop.showPlan) {if (item.dataState == null || item.dataState == 'undefined') {uni.showToast({title: '请先提交周计划',icon: 'none'})return}if (item.dataState == 0) {uni.showToast({title: '周计划审核中...',icon: 'none'})return}}//审批中 已通过if (item.dayStatus == 1 || item.dayStatus == 2) {uni.showToast({title: '跳转日报详情页面',icon: 'none',duration: 2000})} else {//未提交或者驳回if (!isDateInCurrentWeek(item.fullDate)) {uni.showToast({title: '只能提交本周内的日报',icon: 'none'})return}uni.showToast({title: '跳转日报填写页面',icon: 'none',duration: 2000})}}/*** 判断某个日期是否属于本周* @param {Date|string} targetDate - 目标日期(Date 对象或 "YYYY-MM-DD" 字符串)* @returns {boolean} - 是否属于本周*/function isDateInCurrentWeek(targetDate : any) : Boolean {// 如果传入的是字符串,转换为 Date 对象const date = typeof targetDate === 'string' ? new Date(targetDate) : new Date(targetDate);// 获取当前日期const today = new Date();// 计算本周一的日期(以周一作为一周的第一天)const currentWeekMonday = new Date(today);currentWeekMonday.setDate(today.getDate() - today.getDay() + 1); // getDay() 周日是 0,周一是 1,...,周六是 6currentWeekMonday.setHours(0, 0, 0, 0); // 清除时间部分,确保比较的是日期// 计算本周日的日期const currentWeekSunday = new Date(currentWeekMonday);currentWeekSunday.setDate(currentWeekMonday.getDate() + 6);currentWeekSunday.setHours(23, 59, 59, 999); // 设置为周日最后一刻// 判断目标日期是否在本周范围内return date >= currentWeekMonday && date <= currentWeekSunday;}//月份切换const monthSwitch = (e : any) => {console.log(e)setDate(e.year, e.month)}//日期转字符串格式const dateToStr = (date : any) => {var year = date.getFullYear() //年var month = date.getMonth() //月var day = date.getDate() //日var hours = date.getHours() //时var min = date.getMinutes() //分var second = date.getSeconds() //秒return year + "-" +((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +(day > 9 ? day : ("0" + day)) + " " +(hours > 9 ? hours : ("0" + hours)) + ":" +(min > 9 ? min : ("0" + min))}//字符串转日期const strToDate = (str : string) => {var date = new Date(str)return date.getTime()}
</script><style></style>
周计划日报数据示例

​ 含用户信息 ,周计划信息和状态,日报信息和状态,是否休假

const planList = [{//计划编码和id"planId": 58,"planCode": "1015297758478274563",//本周开始 截止时间"beginDate": "2025-09-08","endDate": "2025-09-14","planPeriod": "2025-09-08~2025-09-14",//用户信息"userCode": "1009761934881456147","username": "员工001","departCode": "951784785749401608","departName": "xxx总公司",//周一到周日状态信息"monday": "2025-09-08","mondayStatus": 0,"tuesday": "2025-09-09","tuesdayStatus": 1,"wednesday": "2025-09-10","wednesdayStatus": 1,"thursday": "2025-09-11","thursdayStatus": 0,"friday": "2025-09-12","fridayStatus": 0,"saturday": "2025-09-13","saturdayStatus": 0,"sunday": "2025-09-14","sundayStatus": 0,//"weekWorkPlan": "工作计划","workSummary": '跟最后工作总结',"coordinateHelp": "需要协调需帮助",//附件列表 字符串 逗号分隔"attachIds": "",//创建更新时间"gmtCreate": "2025-09-03 08:27:25","gmtModified": "2025-09-03 08:27:25",//周计划状态 "dataState": 0,//是否请假 周一到周五"mondayIsHoliday": null,"tuesdayIsHoliday": 1,"wednesdayIsHoliday": 0,"thursdayIsHoliday": null,"fridayIsHoliday": null,"saturdayIsHoliday": null,"sundayIsHoliday": null
}]

uniapp市场连接 工作日历

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/97980.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/97980.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openharmony 鸿蒙 下 利用蓝牙API(a2dp模块-高级音频,ble模块-低功耗蓝牙等)完成对蓝牙音响的控制(蓝牙广播)

1.首先是登录页面&#xff08;利用webapi 和本地数据存储完成登陆操作&#xff09; 2.添加设备&#xff08;利用ble.startBLEScan 和 ble.on("BLEDeviceFind", onReceiveEvent);完成蓝牙扫描与显示&#xff09; 3.蓝牙ble连接&#xff08;利用ble.createGattClientDe…

17、逻辑回归与分类评估 - 从连续到离散的智能判断

学习目标:理解分类问题的本质和评估方法,掌握逻辑回归的数学原理和概率解释,学会二分类和多分类问题的处理方法,熟练使用分类评估指标,理解过拟合和正则化的基本概念。 > 从第16章到第17章:从预测数值到判断类别 在第16章中,我们学习了线性回归,解决的是预测连续数…

自动化脚本的核心引擎

自动化脚本作为现代软件开发与运维的重要工具&#xff0c;其核心引擎承担着解析指令、调度任务和执行逻辑的关键职能。这种引擎本质上是一个轻量级的运行时环境&#xff0c;通过预定义的规则集将人类可读的脚本语言转化为机器可执行的原子操作。在持续集成/持续交付&#xff08…

【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化

在前几篇文章中&#xff0c;我们学习了 Vuex 的内部机制以及 Vue Router 的工作原理。本篇将深入探讨 Vue2 性能优化&#xff0c;帮助你掌握在开发中提升 Vue 应用性能的方法和技巧。 目录 性能优化的意义响应式系统优化虚拟 DOM 与渲染优化组件懒加载与按需渲染事件与计算属性…

【题解】B2600 【深基1.例2】简单的分苹果

题目描述 这里有 101010 个苹果&#xff0c;小 A 拿走了 222 个&#xff0c;Uim 拿走了 444 个&#xff0c;八尾勇拿走剩下的所有的苹果。我们想知道&#xff1a; 小A 和 Uim 两个人一共拿走多少苹果&#xff1f;八尾勇能拿走多少苹果&#xff1f; 现在需要编写一个程序&#x…

中小企业 4G 专网部署:性能与成本的最佳平衡

在数字化转型的浪潮中&#xff0c;中小企业同样需要安全、稳定和高效的通信网络。然而&#xff0c;传统专网的高成本和复杂部署往往成为阻碍。IPLOOK 提供的4G轻量级核心网与专网解决方案&#xff0c;正是帮助中小企业在性能与成本之间找到最佳平衡的关键。 中小企业的网络挑…

LeetCode每日一题,20250914

元音拼写检查器 思路 精确匹配 用 HashSet 保存原始单词&#xff0c;查询时直接判断是否存在。 大小写忽略匹配 用 HashMap<String, String> 保存 小写单词 -> 第一次出现的原始单词。用 putIfAbsent&#xff0c;确保只记录第一次出现的单词。 元音模糊匹配 把单词…

i2s_record_play

这章主要讲述i2s 1&#xff1a;环境及配件 esp32c3 esp32s3 idf5.4.1 INMP441 MAX98357A 都使用dma 2&#xff1a;eps32c3 测试 只有1个i2s 只能一边录 完 再播放 &#xff0c;内存太小&#xff0c;这里用 flash 存audio里 只说能 录音 能播放 &#xff0c;效果不好&#xff0…

Spring Boot 3 + EasyExcel 文件导入导出实现

SpringBoot集成EasyExcel 3.x&#xff1a;高效实现Excel数据的优雅导入与导出 在现代企业应用中&#xff0c;Excel作为数据交换的重要工具&#xff0c;几乎无处不在。如何高效且优雅地实现Excel数据的导入与导出&#xff0c;是每个开发者都需要面对的问题。EasyExcel是阿里巴巴…

Ruby编程实践:20个实用练习

1、编写一个程序,计算一年有多少小时。 以下是两种实现方式的代码: 方式一: puts 24*365方式二: puts 24*365 puts "(or #{24*366} on a leap year)"2、编写一个程序,计算十年中有多少分钟。 以下两种实现方式: 简单计算(未考虑闰年数量差异): ru…

逻辑回归(二):从原理到实战 - 训练、评估与应用指南

引言&#xff1a; 上期我们讲了什么是逻辑回归&#xff0c;了解了它如何利用Sigmoid函数将线性回归的输出转化为概率&#xff0c;并通过最大似然估计来寻找最佳参数。今天&#xff0c;我们将继续这段旅程&#xff0c;学习如何训练这个 模型、如何评估它的表现&#xff0c;以及如…

9.8C++作业

思维导图#include <iostream> #include <vector> #include <fstream> using namespace std;class Stu {friend ofstream &operator<<(ofstream &ofs,const Stu &stu); private:string name;string id;int age;double score; public:Stu(){…

Linux内存管理章节十六:非均匀的内存访问:深入Linux NUMA架构内存管理

引言 在传统的SMP&#xff08;对称多处理&#xff09;系统中&#xff0c;所有CPU核心通过一条共享总线访问同一块内存&#xff0c;所有内存访问延迟是均匀的&#xff08;UMA&#xff09;。然而&#xff0c;随着CPU核心数量的增加&#xff0c;共享总线成为了巨大的性能和 scalab…

【论文翻译】Seg-Zero: Reasoning-Chain Guided Segmentation via Cognitive Reinforcement

0. 摘要Traditional methods for reasoning segmentation rely on supervised fine-tuning with categorical labels and simple descriptions, limiting its out-of-domain generalization and lacking explicit reasoning processes. To address these limitations, we propo…

Playwright MCP浏览器自动化教程

你是否曾厌倦在编程软件和浏览器之间反复切换&#xff0c;只为了检查AI生成的代码能否正常运行&#xff1f;现在&#xff0c;有了Playwright MCP&#xff08;Model Context Protocol&#xff09;&#xff0c;你可以直接让AI自己操作浏览器&#xff0c;查看自己写的代码运行效果…

矩阵中遍历某个点周围的九个点

又是学习新知识的一天,以下为Java版本部分关键代码int[] neighbors {0, 1, -1};int rows board.length;int cols board[0].length;int[][] copyBoard new int[rows][cols];for (int row 0; row < rows; row) {for (int col 0; col < cols; col) {int liveNeighbors…

单例模式:只有一个对象

目录 什么是单例模式 能解决什么问题 使用场景 如何实现 __new__ 方法&#xff1a;经典又直接 装饰器&#xff1a;不改类本身&#xff0c;也能单例 模块本身就是单例 注意事项 总结 你有没有过这样的困扰&#xff1a; “为什么我明明只创建了一次数据库连接&#xff0…

AI大模型学习(6)Yolo V8神经网络的基础应用

Yolo V8神经网络的基础应用2024-2025年最火的目标检测神器&#xff0c;一篇文章让你彻底搞懂&#xff01;&#x1f929;大家好呀&#xff01;今天我们要聊一聊计算机视觉领域的「明星模型」——YOLO神经网络&#xff01;&#x1f3af; 如果你对「目标检测」这个词还比较陌生&am…

C++:imagehlp库

imagehlp库1. 简介2. 主要函数与用途2.1PE 文件解析相关2.2 符号处理相关2.3 崩溃转储相关2.4 版本资源相关3. 使用示例3.1 解析内存地址对应的函数名和行号3.2 创建目录使用示例1. 简介 imagehlp 是 Windows 系统提供的一个图像处理与调试辅助 API 库&#xff08;Image Helpe…

如何在Anaconda中配置你的CUDA Pytorch cuNN环境(2025最新教程)

目录 一、简介 二、下载CUDA 三、下载Pytorch-GPU版本 四、下载CUDNN 五、总结 六、测试代码 一、简介 啥是Anaconda?啥是CUDA?啥是CUDNN&#xff1f;它们和Pytorch、GPU之间有啥关系? 怎么通俗解释它们三者的用途和关系&#xff1f; 1.GPU(图形处理单元&#xff09…