Merge remote-tracking branch 'origin/dev/2025a' into dev/2025a

3 weeks ago · d55d55a3aa
parent 4d4e6fe1d3 dd9e6e9e3a
commit d55d55a3aa
3 changed files with 142 additions and 99 deletions
--- a/src/components/OrderProfile.jsx
+++ b/src/components/OrderProfile.jsx
@ -15,31 +15,61 @@ import { useCallback, useEffect, useState } from 'react'
 import {
  Flex,Select,Tooltip,
  Button, Space, Divider, Typography,
-  Input, Radio,Drawer,Checkbox,
+  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 ''
+  }
+

-    const [openOrder, setOpenOrder] = useState(false)
  return (
    <>
+    <Skeleton active loading={loading}>
      <Flex gap='small' vertical={true} justify='space-between'>
        <Typography.Text>
          <FieldNumberOutlined className='pr-1' />
-          LSS250501006
-          <HeartTwoTone twoToneColor='#eb2f96' />
-          <MoneyCollectTwoTone twoToneColor='#eb2f96' />
+          {orderDetail.order_no}
        </Typography.Text>
        <Typography.Text>
          <UserOutlined className=' pr-1' />
-          Jorgina(R1)
+          {customerDetail.name + regularText()}
        </Typography.Text>
        <Typography.Text>
          <CompassOutlined className=' pr-1' />
@ -48,34 +78,29 @@ const OrderProfile = ({coliSN, ...props}) => {
        <Typography.Text>
          <PhoneOutlined className=' pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
-            6596823833
+            {customerDetail.phone}
          </Button>
        </Typography.Text>
        <Typography.Text>
          <MailOutlined className=' pr-1' />
-          Jorgina@gmail.com
+          {customerDetail.email}
        </Typography.Text>
        <Typography.Text>
          <WhatsAppOutlined className='pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
-            6596826951
+            {customerDetail.whatsapp_phone_number}
          </Button>
        </Typography.Text>
        <Typography.Text>
          <CalendarOutlined className='pr-1' />
          <span>出发日期：</span>2025-09-18，已下计划
        </Typography.Text>
-        <Typography.Text>
-          <span>特殊要求：</span>
-          在华城市 桂林 对酒店和房型要求 5-star
-        </Typography.Text>
-        <Typography.Text>
-          <span>外联备注：</span>
-          泰国马来水灯节
-        </Typography.Text>
-        <Divider orientation="left">
+
+      </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"
@ -85,10 +110,9 @@ const OrderProfile = ({coliSN, ...props}) => {
 								variant="underlined"
 								onSelect={value => {
 								}}
-								value={0}
+								value={orderDetail.tags}
 								options={orderLabelOptions}
 							/>
-
              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
 								key={"orderstatus"}
 								size="small"
@ -98,28 +122,37 @@ const OrderProfile = ({coliSN, ...props}) => {
 								variant="underlined"
 								onSelect={value => {
 								}}
-								value={1}
+								value={orderDetail.states}
 								options={orderStatusOptions}
 							/>
+              </Flex>

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

-      <Divider orientation='left'>
+<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_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail',
-        }}></p>
+      <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>
@ -129,7 +162,8 @@ const OrderProfile = ({coliSN, ...props}) => {
      </Divider>
      <Typography.Text>
          泰国马来水灯节
-        </Typography.Text>
+      </Typography.Text>
+      </Skeleton>
    </>
  )
 }
--- a/src/stores/OrderStore.js
+++ b/src/stores/OrderStore.js
@ -65,14 +65,14 @@ export const useOrderStore = create(devtools((set, get) => ({
          set(() => ({
            orderDetail: {...orderResult, coli_sn: colisn },
            customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
-            lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
-            quotationList: orderResult.quotes,
+            // lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
+            // quotationList: orderResult.quotes,
          }))
          return {
            orderDetail: {...orderResult, coli_sn: colisn },
            customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
-            lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
-            quotationList: orderResult.quotes,
+            // lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
+            // quotationList: orderResult.quotes,
          }
        } else {
          throw new Error(json?.errmsg + ': ' + json.errcode)
--- a/src/views/orders/components/MailBox.jsx
+++ b/src/views/orders/components/MailBox.jsx
@ -1,17 +1,16 @@
-import { useCallback, useEffect, useState } from 'react'
-import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, StarOutlined, RightOutlined, LeftOutlined, ExpandOutlined, AppstoreOutlined } from '@ant-design/icons'
-import { Flex, Button, Tooltip, List, Form, Row, Col, Drawer, Dropdown, Input, Checkbox, DatePicker, Switch, Breadcrumb } from 'antd'
+import { useEffect, useState } from 'react'
+import { ReloadOutlined, ReadOutlined, CheckSquareOutlined, RightOutlined, LeftOutlined, ExpandOutlined } from '@ant-design/icons'
+import { Flex, Button, Tooltip, List, Form, Row, Col, Dropdown, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd'
 import dayjs from 'dayjs'
-import { useEmailList } from '@/hooks/useEmail';
-import { isEmpty } from '@/utils/commons';
+import { useEmailList } from '@/hooks/useEmail'
+import { isEmpty } from '@/utils/commons'
 import { MailboxDirIcon } from './MailboxDirIcon'
-import { endWith } from 'rxjs';

 const { RangePicker } = DatePicker

-const PAGE_SIZE = 50; // 每页显示条数
+const PAGE_SIZE = 50 // 每页显示条数

-const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
+const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
  const DATE_RANGE_PRESETS = [
    {
      label: '本周',
@ -42,75 +41,77 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {

  const { mailList, loading, error, refresh } = useEmailList(mailboxDir);

-   const [pagination, setPagination] = useState({
+  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: PAGE_SIZE,
    total: 0,
-    pagedList: []
-  });
+    pagedList: [],
+  })

  useEffect(() => {
    if (mailList) {
-      const total = mailList.length;
-      const pageCount = Math.ceil(total / PAGE_SIZE);
+      const total = mailList.length
+      const pageCount = Math.ceil(total / PAGE_SIZE)

-      setPagination(prev => ({
+      setPagination((prev) => ({
        ...prev,
        total,
        pageCount,
        current: 1, // 重置到第一页
-        pagedList: getPagedData(mailList, 1)
-      }));
+        pagedList: getPagedData(mailList, 1),
+      }))
    }
-  }, [mailList]);
+  }, [mailList])

  const getPagedData = (data, currentPage) => {
-    const startIndex = (currentPage - 1) * PAGE_SIZE;
-    const endIndex = Math.min(startIndex + PAGE_SIZE, data.length);
-    return data.slice(startIndex, endIndex);
-  };
+    const startIndex = (currentPage - 1) * PAGE_SIZE
+    const endIndex = Math.min(startIndex + PAGE_SIZE, data.length)
+    return data.slice(startIndex, endIndex)
+  }

  const prePage = () => {
    if (pagination.current > 1) {
-      const newCurrent = pagination.current - 1;
-      setPagination(prev => ({
+      const newCurrent = pagination.current - 1
+      setPagination((prev) => ({
        ...prev,
        current: newCurrent,
-        pagedList: getPagedData(mailList, newCurrent)
-      }));
+        pagedList: getPagedData(mailList, newCurrent),
+      }))
    }
-  };
+  }

  const nextPage = () => {
    if (pagination.current < Math.ceil(pagination.total / PAGE_SIZE)) {
-      const newCurrent = pagination.current + 1;
-      setPagination(prev => ({
+      const newCurrent = pagination.current + 1
+      setPagination((prev) => ({
        ...prev,
        current: newCurrent,
-        pagedList: getPagedData(mailList, newCurrent)
-      }));
+        pagedList: getPagedData(mailList, newCurrent),
+      }))
    }
-  };
-
-  console.info('props.breadcrumb: ', props.breadcrumb)
-  console.info('props.mailboxDir: ', mailboxDir)
+  }

  const mailItemRender = (item) => {
    const isOrderNode = mailboxDir.COLI_SN > 0
-    const orderNumber = (isEmpty(item.MAI_COLI_ID) || isOrderNode) ? '' : (item.MAI_COLI_ID + ' - ')
-    const countryName = isEmpty(item.CountryCN) ? '' : ('[' + (item.CountryCN === null ? 'USA' : item.CountryCN) + '] ')
+    const orderNumber = isEmpty(item.MAI_COLI_ID) || isOrderNode ? '' : item.MAI_COLI_ID + ' - '
+    const countryName = isEmpty(item.CountryCN) ? '' : '[' + item.CountryCN + '] '
    const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
    return (
-      <li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2' onClick={() => {
-        console.info('item: ', item)
-        onMailItemClick(item)
-      }}>
+      <li
+        className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
        <div className=''>
          <Checkbox></Checkbox>
        </div>
-        <div className='flex-1 pl-2'>
+        <div className='flex-1 pl-2'
+        onClick={() => {
+          console.info('item: ', item)
+          onMailItemClick(item)
+        }}>
          <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
-            <div>{orderNumber}<span className={mailStateClass}>{item.MAI_Subject}</span></div>
+            <div>
+              {orderNumber}
+              <span className={mailStateClass}>{item.MAI_Subject}</span>
+            </div>
            <span className='text-neutral-500 text-wrap break-words break-all '>{countryName + item.SenderReceiver + ' ' + item.SRDate}</span>
          </Flex>
        </div>
@ -187,10 +188,9 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
          }}
          placeholder={`邮件主题`}
        />
-          <Tooltip title='高级搜索'>
-        <Switch checkedChildren={<ExpandOutlined />}
-      unCheckedChildren={<ExpandOutlined />} defaultChecked={false} />
-      </Tooltip>
+        <Tooltip title='高级搜索'>
+          <Switch checkedChildren={<ExpandOutlined />} unCheckedChildren={<ExpandOutlined />} defaultChecked={false} />
+        </Tooltip>
      </div>
      <div className='bg-white h-auto p-1 flex gap-1 items-center hidden'>
        <Form
@ -219,41 +219,50 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
      </div>

      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
-        <List loading={loading}
+        <Skeleton active loading={loading}>
+        <List
+          loading={loading}
          header={
-            <Flex align='center' justify="space-between">
-            <Breadcrumb
-              items={
-                props.breadcrumb.map(bc  => {
+            <Flex align='center' justify='space-between'>
+              <Breadcrumb
+                items={props.breadcrumb.map((bc) => {
                  return {
                    title: (
                      <>
-                      <MailboxDirIcon type={bc?.iconIndex} />
+                        <MailboxDirIcon type={bc?.iconIndex} />
                        <span>{bc.title}</span>
                      </>
                    ),
                  }
                })}
-            />
-            <Flex align="center" justify="space-between">
-               <span>
-          {((pagination.current - 1) * PAGE_SIZE + 1)}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
-        </span>
-            <Button icon={<LeftOutlined />} type="text" onClick={() => {
-              prePage()
-            }} iconPosition={'end'}></Button>
-            <Button icon={<RightOutlined />} type="text" onClick={() => {
-              nextPage()
-            }} iconPosition={'end'}></Button>
+              />
+              <Flex align='center' justify='space-between'>
+                <span>
+                  {(pagination.current - 1) * PAGE_SIZE + 1}-{Math.min(pagination.current * PAGE_SIZE, pagination.total)} of {pagination.total}
+                </span>
+                <Button
+                  icon={<LeftOutlined />}
+                  type='text'
+                  onClick={() => {
+                    prePage()
+                  }}
+                  iconPosition={'end'}></Button>
+                <Button
+                  icon={<RightOutlined />}
+                  type='text'
+                  onClick={() => {
+                    nextPage()
+                  }}
+                  iconPosition={'end'}></Button>
+              </Flex>
            </Flex>
-
-          </Flex>
          }
          itemLayout='vertical'
          pagination={false}
          dataSource={pagination.pagedList}
          renderItem={mailItemRender}
        />
+        </Skeleton>
      </div>
    </>
  )