Explorar o código

fix: 通知中心加上通知内容

outaozhen %!s(int64=4) %!d(string=hai) anos
pai
achega
f67a1a269d
Modificáronse 1 ficheiros con 24 adicións e 5 borrados
  1. 24 5
      src/pages/Hr/Notification/index.jsx

+ 24 - 5
src/pages/Hr/Notification/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { List, Avatar, Tag, Skeleton, Divider, message } from 'antd'
+import { List, Avatar, Tag, Skeleton, Divider, message, Typography } from 'antd'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { queryMessageList, sendMessage } from '@/services/staff'
 import AddMessage from './components/AddMessage'
@@ -8,11 +8,14 @@ import { useRequest, useIntl, useAccess } from 'umi'
 import { useModal } from '@/components/Modal'
 import MessageDrawer from './components/MessageDrawer'
 import ws, { CmdType } from '@/utils/ws'
+import MarkDown from 'react-markdown'
 
 const Notification = () => {
   const intl = useIntl()
   const { toggleDrawer, setDrawerProps } = useModal()
   // const { sendMsg } = useWebSocketFn()
+  const { Paragraph } = Typography
+  const [ellipsis, setEllipsis] = React.useState(true)
   const [state, setState] = useState({
     loading: false,
     list: [],
@@ -96,11 +99,17 @@ const Notification = () => {
           endMessage={<Divider plain>别再滚啦,已是尽头</Divider>}
           scrollableTarget="scrollableDiv">
           <List
-            itemLayout="horizontal"
+            itemLayout="vertical"
             // pagination={{ pageSize: 5 }}
             dataSource={state.list}
             renderItem={item => (
-              <List.Item key={item.id}>
+              <List.Item
+                key={item.id}
+                extra={
+                  <span width={200} className="mt-1 text-hex-aaa">
+                    {item.createTime}
+                  </span>
+                }>
                 <List.Item.Meta
                   avatar={<Avatar src={item.avatar} />}
                   title={
@@ -120,8 +129,18 @@ const Notification = () => {
                     </div>
                   }
                 />
-                {/* <MarkDown>{item.content}</MarkDown> */}
-                <div className="mt-1 text-hex-aaa">{item.createTime}</div>
+
+                <Paragraph
+                  ellipsis={
+                    ellipsis
+                      ? {
+                          rows: 4
+                        }
+                      : false
+                  }>
+                  <MarkDown>{item.content}</MarkDown>
+                </Paragraph>
+                {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}
               </List.Item>
             )}
           />