2025-03-19 06:59:45 -04:00
|
|
|
'use client'
|
|
|
|
|
2025-06-26 06:59:31 -04:00
|
|
|
import React, {CSSProperties} from "react";
|
2025-03-19 06:59:45 -04:00
|
|
|
import {Draggable, Droppable} from "react-beautiful-dnd";
|
2025-06-26 06:59:31 -04:00
|
|
|
import {ConfigProvider, Tooltip} from "antd";
|
2025-03-19 06:59:45 -04:00
|
|
|
import {DataType} from "@/lib/definitions";
|
|
|
|
import './index.modules.css'
|
2025-06-26 06:59:31 -04:00
|
|
|
import dayjs from "dayjs";
|
|
|
|
import {getTaskState, taskPriorityList} from "@/lib/task/project/data";
|
|
|
|
import 'react-virtualized/styles.css';
|
2025-07-07 06:46:26 -04:00
|
|
|
import RightOption from "@/ui/task/RightOption";
|
2025-03-19 06:59:45 -04:00
|
|
|
|
2025-06-26 06:59:31 -04:00
|
|
|
interface DroppableTableProps {
|
|
|
|
tableCode: string,
|
|
|
|
taskList: DataType[]
|
2025-03-19 06:59:45 -04:00
|
|
|
}
|
|
|
|
|
2025-06-26 06:59:31 -04:00
|
|
|
export const DroppableTable = React.memo((props: DroppableTableProps) => {
|
|
|
|
const stateName = React.useMemo(() => {
|
|
|
|
switch (props.tableCode) {
|
|
|
|
case '0':
|
|
|
|
return '不紧急不重要';
|
|
|
|
case '1':
|
|
|
|
return '紧急不重要';
|
|
|
|
case '2':
|
|
|
|
return '不紧急重要';
|
|
|
|
case '3':
|
|
|
|
return '紧急重要';
|
|
|
|
default:
|
|
|
|
return '';
|
2025-03-19 06:59:45 -04:00
|
|
|
}
|
2025-06-26 06:59:31 -04:00
|
|
|
}, [props.tableCode]);
|
|
|
|
|
|
|
|
const getItemStyle = React.useCallback((isDragging: boolean, draggableStyle: any): CSSProperties => ({
|
2025-03-19 06:59:45 -04:00
|
|
|
userSelect: "none",
|
2025-06-26 06:59:31 -04:00
|
|
|
background: isDragging ? "lightgreen" : "white",
|
2025-07-07 06:46:26 -04:00
|
|
|
position: 'relative',
|
|
|
|
zIndex: isDragging ? 2147483647 : 'auto',
|
2025-03-19 06:59:45 -04:00
|
|
|
...draggableStyle,
|
2025-06-26 06:59:31 -04:00
|
|
|
borderBottom: '1px solid #f0f0f0',
|
|
|
|
boxSizing: 'border-box',
|
2025-07-07 06:46:26 -04:00
|
|
|
verticalAlign: 'middle',
|
|
|
|
textAlign: 'center',
|
|
|
|
borderColor:taskPriorityList.find((item) => item.code === props.tableCode)?.color
|
2025-06-26 06:59:31 -04:00
|
|
|
}), []);
|
2025-03-19 06:59:45 -04:00
|
|
|
|
2025-06-26 06:59:31 -04:00
|
|
|
const getListStyle = React.useCallback((isDraggingOver: boolean) => ({
|
|
|
|
background: isDraggingOver ? "lightblue" : "white",
|
|
|
|
height: 'calc((100vh - 42px)/2)',
|
|
|
|
width: '50vw'
|
|
|
|
}), []);
|
2025-03-19 06:59:45 -04:00
|
|
|
|
2025-06-26 06:59:31 -04:00
|
|
|
const headerStyle = React.useMemo(() => ({
|
|
|
|
backgroundColor: taskPriorityList.find((item) => item.code === props.tableCode)?.color,
|
|
|
|
height: '55px',
|
2025-07-07 06:46:26 -04:00
|
|
|
// borderBottom: '1px solid #f0f0f0',
|
2025-06-26 06:59:31 -04:00
|
|
|
fontWeight: 'bold'
|
|
|
|
}), [props.tableCode]);
|
2025-03-19 06:59:45 -04:00
|
|
|
|
|
|
|
return (
|
2025-06-26 06:59:31 -04:00
|
|
|
<Droppable droppableId={props.tableCode} key={props.tableCode}>
|
|
|
|
{(provided, snapshot) => (
|
|
|
|
<div
|
|
|
|
ref={provided.innerRef}
|
|
|
|
{...provided.droppableProps}
|
|
|
|
style={getListStyle(snapshot.isDraggingOver)}
|
2025-07-07 06:46:26 -04:00
|
|
|
className="droppable-table scrollHidden"
|
2025-03-19 06:59:45 -04:00
|
|
|
>
|
2025-06-26 06:59:31 -04:00
|
|
|
<ConfigProvider>
|
|
|
|
{/* 表头 */}
|
|
|
|
<div style={headerStyle} className='displayFlexRow'>
|
2025-07-07 06:46:26 -04:00
|
|
|
<div style={{width: '20%'}} className='displayFlexRow'>{stateName}</div>
|
|
|
|
<div style={{width: '45%'}} className='displayFlexRow'>任务描述</div>
|
2025-06-26 06:59:31 -04:00
|
|
|
<div style={{width: '15%'}} className='displayFlexRow'>任务状态</div>
|
|
|
|
<div style={{width: '20%'}} className='displayFlexRow'>期望时间</div>
|
|
|
|
</div>
|
|
|
|
{/* 虚拟列表主体 */}
|
2025-07-07 06:46:26 -04:00
|
|
|
<div style={{height: 'calc(50vh - 76px)',overflow: 'auto'}}>
|
|
|
|
{props.taskList.map((record, index) => {
|
|
|
|
return <Draggable key={record.id} draggableId={record.id} index={index}>
|
|
|
|
{(provided, snapshot) => (
|
2025-07-08 06:55:15 -04:00
|
|
|
<RightOption itemId={record.id} itemName={record.name} pid={record.pid} pPid={record.pPid} children={<div
|
2025-07-07 06:46:26 -04:00
|
|
|
ref={provided.innerRef}
|
|
|
|
{...provided.draggableProps}
|
|
|
|
{...provided.dragHandleProps}
|
|
|
|
style={getItemStyle(snapshot.isDragging, {...provided.draggableProps.style})}
|
|
|
|
className="virtualized-row displayFlexRow"
|
|
|
|
>
|
|
|
|
<div style={{width: '20%'}} className='displayFlexRow'>
|
|
|
|
<Tooltip placement="topLeft" title={record.name}
|
|
|
|
className='displayFlexRow'>
|
|
|
|
<div className='displayFlexRow'>{record.name}</div>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<div style={{width: '45%', boxSizing: 'border-box', minWidth: 0}}
|
|
|
|
className='displayFlexRow'>
|
|
|
|
<Tooltip placement="topLeft" title={record.description}>
|
|
|
|
<div className='displayFlexRow'>{record.description}</div>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<div style={{
|
|
|
|
width: '10%',
|
|
|
|
}}
|
|
|
|
className='displayFlexRow'>{getTaskState(record.state) ? getTaskState(record.state).name : ""}</div>
|
|
|
|
<div style={{width: '25%'}} className='displayFlexColumn'>
|
|
|
|
<div>起: {record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</div>
|
|
|
|
<div>止: {record.expectedEndTime ? dayjs(record.expectedEndTime).format("YYYY-MM-DD HH:mm") : ""}</div>
|
|
|
|
</div>
|
|
|
|
</div>}>
|
|
|
|
|
|
|
|
</RightOption>
|
|
|
|
)}
|
|
|
|
</Draggable>
|
|
|
|
})}
|
2025-06-26 06:59:31 -04:00
|
|
|
</div>
|
2025-06-23 06:49:52 -04:00
|
|
|
</ConfigProvider>
|
2025-03-19 06:59:45 -04:00
|
|
|
{provided.placeholder}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Droppable>
|
|
|
|
)
|
2025-06-26 06:59:31 -04:00
|
|
|
});
|