huayu-web
/
assistant-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:期望开始时间

This commit is contained in:
shixiaohua 2024-04-23 13:19:26 +08:00
parent cae04dfe4f
commit d6087db3f9
10 changed files with 174 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -15,7 +15,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html> <html>
<body>{children}</body> <body style={{margin:0}}>{children}</body>
</html> </html>
); );
} }

2
src/app/lib/definitions.ts
View File

@ -39,7 +39,7 @@ export type DataType ={
priority: number|string|undefined; priority: number|string|undefined;
type:number; type:number;
action?:React.ReactNode; action?:React.ReactNode;
expectedStartTime?:Date; expectedStartTime?:Date|string;
expectedEndTime?:Date; expectedEndTime?:Date;
expectedTimeRange?:(string|Dayjs)[]; expectedTimeRange?:(string|Dayjs)[];
actualStartTime?:Date; actualStartTime?:Date;

31
src/app/task/four/layout.tsx
View File

@ -2,7 +2,8 @@
import SideNav from '@/app/ui/dashboard/sidenav'; import SideNav from '@/app/ui/dashboard/sidenav';
import TreeTable from "@/app/ui/task/project/TreeTable"; import TreeTable from "@/app/ui/task/project/TreeTable";
import '@/app/ui/task/four/index.modules.css' import '@/app/ui/task/four/index.modules.css'
import {useEffect} from "react"; import {useContext, useEffect} from "react";
import LocalContext from "@/app/ui/LocalContent";
export default function Layout({children}: { children: React.ReactNode }) { export default function Layout({children}: { children: React.ReactNode }) {
// useEffect(() => { // useEffect(() => {
@ -33,12 +34,30 @@ export default function Layout({children}: { children: React.ReactNode }) {
// @ts-ignore // @ts-ignore
document.getElementById('tenLeft').style.fontSize = divHeight/6*4 + 'px'; document.getElementById('tenLeft').style.fontSize = divHeight/6*4 + 'px';
}, []); }, []);
const data = useContext(LocalContext);
console.log('data-data.taskState',data.taskState,);
const leftUp = [{name:"priority",value:"3",operateType:"="}];
const rightUp =[{name:"priority",value:"2",operateType:"="}];
const leftDown = [{name:"priority",value:"1",operateType:"="}];
const rightDown = [{name:"priority",value:"0",operateType:"="}];
if (data.taskState.length>0){
leftUp.push({name:"state",value:data.taskState,operateType:"IN"});
rightUp.push({name:"state",value:data.taskState,operateType:"IN"});
leftDown.push({name:"state",value:data.taskState,operateType:"IN"});
rightDown.push({name:"state",value:data.taskState,operateType:"IN"});
}
if (data.expectedStartTime.length>0){
const parse = JSON.parse(data.expectedStartTime);
leftUp.push(...parse);
rightUp.push(...parse);
leftDown.push(...parse);
rightDown.push(...parse);
}
return ( return (
<div> <div>
<div className='firstRow' style={{display: 'flex'}}> <div className='firstRow' style={{display: 'flex'}}>
<div className='leftUp'> <div className='leftUp'>
<TreeTable search={{name:"priority",value:"3",operateType:"="}}/> <TreeTable search={leftUp}/>
</div> </div>
<div id='tenUp' className='up'> <div id='tenUp' className='up'>
@ -46,7 +65,7 @@ export default function Layout({children}: { children: React.ReactNode }) {
</div> </div>
<div className='rightUp' > <div className='rightUp' >
<TreeTable search={{name:"priority",value:"2",operateType:"="}}/> <TreeTable search={rightUp}/>
</div> </div>
</div> </div>
<div id='left' className='left'> <div id='left' className='left'>
@ -54,14 +73,14 @@ export default function Layout({children}: { children: React.ReactNode }) {
</div> </div>
<div className='secondRow' style={{display: 'flex'}}> <div className='secondRow' style={{display: 'flex'}}>
<div className='leftDown'> <div className='leftDown'>
<TreeTable search={{name:"priority",value:"1",operateType:"="}}/> <TreeTable search={leftDown}/>
</div> </div>
<div className='up'> <div className='up'>
<span id='upDown'>向上重要</span> <span id='upDown'>向上重要</span>
</div> </div>
{/*<div style={{float:'left',width:'48%',height: '48vh',background:"gray"}}>{children}</div>*/} {/*<div style={{float:'left',width:'48%',height: '48vh',background:"gray"}}>{children}</div>*/}
<div className='rightDown'> <div className='rightDown'>
<TreeTable search={{name:"priority",value:"0",operateType:"="}}/> <TreeTable search={rightDown}/>
</div> </div>
</div> </div>
</div> </div>

15
src/app/task/layout.tsx
View File

@ -1,12 +1,21 @@
'use client' 'use client'
import React from "react"; import React from "react";
import {TitleOperation} from "@/app/ui/task/TitleOperation"; import {TitleOperation} from "@/app/ui/task/TitleOperation";
import LocalContext from "../ui/LocalContent";
import dayjs from "dayjs";
export default function Layout({children}: { children: React.ReactNode }) { export default function Layout({children}: { children: React.ReactNode }) {
const [taskState, setTaskState] = React.useState<string>('8,9')
let expectStartTimeList=[];
expectStartTimeList.push({'name':"expectedStartTime",'value':dayjs().subtract(7,'day'),'operateType':">="});
expectStartTimeList.push({'name':"expectedStartTime",'value':dayjs().add(7,'day'),'operateType':"<"})
const [expectedStartTime, setExpectedStartTime] = React.useState<string>(JSON.stringify(expectStartTimeList))
return ( return (
<div> <div>
<TitleOperation/> <TitleOperation setTaskState={setTaskState} setExpectedStartTime={setExpectedStartTime}/>
{children}</div> <LocalContext.Provider value={{'taskState':taskState,'expectedStartTime':expectedStartTime}}>
{children}
</LocalContext.Provider>
</div>
); );
} }

12
src/app/task/list/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import TreeTable from "@/app/ui/task/project/TreeTable";
import TreeTablePro from "@/app/ui/task/project/TreeTablePro";
const Page: React.FC = () => {
return (
<>
<TreeTable/>
</>
);
};
export default Page;

5
src/app/ui/LocalContent.tsx Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
const LocalContext = React.createContext({'taskState':'','expectedStartTime':''});
export default LocalContext;

3
src/app/ui/task/TitleOperation.modules.css Normal file
View File

@ -0,0 +1,3 @@
.ant-select-selection-overflow-item-suffix{
visibility: hidden;
}

104
src/app/ui/task/TitleOperation.tsx
View File

@ -1,25 +1,91 @@
import React from "react"; import React from "react";
import {Button} from "antd"; import {Button, DatePicker, Flex, Select, Space} from "antd";
import {usePathname, useRouter} from "next/navigation"; import {usePathname, useRouter} from "next/navigation";
import {DetailFormProps} from "@/app/ui/task/project/DetailForm";
import {DetailModelForm} from "@/app/ui/task/project/DetailModelForm"; import {DetailModelForm} from "@/app/ui/task/project/DetailModelForm";
import {OPERATION_BUTTON_TYPE} from "@/app/lib/task/project/data"; import {OPERATION_BUTTON_TYPE, taskStateList} from "@/app/lib/task/project/data";
import AdvancedSearchForm from "@/app/ui/task/AdvancedSearchForm"; import './TitleOperation.modules.css'
import CustomSearchForm from "@/app/ui/task/CustomSearchForm"; import dayjs from "dayjs";
// export const TitleOperation: React.FC<DetailFormProps>= () => interface TitleOperationProps {
export const TitleOperation: React.FC = () => { setTaskState: (value: string) => void;
setExpectedStartTime:(value:string)=>void;
}
export const TitleOperation: React.FC<TitleOperationProps> = ({setTaskState,setExpectedStartTime}: TitleOperationProps) => {
const {replace} = useRouter(); const {replace} = useRouter();
const [currentPath, setCurrentPath] = React.useState(usePathname()); const [currentPath, setCurrentPath] = React.useState(usePathname());
return <div style={{display: 'flex'}}> const {RangePicker} = DatePicker;
<DetailModelForm operationId={OPERATION_BUTTON_TYPE.ADD} description='添加主线任务'/> return <Space style={{marginTop:0}}>
{currentPath.startsWith("/task/project") ? <Button type="primary" onClick={() => { <DetailModelForm operationId={OPERATION_BUTTON_TYPE.ADD} description='添加主线任务'/>
replace("/task/four"); {currentPath.startsWith("/task/project") ?
setCurrentPath("/task/four"); <>
}}>四象限显示</Button> : <Button type="primary" onClick={() => {
<Button type="primary" onClick={() => { replace("/task/four");
replace("/task/project"); setCurrentPath("/task/four");
setCurrentPath("/task/project") }}>四象限显示</Button>
}}>列表显示</Button>} <Button type="primary" onClick={() => {
<AdvancedSearchForm/> replace("/task/list");
</div> setCurrentPath("/task/list");
}}>列表展示</Button>
</> :
currentPath.startsWith("/task/list") ?
<>
<Button type="primary" onClick={() => {
replace("/task/project");
setCurrentPath("/task/project")
}}>任务树</Button>
<Button type="primary" onClick={() => {
replace("/task/four");
setCurrentPath("/task/four");
}}>四象限显示</Button>
</> : <>
<Button type="primary" onClick={() => {
replace("/task/project");
setCurrentPath("/task/project");
}}>任务树</Button>
<Button type="primary" onClick={() => {
replace("/task/list");
setCurrentPath("/task/list");
}}>列表展示</Button>
</>
}
{/*<AdvancedSearchForm/>*/}
<span style={{whiteSpace: 'nowrap'}}>任务状态:</span>
<Select
mode="multiple"
allowClear
style={{minWidth: '100px'}}
placeholder="任务状态"
defaultValue={['8', '9']}
onChange={(value) => {
console.log('onChange')
setTaskState(value.join(','))
}}
options={taskStateList.map(item => {
return {label: item.name, value: item.code}
})}
/>
<span style={{whiteSpace: 'nowrap'}}>期望开始时间范围:</span>
<RangePicker
placeholder={['开始时间','结束时间']}
defaultValue={[dayjs().subtract(7,'day'),dayjs().add(7,'day')]}
allowEmpty={[true, true]}
onChange={(dates, dateStrings)=>{
console.log('onChange:',dates,dateStrings);
if(!dates){
setExpectedStartTime('')
return
}
let expectStartTimeList=[];
if (dates[0]) {
expectStartTimeList.push({'name':"expectedStartTime",'value':dates[0],'operateType':">="});
}
if (dates[1]) {
expectStartTimeList.push({'name':"expectedStartTime",'value':dates[1].add(1,'day'),'operateType':"<"})
}
setExpectedStartTime(JSON.stringify(expectStartTimeList))
}}
/>
</Space>
{/*</Flex>*/}
} }

8
src/app/ui/task/four/index.modules.css
View File

@ -4,7 +4,7 @@ div{
.leftUp{ .leftUp{
width: 49%; width: 49%;
height: 45vh; height: 45vh;
background: red; /*background: red;*/
} }
.up{ .up{
width: 2%; width: 2%;
@ -14,7 +14,7 @@ div{
.rightUp{ .rightUp{
width: 49%; width: 49%;
height: 45vh; height: 45vh;
background: yellow; /*background: yellow;*/
} }
.left{ .left{
width: 100%; width: 100%;
@ -25,13 +25,13 @@ div{
.leftDown{ .leftDown{
width: 49%; width: 49%;
height: 45vh; height: 45vh;
background: gray; /*background: gray;*/
} }
.rightDown{ .rightDown{
/*float: right;*/ /*float: right;*/
width: 49%; width: 49%;
height: 45vh; height: 45vh;
background: green; /*background: green;*/
} }
/*#tenLeft {*/ /*#tenLeft {*/

42
src/app/ui/task/project/TreeTable.tsx
View File

@ -1,12 +1,11 @@
'use client' 'use client'
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {Button, ColorPicker, Dropdown, MenuProps, Space, Switch, Table} from 'antd'; import {Table} from 'antd';
import type {TableColumnsType, TableProps} from 'antd'; import type {TableColumnsType, TableProps} from 'antd';
import {getTaskTreeResult, taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data"; import {getTaskTreeResult, taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data";
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions"; import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
import {DownOutlined} from "@ant-design/icons";
import {useSearchParams, usePathname, useRouter} from 'next/navigation';
import OperationButton from "@/app/ui/task/project/OperationButton"; import OperationButton from "@/app/ui/task/project/OperationButton";
import dayjs from "dayjs";
type TableRowSelection<T> = TableProps<T>['rowSelection']; type TableRowSelection<T> = TableProps<T>['rowSelection'];
@ -24,12 +23,12 @@ const columns: TableColumnsType<DataType> = [
key: 'name', key: 'name',
width: '20%', width: '20%',
}, },
{ // {
title: '任务描述', // title: '任务描述',
dataIndex: 'description', // dataIndex: 'description',
width: '30%', // // width: '30%',
key: 'description', // key: 'description',
}, // },
{ {
title: '任务状态', title: '任务状态',
dataIndex: 'state', dataIndex: 'state',
@ -42,6 +41,12 @@ const columns: TableColumnsType<DataType> = [
// width: '10%', // width: '10%',
// key: 'priority', // key: 'priority',
// }, // },
{
title: '期望开始时间',
dataIndex: 'expectedStartTime',
width: '10%',
key: 'expectedStartTime',
},
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
@ -79,23 +84,27 @@ const TreeTable: React.FC<TableSearchType> = (props) => {
<OperationButton itemId={item.id} pid={item.pid} pPid={item.pPid} refreshDate={refreshDate}/>) <OperationButton itemId={item.id} pid={item.pid} pPid={item.pPid} refreshDate={refreshDate}/>)
item.state = taskStateList.find(taskState => taskState.code === item.state?.toString())?.name; item.state = taskStateList.find(taskState => taskState.code === item.state?.toString())?.name;
item.priority = taskPriorityList.find(taskPriority => taskPriority.code === item.priority?.toString())?.name; item.priority = taskPriorityList.find(taskPriority => taskPriority.code === item.priority?.toString())?.name;
if (item.expectedStartTime) {
item.expectedStartTime = dayjs(item.expectedStartTime).format('YYYY-MM-DD HH:mm:ss')
}
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
recursionActionChild(item.children) if (item.children && item.children.length > 0) {
} else { recursionActionChild(item.children)
item.children = undefined } else {
item.children = undefined
}
} }
} }
} }
// const [checkStrictly, setCheckStrictly] = useState(false); // const [checkStrictly, setCheckStrictly] = useState(false);
const [data, setData] = useState<DataType[]>([]); const [data, setData] = useState<DataType[]>([]);
const [pageNumber, setPageNumber] = useState<number>(1); const [pageNumber, setPageNumber] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10); const [pageSize, setPageSize] = useState<number>(100);
const refreshDate = (): void => { const refreshDate = (): void => {
getTaskTreeResult(JSON.stringify({ getTaskTreeResult(JSON.stringify({
pageSize, pageSize,
pageNumber, pageNumber,
data: [props.search] data: props.search
})).then((result: ResponseVO<ResultPage<DataType>>) => { })).then((result: ResponseVO<ResultPage<DataType>>) => {
if (result.status.success) { if (result.status.success) {
recursionActionChild(result.data.content); recursionActionChild(result.data.content);
@ -105,7 +114,7 @@ const TreeTable: React.FC<TableSearchType> = (props) => {
} }
useEffect(() => { useEffect(() => {
refreshDate(); refreshDate();
}, []); }, [props.search]);
return ( return (
<> <>
{/*<Space align="center" style={{ marginBottom: 16 }}>*/} {/*<Space align="center" style={{ marginBottom: 16 }}>*/}
@ -116,6 +125,7 @@ const TreeTable: React.FC<TableSearchType> = (props) => {
columns={columns} columns={columns}
// rowSelection={{ ...rowSelection, checkStrictly}} // rowSelection={{ ...rowSelection, checkStrictly}}
dataSource={data} dataSource={data}
pagination={{ pageSize: 10 }}
/> />
</> </>
); );