107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
|
'use client'
|
||
|
|
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 {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
|
||
|
|
import {DownOutlined} from "@ant-design/icons";
|
||
|
|
import OperationButton from "@/app/ui/task/project/OperationButton";
|
||
|
|
|
||
|
|
type TableRowSelection<T> = TableProps<T>['rowSelection'];
|
||
|
|
|
||
|
|
|
||
|
|
const columns: TableColumnsType<DataType> = [
|
||
|
|
{
|
||
|
|
title: '任务编码',
|
||
|
|
dataIndex: 'code',
|
||
|
|
key: 'code',
|
||
|
|
width: '10%',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '任务名称',
|
||
|
|
dataIndex: 'name',
|
||
|
|
key: 'name',
|
||
|
|
width: '20%',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '任务描述',
|
||
|
|
dataIndex: 'description',
|
||
|
|
width: '30%',
|
||
|
|
key: 'description',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '任务状态',
|
||
|
|
dataIndex: 'state',
|
||
|
|
width: '10%',
|
||
|
|
key: 'state',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '优先级',
|
||
|
|
dataIndex: 'priority',
|
||
|
|
width: '10%',
|
||
|
|
key: 'priority',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
dataIndex: 'action',
|
||
|
|
width: '10%',
|
||
|
|
key: 'action',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// rowSelection objects indicates the need for row selection
|
||
|
|
const rowSelection: TableRowSelection<DataType> = {
|
||
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
||
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||
|
|
},
|
||
|
|
onSelect: (record, selected, selectedRows) => {
|
||
|
|
console.log(record, selected, selectedRows);
|
||
|
|
},
|
||
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
||
|
|
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 = () => {
|
||
|
|
// 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")
|
||
|
|
taskTreeResult().then((result:ResponseVO<ResultPage<DataType>>)=>{
|
||
|
|
if (result.status.success){
|
||
|
|
recursionActionChild(result.data.content);
|
||
|
|
setData(result.data.content)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, []);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/*<Space align="center" style={{ marginBottom: 16 }}>*/}
|
||
|
|
{/* CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
|
||
|
|
{/*</Space>*/}
|
||
|
|
<Button type="primary">添加主线任务</Button>
|
||
|
|
<ColorPicker defaultValue="#1677ff" showText/>
|
||
|
|
<Table
|
||
|
|
columns={columns}
|
||
|
|
// rowSelection={{ ...rowSelection, checkStrictly}}
|
||
|
|
dataSource={data}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TreeTable;
|