微信小程序 工作日歷 周計劃日報 修改等提報和狀態展示功能,支持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
英文地址,請注明出處:http://en.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…