style: 供应商邮件

src/views/Conversations/Online/Components/SupplierEmailDrawer.jsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState, useRef, useMemo } from 'react'
 import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag, Drawer, Input, Tooltip } from 'antd'
-import { DownloadOutlined } from '@ant-design/icons';
+import { CloseOutlined, DownloadOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs'
 import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons'
 import EmailDetailInline from '../Components/EmailDetailInline'
@@ -43,69 +43,76 @@ const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_
         mask={false}
         width={900}
         styles={{ header: {} }}
-        title={`供应商邮件`}
-        classNames={{ header: '!py-1 !px-2', body: '!p-1 [&_.ant-list-pagination]:ms-1' }}
+        title={
+          <>
+            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)} type='text' size='small' className='text-gray-500' />
+            <b>供应商邮件</b>
+            <Input.Search
+              className=''
+              ref={searchInputRef}
+              allowClear
+              onClear={onClearSearch}
+              onPressEnter={(e) => {
+                handleSearch(e.target.value)
+                return false
+              }}
+              onSearch={(v, e, { source }) => handleSearch(v)}
+              placeholder={`输入: 标题/发件人, 回车搜索`}
+            />
+            <List
+              dataSource={dataSource}
+              className=''
+              pagination={{
+                pageSize: 8,
+                // showLessItems: true,
+                showSizeChanger: false,
+                size: 'small',
+              }}
+              renderItem={(emailItem) => (
+                <List.Item
+                  className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
+                  onClick={() => {
+                    const emailMsg = {
+                      conversationid: currentConversationID,
+                      order_opi: opi_sn,
+                      coli_sn: oid,
+                      id: emailItem.MAI_SN,
+                      MAI_SN: emailItem.MAI_SN,
+                      msgOrigin: {
+                        from: '',
+                        to: '',
+                        id: emailItem.MAI_SN,
+                        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
+                      },
+                    }
+                    setSelectedEmail(emailMsg)
+                  }}>
+                  <Flex vertical={false} wrap={false} className='w-full'>
+                    <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
+                      {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
+                      {/* <Tooltip title={emailItem.MAI_Subject}> */}
+                      <Typography.Text>{emailItem.MAI_Subject}</Typography.Text>
+                      {/* </Tooltip> */}
+                    </div>
+                    <div className='ml-1 max-w-40'>
+                      <Typography.Text ellipsis={{ tooltip: emailItem.SenderReceiver }}>{emailItem.SenderReceiver.replaceAll('"', '')}</Typography.Text>
+                    </div>
+                    <div className='ml-1 max-w-20'>
+                      <Typography.Text ellipsis={{ tooltip: emailItem.MAI_SendDate }}>{dayjs(emailItem.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
+                    </div>
+                  </Flex>
+                </List.Item>
+              )}
+            />
+          </>
+        }
+        classNames={{ header: '!py-1 !px-2 [&_.ant-drawer-title]:font-normal [&_.ant-list-pagination]:m-0', body: '!p-1 [&_.ant-list-pagination]:ms-1' }}
         placement='right'
+        closeIcon={null}
         onClose={() => {
           setOpen(false)
         }}
         open={open}>
-        <Input.Search
-          className=''
-          ref={searchInputRef}
-          allowClear
-          onClear={onClearSearch}
-          onPressEnter={(e) => {
-            handleSearch(e.target.value)
-            return false
-          }}
-          onSearch={(v, e, { source }) => handleSearch(v)}
-          placeholder={`输入: 标题/发件人, 回车搜索`}
-        />
-        <List
-          dataSource={dataSource}
-          pagination={{
-            pageSize: 10,
-            // showLessItems: true,
-            showSizeChanger: false,
-            size: 'small',
-          }}
-          renderItem={(emailItem) => (
-            <List.Item
-              className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
-              onClick={() => {
-                const emailMsg = {
-                  conversationid: currentConversationID,
-                  order_opi: opi_sn,
-                  coli_sn: oid,
-                  id: emailItem.MAI_SN,
-                  MAI_SN: emailItem.MAI_SN,
-                  msgOrigin: {
-                    from: '',
-                    to: '',
-                    id: emailItem.MAI_SN,
-                    email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
-                  },
-                }
-                setSelectedEmail(emailMsg)
-              }}>
-              <Flex vertical={false} wrap={false} className='w-full'>
-                <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
-                  {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
-                  {/* <Tooltip title={emailItem.MAI_Subject}> */}
-                  <Typography.Text >{emailItem.MAI_Subject}</Typography.Text>
-                  {/* </Tooltip> */}
-                </div>
-                <div className='ml-1 max-w-40'>
-                  <Typography.Text ellipsis={{ tooltip: emailItem.SenderReceiver }}>{emailItem.SenderReceiver.replaceAll('"', '')}</Typography.Text>
-                </div>
-                <div className='ml-1 max-w-20'>
-                  <Typography.Text ellipsis={{ tooltip: emailItem.MAI_SendDate }}>{dayjs(emailItem.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
-                </div>
-              </Flex>
-            </List.Item>
-          )}
-        />
         <EmailDetailInline {...{ mailID: selectedEmail.MAI_SN, emailMsg: selectedEmail }} />
       </Drawer>
     </>