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

修复datapick的显示bug

Browse Source
This commit is contained in:
kevin
2026-04-01 23:26:30 +08:00
parent ca0d845a86
commit 0af8a57c64
3 changed files with 329 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ops_vue_js/src/components/datatimePickerForFullCalendar.vue
+41 -86
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import { ref, watch, defineProps } from "vue";
// FullCalendar Vue 3 组件
import FullCalendar from "@fullcalendar/vue3";
@@ -20,6 +20,8 @@ import { useI18n } from "vue-i18n";
// 获取国际化翻译函数和当前语言
const { t, locale } = useI18n();
const isShow = ref(false);
// 定义props：从父组件接收日期数据
const props = defineProps({
startDate: {
@@ -32,26 +34,13 @@ const props = defineProps({
required: false,
default: "",
},
title: {
type: String,
required: false,
default: "",
},
color: {
type: String,
required: false,
default: "",
},
});
const eventData = ref({
id: "0",
title: props.title,
start: props.startDate,
end: props.endDate,
backgroundColor: props.color,
allDay: true,
editable: true,
title: "",
startDate: props.startDate,
endDate: props.endDate,
color: "#066FD1", // 默认蓝色工作事件
});
// 监听props变化，更新本地eventData
@@ -69,20 +58,6 @@ watch(
},
);
watch(
() => props.title,
(newVal) => {
eventData.value.title = newVal;
},
);
watch(
() => props.color,
(newVal) => {
eventData.value.color = newVal;
},
);
// 定义事件发射：通知父组件日期变化
const emit = defineEmits(["update:startDate", "update:endDate", "clearDates"]);
@@ -111,20 +86,6 @@ watch(
},
);
watch(
() => eventData.value.title,
(newVal) => {
emit("update:title", newVal);
},
);
watch(
() => eventData.value.color,
(newVal) => {
emit("update:color", newVal);
},
);
function passing_date_characters(startDate, endDate) {
eventData.value.startDate = startDate;
eventData.value.endDate = endDate;
@@ -132,26 +93,10 @@ function passing_date_characters(startDate, endDate) {
// 日历配置选项
const calendarOptions = ref({
// 日历整体高度：固定在300px
height: "300px",
// 日历高度：占满可用空间
//height: "300px",
// 内容高度自适应
contentHeight: "auto",
// 固定头部高度
headerToolbar: {
// 左侧：年份和月份导航按钮
left: "prevYear,prev,today,next,nextYear",
// 中间：标题（显示当前月份/年份）
center: "title",
// 右侧：留空（可通过 customButtons 扩展）
right: "",
},
// 日期格子高度：300px高度下，5-6行，每行约45-55px
dayCellMinHeight: 40,
// 自动展开行高以均匀分布
expandRows: true,
// 不使用周号
weekNumbers: false,
//contentHeight: "auto",
// 使用当前应用语言
locale: locale.value,
// 注册使用的插件
@@ -167,7 +112,7 @@ const calendarOptions = ref({
// 允许拖拽调整事件
editable: true,
// 日期格中事件过多时显示"+N more"
//dayMaxEvents: true,
dayMaxEvents: true,
// 日期标题可点击跳转 //不跳转
//navLinks: true,
@@ -183,16 +128,20 @@ const calendarOptions = ref({
dayCellDidMount(info) {
// 周六周日显示灰色背景
if (info.date.getDay() === 0 || info.date.getDay() === 6) {
info.el.style.backgroundColor = "#f9fafb";
info.el.style.backgroundColor = "#f5f5f5";
}
// 添加边框样式
info.el.style.border = "1px solid #e5e7eb";
// 确保格子有最小高度并均匀分布
info.el.style.minHeight = "40px";
info.el.style.height = "100%";
info.el.style.display = "flex";
info.el.style.alignItems = "center";
info.el.style.justifyContent = "center";
},
// 顶部工具栏配置
headerToolbar: {
// 左侧：年份和月份导航按钮
left: "prevYear,prev,today,next,nextYear",
// 中间：标题（显示当前月份/年份）
center: "title",
// 右侧：留空（可通过 customButtons 扩展）
right: "",
},
// 自定义按钮：扩展工具栏功能
@@ -294,16 +243,20 @@ const calendarOptions = ref({
eventDrop(info) {},
});
onMounted(() => {
calendarOptions.value.events.push(eventData.value);
console.log(eventData.value);
});
function switchShow(){
if(isShow.value)
{
isShow.value=false;
}else{
isShow.value=true;
}
}
</script>
<template>
<!-- 容器：整体高度限制为300px，包含日历部分 -->
<div class="mb-4 h-[350px]">
<div class="mb-4">
<div
class="flex items-center gap-2 border border-gray-200 rounded-xl px-3 py-1.5 shadow-sm bg-white mb-2"
@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"
>
<!-- 日历图标 -->
<div class="date-icon">
@@ -339,17 +292,19 @@ 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 }}
{{ eventData.startDate }}
</div>
<div class="text-gray-500">{{ t("schedule.to") }}</div>
<div class="end-date text-gray-700 font-medium">
{{ eventData.end }}
{{ eventData.endDate }}
</div>
</div>
</div>
<!-- 日历区域：高度固定为300px，为每个格子设置合适高度 -->
<div class="calendar-container h-[300px] overflow-hidden rounded-lg border border-gray-200">
<FullCalendar ref="calendarRef" :options="calendarOptions" class="h-full w-full" />
</div>
<FullCalendar
v-if="isShow"
ref="calendarRef"
:options="calendarOptions"
/>
</div>
</template>
frontend/ops_vue_js/src/views/scheduleView.vue
+126 -125
View File
@@ -376,145 +376,146 @@ onMounted(() => {
<template>
<!-- 日历容器：占满视口高度减去顶部导航高度 -->
<div class="flex h-[calc(100vh-3.5rem)] w-full flex-col relative">
<div class="flex w-full flex-col relative">
<!-- 事件编辑模态框 -->
<div
v-if="showModal"
class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800/20"
>
<!-- 👇 最关键：给外层加最大高度 + 溢出隐藏 -->
<div class="modal-content bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[95vh] flex flex-col">
<!-- 模态框头部 -->
<div
v-if="showModal"
class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800/20"
class="modal-header border-b p-4 flex justify-between items-center flex-shrink-0"
>
<div class="modal-content bg-white rounded-lg shadow-lg w-full max-w-2xl">
<!-- 模态框头部 -->
<div
class="modal-header border-b p-4 flex justify-between items-center"
<h5 class="modal-title text-lg font-semibold">
{{ t("schedule.add_event") }}
</h5>
<button
@click="closeEventModal"
class="btn-close text-gray-500 hover:text-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-x"
>
<h5 class="modal-title text-lg font-semibold">
{{ t("schedule.add_event") }}
</h5>
<button
@click="closeEventModal"
class="btn-close text-gray-500 hover:text-gray-700"
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- 👇 主体区域：允许内部滚动 -->
<div class="modal-body p-4 flex-1 overflow-y-auto">
<!-- 日期选择区域 -->
<DatatimePickerForFullCalendar
:start-date="eventData.startDate"
:end-date="eventData.endDate"
:color="eventData.color"
:title="eventData.title"
/>
<!-- 内容输入区域 -->
<div class="mb-4">
<div class="uni-easyinput input relative">
<div
class="uni-easyinput__content is-input-border border border-gray-300 rounded-md bg-white relative"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-x"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body p-4">
<!-- 日期选择区域 -->
<DatatimePickerForFullCalendar
:start-date="eventData.startDate"
:end-date="eventData.endDate"
:color="eventData.color"
:title="eventData.title"
/>
<!-- 内容输入区域 -->
<div class="mb-4">
<div class="uni-easyinput input relative">
<div
class="uni-easyinput__content is-input-border border border-gray-300 rounded-md bg-white relative"
>
<input
v-model="eventData.title"
type="text"
maxlength="140"
class="uni-easyinput__content-input w-full px-3 py-2 outline-none"
:placeholder="t('schedule.event_title_placeholder')"
@keyup.enter="saveEvent"
/>
</div>
</div>
<input
v-model="eventData.title"
type="text"
maxlength="140"
class="uni-easyinput__content-input w-full px-3 py-2 outline-none"
:placeholder="t('schedule.event_title_placeholder')"
@keyup.enter="saveEvent"
/>
</div>
</div>
</div>
<!-- 颜色选择区域 -->
<div class="mb-4">
<div class="color_box grid grid-cols-3 gap-2">
<div
v-for="color in colorOptions"
:key="color.value"
class="color_box_item"
>
<label
class="uni-label-pointer form-colorinput flex items-center gap-2 cursor-pointer"
@click="selectColor(color.value)"
<!-- 颜色选择区域 -->
<div class="mb-4">
<div class="color_box grid grid-cols-3 gap-2">
<div
v-for="color in colorOptions"
:key="color.value"
class="color_box_item"
>
<label
class="uni-label-pointer form-colorinput flex items-center gap-2 cursor-pointer"
@click="selectColor(color.value)"
>
<div class="uni-radio-wrapper">
<div
class="uni-radio-input flex items-center justify-center w-6 h-6 rounded-full transition-all"
:style="{
backgroundColor: color.value,
borderColor: color.value,
}"
>
<div class="uni-radio-wrapper">
<div
class="uni-radio-input flex items-center justify-center w-6 h-6 rounded-full transition-all"
:style="{
backgroundColor: color.value,
borderColor: color.value,
}"
>
<svg
v-if="eventData.color === color.value"
width="18"
height="18"
viewBox="0 0 32 32"
>
<path
d="M1.952 18.080q-0.32-0.352-0.416-0.88t0.128-0.976l0.16-0.352q0.224-0.416 0.64-0.528t0.8 0.176l6.496 4.704q0.384 0.288 0.912 0.272t0.88-0.336l17.312-14.272q0.352-0.288 0.848-0.256t0.848 0.352l-0.416-0.416q0.32 0.352 0.32 0.816t-0.32 0.816l-18.656 18.912q-0.32 0.352-0.8 0.352t-0.8-0.32l-7.936-8.064z"
fill="#ffffff"
></path>
</svg>
</div>
</div>
<span class="text-gray-700">{{ color.label }}</span>
</label>
<svg
v-if="eventData.color === color.value"
width="18"
height="18"
viewBox="0 0 32 32"
>
<path
d="M1.952 18.080q-0.32-0.352-0.416-0.88t0.128-0.976l0.16-0.352q0.224-0.416 0.64-0.528t0.8 0.176l6.496 4.704q0.384 0.288 0.912 0.272t0.88-0.336l17.312-14.272q0.352-0.288 0.848-0.256t0.848 0.352l-0.416-0.416q0.32 0.352 0.32 0.816t-0.32 0.816l-18.656 18.912q-0.32 0.352-0.8 0.352t-0.8-0.32l-7.936-8.064z"
fill="#ffffff"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- 模态框底部 -->
<div
class="modal-footer border-t p-4 flex justify-between items-center"
>
<button
@click="closeEventModal"
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
>
{{ t("schedule.close") }}
</button>
<div class="flex gap-2">
<button
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
disabled
>
{{ t("schedule.copy") }}
</button>
<button
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
disabled
>
{{ t("schedule.paste") }}
</button>
<button
@click="saveEvent"
class="btn btn-primary px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md"
>
{{ t("schedule.add_event_button") }}
</button>
<span class="text-gray-700">{{ color.label }}</span>
</label>
</div>
</div>
</div>
</div>
<!-- 👇 底部固定：不被滚动、不压缩 -->
<div
class="modal-footer border-t p-4 flex justify-between items-center flex-shrink-0"
>
<button
@click="closeEventModal"
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
>
{{ t("schedule.close") }}
</button>
<div class="flex gap-2">
<button
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
disabled
>
{{ t("schedule.copy") }}
</button>
<button
class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
disabled
>
{{ t("schedule.paste") }}
</button>
<button
@click="saveEvent"
class="btn btn-primary px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md"
>
{{ t("schedule.add_event_button") }}
</button>
</div>
</div>
</div>
</div>
<!-- 日历主体区域，带边框和阴影 -->
<div
class="flex-1 rounded-lg border border-gray-200 bg-white p-0.5 shadow dark:border-dk-muted dark:bg-dk-card"