cldV2react/src/pages/Hr/Notification/index.jsx

import { useState, useEffect } from 'react'
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'
import consts from '@/consts'
import { useRequest, useIntl, useAccess } from 'umi'
import ws, { CmdType } from '@/utils/ws'
import { useModal } from '@/components/ModalStore'
import MarkDown from 'react-markdown'

const Notification = () => {
  const intl = useIntl()
  const dispatchModal = useModal()
  const { Paragraph } = Typography
  const [state, setState] = useState({
    loading: false,
    list: [],
    hasMore: false,
    current: 1,
    pageSize: 15,
    total: 0
  })

  const initData = async params => {
    setState({ ...state, loading: true })
    const {
      data: { message: list = [], total },
      code = -1
    } = await queryMessageList({ ...params, pageSize: state.pageSize })
    if (code === consts.RET_CODE.SUCCESS) {
      setState({
        ...state,
        list: params?.current === 1 ? list : state.list.concat(list),
        total,
        loading: false,
        hasMore: total > params.current * state.pageSize,
        current: params?.current || 1
      })
    }
  }

  useEffect(() => {
    initData({ current: 1 })
  }, [])
  const loadMoreData = () => {
    initData({ current: state.current + 1 })
  }

  const { run: trySendMessage } = useRequest(sendMessage, {
    manual: true,
    onSuccess: result => {
      initData({ current: state.current })
      ws.sendMessage({
        cmd: CmdType.NoticeOrMessage,
        ...result
      })
    },
    onError: e => {
      message.error(e.message)
    }
  })

  const hasPerm = useAccess()?.validatePermByType('notification_add')

  return (
    <div className="bg-hex-ffffff rounded-md px-6 pb-6">
      <div className="flex justify-between items-center">
        <div className="py-4 text-xl">通知中心</div>
        {hasPerm ? <AddMessage onConfirm={trySendMessage} /> : null}
      </div>
      <div
        id="scrollableDiv"
        className="pr-4"
        style={{
          height: `calc(100vh - 156px - 1.5rem)`,
          overflowY: 'auto'
        }}
      >
        <InfiniteScroll
          dataLength={state.total}
          next={loadMoreData}
          hasMore={state.hasMore}
          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
          endMessage={<Divider plain>别再滚啦，已是尽头</Divider>}
          scrollableTarget="scrollableDiv"
        >
          <List
            itemLayout="vertical"
            dataSource={state.list}
            renderItem={item => (
              <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={
                    <span
                      className="cursor-pointer text-primary"
                      onClick={() => dispatchModal('D_NOTICE_DETAIL', { item })}
                    >
                      {item.title}
                    </span>
                  }
                  description={
                    <div className="mb-1 flex items-center">
                      <Tag color="purple">
                        {intl.formatMessage({ id: `component.globalHeader.${item.msgType}` })}
                      </Tag>
                      <span className="ml-2px">&apos;发布范围&apos;,</span>
                      <span className="ml-2">全公司</span>
                    </div>
                  }
                />

                <Paragraph ellipsis={{ rows: 4 }}>
                  <MarkDown>{item.content}</MarkDown>
                </Paragraph>
                {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}
              </List.Item>
            )}
          />
        </InfiniteScroll>
      </div>
    </div>
  )
}

export default Notification