Global-sales/src/components/OrderProfile.jsx

import {
  WhatsAppOutlined, FileAddOutlined, MailOutlined,
  PhoneOutlined,
  UserOutlined,
  FieldNumberOutlined,
  SaveOutlined, CompassOutlined, CalendarOutlined,
  HeartTwoTone,
  MoneyCollectTwoTone,
  FolderOutlined,
  DeleteOutlined, EditOutlined,
  FormOutlined
} from '@ant-design/icons'

import { useCallback, useEffect, useState } from 'react'
import {
  Flex,Select,Tooltip,
  Button, Space, Divider, Typography,
  Input, Radio,Skeleton ,Checkbox,
} from 'antd'
import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
import { copy, isEmpty } from "@/utils/commons";
const OrderProfile = ({coliSN, ...props}) => {

	const [loading, setLoading] = useState(false);
    const orderLabelOptions = copy(OrderLabelDefaultOptions);
    orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });

	const orderStatusOptions = copy(OrderStatusDefaultOptions);
  const [
    orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder
   ] = useOrderStore(s => [
    s.orderDetail, s.customerDetail, s.lastQuotation, s.quotationList, s.fetchOrderDetail, s.setOrderPropValue, s.appendOrderComment, s.fetchOtherEmail, s.otherEmailList, s.fetchHistoryOrder
  ])

  useEffect(() => {
		if (coliSN) {
			setLoading(true);
			fetchOrderDetail(coliSN)
        .then(result => {
          console.info(result)
        })
				.finally(() => setLoading(false))
				// .catch(reason => {
				// 	notification.error({
				// 		message: "查询出错",
				// 		description: reason.message,
				// 		placement: "top",
				// 		duration: 60,
				// 	});
				// });
		}
    return () => {}
	}, [coliSN]);

  const regularText = () => {
    if (orderDetail.buytime > 0) return "(R" + orderDetail.buytime + ")"
    return ''
  }


  return (
    <>
    <Skeleton active loading={loading}>
      <Flex gap='small' vertical={true} justify='space-between'>
        <Typography.Text>
          <FieldNumberOutlined className='pr-1' />
          {orderDetail.order_no}
        </Typography.Text>
        <Typography.Text>
          <UserOutlined className=' pr-1' />
          {customerDetail.name + regularText()}
        </Typography.Text>
        <Typography.Text>
          <CompassOutlined className=' pr-1' />
          Thailand
        </Typography.Text>
        <Typography.Text>
          <PhoneOutlined className=' pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
            {customerDetail.phone}
          </Button>
        </Typography.Text>
        <Typography.Text>
          <MailOutlined className=' pr-1' />
          {customerDetail.email}
        </Typography.Text>
        <Typography.Text>
          <WhatsAppOutlined className='pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
            {customerDetail.whatsapp_phone_number}
          </Button>
        </Typography.Text>
        <Typography.Text>
          <CalendarOutlined className='pr-1' />
          <span>出发日期：</span>2025-09-18，已下计划
        </Typography.Text>

      </Flex>
      <Divider orientation="left">
            <Typography.Text strong>订单状态</Typography.Text>
          </Divider>
          <Flex gap='small' vertical={true} justify='space-between'>
      <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
								key={"orderlabel"}
								size="small"
								style={{
									width: "100%",
								}}
								variant="underlined"
								onSelect={value => {
								}}
								value={orderDetail.tags}
								options={orderLabelOptions}
							/>
              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
								key={"orderstatus"}
								size="small"
								style={{
									width: "100%",
								}}
								variant="underlined"
								onSelect={value => {
								}}
								value={orderDetail.states}
								options={orderStatusOptions}
							/>
              </Flex>

              <Divider orientation="left">
            <Typography.Text strong>催信</Typography.Text>
          </Divider>
          <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />

<Divider orientation='left'>
        <Typography.Text strong>表单信息</Typography.Text>
        <Tooltip title='添加'>
        <FileAddOutlined className='pl-1' />
        </Tooltip>
      </Divider>
      <p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>

        <Divider orientation="left">
            <Typography.Text strong>特殊要求</Typography.Text>
          </Divider>
        <Typography.Text>
          {orderDetail.customer_request}
        </Typography.Text>
        <Divider orientation="left">
            <Typography.Text strong>外联备注</Typography.Text>
          </Divider>
        <Typography.Text>
          {orderDetail.wl_memo}
        </Typography.Text>


      <Divider orientation='left'>
        <Typography.Text strong>附加信息</Typography.Text>
        <Tooltip title='修改'>
        <EditOutlined className='pl-1' />
        </Tooltip>
      </Divider>
      <Typography.Text>
          泰国马来水灯节
      </Typography.Text>
      </Skeleton>
    </>
  )
}

export default OrderProfile