/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-17 11:50:34
|
* @LastEditTime: 2022-12-28 17:37:34
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 我的任务 - 任务列表组件
|
*/
|
import React, { useState, 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 MsgModal from '../MsgModal';
|
import TaskHandle02 from '../../views/task/handle/Handle_02';
|
import { task_img_1, task_img_2, task_img_3 } from '../../assets/img';
|
import { dateFormat, searchTitle, moment, timeFormat } from '../../utils/utility';
|
import routerStatus from '../../status/router';
|
|
const TaskList = ({ search, data, dataTotal, hasMore, getScrollTopKey, scrollTop, searchValue, getTaskData }) => {
|
const history = useHistory();
|
|
// msgModal
|
const [msgModal, setMsgModal] = useState({ visible: false });
|
|
// TaskHandle02
|
const [taskHandleO2Visible, setTaskHandleO2Visible] = useState(false);
|
|
function iconType(key) {
|
if (['030101'].includes(key)) {
|
return task_img_2;
|
} else if (['010101'].includes(key)) {
|
return task_img_3;
|
} else {
|
return task_img_1;
|
}
|
}
|
|
// 已过期
|
function beOverdue(expireTime) {
|
if (expireTime && dateFormat(expireTime) < dateFormat(new Date())) {
|
return true;
|
}
|
return false;
|
}
|
|
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 handleEvent() {
|
setMsgModal({ ...msgModal, visible: false });
|
if (msgModal.status === '2') {
|
// 已完成
|
if (msgModal.eventType === '010101') {
|
// 矛盾纠纷事件
|
history.push(`/hztGrid/mediateEventList/detail?eventId=${msgModal.eventId}&taskId=${msgModal.taskId}&pageFrom=task`);
|
} else {
|
history.push(`/hztGrid/task/detail?eventId=${msgModal.eventId}&eventType=${msgModal.eventType}&taskId=${msgModal.taskId}`);
|
}
|
} else {
|
// 未完成
|
if (['030101'].includes(msgModal.eventType)) {
|
history.push(`/hztGrid/task/handle?eventId=${msgModal.eventId}&eventType=${msgModal.eventType}&taskId=${msgModal.taskId}`);
|
} else if (msgModal.eventType === '010101') {
|
// 矛盾纠纷事件
|
history.push(`/hztGrid/mediateEventList/detail?eventId=${msgModal.eventId}&taskId=${msgModal.taskId}&tabActive=2&pageFrom=task`);
|
} else {
|
setTaskHandleO2Visible(true);
|
}
|
}
|
}
|
|
// 加载更多数据
|
function handleLoadMore(callback) {
|
getTaskData({ ...search, page: search.page + 1 }, '', callback);
|
}
|
|
// 页面刷新
|
useEffect(() => {
|
if (routerStatus.spinPage['task']) {
|
getTaskData({ ...search, page: 1, size: search.page * search.size }, 'spin');
|
routerStatus.setPageScrollTopNow('task');
|
routerStatus.clearSpinPage('task');
|
}
|
}, [routerStatus.spinPage['task']]);
|
|
return (
|
<>
|
<MyList
|
data={data}
|
dataTotal={dataTotal}
|
hasMore={hasMore}
|
loadMore={handleLoadMore}
|
getScrollTopKey={getScrollTopKey}
|
scrollTop={scrollTop}
|
itemDom={(item) => {
|
return item.date ? (
|
<div className="task-title">
|
<Space>
|
<span>{msgTime(item.date, true)}任务</span>
|
<span className="task-title-subtitle">
|
{item.finish}/{item.total}
|
</span>
|
</Space>
|
</div>
|
) : (
|
<div className="task-card" onClick={() => setMsgModal({ visible: true, ...item })}>
|
<div className="task-card-header">
|
<img className="task-card-titleIcon" src={iconType(item.eventType)} 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>}
|
{item.status === '2' && <div className="public-tag2 public-tag2-green">已完成</div>}
|
{beOverdue(item.expireTime) && <div className="public-tag2 public-tag2-red">已过期</div>}
|
</Space>
|
<Space style={{ '--gap': '4px' }}>
|
<ClockOutlined style={{ fontSize: '14px' }} />
|
<div>{msgTime(item.createTime)}</div>
|
</Space>
|
</div>
|
</div>
|
{item.eventTitle && (
|
<div className="task-card-bottom">
|
<div className="task-card-bottom-point" />
|
<div>{item.eventTitle}</div>
|
</div>
|
)}
|
</div>
|
);
|
}}
|
/>
|
{/* 底部消息弹窗 */}
|
<MsgModal
|
visible={msgModal.visible}
|
onClose={() => setMsgModal({ visible: false })}
|
title="任务详情"
|
icon={iconType(msgModal.eventType)}
|
msgTitle={msgModal.eventTypeDesc}
|
msgSubtitle={timeFormat(msgModal.createTime)}
|
msgTag={[
|
{ className: 'public-tag2', text: msgModal.gridNum },
|
...(msgModal.status === '2' ? [{ className: 'public-tag2 public-tag2-green', text: '已完成' }] : []),
|
...(beOverdue(msgModal.expireTime) ? [{ className: 'public-tag2 public-tag2-red', text: '已过期' }] : []),
|
]}
|
content={msgModal.taskContent}
|
actionText={msgModal.status === '2' ? '查看历史' : '立即处理'}
|
actionFunc={handleEvent}
|
contentTitle={msgModal.eventTitle}
|
/>
|
{/* 020101,020102,020103事件任务处理弹窗组件 */}
|
<TaskHandle02
|
visible={taskHandleO2Visible}
|
taskId={msgModal.taskId}
|
eventType={msgModal.eventType}
|
eventTypeDesc={msgModal.eventTypeDesc}
|
data={msgModal}
|
onClose={() => setTaskHandleO2Visible(false)}
|
onReturnCallback={() => {
|
routerStatus.setSpinPage('task');
|
setTaskHandleO2Visible(false);
|
history.push(`/hztGrid/task/handle?eventType=${msgModal.eventType}`);
|
}}
|
onSubmitCallback={() => {
|
setMsgModal({ visible: false });
|
routerStatus.setSpinPage('task');
|
}}
|
/>
|
</>
|
);
|
};
|
|
export default TaskList;
|
