feat:列表ok
This commit is contained in:
parent
c5abcf2166
commit
8ab2e8d69c
|
|
@ -29,12 +29,25 @@ export type ResponseVO<T>={
|
|||
export type DataType ={
|
||||
key: React.ReactNode;
|
||||
id: number;
|
||||
pid:number;
|
||||
pPid:number;
|
||||
code: string;
|
||||
name: string;
|
||||
description: string;
|
||||
state: number;
|
||||
priority: number;
|
||||
state: number|string|undefined;
|
||||
priority: number|string|undefined;
|
||||
type:number;
|
||||
action?:React.ReactNode;
|
||||
children: DataType[];
|
||||
expectedStartTime?:Date;
|
||||
expectedEndTime?:Date;
|
||||
actualStartTime?:Date;
|
||||
actualEndTime?:Date;
|
||||
children: DataType[]|undefined;
|
||||
}
|
||||
export type DictType={
|
||||
id:number;
|
||||
code:string
|
||||
name:string;
|
||||
order:number;
|
||||
color:string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import {unstable_noStore as noStore} from 'next/cache';
|
||||
import axios, {AxiosResponse} from "axios";
|
||||
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
|
||||
import {DataType, DictType, ResponseVO, ResultPage} from "@/app/lib/definitions";
|
||||
|
||||
export async function taskTreeResult():Promise<ResponseVO<ResultPage<DataType>>> {
|
||||
export async function taskTreeResult(): Promise<ResponseVO<ResultPage<DataType>>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 POST 请求获取数据
|
||||
|
|
@ -19,3 +19,207 @@ export async function taskTreeResult():Promise<ResponseVO<ResultPage<DataType>>>
|
|||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
export async function getTask(id:number): Promise<ResponseVO<DataType>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 GET 请求获取数据
|
||||
const response: AxiosResponse<ResponseVO<DataType>> = await axios.get('http://localhost:8090/task/'+id);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
|
||||
export async function addTask(task:DataType): Promise<ResponseVO<string>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 POST 请求添加数据
|
||||
const response: AxiosResponse<ResponseVO<string>> = await axios.post('http://localhost:8090/task', task);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
export async function updateTask(task:DataType): Promise<ResponseVO<string>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 PUT 请求修改数据
|
||||
const response: AxiosResponse<ResponseVO<string>> = await axios.put('http://localhost:8090/task', task);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
export async function deleteTask(id:number): Promise<ResponseVO<string>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 DELETE 删除数据
|
||||
const response: AxiosResponse<ResponseVO<string>> = await axios.delete('http://localhost:8090/task/'+id);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
|
||||
export async function editState(id:number,state:number): Promise<ResponseVO<string>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 DELETE 删除数据
|
||||
const response: AxiosResponse<ResponseVO<string>> = await axios.patch('http://localhost:8090/task/'+id);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
|
||||
export async function editPriority(id:number,priority:number): Promise<ResponseVO<string>> {
|
||||
noStore();
|
||||
try {
|
||||
// 使用 Axios 发送 DELETE 删除数据
|
||||
const response: AxiosResponse<ResponseVO<string>> = await axios.patch('http://localhost:8090/task/'+id);
|
||||
// 从响应中提取数据并返回
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// 处理错误
|
||||
console.error('Error fetching data:', error);
|
||||
// 返回一个默认值或者抛出错误
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//0，重要紧急红色，1,重要不紧急黄色，2，不重要紧急灰色，3不重要，不紧急绿色
|
||||
export const taskPriorityList: DictType[] = [
|
||||
{
|
||||
id: 0,
|
||||
code: '0',
|
||||
name: '重要紧急',
|
||||
order: 0,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 1,
|
||||
code: '1',
|
||||
name: '重要不紧急',
|
||||
order: 1,
|
||||
color: 'yellow'
|
||||
}, {
|
||||
id: 2,
|
||||
code: '2',
|
||||
name: '不重要紧急',
|
||||
order: 2,
|
||||
color: 'gary'
|
||||
}, {
|
||||
id: 3,
|
||||
code: '3',
|
||||
name: '不重要不紧急',
|
||||
order: 3,
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
export const TASK_PRIORITY_LIST: DictType[] = [
|
||||
{
|
||||
id: 0,
|
||||
code: '0',
|
||||
name: '重要紧急',
|
||||
order: 0,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 1,
|
||||
code: '1',
|
||||
name: '重要不紧急',
|
||||
order: 1,
|
||||
color: 'yellow'
|
||||
}, {
|
||||
id: 2,
|
||||
code: '2',
|
||||
name: '不重要紧急',
|
||||
order: 2,
|
||||
color: 'gary'
|
||||
}, {
|
||||
id: 3,
|
||||
code: '3',
|
||||
name: '不重要不紧急',
|
||||
order: 3,
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
// 0,暂存，1,提交，2，审核，3通过4拒绝5排期中，6进行中，7完成，8bug修复，9修复完成，10确认，11,上线运行
|
||||
export const taskStateList: DictType[] = [
|
||||
{
|
||||
id: 0,
|
||||
code: '0',
|
||||
name: '暂存',
|
||||
order: 1,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 1,
|
||||
code: '1',
|
||||
name: '提交',
|
||||
order: 1,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 2,
|
||||
code: '2',
|
||||
name: '审核',
|
||||
order: 2,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 3,
|
||||
code: '3',
|
||||
name: '通过',
|
||||
order: 3,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 4,
|
||||
code: '4',
|
||||
name: '拒绝',
|
||||
order: 4,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 5,
|
||||
code: '5',
|
||||
name: '排期中',
|
||||
order: 5,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 6,
|
||||
code: '6',
|
||||
name: '排期中',
|
||||
order: 6,
|
||||
color: 'red'
|
||||
}, {
|
||||
id: 7,
|
||||
code: '7',
|
||||
name: '完成',
|
||||
order: 7,
|
||||
color: 'red'
|
||||
}
|
||||
]
|
||||
export enum OPERATION_BUTTON_TYPE {
|
||||
DETAIL,
|
||||
ADD_CHILD,
|
||||
UPDATE,
|
||||
DELETE,
|
||||
COMPLETE,
|
||||
SHOW_FOUR
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,57 @@
|
|||
'use client'
|
||||
import AcmeLogo from '@/app/ui/acme-logo';
|
||||
import { ArrowRightIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import {useRouter} from "next/navigation";
|
||||
|
||||
|
||||
export default function Home() {
|
||||
const { replace } = useRouter();
|
||||
replace("/task/project")
|
||||
return (
|
||||
|
||||
<main className="flex min-h-screen flex-col p-6">
|
||||
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
|
||||
<AcmeLogo/>
|
||||
</div>
|
||||
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
|
||||
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
|
||||
<p
|
||||
className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}
|
||||
>
|
||||
<strong>Welcome to Acme.</strong> This is the example for the{' '}
|
||||
<a href="https://nextjs.org/learn/" className="text-blue-500">
|
||||
Next.js Learn Course
|
||||
</a>
|
||||
, brought to you by Vercel.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
|
||||
>
|
||||
<span>Log in</span>
|
||||
{/*<ArrowRightIcon className="w-5 md:w-6"/>*/}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
|
||||
{/* Add Hero Images Here */}
|
||||
<Image
|
||||
src="/hero-desktop.png"
|
||||
width={1000}
|
||||
height={760}
|
||||
alt="Screenshots of the dashboard project showing desktop version"
|
||||
className="hidden md:block"
|
||||
/>
|
||||
<Image
|
||||
src="/hero-mobile.png"
|
||||
width={560}
|
||||
height={620}
|
||||
alt="Screenshot of the dashboard project showing mobile version"
|
||||
className="block md:hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">*/}
|
||||
{/* <AcmeLogo/>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="mt-4 flex grow flex-col gap-4 md:flex-row">*/}
|
||||
{/* <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">*/}
|
||||
{/* <p*/}
|
||||
{/* className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}*/}
|
||||
{/* >*/}
|
||||
{/* <strong>Welcome to Acme.</strong> This is the example for the{' '}*/}
|
||||
{/* <a href="https://nextjs.org/learn/" className="text-blue-500">*/}
|
||||
{/* Next.js Learn Course*/}
|
||||
{/* </a>*/}
|
||||
{/* , brought to you by Vercel.*/}
|
||||
{/* </p>*/}
|
||||
{/* <Link*/}
|
||||
{/* href="/login"*/}
|
||||
{/* className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"*/}
|
||||
{/* >*/}
|
||||
{/* <span>Log in</span>*/}
|
||||
{/* /!*<ArrowRightIcon className="w-5 md:w-6"/>*!/*/}
|
||||
{/* </Link>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">*/}
|
||||
{/* /!* Add Hero Images Here *!/*/}
|
||||
{/* <Image*/}
|
||||
{/* src="/hero-desktop.png"*/}
|
||||
{/* width={1000}*/}
|
||||
{/* height={760}*/}
|
||||
{/* alt="Screenshots of the dashboard project showing desktop version"*/}
|
||||
{/* className="hidden md:block"*/}
|
||||
{/* />*/}
|
||||
{/* <Image*/}
|
||||
{/* src="/hero-mobile.png"*/}
|
||||
{/* width={560}*/}
|
||||
{/* height={620}*/}
|
||||
{/* alt="Screenshot of the dashboard project showing mobile version"*/}
|
||||
{/* className="block md:hidden"*/}
|
||||
{/* />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
// Optionally log the error to an error reporting service
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<main className="flex h-full flex-col items-center justify-center">
|
||||
<h2 className="text-center">Something went wrong!</h2>
|
||||
<button
|
||||
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
|
||||
onClick={
|
||||
// Attempt to recover by trying to re-render the invoices route
|
||||
() => reset()
|
||||
}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import Link from 'next/link';
|
||||
import { FaceFrownIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main className="flex h-full flex-col items-center justify-center gap-2">
|
||||
<FaceFrownIcon className="w-10 text-gray-400" />
|
||||
<h2 className="text-xl font-semibold">404 Not Found</h2>
|
||||
<p>Could not find the requested invoice.</p>
|
||||
<Link
|
||||
href="/dashboard/invoices"
|
||||
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
|
||||
>
|
||||
Go Back
|
||||
</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
import TreeTable from "@/app/ui/task/project/TreeTable";
|
||||
import {DetailForm} from "@/app/ui/task/project/DetailForm";
|
||||
|
||||
const Page: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeTable/>
|
||||
<DetailForm itemId={12} operationId={"1"}></DetailForm>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client'
|
||||
import React, { useState } from 'react';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {PlusOutlined} from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Cascader,
|
||||
|
|
@ -9,123 +9,312 @@ import {
|
|||
DatePicker,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
InputNumber, message,
|
||||
Radio,
|
||||
Select,
|
||||
Slider,
|
||||
Slider, Space,
|
||||
Switch,
|
||||
TreeSelect,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import {RangePickerProps} from "antd/es/date-picker";
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
addTask,
|
||||
getTask,
|
||||
OPERATION_BUTTON_TYPE,
|
||||
taskPriorityList,
|
||||
taskStateList,
|
||||
updateTask
|
||||
} from "@/app/lib/task/project/data";
|
||||
import {DataType, DictType} from "@/app/lib/definitions";
|
||||
|
||||
export interface DetailFormProps {
|
||||
itemId: number,
|
||||
operationId: string,
|
||||
pPid:number,
|
||||
operationId: number|undefined,
|
||||
handleCancel: () => void
|
||||
}
|
||||
|
||||
export const DetailForm: React.FC<DetailFormProps> = (props) => {
|
||||
|
||||
|
||||
const [componentDisabled, setComponentDisabled] =
|
||||
useState<boolean>(props.operationId==='1');
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const normFile = (e: any) => {
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e?.fileList;
|
||||
const [form] = Form.useForm();
|
||||
const [componentDisabled, setComponentDisabled] =
|
||||
useState<boolean>(props.operationId === OPERATION_BUTTON_TYPE.DETAIL);
|
||||
const {RangePicker} = DatePicker;
|
||||
const {TextArea} = Input;
|
||||
// const [taskMessage,setTaskMessage]=useState<any>({name:"useState没效果吗,是这样的"});
|
||||
let taskMessage;
|
||||
useEffect(() => {
|
||||
if (props.operationId === OPERATION_BUTTON_TYPE.DETAIL||props.operationId === OPERATION_BUTTON_TYPE.UPDATE) {
|
||||
getTask(props.itemId).then(task => {
|
||||
console.log('getTask(props.itemId)',props.itemId,task);
|
||||
if(task.status.success){
|
||||
// setTaskMessage(task.data)
|
||||
task.data.state=taskStateList.find(taskState=>taskState.code===task.data.state?.toString())?.name;
|
||||
task.data.priority=taskPriorityList.find(taskPriority=>taskPriority.code===task.data.priority?.toString())?.name;
|
||||
form.setFieldsValue(task.data)
|
||||
}else{
|
||||
message.error(task.status.message);
|
||||
props.handleCancel()
|
||||
}
|
||||
})
|
||||
}
|
||||
},[])
|
||||
const normFile = (e: any) => {
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e?.fileList;
|
||||
};
|
||||
const range = (start: number, end: number) => {
|
||||
const result = [];
|
||||
for (let i = start; i < end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
|
||||
// return current && current < dayjs().endOf('day');
|
||||
console.log('current', current, current && current < dayjs().endOf('day'), current < dayjs().endOf('day'))
|
||||
return current < dayjs().startOf('day');
|
||||
};
|
||||
const disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {
|
||||
console.log('current', _)
|
||||
if (type === 'start') {
|
||||
return {
|
||||
disabledHours: () => range(0, 60).splice(4, 20),
|
||||
disabledMinutes: () => range(30, 60),
|
||||
disabledSeconds: () => [55, 56],
|
||||
};
|
||||
}
|
||||
return {
|
||||
disabledHours: () => range(0, 60).splice(20, 4),
|
||||
disabledMinutes: () => range(0, 31),
|
||||
disabledSeconds: () => [55, 56],
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Checkbox
|
||||
checked={componentDisabled}
|
||||
onChange={(e) => setComponentDisabled(e.target.checked)}
|
||||
>
|
||||
Form disabled
|
||||
</Checkbox>
|
||||
<Form
|
||||
labelCol={{span: 4}}
|
||||
wrapperCol={{span: 14}}
|
||||
layout="horizontal"
|
||||
disabled={componentDisabled}
|
||||
style={{maxWidth: 600}}
|
||||
>
|
||||
<Form.Item label="Checkbox" name="disabled" valuePropName="checked">
|
||||
<Checkbox>Checkbox</Checkbox>
|
||||
</Form.Item>
|
||||
<Form.Item label="Radio">
|
||||
<Radio.Group>
|
||||
<Radio value="apple"> Apple </Radio>
|
||||
<Radio value="pear"> Pear </Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Input">
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item label="Select">
|
||||
<Select>
|
||||
<Select.Option value="demo">Demo</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="TreeSelect">
|
||||
<TreeSelect
|
||||
treeData={[
|
||||
{title: 'Light', value: 'light', children: [{title: 'Bamboo', value: 'bamboo'}]},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="Cascader">
|
||||
<Cascader
|
||||
options={[
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="DatePicker">
|
||||
<DatePicker/>
|
||||
</Form.Item>
|
||||
<Form.Item label="RangePicker">
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
<Form.Item label="InputNumber">
|
||||
<InputNumber/>
|
||||
</Form.Item>
|
||||
<Form.Item label="TextArea">
|
||||
<TextArea rows={4}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="Switch" valuePropName="checked">
|
||||
<Switch/>
|
||||
</Form.Item>
|
||||
<Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
|
||||
<Upload action="/upload.do" listType="picture-card">
|
||||
<button style={{border: 0, background: 'none'}} type="button">
|
||||
<PlusOutlined/>
|
||||
<div style={{marginTop: 8}}>Upload</div>
|
||||
</button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item label="Button">
|
||||
<Button>Button</Button>
|
||||
</Form.Item>
|
||||
<Form.Item label="Slider">
|
||||
<Slider/>
|
||||
</Form.Item>
|
||||
<Form.Item label="ColorPicker">
|
||||
<ColorPicker/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values);
|
||||
let request: DataType = {
|
||||
key: values.id,
|
||||
id: values.id,
|
||||
pPid: props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD?props.pPid:values.pPid,
|
||||
pid: props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD?props.itemId:props.operationId===OPERATION_BUTTON_TYPE.UPDATE?values.pid:0,
|
||||
code: values.code,
|
||||
name: values.name,
|
||||
description: values.description,
|
||||
state: values.state,
|
||||
priority: values.priority,
|
||||
type: values.type,
|
||||
children: []
|
||||
}
|
||||
if (values.expectedStartTime) {
|
||||
if (values.expectedStartTime[0]) {
|
||||
request.expectedStartTime = values.expectedStartTime[0]
|
||||
}
|
||||
if (values.expectedStartTime[1]) {
|
||||
request.expectedEndTime = values.expectedStartTime[1]
|
||||
}
|
||||
}
|
||||
if (values.actualStartTime) {
|
||||
if (values.actualStartTime[0]) {
|
||||
request.actualStartTime = values.actualStartTime[0]
|
||||
}
|
||||
if (values.actualStartTime[1]) {
|
||||
request.actualEndTime = values.actualStartTime[1]
|
||||
}
|
||||
}
|
||||
if (props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD){
|
||||
addTask(request).then(response => {
|
||||
console.log('response',response)
|
||||
if (response.status.success) {
|
||||
message.success("添加任务成功："+response.data)
|
||||
props.handleCancel()
|
||||
}
|
||||
}
|
||||
)
|
||||
}else if(props.operationId===OPERATION_BUTTON_TYPE.UPDATE){
|
||||
var stateFind = taskStateList.find(taskState=>taskState.name===request.state?.toString());
|
||||
if (stateFind){
|
||||
request.state=stateFind.code;
|
||||
}
|
||||
var priorityFind =taskPriorityList.find(taskPriority=>taskPriority.name===request.priority?.toString());
|
||||
if(priorityFind){
|
||||
request.priority=priorityFind.code;
|
||||
}
|
||||
updateTask(request).then(response => {
|
||||
console.log('response',response)
|
||||
if (response.status.success) {
|
||||
message.success("修改任务成功："+response.data)
|
||||
props.handleCancel()
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{/*<Checkbox*/}
|
||||
{/* checked={componentDisabled}*/}
|
||||
{/* onChange={(e) => setComponentDisabled(e.target.checked)}*/}
|
||||
{/*>*/}
|
||||
{/* Form disabled*/}
|
||||
{/*</Checkbox>*/}
|
||||
<Form
|
||||
labelCol={{span: 4}}
|
||||
wrapperCol={{span: 14}}
|
||||
layout="horizontal"
|
||||
disabled={componentDisabled}
|
||||
size='large'
|
||||
onFinish={onFinish}
|
||||
initialValues={taskMessage}
|
||||
form={form}
|
||||
// style={{maxWidth: '70%'}}
|
||||
>
|
||||
<Form.Item<DataType> name='id' label="id" hidden={true}>
|
||||
<Input name='id'/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='pid' label="pid" hidden={true}>
|
||||
<Input name='pid'/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='code' label="code" hidden={true}>
|
||||
<Input name='code'/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='pPid' label="pPid" hidden={true}>
|
||||
<Input name='pPid'/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<DataType> name='name' label="任务名称" rules={[{ required: true, message: '任务名称不能为空' }]}>
|
||||
<Input name='name'/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='description' label="任务描述">
|
||||
<TextArea name='description' rows={4}/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='priority' label="任务优先级">
|
||||
<Select options={
|
||||
taskPriorityList.map(taskState => {
|
||||
return {
|
||||
'label': taskState.name,
|
||||
'value': taskState.code
|
||||
}
|
||||
})
|
||||
}>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='state' label="任务状态">
|
||||
<Select options={
|
||||
taskStateList.map(taskState => {
|
||||
return {
|
||||
'label': taskState.name,
|
||||
'value': taskState.code
|
||||
}
|
||||
})
|
||||
}>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<DataType> name={['expectedStartTime']} label="期望">
|
||||
<RangePicker
|
||||
disabledDate={disabledDate}
|
||||
disabledTime={disabledRangeTime}
|
||||
placeholder={['开始时间', '结束时间']}
|
||||
allowEmpty={[true, true]}
|
||||
showTime={{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
||||
}}
|
||||
// format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<DataType> name='actualStartTime' label="实际">
|
||||
<RangePicker
|
||||
disabledDate={disabledDate}
|
||||
disabledTime={disabledRangeTime}
|
||||
placeholder={['开始时间', '结束时间']}
|
||||
allowEmpty={[true, true]}
|
||||
showTime={{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
||||
}}
|
||||
// format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</Form.Item>
|
||||
{/*<Form.Item label="InputNumber">*/}
|
||||
{/* <InputNumber/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Checkbox" name="disabled" valuePropName="checked">*/}
|
||||
{/* <Checkbox>Checkbox</Checkbox>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Radio">*/}
|
||||
{/* <Radio.Group>*/}
|
||||
{/* <Radio value="apple"> Apple </Radio>*/}
|
||||
{/* <Radio value="pear"> Pear </Radio>*/}
|
||||
{/* </Radio.Group>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="TreeSelect">*/}
|
||||
{/* <TreeSelect*/}
|
||||
{/* treeData={[*/}
|
||||
{/* {title: 'Light', value: 'light', children: [{title: 'Bamboo', value: 'bamboo'}]},*/}
|
||||
{/* ]}*/}
|
||||
{/* />*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Cascader">*/}
|
||||
{/* <Cascader*/}
|
||||
{/* options={[*/}
|
||||
{/* {*/}
|
||||
{/* value: 'zhejiang',*/}
|
||||
{/* label: 'Zhejiang',*/}
|
||||
{/* children: [*/}
|
||||
{/* {*/}
|
||||
{/* value: 'hangzhou',*/}
|
||||
{/* label: 'Hangzhou',*/}
|
||||
{/* },*/}
|
||||
{/* ],*/}
|
||||
{/* },*/}
|
||||
{/* ]}*/}
|
||||
{/* />*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="DateTimePicker">*/}
|
||||
{/* <DatePicker/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Switch" valuePropName="checked">*/}
|
||||
{/* <Switch/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>*/}
|
||||
{/* <Upload action="/upload.do" listType="picture-card">*/}
|
||||
{/* <button style={{border: 0, background: 'none'}} type="button">*/}
|
||||
{/* <PlusOutlined/>*/}
|
||||
{/* <div style={{marginTop: 8}}>Upload</div>*/}
|
||||
{/* </button>*/}
|
||||
{/* </Upload>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Button">*/}
|
||||
{/* <Button>Button</Button>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="Slider">*/}
|
||||
{/* <Slider/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
{/*<Form.Item label="ColorPicker">*/}
|
||||
{/* <ColorPicker/>*/}
|
||||
{/*</Form.Item>*/}
|
||||
<Form.Item>
|
||||
<Space>
|
||||
{props.operationId === OPERATION_BUTTON_TYPE.DETAIL ? (
|
||||
// <Button htmlType="button">关闭</Button>
|
||||
<>
|
||||
</>
|
||||
) : (<>
|
||||
<Button type="primary" htmlType="submit">确认</Button>
|
||||
<Button htmlType="button">取消</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,101 @@
|
|||
import React, {Fragment} from "react";
|
||||
import {Button, Dropdown, MenuProps, Modal, Popconfirm, Space} from "antd";
|
||||
import {Button, Dropdown, MenuProps, message, Modal, Popconfirm, Space} from "antd";
|
||||
import {DownOutlined, QuestionCircleOutlined} from "@ant-design/icons";
|
||||
import {DetailForm} from "@/app/ui/task/project/DetailForm";
|
||||
import {deleteTask, OPERATION_BUTTON_TYPE} from "@/app/lib/task/project/data";
|
||||
|
||||
export interface OperationButtonProps {
|
||||
itemId: number
|
||||
itemId: number,
|
||||
pid: number,
|
||||
pPid: number,
|
||||
operationId?: string,
|
||||
refreshDate?: () => void
|
||||
}
|
||||
|
||||
interface OperationModelProps {
|
||||
operationId: string,
|
||||
openModal:boolean
|
||||
operationId: number | undefined,
|
||||
pPid:number,
|
||||
pid: number,
|
||||
openModal: boolean
|
||||
}
|
||||
class OperationButton extends React.Component<OperationButtonProps,OperationModelProps> {
|
||||
|
||||
class OperationButton extends React.Component<OperationButtonProps, OperationModelProps> {
|
||||
|
||||
constructor(props: OperationButtonProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
operationId: '',
|
||||
openModal:false
|
||||
pid: props.pid,
|
||||
pPid: props.pPid,
|
||||
operationId: undefined,
|
||||
openModal: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const handleCancel =()=>{
|
||||
this.setState({...this.state,openModal:false})
|
||||
const handleCancel = () => {
|
||||
this.setState({...this.state, openModal: false})
|
||||
if (this.state.operationId !== OPERATION_BUTTON_TYPE.DETAIL) {
|
||||
this.props.refreshDate?.()
|
||||
}
|
||||
}
|
||||
const onClick: MenuProps['onClick'] = ({key}) => {
|
||||
console.log(key)
|
||||
};
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
key: OPERATION_BUTTON_TYPE.DETAIL,
|
||||
label: <a onClick={(e) => {
|
||||
this.setState({...this.state,openModal:true})
|
||||
}}>详情</a>,
|
||||
this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.DETAIL})
|
||||
}}>任务详情</a>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
key: OPERATION_BUTTON_TYPE.ADD_CHILD,
|
||||
label: <a onClick={(e) => {
|
||||
this.setState({...this.state,openModal:true})
|
||||
}}>添加下级</a>,
|
||||
this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.ADD_CHILD})
|
||||
}}>添加支线任务</a>,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
key: OPERATION_BUTTON_TYPE.UPDATE,
|
||||
label: <a onClick={(e) => {
|
||||
this.setState({...this.state,openModal:true})
|
||||
}}>修改</a>,
|
||||
this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.UPDATE})
|
||||
}}>修改任务</a>,
|
||||
}
|
||||
,
|
||||
{
|
||||
key: '4',
|
||||
key: OPERATION_BUTTON_TYPE.DELETE,
|
||||
label: <Popconfirm
|
||||
title="删除任务"
|
||||
description="确认要删除任务?"
|
||||
icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>删除</Popconfirm>,
|
||||
}
|
||||
,
|
||||
onConfirm={() => {
|
||||
deleteTask(this.props.itemId).then((response => {
|
||||
console.log('response', response)
|
||||
if (response.status.success) {
|
||||
message.success("删除任务成功：" + response.data)
|
||||
this.props.refreshDate?.()
|
||||
}
|
||||
}));
|
||||
}}
|
||||
><a>删除任务</a></Popconfirm>,
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
key: OPERATION_BUTTON_TYPE.COMPLETE,
|
||||
label: <Popconfirm
|
||||
title="完成任务"
|
||||
description="确认要完成任务?"
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>完成</Popconfirm>,
|
||||
><a>完成任务</a></Popconfirm>,
|
||||
},
|
||||
{
|
||||
key: OPERATION_BUTTON_TYPE.SHOW_FOUR,
|
||||
label: <a>四象限显示子任务</a>,
|
||||
}
|
||||
];
|
||||
return <Fragment>
|
||||
<Dropdown menu={{items}}>
|
||||
<Dropdown menu={{items, onClick}}>
|
||||
<a onClick={(e) => {
|
||||
e.preventDefault()
|
||||
}}>
|
||||
|
|
@ -75,11 +105,17 @@ class OperationButton extends React.Component<OperationButtonProps,OperationMode
|
|||
</a>
|
||||
</Dropdown>
|
||||
<Modal
|
||||
maskClosable={false}
|
||||
destroyOnClose={true}
|
||||
open={this.state.openModal}
|
||||
title="Title"
|
||||
title={this.state.operationId === OPERATION_BUTTON_TYPE.DETAIL ? '任务详情' :
|
||||
this.state.operationId === OPERATION_BUTTON_TYPE.ADD_CHILD ? '添加支线任务' :
|
||||
this.state.operationId === OPERATION_BUTTON_TYPE.UPDATE ? '修改任务' : '未知操作'}
|
||||
// open={open}
|
||||
// onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
footer={[]}
|
||||
width={800}
|
||||
// footer={[
|
||||
// <Button key="back" onClick={handleCancel}>
|
||||
// Return
|
||||
|
|
@ -98,7 +134,11 @@ class OperationButton extends React.Component<OperationButtonProps,OperationMode
|
|||
// </Button>,
|
||||
// ]}
|
||||
>
|
||||
<DetailForm itemId={this.props.itemId} operationId={'1'}/>
|
||||
<DetailForm itemId={this.props.itemId}
|
||||
operationId={this.state.operationId}
|
||||
handleCancel={handleCancel}
|
||||
pPid={this.props.pPid}
|
||||
/>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import {Button, ColorPicker, Dropdown, MenuProps, Space, Switch, Table} from 'antd';
|
||||
import type { TableColumnsType, TableProps } from 'antd';
|
||||
import { taskTreeResult} from "@/app/lib/task/project/data";
|
||||
import {taskPriorityList, taskStateList,TASK_PRIORITY_LIST, taskTreeResult} from "@/app/lib/task/project/data";
|
||||
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
|
||||
import {DownOutlined} from "@ant-design/icons";
|
||||
import OperationButton from "@/app/ui/task/project/OperationButton";
|
||||
|
|
@ -63,29 +63,40 @@ const rowSelection: TableRowSelection<DataType> = {
|
|||
console.log(selected, selectedRows, changeRows);
|
||||
},
|
||||
};
|
||||
function recursionActionChild(children:DataType[]){
|
||||
if (children.length===0){
|
||||
return;
|
||||
}
|
||||
children.forEach(item=>{
|
||||
item.key=item.id;
|
||||
item.action=(<OperationButton itemId={item.id}></OperationButton>)
|
||||
recursionActionChild(item.children)
|
||||
})
|
||||
}
|
||||
|
||||
const TreeTable: React.FC = () => {
|
||||
console.log("TreeTable: React.FC ",TASK_PRIORITY_LIST,taskPriorityList)
|
||||
function recursionActionChild(children:DataType[]){
|
||||
if (children.length===0){
|
||||
return;
|
||||
}
|
||||
console.log("TreeTable: React.FC :recursionActionChild",TASK_PRIORITY_LIST,taskPriorityList)
|
||||
for (let item of children) {
|
||||
item.key=item.id;
|
||||
item.action=(<OperationButton itemId={item.id} pid={item.pid} pPid={item.pPid} refreshDate={refreshDate}/>)
|
||||
item.state=taskStateList.find(taskState=>taskState.code===item.state?.toString())?.name;
|
||||
item.priority=taskPriorityList.find(taskPriority=>taskPriority.code===item.priority?.toString())?.name;
|
||||
if (item.children&&item.children.length>0){
|
||||
recursionActionChild(item.children)
|
||||
}else {
|
||||
item.children=undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
// const [checkStrictly, setCheckStrictly] = useState(false);
|
||||
const [data, setData] = useState<DataType[]>([]);
|
||||
const [pageNumber, setPageNumber] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
useEffect(() => {
|
||||
console.log("useEffect::taskTreeResult")
|
||||
const refreshDate=():void=>{
|
||||
taskTreeResult().then((result:ResponseVO<ResultPage<DataType>>)=>{
|
||||
if (result.status.success){
|
||||
recursionActionChild(result.data.content);
|
||||
setData(result.data.content)
|
||||
}
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
refreshDate();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
|
|
@ -93,6 +104,8 @@ const TreeTable: React.FC = () => {
|
|||
{/* CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
|
||||
{/*</Space>*/}
|
||||
<Button type="primary">添加主线任务</Button>
|
||||
<Button type="primary">列表显示</Button>
|
||||
<Button type="primary">四象限显示</Button>
|
||||
<ColorPicker defaultValue="#1677ff" showText/>
|
||||
<Table
|
||||
columns={columns}
|
||||
|
|
|
|||
Loading…
Reference in New Issue