GHHub/src/views/reservation/Newest.jsx

import { NavLink, useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { Row, Col, Space, Button, Table, Typography, Modal, App, Select } from 'antd'
import dayjs from 'dayjs'
import { isEmpty } from '@/utils/commons'
import { useTranslation } from 'react-i18next'
import useFormStore from '@/stores/Form'
import useReservationStore from '@/stores/Reservation'
import SearchForm from '@/components/SearchForm'

const { Title } = Typography

function Newest() {
  const { t } = useTranslation()
  const reservationListColumns = [
    {
      title: t('group:RefNo'),
      dataIndex: 'referenceNumber',
      render: (text, record) => {
        const after3Dayjs = dayjs().add(3, 'day');
        const lastDayjs = dayjs().subtract(1, 'day');
        const arrivalDatejs = dayjs(record.arrivalDate);
        const requiredHighlight = (arrivalDatejs.isAfter(lastDayjs) && arrivalDatejs.isBefore(after3Dayjs, 'day')) && isEmpty(record.guide);
        const linkClassName = requiredHighlight ? 'text-white bg-red-500' : '';
        return (
          <NavLink className={linkClassName} to={`/reservation/${record.reservationId}`}>{text}</NavLink>
        )
      },
    },
    {
      title: t('group:ArrivalDate'),
      dataIndex: 'arrivalDate',
			render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
    },
    {
      title: t('group:Pax'),
      dataIndex: 'pax'
    },
    {
      title: t('group:Status'),
      dataIndex: 'status'
    },
    {
      title: t('group:ResSendingDate'),
      dataIndex: 'reservationDate',
			render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
    },
    {
      title: t('group:Guide'),
      dataIndex: 'guide',
      render: guideRender
    },
  ];

  function guideRender(_, reservation) {
    if (reservation.guide === '') {
      return (
        <Space size='middle'>
          <Button type='link' onClick={() => showCityGuideModal(reservation)}>{t('Add')}</Button>
        </Space>
      );
    } else {
      return (
        <Space size='middle'>
          <span>{reservation.guide}</span>
          <Button type='link' onClick={() => showCityGuideModal(reservation)}>{t('Edit')}</Button>
        </Space>
      )
    }
  }

  function cityGuideRender(_, city) {
    return (
      <Select
        showSearch
        className='w-72'
        variant='borderless'
        allowClear
        placeholder='Select a guide'
        optionFilterProp='children'
        defaultValue={(guideSelectOptions.length == 0 || city.tourGuideId == 0) ? null : city.tourGuideId}
        onChange={(guideId) => {
          setupCityGuide(city.cityId, guideId);
        }}
        filterOption={(input, option) =>
          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
        }
        options={guideSelectOptions}
      />
    )
  }

	const location = useLocation()
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [dataLoading, setDataLoading] = useState(false)
  const [guideSelectOptions, setGuideSelectOptions] = useState([])

  const formValuesToSub = useFormStore((state) => state.formValuesToSub)

  const [fetchAllGuideList, fetchReservationList, reservationList, reservationPage, cityList, selectReservation, getCityListByReservationId, setupCityGuide, updateReservationGuide] =
    useReservationStore((state) =>
      [state.fetchAllGuideList, state.fetchReservationList, state.reservationList, state.reservationPage, state.cityList, state.selectReservation, state.getCityListByReservationId, state.setupCityGuide, state.updateReservationGuide])

  const { notification } = App.useApp()

  useEffect (() => {
    if (location.search !== '?back') {
      // 第一页，未确认计划
      onSearchClick(1, 1)
    }
    fetchAllGuideList()
      .then((guideList) => {
        const selectOptions = guideList.map((data, index) => {
          return {
            value: data.guideId,
            label: data.guideName
          }
        })
        setGuideSelectOptions(selectOptions)
      })
  }, [])

  const showCityGuideModal = (reservation) => {
    setDataLoading(true)
    setIsModalOpen(true)
    selectReservation(reservation);
    getCityListByReservationId(reservation.reservationId)
      .catch(ex => {
        notification.error({
          message: 'Notification',
          description: ex.message,
          placement: 'top',
          duration: 4,
        })
      })
      .finally(() => {
        setDataLoading(false);
      })
  }
  const handleOk = () => {
    updateReservationGuide()
      .finally(() => {
        setIsModalOpen(false);
        setDataLoading(false);
      })
  }
  const handleCancel = () => {
    setIsModalOpen(false);
    setDataLoading(false);
  }

  // 默认重新搜索第一页，所有状态的计划
  const onSearchClick = (current=1, status=null) => {
    setDataLoading(true)
    fetchReservationList(formValuesToSub, current)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      })
      .finally(() => {
        setDataLoading(false)
      })
  }

  return (
    <>
      <Modal
        centered
        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
      >
        <Space direction='vertical' className='w-full'>
          <Row>
            <Col span={24}>
              <Table
                bordered
                loading={dataLoading}
                pagination={false}
                columns={[
                  {
                    title: t('group:City'),
                    dataIndex: 'cityName',
                    key: 'cityName'
                  },
                  {
                    title: t('group:Guide'),
                    dataIndex: 'tourGuide',
                    key: 'tourGuide',
                    render: cityGuideRender,
                  }
                ]}
                dataSource={cityList}
              />
            </Col>
          </Row>
        </Space>
      </Modal>
      <Space direction='vertical' className='w-full'>
        <Title level={3}></Title>
        <SearchForm
          initialValue={{unconfirmed: true}}
          fieldsConfig={{
            shows: ['referenceNo', 'dates', 'unconfirmed'],
            fieldProps: {
              dates: { label: t('group:ArrivalDate') },
            },
          }}
          onSubmit={(err, formVal, filedsVal) => {
            setDataLoading(true)
            fetchReservationList(formVal)
              .catch(ex => {
                notification.error({
                  message: 'Notification',
                  description: ex.message,
                  placement: 'top',
                  duration: 4,
                })
              })
              .finally(() => {
                setDataLoading(false)
              })
          }}
        />
        <Title level={3}></Title>
        <Row>
          <Col span={24}>
            <Table
              title={() => t('group:3DGuideTip')}
              bordered
              loading={dataLoading}
              pagination={{
                position: ['bottomCenter'],
                current: reservationPage.current,
                pageSize: reservationPage.size,
                total: reservationPage.total,
                simple: true
              }}
              onChange={(pagination) => {onSearchClick(pagination.current)}}
              columns={reservationListColumns} dataSource={reservationList}
            />
          </Col>
        </Row>
      </Space>
    </>
  )
}

export default Newest