WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Approval/StatusRender.js

import { Timeline } from 'antd';
import styles from './index.less';
import { STATUS, SUB_STATUS } from './List';
import moment from 'moment';
import { useMemo } from 'react';

const StatusRender = ({ statusList }) => {
  const list = useMemo(() => {
    return statusList.map(item => {
      let attach = [];
      if (item.attach) {
        try {
          attach = JSON.parse(item.attach);
        } catch (e) {
          console.error(e);
        }
        attach = attach
          .map(item => {
            if (item instanceof Object) {
              return (
                <div>
                  <a target="_blank" download={item.name} href={item.url}>
                    {item.name}
                  </a>
                </div>
              );
            }
          })
          .filter(item => item);
      }
      return { ...item, attach };
    });
  });
  return (
    <Timeline>
      {list?.map((item, index) => (
        <Timeline.Item dot={<div className={styles.icon}>{index + 1}</div>}>
          <div style={{ fontSize: '16px', color: '#1890ff' }}>
            {STATUS.find(cur => cur.value == item.project_status)?.label}-
            {SUB_STATUS.find(cur => cur.value == item.status)?.label}
          </div>
          <div>
            持续时间：{item.continuously}
            &nbsp;&nbsp;&nbsp;&nbsp; 修改人员：{item.author_name}
            &nbsp;&nbsp;&nbsp;&nbsp; 修改时间：{moment(item.c_time).format('YYYY-MM-DD')}
          </div>
          {item.attach.length > 0 && <div>附件: {item.attach}</div>}
        </Timeline.Item>
      ))}
    </Timeline>
  );
};
export default StatusRender;