kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端功能基本完成

Browse Source
This commit is contained in:
kevin
2026-04-02 16:57:24 +08:00
parent 251cd64e23
commit 5e2b326838
5 changed files with 176 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue
+84 -60
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, defineProps,onMounted } from "vue";
import { ref, watch, defineProps, onMounted } from "vue";
// FullCalendar Vue 3 组件
import FullCalendar from "@fullcalendar/vue3";
@@ -8,17 +8,22 @@ import dayGridPlugin from "@fullcalendar/daygrid";
// FullCalendar 插件：交互功能（拖拽、点击等）
import interactionPlugin from "@fullcalendar/interaction";
import { useDateUtils } from "@/composables/useDateUtils";
const DateUtils = useDateUtils();
// FullCalendar 组件的引用，用于调用日历 API
const calendarRef = ref(null);
// 用于跟踪上次点击event时间的响应式变量
const lastEventClickTime = ref(0);
var firstClickOnDate=false;
var dataStartTemp=""
var firstClickOnDate = false;
var dataStartTemp = "";
// 国际化 hook
import { useI18n } from "vue-i18n";
import Component from "vue-flatpickr-component";
// 获取国际化翻译函数和当前语言
const { t, locale } = useI18n();
@@ -46,7 +51,6 @@ const props = defineProps({
required: false,
default: "",
},
});
const eventData = ref({
@@ -60,23 +64,41 @@ const eventData = ref({
});
function passing_date_characters(startDate, endDate) {
//需要先判断大小确定哪个是开始日期哪个是结束日期
var tempStart = DateUtils.strToDate(startDate);
var tempEnd = DateUtils.strToDate(endDate);
if (tempStart > tempEnd) {
//反了
eventData.value.start = endDate;
//end 需要加一天
eventData.value.end = DateUtils.dateToStr(
DateUtils.toCalendarEnd(startDate),
);
} else {
eventData.value.start = startDate;
//end 需要加一天
eventData.value.end = DateUtils.dateToStr(DateUtils.toCalendarEnd(endDate));
}
}
function passing_date_characters_Select(startDate, endDate) {
//滑动选择日期的参数来自FullCalendar，不需要加一天也不需要判断大小，而且直接就是字符串类型
eventData.value.start = startDate;
eventData.value.end = endDate;
}
// 监听props变化，更新本地eventData
watch(
() => props.startDate,
() => props.start,
(newVal) => {
eventData.value.startDate = newVal;
eventData.value.start = newVal;
},
);
watch(
() => props.endDate,
() => props.end,
(newVal) => {
eventData.value.endDate = newVal;
eventData.value.end = newVal;
},
);
@@ -94,7 +116,6 @@ watch(
},
);
// 定义事件发射：通知父组件日期变化
const emit = defineEmits(["update:startDate", "update:endDate", "clearDates"]);
@@ -110,21 +131,19 @@ function clearDates() {
// 监听本地eventData变化，同步更新到父组件
watch(
() => eventData.value.startDate,
() => eventData.value.start,
(newVal) => {
emit("update:startDate", newVal);
},
);
watch(
() => eventData.value.endDate,
() => eventData.value.end,
(newVal) => {
emit("update:endDate", newVal);
},
);
// 日历配置选项
const calendarOptions = ref({
// 日历高度：占满可用空间
@@ -229,71 +248,74 @@ const calendarOptions = ref({
// 日期点击事件处理函数
dateClick(info) {
console.log(info);
if(firstClickOnDate)
{
firstClickOnDate=false;
passing_date_characters(dataStartTemp,info.dateStr);
}else{
firstClickOnDate=true;
dataStartTemp=info.dateStr;
}
//console.log(info);
if (firstClickOnDate) {
firstClickOnDate = false;
passing_date_characters(dataStartTemp, info.dateStr);
} else {
firstClickOnDate = true;
dataStartTemp = info.dateStr;
}
},
//选择日期
select(info) {
if (info.end - info.start > 86400000) {
//选择了多日
console.log("选择了多日:", info);
//console.log("选择了多日:", info);
passing_date_characters_Select(info.startStr, info.endStr);
} else {
//选择单日
console.log("选择单日:", info);
//console.log("选择单日:", info);
}
},
//事件event点击处理函数
eventClick(info) {
const nowTime = new Date().getTime();
const timeDifference = nowTime - lastEventClickTime.value;
// eventClick(info) {
// const nowTime = new Date().getTime();
// const timeDifference = nowTime - lastEventClickTime.value;
// 判断是否为双击（400ms 内连续点击）
if (timeDifference < 400 && timeDifference > 0) {
console.log("双击事件:", info);
// 双击功能：快速添加事件
} else {
console.log("单击事件:", info);
// 单击功能：显示日期详情
}
// 更新上次点击时间
lastEventClickTime.value = nowTime;
},
// // 判断是否为双击（400ms 内连续点击）
// if (timeDifference < 400 && timeDifference > 0) {
// console.log("双击事件:", info);
// // 双击功能：快速添加事件
// } else {
// console.log("单击事件:", info);
// // 单击功能：显示日期详情
// }
// // 更新上次点击时间
// lastEventClickTime.value = nowTime;
// },
//event拖动处理
eventDrop(info) {},
eventDrop(info) {
//console.log(info);
passing_date_characters_Select(info.event.startStr, info.event.endStr);
},
});
function switchShow(){
if(isShow.value)
{
isShow.value=false;
}else{
isShow.value=true;
function switchShow() {
if (isShow.value) {
isShow.value = false;
} else {
isShow.value = true;
}
}
onMounted(()=>{
function splicingDataWeek(data) {
return data + " " + DateUtils.getI18nWeekday(data);
}
onMounted(() => {
calendarOptions.value.events.push(eventData.value);
});
</script>
<template>
<div class="mb-4">
<div
@click="switchShow"
class="flex items-center gap-2 border border-gray-200 rounded-xl px-3 py-1.5 shadow-sm bg-white mb-4"
@click="switchShow"
class="flex items-center gap-2 border border-gray-200 rounded-xl px-3 py-1.5 shadow-sm bg-white mb-4 sticky top-0 z-50"
>
<!-- 日历图标 -->
<div class="date-icon">
@@ -329,19 +351,21 @@ onMounted(()=>{
<!-- 日期显示 -->
<div class="date-display flex items-center justify-between gap-2 flex-1">
<div class="start-date text-gray-700 font-medium">
{{ eventData.start }}
{{ splicingDataWeek(eventData.start) }}
</div>
<div class="text-gray-500">{{ t("schedule.to") }}</div>
<div class="end-date text-gray-700 font-medium">
{{ eventData.end }}
{{
splicingDataWeek(
eventData.start === eventData.end
? eventData.end
: DateUtils.toRealEnd(eventData.end),
)
}}
</div>
</div>
</div>
<FullCalendar
v-if="isShow"
ref="calendarRef"
:options="calendarOptions"
/>
<FullCalendar v-if="isShow" ref="calendarRef" :options="calendarOptions" />
</div>
</template>
frontend/ops_vue_js/src/composables/useDateUtils.js
+65
View File
@@ -0,0 +1,65 @@
// composables/useDateUtils.js
import { useI18n } from "vue-i18n";
/**
* 日期字符串 转 日期对象 (纯日期，无时间)
* @param {string} dateStr - 格式：YYYY-MM-DD 例如 "2026-04-02"
* @returns {Date} 日期对象（时间自动设为 00:00:00）
*/
export function strToDate(dateStr) {
return new Date(dateStr);
}
/**
* 日期对象 转回 日期字符串 (YYYY-MM-DD)
* @param {Date} date - 日期对象
* @returns {string} 格式：YYYY-MM-DD
*/
export function dateToStr(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
// 封装成组合式函数，方便在组件中按需引入
export const useDateUtils = () => {
const { t } = useI18n();
return {
strToDate,
dateToStr,
// 可以直接把 FullCalendar 常用的日期处理也封装进来
/**
* FullCalendar 显示用：给结束日期 +1 天（包含当天）
* @param {string | Date} endDate - 真实结束日期
* @returns {Date} FullCalendar 可用的 end 日期
*/
toCalendarEnd: (endDate) => {
const date =
typeof endDate === "string" ? strToDate(endDate) : new Date(endDate);
date.setDate(date.getDate() + 1);
return date;
},
/**
* 提交数据库用：给 FullCalendar end 日期 -1 天（还原真实结束日）
* @param {Date} calendarEnd - FullCalendar 返回的 end 日期
* @returns {string} 可存库的 YYYY-MM-DD 字符串
*/
toRealEnd: (calendarEnd) => {
const date = new Date(calendarEnd);
date.setDate(date.getDate() - 1);
return dateToStr(date);
},
/**
* 获取日期是星期几
* @param {string | Date} date - YYYY-MM-DD 或 Date 对象
* @returns {string} 星期一、星期二...星期日
*/
getI18nWeekday(date) {
const d = typeof date === "string" ? strToDate(date) : new Date(date);
const weekKeys = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
const key = weekKeys[d.getDay()];
return t(`week.${key}`); // 自动切换中英文
},
};
};
frontend/ops_vue_js/src/i18n/en.json
+9
View File
@@ -1,4 +1,13 @@
{
"week": {
"sun": "Sunday",
"mon": "Monday",
"tue": "Tuesday",
"wed": "Wednesday",
"thu": "Thursday",
"fri": "Friday",
"sat": "Saturday"
},
"errorpage": {
"404_title": "404 Resource Not Found",
"404_msg_title": "Oops… You just found an error page",
frontend/ops_vue_js/src/i18n/zh-CN.json
+9
View File
@@ -1,4 +1,13 @@
{
"week": {
"sun": "星期日",
"mon": "星期一",
"tue": "星期二",
"wed": "星期三",
"thu": "星期四",
"fri": "星期五",
"sat": "星期六"
},
"errorpage": {
"404_title": "404 资源未找到",
"404_msg_title": "抱歉…您刚刚发现了一个错误页面",
frontend/ops_vue_js/src/views/scheduleView.vue
+9 -8
View File
@@ -181,7 +181,7 @@ const calendarOptions = ref({
handleDoubleClick(info);
} else {
console.log("单击日期:", info.dateStr);
// 单击功能：显示日期详情
// 单击功能：
handleSingleClick(info);
}
@@ -194,9 +194,10 @@ const calendarOptions = ref({
if (info.end - info.start > 86400000) {
//选择了多日
console.log("选择了多日:", info);
openEventModal(info.startStr,info.endStr);
} else {
//选择单日
console.log("选择单日:", info);
//选择单日 无功能
//console.log("选择单日:", info);
}
},
@@ -222,11 +223,11 @@ const calendarOptions = ref({
});
// 打开模态框
const openEventModal = (dateStr) => {
const openEventModal = (dateStr,dataEnd) => {
eventData.value = {
title: "",
startDate: dateStr,
endDate: dateStr,
endDate: dataEnd,
color: "#066FD1",
};
@@ -240,7 +241,7 @@ const closeEventModal = () => {
// 处理双击事件：打开模态框添加事件
const handleDoubleClick = (info) => {
openEventModal(info.dateStr);
openEventModal(info.dateStr,info.dateStr);
};
// 处理单机事件：显示日期详情
@@ -420,8 +421,8 @@ onMounted(() => {
<div class="modal-body p-4 flex-1 overflow-y-auto">
<!-- 日期选择区域 -->
<DatatimePickerForFullCalendar
:start-date="eventData.startDate"
:end-date="eventData.endDate"
v-model:startDate="eventData.startDate"
v-model:endDate="eventData.endDate"
:color="eventData.color"
:title="eventData.title"
/>