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>
|
|
|
|
)
|
|
|
|
}
|