feat:tree高度设置

This commit is contained in:
1708-huayu 2025-06-23 18:49:52 +08:00
parent 42e399fc91
commit 47aeb7c228
7 changed files with 42 additions and 21 deletions

View File

@ -22,7 +22,7 @@ export default function RootLayout({
<link rel="icon" href="/favicon.ico"/>
<script src="/static/iconfont.js"></script>
</head>
<body style={{margin: 0}}>{children}</body>
<body style={{margin: 0,padding:0,maxHeight:"100vh",overflow:"hidden"}}>{children}</body>
</html>
);
}

View File

@ -3,8 +3,10 @@
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
height: 100vh;
padding: 6rem;
min-height: 100vh;
}
.description {
display: inherit;

View File

@ -44,14 +44,14 @@ export default function Layout({children}: { children: React.ReactNode }) {
return (
<DragDropContext onDragEnd={onDragEnd}>
<div style={{display: 'flex',flexWrap: 'wrap',boxSizing: 'border-box',width:'100vw'}}>
{/* 不紧急不重要 */}
<DroppableTable tableCode='1' taskList={allTaskList.filter(task => task.priority == '1')}/>
{/* 紧急不重要 */}
<DroppableTable tableCode="2" taskList={allTaskList.filter(task => task.priority == '2')}/>
{/* 不紧急重要 */}
<DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
{/* 紧急重要 */}
<DroppableTable tableCode='4' taskList={allTaskList.filter(task => task.priority == '4')}/>
<DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
{/* 不紧急重要 */}
<DroppableTable tableCode='2' taskList={allTaskList.filter(task => task.priority == '2')}/>
{/* 紧急不重要 */}
<DroppableTable tableCode="1" taskList={allTaskList.filter(task => task.priority == '1')}/>
{/* 不紧急不重要 */}
<DroppableTable tableCode='0' taskList={allTaskList.filter(task => task.priority == '0')}/>
</div>
</DragDropContext>
);

View File

@ -37,7 +37,9 @@ export default function Layout({children}: { children: React.ReactNode }) {
}}>
<TitleOperation setTaskState={setTaskState} setExpectedStartTime={setExpectedStartTime}
refreshData={refreshData}/>
<div style={{height:"calc(100vh - 42px)",overflow:"auto"}}>
{children}
</div>
</LocalContext.Provider>
</ConfigProvider>
</Fragment>

View File

@ -42,8 +42,8 @@ export type DataType = TaskMessage&{
key: React.ReactNode;
type:number;
action?:React.ReactNode;
expectedStartTime?:string;
expectedEndTime?:string;
expectedStartTime?:string|Dayjs;
expectedEndTime?:string|Dayjs;
expectedTimeRange?:(string|Dayjs|undefined)[];
actualStartTime?:Date;
actualEndTime?:Date;

View File

@ -2,9 +2,11 @@
import React, {CSSProperties, useEffect} from "react";
import {Draggable, Droppable} from "react-beautiful-dnd";
import {Table, TableProps, Tooltip} from "antd";
import {ConfigProvider, Table, TableProps, Tooltip} from "antd";
import {DataType} from "@/lib/definitions";
import './index.modules.css'
import dayjs, {Dayjs} from "dayjs";
import {taskPriorityList} from "@/lib/task/project/data";
interface DroppableTableProps // extends DragDropContextProps
{
@ -16,13 +18,13 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
const [stateName, setStateName] = React.useState("");
useEffect(() => {
if(props.tableCode=='1'){
if(props.tableCode=='0'){
setStateName('不紧急不重要');
}else if (props.tableCode=='2'){
}else if (props.tableCode=='1'){
setStateName('紧急不重要');
}else if (props.tableCode=='3'){
}else if (props.tableCode=='2'){
setStateName('不紧急重要');
}else if (props.tableCode=='4'){
}else if (props.tableCode=='3'){
setStateName('紧急重要');
}
}, [props]);
@ -40,8 +42,12 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
const getListStyle = (isDraggingOver:boolean) => ({
background: isDraggingOver ? "lightblue" : "lightgrey",
overflow:'hidden'
});
function isDayjs(obj: unknown): obj is Dayjs {
return obj != null && typeof (obj as Dayjs).format === 'function';
}
// 渲染表格行
// @ts-ignore
@ -71,8 +77,8 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
<td>{record.name}</td>
<td>{record?.description}</td>
<td>{record.state}</td>
<td>:{record.expectedStartTime}<br/>
:{record.expectedEndTime}</td>
<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>
</tr>
)}
</Draggable>
@ -85,12 +91,22 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
};
return (
<Droppable droppableId={props.tableCode} key={props.tableCode}>
<Droppable droppableId={props.tableCode} key={props.tableCode} >
{(provided,snapshot) => (
<div ref={provided.innerRef}
{...provided.droppableProps}
style={getListStyle(snapshot.isDraggingOver)}
className="droppable-table"
>
<ConfigProvider
theme={{
components: {
Table: {
headerBg: taskPriorityList.find((item) => item.code === props.tableCode)?.color
/* 这里是你的组件 token */
},
},
}}
>
<Table<DataType>
dataSource={props.taskList}
@ -151,6 +167,7 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
}}
pagination={false}
/>
</ConfigProvider>
{provided.placeholder}
</div>
)}

View File

@ -289,7 +289,7 @@ const TreeTablePro: React.FC = () => {
}
}}
dateFormatter="string"
scroll={{y: 580}}
// scroll={{y: 580}}
// headerTitle="任务管理"
toolBarRender={() => toolBarRenderList}>
</ProTable>