feat:列表显示子任务

This commit is contained in:
1708-huayu 2024-10-14 15:46:11 +08:00
parent 8243d55f11
commit e0c32ad9bc
7 changed files with 317 additions and 23 deletions

View File

@ -5,4 +5,4 @@ COPY out /usr/share/nginx/html
EXPOSE 3001
CMD ["nginx", "-g", "daemon off;"]
# docker build -t task-manager-nginx .
# docker run -d -p 3001:3001 --restart unless-stopped --name task-manager-nginx task-manager-nginx
# docker run -d -p 3001:3001 --restart unless-stopped -v ./out:/usr/share/nginx/html --name task-manager-nginx task-manager-nginx

View File

@ -4,5 +4,5 @@ COPY task-manager-server.jar /app/task-manager-server.jar
EXPOSE 8090
CMD ["java", "-jar", "task-manager-server.jar","--spring.profiles.active=docker"]
# 指定文件名 当前路径
# docker build -t task-manager-server -f Dockerfile-server .
# docker run -d -p 8090:8090 --restart unless-stopped -v ./hosts:/etc/hosts --name task-manager-server task-manager-server
# docker build -t task-manager-server-db -f Dockerfile-server .
# docker run -d -p 8090:8090 --network task-manager --restart unless-stopped -v ./hosts:/etc/hosts --name task-manager-server-db task-manager-server-db

Binary file not shown.

284
src/app/login/page.tsx Normal file
View File

@ -0,0 +1,284 @@
'use client'
import {
AlipayOutlined,
LockOutlined,
MobileOutlined,
TaobaoOutlined,
UserOutlined,
WeiboOutlined,
} from '@ant-design/icons';
import {
LoginFormPage,
ProConfigProvider,
ProFormCaptcha,
ProFormCheckbox,
ProFormText,
} from '@ant-design/pro-components';
import { Button, Divider, Space, Tabs, message, theme } from 'antd';
import type { CSSProperties } from 'react';
import { useState } from 'react';
type LoginType = 'phone' | 'account';
const iconStyles: CSSProperties = {
color: 'rgba(0, 0, 0, 0.2)',
fontSize: '18px',
verticalAlign: 'middle',
cursor: 'pointer',
};
const Page = () => {
const [loginType, setLoginType] = useState<LoginType>('phone');
const { token } = theme.useToken();
return (
<div
style={{
backgroundColor: 'white',
height: '100vh',
}}
>
<LoginFormPage
backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
logo="https://github.githubassets.com/favicons/favicon.png"
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
title="Github"
containerStyle={{
backgroundColor: 'rgba(0, 0, 0,0.65)',
backdropFilter: 'blur(4px)',
}}
subTitle="全球最大的代码托管平台"
activityConfig={{
style: {
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
color: token.colorTextHeading,
borderRadius: 8,
backgroundColor: 'rgba(255,255,255,0.25)',
backdropFilter: 'blur(4px)',
},
// title: '活动标题,可配置图片',
// subTitle: '活动介绍说明文字',
// action: (
// <Button
// size="large"
// style={{
// borderRadius: 20,
// background: token.colorBgElevated,
// color: token.colorPrimary,
// width: 120,
// }}
// >
// 去看看
// </Button>
// ),
}}
actions={
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
<Divider plain>
<span
style={{
color: token.colorTextPlaceholder,
fontWeight: 'normal',
fontSize: 14,
}}
>
</span>
</Divider>
<Space align="center" size={24}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid ' + token.colorPrimaryBorder,
borderRadius: '50%',
}}
>
<AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid ' + token.colorPrimaryBorder,
borderRadius: '50%',
}}
>
<TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid ' + token.colorPrimaryBorder,
borderRadius: '50%',
}}
>
<WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
</div>
</Space>
</div>
}
>
<Tabs
centered
activeKey={loginType}
onChange={(activeKey) => setLoginType(activeKey as LoginType)}
>
<Tabs.TabPane key={'account'} tab={'账号密码登录'} />
<Tabs.TabPane key={'phone'} tab={'手机号登录'} />
</Tabs>
{loginType === 'account' && (
<>
<ProFormText
name="username"
fieldProps={{
size: 'large',
prefix: (
<UserOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
placeholder={'用户名: admin or user'}
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: 'large',
prefix: (
<LockOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
placeholder={'密码: ant.design'}
rules={[
{
required: true,
message: '请输入密码!',
},
]}
/>
</>
)}
{loginType === 'phone' && (
<>
<ProFormText
fieldProps={{
size: 'large',
prefix: (
<MobileOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
name="mobile"
placeholder={'手机号'}
rules={[
{
required: true,
message: '请输入手机号!',
},
{
pattern: /^1\d{10}$/,
message: '手机号格式错误!',
},
]}
/>
<ProFormCaptcha
fieldProps={{
size: 'large',
prefix: (
<LockOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
captchaProps={{
size: 'large',
}}
placeholder={'请输入验证码'}
captchaTextRender={(timing, count) => {
if (timing) {
return `${count} ${'获取验证码'}`;
}
return '获取验证码';
}}
name="captcha"
rules={[
{
required: true,
message: '请输入验证码!',
},
]}
onGetCaptcha={async () => {
message.success('获取验证码成功验证码为1234');
}}
/>
</>
)}
<div
style={{
marginBlockEnd: 24,
}}
>
<ProFormCheckbox noStyle name="autoLogin">
</ProFormCheckbox>
<a
style={{
float: 'right',
}}
>
</a>
</div>
</LoginFormPage>
</div>
);
};
export default () => {
return (
<ProConfigProvider dark>
<Page />
</ProConfigProvider>
);
};

View File

@ -26,6 +26,7 @@ export default function Layout({children}: { children: React.ReactNode }) {
dataType.state=taskStateList.find(taskState=>taskState.code===dataType.state+'')?.name
})
setResultDataTypeList(result.data.content)
console.log("setResultDataTypeList(result.data.content)",result.data.content)
setLoadingState(false)
}
})
@ -51,7 +52,11 @@ export default function Layout({children}: { children: React.ReactNode }) {
console.log('data',data);
console.log('pid!=null',pid!=null);
if (pid!=null) {
leftUp.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
leftUp.push({name:"pid",value:pid,operateType:"="},
{name:'TREE-FILTER',value:"true",operateType: "TREE-FILTER"},
{name:'ALL-CHILD',value:"true",operateType: "ALL-CHILD"},
);
}else {
if (data.taskState.length>0){
leftUp.push({name:"state",value:data.taskState,operateType:"IN"});

View File

@ -9,6 +9,7 @@ export async function getTaskTreeResult(requestParam:string): Promise<ResponseVO
const response: AxiosResponse<ResponseVO<ResultPage<DataType>>> = await axios.get(
'http://taskmanagerserver.com:8090/search/task_message_tree?search='+encodeURIComponent(requestParam));
// 从响应中提取数据并返回
console.log("response.data",response.data)
return response.data;
} catch (error) {
// 处理错误

View File

@ -40,8 +40,8 @@ const CalShow: React.FC = () => {
start: dayjs(date).startOf('week').toDate(),
end: dayjs(date).endOf('week').toDate()
});
const [state, setState] = useState<string>(useContext(LocalContext).taskState);
let state: string = useContext(LocalContext).taskState
const handleViewChange = (newView: View) => {
setView(newView);
};
@ -54,14 +54,11 @@ const CalShow: React.FC = () => {
setDate(newDate);
const searchList: SearchObject[] = []
if (pid != null) {
searchList.push({name: "pid", value: pid, operateType: "="}, {
name: 'TREE',
value: "false",
operateType: "TREE"
});
searchList.push({name: "pid", value: pid, operateType: "="},
{name: 'ALL-CHILD', value: "true", operateType: "ALL-CHILD"},
{name: 'TREE-FILTER', value: "true", operateType: "TREE-FILTER"},
);
}
searchList.push({name: "expectedStartTime", value: range.start, operateType: ">="})
searchList.push({name: 'expectedStartTime', value: range.end, operateType: "<="})
loadData(searchList);
};
@ -69,14 +66,14 @@ const CalShow: React.FC = () => {
console.log("CalShow:useEffect:range",range)
const searchListE = []
if (pid != null) {
searchListE.push({name: "pid", value: pid, operateType: "="}, {
name: 'TREE',
value: "false",
operateType: "TREE"
});
searchListE.push(
{name: "pid", value: pid, operateType: "="},
{name: 'ALL-CHILD', value: "true", operateType: "ALL-CHILD"},
{name: 'TREE-FILTER', value: "true", operateType: "TREE-FILTER"},
);
}
searchListE.push({name: 'expectedStartTime', value: range.start, operateType: ">="})
searchListE.push({name: 'expectedStartTime', value: range.end, operateType: "<="})
// searchListE.push({name: 'expectedStartTime', value: range.start, operateType: ">="})
// searchListE.push({name: 'expectedStartTime', value: range.end, operateType: "<="})
loadData(searchListE);
/**
* What Is This?
@ -101,11 +98,17 @@ const CalShow: React.FC = () => {
if (state.length > 0) {
searchList.push({name: 'state', value: state, operateType: "IN"})
}
searchList.push({name: 'expectedEndTime', value: dayjs(date).endOf('month'), operateType: "NOT NULL"})
// searchList.push({name: 'expectedEndTime', value: dayjs(date).endOf('month'), operateType: "NOT NULL"})
let request = JSON.stringify({
pageSize: 9999,
pageNumber: 1,
data: searchList
data: searchList,
startTime:range.start,
// startTime:dayjs(range.start).format('YYYY-MM-DD HH:mm:ss'),
endTime:range.end,
// endTime:dayjs(range.end).format('YYYY-MM-DD HH:mm:ss'),
startColumn:"expected_start_time",
endColumn:"expected_end_time"
})
getTaskTreeResult(request).then(responseD => {
if (responseD.status.success) {
@ -186,8 +189,9 @@ const CalShow: React.FC = () => {
if (existing !== undefined&&filtered !== undefined) {
result= [...filtered, {...existing, state:7}];
}
console.log('result',result)
return result;
let strings = state.split(",");
console.log('result',result,strings)
return result.filter((ev: TaskEvent) => strings.indexOf(ev.state.toString())>=0);
})
},250)
}