assistant-todo/src/ui/task/drag/DroppableTable.tsx

176 lines
7.1 KiB
TypeScript
Raw Normal View History

2025-03-19 06:59:45 -04:00
'use client'
import React, {CSSProperties, useEffect} from "react";
import {Draggable, Droppable} from "react-beautiful-dnd";
2025-06-23 06:49:52 -04:00
import {ConfigProvider, Table, TableProps, Tooltip} from "antd";
2025-03-19 06:59:45 -04:00
import {DataType} from "@/lib/definitions";
import './index.modules.css'
2025-06-23 06:49:52 -04:00
import dayjs, {Dayjs} from "dayjs";
import {taskPriorityList} from "@/lib/task/project/data";
2025-03-19 06:59:45 -04:00
interface DroppableTableProps // extends DragDropContextProps
{
tableCode:string,
taskList:DataType[]
}
export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
const [stateName, setStateName] = React.useState("");
useEffect(() => {
2025-06-23 06:49:52 -04:00
if(props.tableCode=='0'){
2025-03-19 06:59:45 -04:00
setStateName('不紧急不重要');
2025-06-23 06:49:52 -04:00
}else if (props.tableCode=='1'){
2025-03-19 06:59:45 -04:00
setStateName('紧急不重要');
2025-06-23 06:49:52 -04:00
}else if (props.tableCode=='2'){
2025-03-19 06:59:45 -04:00
setStateName('不紧急重要');
2025-06-23 06:49:52 -04:00
}else if (props.tableCode=='3'){
2025-03-19 06:59:45 -04:00
setStateName('紧急重要');
}
2025-05-30 06:53:42 -04:00
}, [props]);
2025-03-19 06:59:45 -04:00
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",
2025-06-23 06:49:52 -04:00
overflow:'hidden'
2025-03-19 06:59:45 -04:00
});
2025-06-23 06:49:52 -04:00
function isDayjs(obj: unknown): obj is Dayjs {
return obj != null && typeof (obj as Dayjs).format === 'function';
}
2025-03-19 06:59:45 -04:00
// 渲染表格行
// @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>
2025-06-23 06:49:52 -04:00
<td>:{record.expectedStartTime? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") :""}<br/>
:{record.expectedStartTime? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</td>
2025-03-19 06:59:45 -04:00
</tr>
)}
</Draggable>
);
};
const calculateScrollHeight = () => {
// 计算50%视窗高度减去21px
const height = `calc(50vh - 80px)`;
return { y: height };
};
return (
2025-06-23 06:49:52 -04:00
<Droppable droppableId={props.tableCode} key={props.tableCode} >
2025-03-19 06:59:45 -04:00
{(provided,snapshot) => (
<div ref={provided.innerRef}
{...provided.droppableProps}
style={getListStyle(snapshot.isDraggingOver)}
className="droppable-table"
>
2025-06-23 06:49:52 -04:00
<ConfigProvider
theme={{
components: {
Table: {
headerBg: taskPriorityList.find((item) => item.code === props.tableCode)?.color
/* 这里是你的组件 token */
},
},
}}
>
2025-03-19 06:59:45 -04:00
<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}
/>
2025-06-23 06:49:52 -04:00
</ConfigProvider>
2025-03-19 06:59:45 -04:00
{provided.placeholder}
</div>
)}
</Droppable>
)
}