perf：调整邮件列表样式和代码

2 weeks ago · 06a3e95e1a
parent 095a8f3d3b
commit 06a3e95e1a
2 changed files with 121 additions and 124 deletions
--- a/src/components/OrderProfile.jsx
+++ b/src/components/OrderProfile.jsx
@ -1,7 +1,7 @@
 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 { 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 }) => {
@ -21,7 +21,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
    s.appendOrderComment,
  ])

-  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate);
+  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate)
  useEffect(() => {
    if (coliSN) {
      setLoading(true)
@ -40,20 +40,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
  }, [coliSN])

  const handleSetRemindState = async (checkedValue) => {
-    const state = checkedValue.filter(v => v !== orderRemindState);
-    const oldState = orderRemindState;
+    const state = checkedValue.filter((v) => v !== orderRemindState)
+    const oldState = orderRemindState

    try {
      if (isEmpty(state)) {
-        setOrderRemindState(null);
+        setOrderRemindState(null)
      } else {
-        setOrderRemindState(state[0]);
+        setOrderRemindState(state[0])
      }
-      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state });
-      message.success('设置成功');
+      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state })
+      message.success('设置成功')
    } catch (error) {
-      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 });
-      setOrderRemindState(oldState);
+      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 })
+      setOrderRemindState(oldState)
    }
  }

@ -79,7 +79,7 @@ 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}
@ -129,20 +129,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
              width: '100%',
            }}
            variant='underlined'
-								onSelect={value => {
-									setOrderPropValue(coliSN, "orderlabel", value)
-										.then(() => {
-											message.success("设置成功");
-										})
-										.catch(reason => {
-											notification.error({
-												message: "设置出错",
-												description: reason.message,
-												placement: "top",
-												duration: 60,
-											});
-										});
-								}}
+            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}
          />
@ -154,20 +154,20 @@ const OrderProfile = ({ coliSN, ...props }) => {
              width: '100%',
            }}
            variant='underlined'
-								onSelect={value => {
-									setOrderPropValue(coliSN, "orderstatus", value)
-										.then(() => {
-											message.success("设置成功");
-										})
-										.catch(reason => {
-											notification.error({
-												message: "设置出错",
-												description: reason.message,
-												placement: "top",
-												duration: 60,
-											});
-										});
-								}}
+            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}
          />
@ -176,7 +176,7 @@ const OrderProfile = ({ coliSN, ...props }) => {
        <Divider orientation='left'>
          <Typography.Text strong>催信</Typography.Text>
        </Divider>
-        <Checkbox.Group key='substatus' className="px-2" value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />
+        <Checkbox.Group key='substatus' className='px-2' value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />

        <Divider orientation='left'>
          <Typography.Text strong>表单信息</Typography.Text>
--- 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,24 +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 => {
-            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'
+            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}
@ -138,38 +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={<ReadOutlined />}
-            onClick={() => {
-              markAsRead(selectedItems.map((item) => item.MAI_SN))
-            }}
+            <Button
+              shape='circle'
+              type='text'
+              size='small'
+              icon={<ReadOutlined />}
+              onClick={() => {
+                markAsRead(selectedItems.map((item) => item.MAI_SN))
+              }}
            />
          </Tooltip>
          <Tooltip title='已处理'>
-            <Button shape='circle' type='text' size='small' icon={<MailCheckIcon />}
-            onClick={() => {
-              markAsProcessed(selectedItems.map((item) => item.MAI_SN))
-            }} />
+            <Button
+              shape='circle'
+              type='text'
+              size='small'
+              icon={<MailCheckIcon />}
+              onClick={() => {
+                markAsProcessed(selectedItems.map((item) => item.MAI_SN))
+              }}
+            />
          </Tooltip>
          <Tooltip title='刷新'>
            <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} onClick={refresh} />
@ -214,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>
    </>