feat:tree高度设置
This commit is contained in:
parent
42e399fc91
commit
47aeb7c228
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
@ -91,6 +97,16 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
|
|||
{...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>
|
||||
)}
|
||||
|
|
|
@ -289,7 +289,7 @@ const TreeTablePro: React.FC = () => {
|
|||
}
|
||||
}}
|
||||
dateFormatter="string"
|
||||
scroll={{y: 580}}
|
||||
// scroll={{y: 580}}
|
||||
// headerTitle="任务管理"
|
||||
toolBarRender={() => toolBarRenderList}>
|
||||
</ProTable>
|
||||
|
|
Loading…
Reference in New Issue