diff --git a/src/assets/global.css b/src/assets/global.css index 327b392..c668291 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -5,6 +5,11 @@ background: rgba(255, 255, 255, 0.3); } +.reservation-highlight { + color: rgba(255, 255, 255, 1); + background-color: rgba(255, 0, 0, 0.6); +} + #error-page { display: flex; flex-direction: column; diff --git a/src/views/Login.jsx b/src/views/Login.jsx index 99db392..1dff00b 100644 --- a/src/views/Login.jsx +++ b/src/views/Login.jsx @@ -108,7 +108,7 @@ function Login() { }} > diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx index 06468fd..a7aacda 100644 --- a/src/views/reservation/Newest.jsx +++ b/src/views/reservation/Newest.jsx @@ -3,7 +3,9 @@ import { useState, useEffect } from 'react'; import { observer } from "mobx-react"; import { toJS } from "mobx"; import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd'; +import dayjs from "dayjs"; import { useStore } from '@/stores/StoreContext.js'; +import { formatDate, isEmpty } from "@/utils/commons"; import { DATE_PRESETS } from "@/config"; const { Title } = Typography; @@ -14,12 +16,19 @@ function Newest() { title: 'Reference number', dataIndex: 'referenceNumber', key: 'Reference number', - render: (text, record) => {text}, + render: (text, record) => { + const requiredHighlight = dayjs(record.arrivalDate).add(2, 'day').isBefore(dayjs(), 'day') && isEmpty(record.guide); + const linkClassName = requiredHighlight ? 'reservation-highlight' : ''; + return ( + {text} + ) + }, }, { title: 'Arrival date', dataIndex: 'arrivalDate', key: 'Arrival date', + render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')), }, { title: 'Pax', @@ -34,7 +43,8 @@ function Newest() { { title: 'Res. sending date', key: 'Reservation date', - dataIndex: 'reservationDate' + dataIndex: 'reservationDate', + render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')), }, { title: 'Guide', @@ -100,6 +110,12 @@ function Newest() { } }); + // console.info(dayjs('2023-5-27').add(3, 'day')); + // console.info(dayjs().isSame(dayjs('2023-5-27').add(3, 'day'), 'day')); + // console.info(dayjs().isBefore(dayjs('2023-5-27').add(3, 'day'), 'day')); + // console.info(dayjs('2023-5-28').add(3, 'day')); + // console.info(dayjs().isBefore(dayjs('2023-5-28').add(3, 'day'), 'day')); + useEffect (() => { if (location.search !== '?back') { // 第一页,未确认计划