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

# Conflicts: # src/hooks/useEmail.js # src/views/orders/components/MailBox.jsx
4 months ago · 06209430da
parent db14ce64af 06a3e95e1a
commit 06209430da
3 changed files with 150 additions and 108 deletions
--- a/src/components/OrderProfile.jsx
+++ b/src/components/OrderProfile.jsx
@ -1,13 +1,14 @@
 import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'

 import { useEffect, useState } from 'react'
-import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
-import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
-import { copy } from '@/utils/commons'
+import { App, Flex, Select, Tooltip, Divider, Typography, Skeleton, Checkbox } from 'antd'
+import { useOrderStore, fetchSetRemindStateAction, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
+import { copy, isEmpty } from '@/utils/commons'
 const OrderProfile = ({ coliSN, ...props }) => {
  const { notification, message } = App.useApp()

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

@ -20,13 +21,11 @@ const OrderProfile = ({ coliSN, ...props }) => {
    s.appendOrderComment,
  ])

+  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate)
  useEffect(() => {
    if (coliSN) {
      setLoading(true)
      fetchOrderDetail(coliSN)
-        .then((result) => {
-          console.info(result)
-        })
        .finally(() => setLoading(false))
        .catch((reason) => {
          notification.error({
@ -40,9 +39,27 @@ const OrderProfile = ({ coliSN, ...props }) => {
    return () => {}
  }, [coliSN])

-  const regularText = () => {
-    if (orderDetail.buytime > 0) return '(R' + orderDetail.buytime + ')'
-    return ''
+  const handleSetRemindState = async (checkedValue) => {
+    const state = checkedValue.filter((v) => v !== orderRemindState)
+    const oldState = orderRemindState
+
+    try {
+      if (isEmpty(state)) {
+        setOrderRemindState(null)
+      } else {
+        setOrderRemindState(state[0])
+      }
+      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state })
+      message.success('设置成功')
+    } catch (error) {
+      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 })
+      setOrderRemindState(oldState)
+    }
+  }
+
+  const getCustomerName = () => {
+    if (orderDetail.buytime > 0) return customerDetail.name + '(R' + orderDetail.buytime + ')'
+    return customerDetail.name
  }

  return (
@ -62,14 +79,14 @@ const OrderProfile = ({ coliSN, ...props }) => {
        })}
      /> */}
      <Skeleton active loading={loading}>
-        <Flex gap='small' vertical={true} justify='space-between'>
+        <Flex gap='small' vertical={true} justify='space-between' className='p-2'>
          <Typography.Text>
            <FieldNumberOutlined className='pr-1' />
            {orderDetail.order_no}
          </Typography.Text>
          <Typography.Text>
            <UserOutlined className=' pr-1' />
-            {customerDetail.name + regularText()}
+            {getCustomerName()}
          </Typography.Text>
          <Typography.Text>
            <CompassOutlined className=' pr-1' />
@ -83,11 +100,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
            <MailOutlined className='pr-1' />
            {customerDetail.email}
          </Typography.Text>
-          <Typography.Link
-            href='#'
-            onClick={() => {
-              console.info('whatsapp clicked.')
-            }}>
+          <Typography.Link href={`/order/chat/${coliSN}`}>
            <WhatsAppOutlined className=' pr-1' />
            {customerDetail.whatsapp_phone_number}
          </Typography.Link>
@ -116,7 +129,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
              width: '100%',
            }}
            variant='underlined'
-            onSelect={(value) => {}}
+            onSelect={(value) => {
+              setOrderPropValue(coliSN, 'orderlabel', value)
+                .then(() => {
+                  message.success('设置成功')
+                })
+                .catch((reason) => {
+                  notification.error({
+                    message: '设置出错',
+                    description: reason.message,
+                    placement: 'top',
+                    duration: 60,
+                  })
+                })
+            }}
            value={orderDetail.tags}
            options={orderLabelOptions}
          />
@ -128,7 +154,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
              width: '100%',
            }}
            variant='underlined'
-            onSelect={(value) => {}}
+            onSelect={(value) => {
+              setOrderPropValue(coliSN, 'orderstatus', value)
+                .then(() => {
+                  message.success('设置成功')
+                })
+                .catch((reason) => {
+                  notification.error({
+                    message: '设置出错',
+                    description: reason.message,
+                    placement: 'top',
+                    duration: 60,
+                  })
+                })
+            }}
            value={orderDetail.states}
            options={orderStatusOptions}
          />
@ -137,7 +176,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
        <Divider orientation='left'>
          <Typography.Text strong>催信</Typography.Text>
        </Divider>
-        <Checkbox.Group key='substatus' className='px-2' options={remindStatusOptions} />
+        <Checkbox.Group key='substatus' className='px-2' value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />

        <Divider orientation='left'>
          <Typography.Text strong>表单信息</Typography.Text>
--- a/src/hooks/useEmail.js
+++ b/src/hooks/useEmail.js
@ -170,6 +170,17 @@ export const useEmailList = (mailboxDirNode) => {

  const markAsRead = useCallback(
    async (sn_list) => {
+    // 优化性能的话，需要更新 mailList 数据，
+    // 但是更新 mailList 会造成页面全部刷新
+    // 所以还是先用 refresh()
+    // const updatedMailList = mailList.map(mail => {
+    //   if (sn_list.includes(mail.MAI_SN)) {
+    //     return { ...mail, MOI_ReadState: 1 };
+    //   }
+    //   return mail;
+    // });
+    // setMailList(updatedMailList);
+    // setLoading(true)
      await updateEmailAction({
        opi_sn: opi_sn,
        mai_sn_list: sn_list,
--- a/src/views/orders/components/MailBox.jsx
+++ b/src/views/orders/components/MailBox.jsx
@ -1,6 +1,6 @@
 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 { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, ExpandOutlined } from '@ant-design/icons'
+import { Flex, Button, Tooltip, List, Form, Row, Col, Input, Checkbox, DatePicker, Switch, Breadcrumb, Skeleton } from 'antd'
 import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail'
 import { isEmpty } from '@/utils/commons'
@ -12,7 +12,7 @@ const { RangePicker } = DatePicker

 const PAGE_SIZE = 50 // 每页显示条数

-const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
+const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
  const DATE_RANGE_PRESETS = [
    {
      label: '本周',
@ -100,27 +100,21 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
    const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
    const hasAtta = item.MAI_Attachment !== 0 ? <AttachmentIcon className='text-blue-500' /> : null
    return (
-      <li
-        className={`flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 active:bg-gray-200 p-2 ${props.currentActiveMailItem === item.key ? 'bg-neutral-100' : ''}`}>
-          <div className=''>
+      <li className={`flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 active:bg-gray-200 p-2 ${props.currentActiveMailItem === item.key ? 'bg-neutral-100' : ''}`}>
+        <div className=''>
          <Checkbox
-          checked={selectedItems.some((i) => i.MAI_SN === item.MAI_SN)}
-            onClick={e => {
-            console.info(item, 'checked: ' + e.target.checked)
-            const isChecked = e.target.checked;
-            const updatedSelection = isChecked
-              ? [...selectedItems, item]
-              : selectedItems.filter((item) => item.MAI_SN !== item.MAI_SN)
-            setSelectedItems(updatedSelection)
-            console.info('selectedItems: ', updatedSelection)
-            }
-          }></Checkbox>
-          </div>
-        <div className='flex-1 pl-2'
-        onClick={() => {
-          console.info('item: ', item)
-          onMailItemClick(item)
-        }}>
+            checked={selectedItems.some((i) => i.MAI_SN === item.MAI_SN)}
+            onClick={(e) => {
+              const isChecked = e.target.checked
+              const updatedSelection = isChecked ? [...selectedItems, item] : selectedItems.filter((item) => item.MAI_SN !== item.MAI_SN)
+              setSelectedItems(updatedSelection)
+            }}></Checkbox>
+        </div>
+        <div
+          className='flex-1 pl-2'
+          onClick={() => {
+            onMailItemClick(item)
+          }}>
          <Flex gap='small' vertical={true} justify='space-between' className='cursor-pointer'>
            <div>
              {orderNumber}
@ -141,40 +135,38 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
        <Flex wrap gap='middle' justify={'center'} className='min-w-40'>
          <Tooltip title='全选'>
            <Checkbox
-            indeterminate={
-                selectedItems.length > 0 &&
-                selectedItems.length < pagination.pagedList.length
-              }
-              checked={pagination.pagedList.length === 0 ? false : pagination.pagedList.every((item) =>
-                selectedItems.some((selected) => selected.MAI_SN === item.MAI_SN)
-              )}
-            onChange={(e) => {
-                const isChecked = e.target.checked;
+              indeterminate={selectedItems.length > 0 && selectedItems.length < pagination.pagedList.length}
+              checked={pagination.pagedList.length === 0 ? false : pagination.pagedList.every((item) => selectedItems.some((selected) => selected.MAI_SN === item.MAI_SN))}
+              onChange={(e) => {
+                const isChecked = e.target.checked
                if (isChecked) {
-                  setSelectedItems((prev) => [
-                    ...prev,
-                    ...pagination.pagedList,
-                  ]);
+                  setSelectedItems((prev) => [...prev, ...pagination.pagedList])
                } else {
-                  setSelectedItems([]);
+                  setSelectedItems([])
                }
-              }}
-            ></Checkbox>
+              }}></Checkbox>
          </Tooltip>
          <Tooltip title='标记已读'>
-            <Button shape='circle' type='text' size='small' icon={<MailOpenIcon />}
-            onClick={() => {
-              console.info('markAsRead: ', selectedItems.map((item) => item.MAI_SN))
+            <Button
+              shape='circle'
+              type='text'
+              size='small'
+              icon={<MailOpenIcon />}
+              onClick={() => {
              markAsRead(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-            }}
+              }}
            />
          </Tooltip>
          <Tooltip title='已处理'>
-            <Button shape='circle' type='text' size='small' icon={<MailCheckIcon />}
-            onClick={() => {
-              console.info('markAsProcessed: ', selectedItems.map((item) => item.MAI_SN))
+            <Button
+              shape='circle'
+              type='text'
+              size='small'
+              icon={<MailCheckIcon />}
+              onClick={() => {
              markAsProcessed(selectedItems.map((item) => item.MAI_SN)).then(() => setSelectedItems([]))
-            }} />
+              }}
+            />
          </Tooltip>
          <Tooltip title='刷新'>
            <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} onClick={refresh} />
@ -219,51 +211,51 @@ const MailBox = ({ mailboxDir, onMailItemClick, onSelect, ...props }) => {
        </Form>
      </div>

-      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
+      <div className='bg-white overflow-y-auto px-2' style={{ height: 'calc(100vh - 198px)' }}>
        <Skeleton active loading={loading}>
-        <List
-          loading={loading}
-          header={
-            <Flex align='center' justify='space-between'>
-              <Breadcrumb
-                items={props.breadcrumb.map((bc) => {
-                  return {
-                    title: (
-                      <>
-                        <MailboxDirIcon type={bc?.iconIndex} />
-                        <span>{bc.title}</span>
-                      </>
-                    ),
-                  }
-                })}
-              />
+          <List
+            loading={loading}
+            header={
              <Flex align='center' justify='space-between'>
-                <span>已选: {selectedItems.length} 项；</span>
-                <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>
+                <Breadcrumb
+                  items={props.breadcrumb.map((bc) => {
+                    return {
+                      title: (
+                        <>
+                          <MailboxDirIcon type={bc?.iconIndex} />
+                          <span>{bc.title}</span>
+                        </>
+                      ),
+                    }
+                  })}
+                />
+                <Flex align='center' justify='space-between'>
+                  <span>已选: {selectedItems.length} 项；</span>
+                  <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}
-        />
+            }
+            itemLayout='vertical'
+            pagination={false}
+            dataSource={pagination.pagedList}
+            renderItem={mailItemRender}
+          />
        </Skeleton>
      </div>
    </>