/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-16 20:03:48
|
* @LastEditTime: 2022-09-23 11:56:18
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 页面内底部弹窗中展示“我的任务”列表组件
|
*/
|
import React, { useState } from 'react';
|
import { Space } from 'dingtalk-design-mobile';
|
import ModalDown from '../ModalDown';
|
import TaskHandle02 from '../../views/task/handle/Handle_02';
|
import './index.less';
|
import { dateFormat } from '../../utils/utility';
|
|
const TaskModalContent = ({ visible, data = [], onClose, onReturnCallback }) => {
|
const [taskModal, setTaskModal] = useState({ visible: false });
|
|
const beOverdue = (expireTime) => {
|
if (dateFormat(expireTime) < dateFormat(new Date())) {
|
return true;
|
}
|
return false;
|
};
|
|
return (
|
<>
|
<ModalDown
|
visible={visible}
|
visibleOnClick={onClose}
|
title="我的任务"
|
extraContent={
|
<div className="taskModal">
|
{data.map((x, t) => (
|
<div
|
onClick={() => setTaskModal({ ...x, visible: true })}
|
className={`taskModal-item ${t === data.length - 1 && 'taskModal-item-last'}`}
|
key={t}
|
>
|
<div>
|
<Space style={{ '--gap': '4px' }}>
|
<div className={`public-tag public-tag-red`}>{x.taskTagDesc}</div>
|
<div className="taskModal-item-title">{x.serveObjName}</div>
|
</Space>
|
</div>
|
<div className="taskModal-item-subtitle">任务下达时间：{dateFormat(x.createTime)}</div>
|
<div className="taskModal-item-subtitle">{x.eventContent}</div>
|
<div className="taskModal-item-tag">
|
<Space wrap>
|
<div className="public-tag2">{x.eventTypeDesc}</div>
|
{beOverdue(x.expireTime) && <div className="public-tag2 public-tag2-red">已过期</div>}
|
</Space>
|
</div>
|
</div>
|
))}
|
</div>
|
}
|
isAction={false}
|
/>
|
<TaskHandle02
|
visible={taskModal.visible}
|
taskId={taskModal.taskId}
|
eventType={taskModal.eventType}
|
eventTypeDesc={taskModal.eventTypeDesc}
|
data={taskModal}
|
onClose={() => setTaskModal({ visible: false })}
|
onReturnCallback={onReturnCallback}
|
onSubmitCallback={onClose}
|
/>
|
</>
|
);
|
};
|
|
export default TaskModalContent;
|
