159 lines
6.3 KiB
TypeScript
159 lines
6.3 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import React, {CSSProperties, useEffect} from "react";
|
||
|
|
import {Draggable, Droppable} from "react-beautiful-dnd";
|
||
|
|
import {Table, TableProps, Tooltip} from "antd";
|
||
|
|
import {DataType} from "@/lib/definitions";
|
||
|
|
import './index.modules.css'
|
||
|
|
|
||
|
|
interface DroppableTableProps // extends DragDropContextProps
|
||
|
|
{
|
||
|
|
tableCode:string,
|
||
|
|
taskList:DataType[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
|
||
|
|
|
||
|
|
const [stateName, setStateName] = React.useState("");
|
||
|
|
useEffect(() => {
|
||
|
|
if(props.tableCode=='1'){
|
||
|
|
setStateName('不紧急不重要');
|
||
|
|
}else if (props.tableCode=='2'){
|
||
|
|
setStateName('紧急不重要');
|
||
|
|
}else if (props.tableCode=='3'){
|
||
|
|
setStateName('不紧急重要');
|
||
|
|
}else if (props.tableCode=='4'){
|
||
|
|
setStateName('紧急重要');
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
const getItemStyle = (isDragging:any, draggableStyle:any):CSSProperties => {
|
||
|
|
console.log({draggableStyle})
|
||
|
|
return {
|
||
|
|
// some basic styles to make the items look a bit nicer
|
||
|
|
userSelect: "none",
|
||
|
|
// change background colour if dragging
|
||
|
|
background: isDragging ? "lightgreen" : "grey",
|
||
|
|
// styles we need to apply on draggables
|
||
|
|
...draggableStyle,
|
||
|
|
height:80
|
||
|
|
}};
|
||
|
|
|
||
|
|
const getListStyle = (isDraggingOver:boolean) => ({
|
||
|
|
background: isDraggingOver ? "lightblue" : "lightgrey",
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// 渲染表格行
|
||
|
|
// @ts-ignore
|
||
|
|
const renderTableRow = (data: DataType[], droppableId: string): TableProps<Item>['components']['body']['row'] =>
|
||
|
|
(props:any) => {
|
||
|
|
// console.log({props, droppableId});
|
||
|
|
const { children, ...restProps } = props;
|
||
|
|
const record = data.find((item) => item.id === restProps['data-row-key']);
|
||
|
|
const index = data.findIndex((item) => item.id === restProps['data-row-key']);
|
||
|
|
if (!record) {
|
||
|
|
// console.error('Invalid record at index:', index);
|
||
|
|
return null; // 或者返回一个占位符
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Draggable key={record.id} draggableId={record.id} index={index}>
|
||
|
|
{(provided,snapshot) => (
|
||
|
|
<tr
|
||
|
|
ref={provided.innerRef}
|
||
|
|
{...provided.draggableProps}
|
||
|
|
{...provided.dragHandleProps}
|
||
|
|
style={getItemStyle(
|
||
|
|
snapshot.isDragging,
|
||
|
|
provided.draggableProps.style
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{/*<td>{record.code}</td>*/}
|
||
|
|
<td>{record.name}</td>
|
||
|
|
<td>{record?.description}</td>
|
||
|
|
<td>{record.state}</td>
|
||
|
|
<td>起:{record.expectedStartTime}<br/>
|
||
|
|
止:{record.expectedEndTime}</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
</Draggable>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const calculateScrollHeight = () => {
|
||
|
|
// 计算50%视窗高度减去21px
|
||
|
|
const height = `calc(50vh - 80px)`;
|
||
|
|
return { y: height };
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Droppable droppableId={props.tableCode} key={props.tableCode}>
|
||
|
|
{(provided,snapshot) => (
|
||
|
|
<div ref={provided.innerRef}
|
||
|
|
{...provided.droppableProps}
|
||
|
|
style={getListStyle(snapshot.isDraggingOver)}
|
||
|
|
className="droppable-table"
|
||
|
|
>
|
||
|
|
<Table<DataType>
|
||
|
|
dataSource={props.taskList}
|
||
|
|
scroll={calculateScrollHeight()}
|
||
|
|
columns={[
|
||
|
|
// {
|
||
|
|
// title: '任务编码',
|
||
|
|
// dataIndex: 'code',
|
||
|
|
// key: 'code',
|
||
|
|
// width: '10%',
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
title: stateName,
|
||
|
|
dataIndex: 'name',
|
||
|
|
key: 'name',
|
||
|
|
width: '10%',
|
||
|
|
ellipsis: {
|
||
|
|
showTitle: false,
|
||
|
|
},
|
||
|
|
render: (address) => (
|
||
|
|
<Tooltip placement="topLeft" title={address}>
|
||
|
|
{address}
|
||
|
|
</Tooltip>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '任务描述',
|
||
|
|
dataIndex: 'description',
|
||
|
|
key: 'description',
|
||
|
|
width: '20%',
|
||
|
|
ellipsis: {
|
||
|
|
showTitle: false,
|
||
|
|
},
|
||
|
|
render: (description) => (
|
||
|
|
<Tooltip placement="topLeft" title={description}>
|
||
|
|
{description}
|
||
|
|
</Tooltip>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '任务状态',
|
||
|
|
dataIndex: 'state',
|
||
|
|
width: '5%',
|
||
|
|
key: 'state',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '期望时间',
|
||
|
|
dataIndex: 'expectedStartTime',
|
||
|
|
width: '10%',
|
||
|
|
key: 'expectedStartTime',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
rowKey="id"
|
||
|
|
components={{
|
||
|
|
body: {
|
||
|
|
row: renderTableRow(props.taskList, props.tableCode),
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
pagination={false}
|
||
|
|
/>
|
||
|
|
{provided.placeholder}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Droppable>
|
||
|
|
)
|
||
|
|
}
|