pc-admin/src/pages/dashboard/components/ReportList.jsx

import moment from 'moment'
import { Card, List, Badge, Space, Carousel } from 'antd'
import { useEffect, useMemo, useState } from 'react'
import { history } from 'umi';

const Avatar = (props) => {
  const style = useMemo(() => {
    const color = props.item.status == 'first' ? '#C5E0A9' :
    props.item.status == 'renewal' ? '#87C5ED' : '#E9CB99';
    return {
      background: color,
      color: '#fff',
      width: '48px',
      height: '48px',
      fontSize: '1.8em',
      lineHeight: '48px',
      textAlign: 'center',
    }
  }, [])

  return <div style={style}>{props.children}</div>
}


const Content = (props) => {
  const { item } = props;

  return (
    <Space size="large">
      <span>{moment(item.createDate).format('YYYY-MM-DD HH:mm')}</span>
    </Space>
  )
}

const showNum = 8;

export default (props) => {
  const [loading, setLoading] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [list, setList] = useState([
    {
      orgName: '办证',
      status: 'first',
      userName: '俏如来',
      formId: 0,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '续期',
      status: 'renewal',
      userName: '雪山银燕',
      formId: 1,
      createDate: '2021-5-9 11:22:50'
    },
    {
      orgName: '补办',
      status: 'reissue',
      userName: '史艳文',
      formId: 2,
      createDate: '2021-5-5 11:22:50'
    },
    {
      orgName: '办证',
      status: 'first',
      userName: '南宫恨',
      formId: 3,
      createDate: '2021-5-7 11:22:50'
    },
    {
      orgName: '补办',
      status: 'reissue',
      userName: '神蛊温皇',
      formId: 4,
      createDate: '2021-5-15 11:22:50'
    },
    {
      orgName: '办证',
      status: 'first',
      userName: '燕驼龙',
      formId: 5,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '办证',
      status: 'first',
      userName: '忆无心',
      formId: 6,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '补办',
      status: 'reissue',
      userName: '史艳文',
      formId: 7,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '续期',
      status: 'renewal',
      userName: '宫本武藏',
      formId: 8,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '办证',
      status: 'first',
      userName: '素还真',
      formId: 9,
      createDate: '2021-5-6 11:22:50'
    },
    {
      orgName: '续期',
      status: 'renewal',
      userName: '元邪皇',
      formId: 10,
      createDate: '2021-5-6 11:22:50'
    },
  ])
  const toAudit = () => {
    //审核详情
    // history.push('../../examine');
  }
  useEffect(() => {
    setDisabled(!list || list.length <= showNum)
  }, [list])

  return (
    <Card title="近期提交记录" loading={loading} bodyStyle={{ height: '600px' }}>
      <List style={{ height: '100%', overflow: 'hidden' }} itemLayout="horizontal">
        <Carousel
          autoplay={!disabled}
          infinite={!disabled}
          rtl
          slidesToShow={showNum}
          slidesToScroll={1}
          dot={false}
          dotPosition="right"
          style={{ height: '100%' }}
        >
          {
            list.map(item => (
              <div key={item.formId} style={{ display: 'flex' }}>
                <List.Item onClick={()=>toAudit(item)}>
                  <List.Item.Meta
                    avatar={<Avatar item={item}>{item.orgName.substring(0, 1)}</Avatar>}
                    title={item.userName}
                    description={item.orgName}
                  />
                  <Content item={item} />
                </List.Item>
              </div>
            ))
          }
        </Carousel>
      </List>
    </Card>
  )
}