|
|
@@ -1,79 +1,232 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, computed } from 'vue'
|
|
|
import type { Dayjs } from 'dayjs'
|
|
|
import dayjs from 'dayjs'
|
|
|
+import CalendarTagDetailDialog from './CalendarTagDetailDialog.vue'
|
|
|
|
|
|
-const value = ref<Dayjs>(dayjs())
|
|
|
-
|
|
|
-// ✅ 修正：精确匹配年月日
|
|
|
-const getListData = (value: Dayjs) => {
|
|
|
- let listData
|
|
|
- switch (value.date()) {
|
|
|
- case 8:
|
|
|
- listData = [
|
|
|
- { type: 'warning', content: 'This is warning event.' },
|
|
|
- { type: 'success', content: 'This is usual event.' }
|
|
|
- ]
|
|
|
- break
|
|
|
- case 10:
|
|
|
- listData = [
|
|
|
- { type: 'warning', content: 'This is warning event.' },
|
|
|
- { type: 'success', content: 'This is usual event.' },
|
|
|
- { type: 'error', content: 'This is error event.' }
|
|
|
- ]
|
|
|
- break
|
|
|
- case 15:
|
|
|
- listData = [
|
|
|
- { type: 'warning', content: 'This is warning event' },
|
|
|
- { type: 'success', content: 'This is very long usual event。。....' },
|
|
|
- { type: 'error', content: 'This is error event 1.' },
|
|
|
- { type: 'error', content: 'This is error event 2.' },
|
|
|
- { type: 'error', content: 'This is error event 3.' },
|
|
|
- { type: 'error', content: 'This is error event 4.' }
|
|
|
- ]
|
|
|
- break
|
|
|
- default:
|
|
|
- }
|
|
|
- return listData || []
|
|
|
-}
|
|
|
-
|
|
|
-const getMonthData = (current: Date) => {
|
|
|
- if (current.getFullYear() === 2026 && current.getMonth() === 8) {
|
|
|
- return 1394
|
|
|
- }
|
|
|
- return null
|
|
|
+// 控制日历显示的月份（受控状态）
|
|
|
+const displayMonth = ref<Dayjs>(dayjs())
|
|
|
+
|
|
|
+// 年份选项
|
|
|
+const yearOptions = computed(() => {
|
|
|
+ const currentYear = new Date().getFullYear()
|
|
|
+ const startYear = 1100 // 你可以改成任意起始年，比如 1990
|
|
|
+ const years = []
|
|
|
+ for (let y = currentYear; y >= startYear; y--) {
|
|
|
+ years.push(y)
|
|
|
+ }
|
|
|
+ return years // [2026, 2025, ..., 2000]
|
|
|
+})
|
|
|
+
|
|
|
+const calendarData = ref({})
|
|
|
+
|
|
|
+const getDataByDate = (date: Dayjs, key: string) => {
|
|
|
+ return calendarData.value[date.format('YYYY-MM-DD')]?.[key] ?? 0
|
|
|
+}
|
|
|
+const getPageData = () => {
|
|
|
+ $api.getDeliveryCalendarData({ month: dayjs().format('MM/YYYY') }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ calendarData.value = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getPageData()
|
|
|
+})
|
|
|
+
|
|
|
+// 👇 关键：监听 panelChange（月份/年份切换）
|
|
|
+const onPanelChange = (value: Dayjs) => {
|
|
|
+ // 同步更新 displayMonth，确保受控
|
|
|
+ displayMonth.value = value
|
|
|
+}
|
|
|
+
|
|
|
+// 可选：处理日期点击（比如查看详情）
|
|
|
+const onSelect = (date: Dayjs) => {
|
|
|
+ console.log('选中日期:', date.format('YYYY-MM-DD'))
|
|
|
+ // 你可以在这里打开详情弹窗等
|
|
|
+}
|
|
|
+
|
|
|
+// 年份切换
|
|
|
+const handleYearChange = (year: number, onChange: (date: Dayjs) => void) => {
|
|
|
+ const newDate = displayMonth.value.clone().year(year)
|
|
|
+ onChange(newDate)
|
|
|
+ displayMonth.value = newDate
|
|
|
+}
|
|
|
+
|
|
|
+// 月份切换
|
|
|
+const handleMonthChange = (month: number, onChange: (date: Dayjs) => void) => {
|
|
|
+ const newDate = displayMonth.value.clone().month(month - 1)
|
|
|
+ onChange(newDate)
|
|
|
+ displayMonth.value = newDate
|
|
|
+}
|
|
|
+
|
|
|
+const calendarTagDialog = ref()
|
|
|
+const handleTagClick = (type, date) => {
|
|
|
+ calendarTagDialog.value.openDialog(type, date, calendarData.value[date.format('YYYY-MM-DD')])
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="calendar-container">
|
|
|
- <a-calendar v-model:value="value" fullscreen>
|
|
|
+ <!-- 👇 绑定 :value + 监听 @panelChange -->
|
|
|
+ <a-calendar :value="displayMonth" fullscreen @select="onSelect" @panelChange="onPanelChange">
|
|
|
+ <!-- 自定义头部：value 来自 displayMonth（已同步） -->
|
|
|
+ <template #headerRender="{ value, onChange }">
|
|
|
+ <div class="custom-header">
|
|
|
+ <div class="label-type destination-booking">
|
|
|
+ <div class="sign"></div>
|
|
|
+ <div class="label">Destination Booking</div>
|
|
|
+ </div>
|
|
|
+ <div class="label-type recommended-delivery-date">
|
|
|
+ <div class="sign"></div>
|
|
|
+ <div class="label">Recommended Delivery Date</div>
|
|
|
+ </div>
|
|
|
+ <div class="label-type free-storage-period-ends">
|
|
|
+ <div class="sign"></div>
|
|
|
+ <div class="label">Free Storage Period Ends</div>
|
|
|
+ </div>
|
|
|
+ <div class="grid-lines"></div>
|
|
|
+ <a-select
|
|
|
+ :value="value.year()"
|
|
|
+ style="width: 180px; margin-right: 8px"
|
|
|
+ @change="(year) => handleYearChange(year, onChange)"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="y in yearOptions" :key="y" :value="y">
|
|
|
+ {{ y }}年
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+
|
|
|
+ <a-select
|
|
|
+ :value="value.month() + 1"
|
|
|
+ style="width: 80px"
|
|
|
+ @change="(month) => handleMonthChange(month, onChange)"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="m in 12" :key="m" :value="m">
|
|
|
+ {{
|
|
|
+ [
|
|
|
+ 'Jan',
|
|
|
+ 'Feb',
|
|
|
+ 'Mar',
|
|
|
+ 'Apr',
|
|
|
+ 'May',
|
|
|
+ 'Jun',
|
|
|
+ 'Jul',
|
|
|
+ 'Aug',
|
|
|
+ 'Sep',
|
|
|
+ 'Oct',
|
|
|
+ 'Nov',
|
|
|
+ 'Dec'
|
|
|
+ ][m - 1]
|
|
|
+ }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
<template #dateCellRender="{ current }">
|
|
|
<ul class="events">
|
|
|
- <li v-for="(item, index) in getListData(current)" :key="index">
|
|
|
- <!-- 使用原生 span 替代 a-badge（更易控制暗黑样式） -->
|
|
|
- <span class="event-badge" :class="`event- $ {item.type}`"></span>
|
|
|
- <span class="event-text">{{ item.content }}</span>
|
|
|
- </li>
|
|
|
+ <!-- 如果不为当前月份的日期，则不显示标签 -->
|
|
|
+ <div
|
|
|
+ class="tags-details"
|
|
|
+ v-if="
|
|
|
+ calendarData?.[dayjs(current).format('YYYY-MM-DD')] &&
|
|
|
+ dayjs(current).isSame(dayjs(displayMonth), 'month')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="ending-tag tag-style" @click="handleTagClick('ending', current)">
|
|
|
+ <span
|
|
|
+ class="font_family icon-icon_delay_b1"
|
|
|
+ style="margin-right: 3px; font-size: 13px"
|
|
|
+ ></span>
|
|
|
+ <span class="type">{{ getDataByDate(current, 'endingNumber') }} Ending</span>
|
|
|
+ <span class="ctns-tag">{{ getDataByDate(current, 'endingCtns') }} ctns</span>
|
|
|
+ </div>
|
|
|
+ <div class="delivery-tag" @click="handleTagClick('delivery', current)">
|
|
|
+ <div class="label">Recommended Delivery</div>
|
|
|
+ <div class="tag-style">
|
|
|
+ <span class="font_family icon-icon_road__booking_b" style="font-size: 12px"></span>
|
|
|
+ <span class="type">{{ getDataByDate(current, 'shipmentNumber') }} Shipments</span>
|
|
|
+ <span class="ctns-tag">{{ getDataByDate(current, 'shipmentCtns') }} ctns</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="booking-tag">
|
|
|
+ <div class="label">Destination Booking</div>
|
|
|
+ <div class="tag-style">
|
|
|
+ <span class="font_family icon-icon_booking_order_b" style="font-size: 12px"></span>
|
|
|
+ <span class="type">{{ getDataByDate(current, 'bookingNumber') }} Bookings</span>
|
|
|
+ <span class="ctns-tag">{{ getDataByDate(current, 'bookingCtns') }} ctns</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</ul>
|
|
|
</template>
|
|
|
-
|
|
|
- <template #monthCellRender="{ current }">
|
|
|
- <div v-if="getMonthData(current)" class="notes-month">
|
|
|
- <section>{{ getMonthData(current) }}</section>
|
|
|
- <span>Backlog number</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
</a-calendar>
|
|
|
+ <CalendarTagDetailDialog ref="calendarTagDialog"></CalendarTagDetailDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+/* ... 你的深色样式保持不变 ... */
|
|
|
.calendar-container {
|
|
|
+ margin-top: -46px;
|
|
|
padding: 0 24px;
|
|
|
}
|
|
|
|
|
|
-/* ===== 深色主题覆盖 ===== */
|
|
|
+.custom-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ .label-type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 24px;
|
|
|
+
|
|
|
+ .sign {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ margin-right: 4px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .destination-booking {
|
|
|
+ .sign {
|
|
|
+ background-color: var(--color-delivery-calendar-booking-sign-bg);
|
|
|
+ border: 1px dashed var(--color-delivery-calendar-booking-sign-border);
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ color: var(--color-delivery-calendar-booking-label-text);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommended-delivery-date {
|
|
|
+ .sign {
|
|
|
+ background-color: var(--color-delivery-calendar-delivery-date-sign-bg);
|
|
|
+ border: 1px dashed var(--color-delivery-calendar-delivery-date-sign-border);
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ color: var(--color-delivery-calendar-delivery-date-label-text);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .free-storage-period-ends {
|
|
|
+ margin-right: 8px;
|
|
|
+ .sign {
|
|
|
+ background-color: var(--color-delivery-calendar-ends-sign-bg);
|
|
|
+ border: 1px dashed var(--color-delivery-calendar-ends-sign-border);
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ color: var(--color-delivery-calendar-ends-label-text);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .grid-lines {
|
|
|
+ height: 18px;
|
|
|
+ width: 2px;
|
|
|
+ margin-right: 8px;
|
|
|
+ background-color: var(--color-border);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 深色主题覆盖（保持原样）===== */
|
|
|
:deep(.ant-picker-calendar) {
|
|
|
background-color: var(--color-mode);
|
|
|
color: #e0e0e0;
|
|
|
@@ -82,47 +235,49 @@ const getMonthData = (current: Date) => {
|
|
|
|
|
|
:deep(.ant-picker-calendar-header) {
|
|
|
background-color: var(--color-mode);
|
|
|
- /* border-bottom: 1px solid #333; */
|
|
|
}
|
|
|
|
|
|
:deep(.ant-picker-calendar-header .ant-picker-year-select),
|
|
|
:deep(.ant-picker-calendar-header .ant-picker-month-select) {
|
|
|
- /* background-color: #2d2d2d; */
|
|
|
border: 1px solid #444;
|
|
|
color: #e0e0e0;
|
|
|
}
|
|
|
|
|
|
:deep(.ant-picker-calendar-body) {
|
|
|
- background-color: #1a1a1a;
|
|
|
+ // background-color: #1a1a1a;
|
|
|
}
|
|
|
+
|
|
|
:deep(.ant-picker-cell) {
|
|
|
background-color: var(--color-calendar-cell-bg) !important;
|
|
|
border: 1px solid var(--color-border) !important;
|
|
|
}
|
|
|
|
|
|
-/* 修复日期格子布局 —— 关键！ */
|
|
|
:deep(.ant-picker-calendar-date) {
|
|
|
- height: 100px !important;
|
|
|
+ height: 143px !important;
|
|
|
display: block !important;
|
|
|
- border-top: 0px !important;
|
|
|
+ border-top: 0 !important;
|
|
|
margin: 0 !important;
|
|
|
overflow: hidden;
|
|
|
transition: none !important;
|
|
|
}
|
|
|
-.ant-picker-calendar .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view),
|
|
|
-.ant-picker-dropdown .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) {
|
|
|
- background-color: red !important;
|
|
|
+
|
|
|
+:deep(.ant-picker-content) {
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
-:deep(.ant-picker-calendar-date:hover) {
|
|
|
- background-color: #2a2a2a !important;
|
|
|
+:deep(.ant-picker-content thead) {
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid var(--color-border) !important;
|
|
|
}
|
|
|
:deep(.ant-picker-content th) {
|
|
|
height: 24px !important;
|
|
|
padding: 0 !important;
|
|
|
text-align: center;
|
|
|
- background-color: var(--color-calendar-cell-bg) !important;
|
|
|
+ color: var(--color-calendar-disabled-date-text) !important;
|
|
|
+ background-color: var(--color-delivery-calendar-th-bg) !important;
|
|
|
}
|
|
|
-/* 日期数字 */
|
|
|
+
|
|
|
:deep(.ant-picker-calendar-date-value) {
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
@@ -132,30 +287,57 @@ const getMonthData = (current: Date) => {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
-/* 选中状态 */
|
|
|
-:deep(.ant-picker-calendar-date-selected) {
|
|
|
- background-color: #0066ff !important;
|
|
|
- border-color: #0066ff !important;
|
|
|
- color: white !important;
|
|
|
+:deep(.ant-picker-cell .ant-picker-calendar-date-value) {
|
|
|
+ color: var(--color-n--color-neutral-1) !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 彻底清除选中状态 */
|
|
|
+:deep(.ant-picker-calendar-date-selected),
|
|
|
+:deep(.ant-picker-cell-selected .ant-picker-calendar-date) {
|
|
|
+ background: transparent !important;
|
|
|
+ color: #e0e0e0 !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+// 不是当月日期时的样式
|
|
|
+:deep(
|
|
|
+ td.ant-picker-cell:not(.ant-picker-cell-in-view):not(.custom-delivery-calendar .ant-picker-cell)
|
|
|
+) {
|
|
|
+ background-color: rgba(0, 0, 0, 0) !important;
|
|
|
+ .ant-picker-calendar-date-value {
|
|
|
+ color: var(--color-calendar-disabled-date-text) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(
|
|
|
+ td.ant-picker-cell:hover:not(.ant-picker-cell-in-view):not(
|
|
|
+ .custom-delivery-calendar .ant-picker-cell
|
|
|
+ )
|
|
|
+) {
|
|
|
+ background-color: rgba(249, 250, 252, 0.1) !important;
|
|
|
+}
|
|
|
+:deep(.ant-picker-cell:hover) {
|
|
|
+ background-color: rgba(249, 250, 252, 0.1) !important;
|
|
|
+ .ant-picker-calendar-date-value {
|
|
|
+ color: var(--color-neutral-1) !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/* 今天 */
|
|
|
-:deep(.ant-picker-calendar-date-today) {
|
|
|
- background-color: #2a2a2a !important;
|
|
|
- border-color: #555 !important;
|
|
|
+/* 同时清除 hover 时的干扰 */
|
|
|
+:deep(.ant-picker-cell-selected:hover .ant-picker-calendar-date) {
|
|
|
+ background: transparent !important;
|
|
|
}
|
|
|
|
|
|
-/* 事件列表 */
|
|
|
.events {
|
|
|
list-style: none;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
- max-height: 70px;
|
|
|
+ height: 110px;
|
|
|
overflow-y: auto;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
-.events li {
|
|
|
+.events .tags-details {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
@@ -164,37 +346,100 @@ const getMonthData = (current: Date) => {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
-.event-badge {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
+.tags-details {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
+.tag-style {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 6px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
-.event-warning {
|
|
|
- background-color: #faad14;
|
|
|
+ .font_family {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .ctns-tag {
|
|
|
+ height: 12px;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 0 3px;
|
|
|
+ padding-top: 0.5px;
|
|
|
+ font-size: 8px;
|
|
|
+ border-radius: 3px;
|
|
|
+ background-color: #f3cfd0;
|
|
|
+ }
|
|
|
}
|
|
|
-.event-success {
|
|
|
- background-color: #52c41a;
|
|
|
+.delivery-tag,
|
|
|
+.booking-tag {
|
|
|
+ height: 36px;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 4px;
|
|
|
+ border-radius: 3px;
|
|
|
+ .label {
|
|
|
+ height: 12px;
|
|
|
+ padding-left: 6px;
|
|
|
+ font-size: 8px;
|
|
|
+ line-height: 12px;
|
|
|
+ }
|
|
|
+ .ctns-tag {
|
|
|
+ padding-top: 1px;
|
|
|
+ }
|
|
|
}
|
|
|
-.event-error {
|
|
|
- background-color: #ff4d4f;
|
|
|
+.delivery-tag {
|
|
|
+ border: 0.5px dashed var(--color-calendar-delivery-tag-border);
|
|
|
+ background-color: var(--color-calendar-delivery-tag-bg);
|
|
|
+ .label {
|
|
|
+ color: var(--color-calendar-delivery-tag-label-text);
|
|
|
+ }
|
|
|
+ .font_family,
|
|
|
+ .type,
|
|
|
+ .ctns-tag {
|
|
|
+ color: var(--color-calendar-delivery-tag-text) !important;
|
|
|
+ }
|
|
|
+ .ctns-tag {
|
|
|
+ background-color: var(--color-calendar-delivery-tag-bg);
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-/* 月份备注 */
|
|
|
-:deep(.notes-month) {
|
|
|
- text-align: center;
|
|
|
- color: #e0e0e0;
|
|
|
+.booking-tag {
|
|
|
+ background-color: var(--color-calendar-booking-tag-bg);
|
|
|
+ .label {
|
|
|
+ color: var(--color-calendar-booking-tag-label-text);
|
|
|
+ }
|
|
|
+ .font_family,
|
|
|
+ .type,
|
|
|
+ .ctns-tag {
|
|
|
+ color: var(--color-calendar-booking-tag-text) !important;
|
|
|
+ }
|
|
|
+ .ctns-tag {
|
|
|
+ background-color: var(--color-calendar-booking-tag-bg);
|
|
|
+ }
|
|
|
}
|
|
|
-:deep(.notes-month section) {
|
|
|
- font-size: 28px;
|
|
|
- line-height: 28px;
|
|
|
+.ending-tag {
|
|
|
+ height: 24px;
|
|
|
+ width: 100%;
|
|
|
+ border: 0.5px dashed var(--color-calendar-ending-tag-border);
|
|
|
+ background-color: var(--color-calendar-ending-tag-bg);
|
|
|
+ .font_family,
|
|
|
+ .type,
|
|
|
+ .ctns-tag {
|
|
|
+ color: var(--color-calendar-ending-tag-text) !important;
|
|
|
+ }
|
|
|
+ .ctns-tag {
|
|
|
+ background-color: var(--color-calendar-ending-tag-bg);
|
|
|
+ }
|
|
|
}
|
|
|
-:deep(.notes-month span) {
|
|
|
- font-size: 14px;
|
|
|
- color: #aaa;
|
|
|
+:deep(.ant-picker-calendar-date-content) {
|
|
|
+ height: 110px !important;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
div:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-calendar.ant-picker-calendar-full
|
|
|
.ant-picker-panel {
|
Jack Zhou