/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-17 11:50:34
|
* @LastEditTime: 2022-12-09 14:14:21
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 我的任务 - 任务列表组件
|
*/
|
import React, { useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Space } from 'dingtalk-design-mobile';
|
import { ClockOutlined, LocationOutlined } from 'dd-icons';
|
import MyList from '../MyList';
|
import { searchTitle, moment } from '../../utils/utility';
|
import routerStatus from '../../status/router';
|
import { task_img_3 } from '../../assets/img';
|
|
const EventList = ({ search, data, dataTotal, hasMore, getScrollTopKey, scrollTop, searchValue, getData }) => {
|
const history = useHistory();
|
|
// 跳转页面至详情页
|
function handleGoToDetail(item) {
|
history.push(`/hztGrid/mediateEventList/detail?eventId=${item.id}&taskId=${item.taskId}`);
|
}
|
|
function msgTime(value, type) {
|
let res = '';
|
if (moment(value).format('YYYYMMDD') === moment().format('YYYYMMDD')) {
|
res = '今日';
|
} else {
|
res = moment(value).format('MM月DD日');
|
}
|
return type ? res : `${res} ${moment(value).format('HH:mm')}`;
|
}
|
|
// 加载更多数据
|
function handleLoadMore(callback) {
|
getData({ ...search, page: search.page + 1 }, '', callback);
|
}
|
|
// 数据更新
|
useEffect(() => {
|
if (routerStatus.spinPage['mediateEventList']) {
|
getData({ ...search, page: 1, size: search.page * search.size }, 'spin');
|
routerStatus.setPageScrollTopNow('mediateEventList');
|
routerStatus.clearSpinPage('mediateEventList');
|
}
|
}, [routerStatus.spinPage['mediateEventList']]);
|
|
return (
|
<>
|
<MyList
|
data={data}
|
dataTotal={dataTotal}
|
hasMore={hasMore}
|
loadMore={handleLoadMore}
|
getScrollTopKey={getScrollTopKey}
|
scrollTop={scrollTop}
|
itemDom={(item) => {
|
return (
|
<div onClick={() => handleGoToDetail(item)} className="task-card">
|
<div className="task-card-header">
|
<img className="task-card-titleIcon" src={task_img_3} alt="" />
|
<span className="task-card-title">{item.eventTypeDesc}</span>
|
</div>
|
<div className="task-card-main">
|
<div className="task-card-main-header">
|
<LocationOutlined />
|
<span className="task-card-main-header-flex ellipsis-text-1">{searchValue ? searchTitle(item.addr, searchValue) : item.addr}</span>
|
</div>
|
<div className="task-card-main-tags">
|
<Space className="task-card-main-tags-flex" wrap>
|
{item.gridName && <div className="public-tag2">{item.gridName}</div>}
|
<div
|
className={`public-tag2 public-tag2-${item.process === '21_00004-2' ? 'organ2' : item.process === '21_00004-3' ? 'blue3' : ''}`}
|
>
|
{item.processDesc}
|
</div>
|
{item.mediResult && (
|
<div className={`public-tag2 public-tag2-${item.mediResult === '22_00025-1' ? 'green' : 'red'}`}>{item.mediResultName}</div>
|
)}
|
</Space>
|
<Space style={{ '--gap': '4px' }}>
|
<ClockOutlined style={{ fontSize: '14px' }} />
|
<div>{msgTime(item.updateTime)}</div>
|
</Space>
|
</div>
|
</div>
|
<div className="task-card-bottom">
|
<div className="task-card-bottom-point" />
|
<div>{item.eventTitle}</div>
|
</div>
|
</div>
|
);
|
}}
|
/>
|
</>
|
);
|
};
|
|
export default EventList;
|
