328 lines
14 KiB
TypeScript
328 lines
14 KiB
TypeScript
'use client'
|
|
import {
|
|
CheckSquareFilled, CopyOutlined,
|
|
QuestionCircleOutlined
|
|
} from '@ant-design/icons';
|
|
import type {ActionType, FormInstance, ProColumns, ProFormInstance} from '@ant-design/pro-components';
|
|
import {ProTable, TableDropdown} from '@ant-design/pro-components';
|
|
import {DatePicker, Dropdown, Space, Switch, Tag, Tooltip} from 'antd';
|
|
import React, {Fragment, useContext, useEffect, useRef} from 'react';
|
|
import {DataType} from "@/lib/definitions";
|
|
import {
|
|
getTaskTreeResultAPI,
|
|
OPERATION_BUTTON_TYPE,
|
|
taskPriorityList,
|
|
taskStateList,
|
|
} from "@/lib/task/project/data";
|
|
import {DetailModelForm} from "@/ui/task/project/DetailModelForm";
|
|
import OperationButton from "@/ui/task/OperationButton";
|
|
import dayjs from "dayjs";
|
|
import '@/ui/task/project/TreeTablePro.modules.css'
|
|
import {useSearchParams} from "next/navigation";
|
|
import {TaskWebSelectVO} from "@/lib/task/project/definitions";
|
|
import TaskNameAndIcon from "@/components/TaskNameAndIcon";
|
|
import {copyToClipboard} from "@/lib/copyToClipboard";
|
|
import LocalContext from "@/ui/LocalContent";
|
|
|
|
const TreeTablePro: React.FC = (props: { joinId?: string }) => {
|
|
// 刷新表格
|
|
const actionRef = useRef<ActionType>();
|
|
// 列表和树切换
|
|
const [switchChecked, setSwitchChecked] = React.useState(true);
|
|
// 树子集是否参与过滤
|
|
const [filterChecked, setFilterChecked] = React.useState(true);
|
|
// 页码信息
|
|
const [currentPage, setCurrentPage] = React.useState(1);
|
|
const [pageSize, setPageSize] = React.useState(10);
|
|
const {taskState: state} = useContext(LocalContext);
|
|
// 获取路径参数pid
|
|
const pathPid = useSearchParams().get('pid');
|
|
const pid = pathPid ? pathPid : '0';
|
|
// 时间范围选择
|
|
const {RangePicker} = DatePicker;
|
|
// 列字段定义
|
|
const columns: ProColumns<DataType>[] = [
|
|
{
|
|
key: 'name',
|
|
title: '任务名称',
|
|
dataIndex: 'name',
|
|
width: '15%',
|
|
copyable: true,
|
|
ellipsis: true,
|
|
tooltip: '标题过长会自动收缩',
|
|
formItemProps: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: '此项为必填项',
|
|
},
|
|
],
|
|
},
|
|
render: (_, record) => {
|
|
return <TaskNameAndIcon task={record}/>
|
|
}
|
|
},
|
|
{
|
|
key: 'description',
|
|
title: '任务描述',
|
|
dataIndex: 'description',
|
|
render: (_, record) => {
|
|
return <Fragment>
|
|
|
|
<Tooltip placement="topLeft" title={record.description}>
|
|
<div className='text-ellipsis'>{record.description && <CopyOutlined onClick={(e) => {
|
|
e.preventDefault();
|
|
copyToClipboard(record.description)
|
|
}}/>}{record.description}</div>
|
|
</Tooltip>
|
|
</Fragment>
|
|
}
|
|
},
|
|
{
|
|
key: 'priority',
|
|
title: '任务优先级',
|
|
dataIndex: 'priority',
|
|
order: 2,
|
|
valueType: 'select',
|
|
// 字段对应的组件的属性
|
|
fieldProps: {
|
|
mode: "tags",
|
|
options: taskPriorityList.map(item => {
|
|
return {label: item.name, value: item.code}
|
|
})
|
|
},
|
|
render: (_, record) => (
|
|
<Space>
|
|
{
|
|
// <Tag color={taskPriorityList.find(item => item.code === record.priority?.toString())?.color}
|
|
// key={taskPriorityList.find(item => item.code === record.priority?.toString())?.code}>
|
|
// {taskPriorityList.find(item => item.code === record.priority?.toString())?.name}
|
|
// </Tag>
|
|
<div>
|
|
{/*< HeartFilled/>*/}
|
|
<CheckSquareFilled
|
|
style={{color: taskPriorityList.find(item => item.code === record.priority?.toString())?.color}}/>
|
|
{taskPriorityList.find(item => item.code === record.priority?.toString())?.name}
|
|
</div>
|
|
}
|
|
</Space>
|
|
),
|
|
}, {
|
|
key: 'state',
|
|
title: '任务状态',
|
|
dataIndex: 'state',
|
|
valueType: 'select',
|
|
order: 3,
|
|
initialValue: state =="" ?undefined:state!.split(','),
|
|
fieldProps: {
|
|
defaultValue: state =="" ?undefined:state!.split(','),
|
|
mode: "tags",
|
|
options: taskStateList.map(item => {
|
|
return {label: item.name, value: item.code}
|
|
}),
|
|
},
|
|
}, {
|
|
key: 'expectedStartTime',
|
|
title: '期望时间',
|
|
dataIndex: 'expectedStartTime',
|
|
valueType: 'date',
|
|
order: 1,
|
|
render: (_, record) => {
|
|
return <Fragment>
|
|
<div>
|
|
<div>
|
|
<text>开始:</text>
|
|
{record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : "-"}
|
|
</div>
|
|
<div>
|
|
<text>结束:</text>
|
|
{record.expectedEndTime ? dayjs(record.expectedEndTime).format("YYYY-MM-DD HH:mm") : "-"}
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
},
|
|
renderFormItem: () => <RangePicker allowEmpty={[true, true]}/>
|
|
}, {
|
|
key: 'actualStartTime',
|
|
title: '实际时间',
|
|
dataIndex: 'actualStartTime',
|
|
valueType: 'date',
|
|
render: (_, record) => {
|
|
return <Fragment>
|
|
<div>
|
|
<div>
|
|
<text>开始:</text>
|
|
{record.actualStartTime ? dayjs(record.actualStartTime).format("YYYY-MM-DD HH:mm") : "-"}
|
|
</div>
|
|
<div>
|
|
<text>结束:</text>
|
|
{record.actualEndTime ? dayjs(record.actualEndTime).format("YYYY-MM-DD HH:mm") : "-"}
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
},
|
|
}, {
|
|
key: 'option',
|
|
title: '操作',
|
|
valueType: 'option',
|
|
render: (_, record) => <OperationButton itemId={record.id} itemName={record.name}
|
|
fId={record.fId} fName={record.fName}
|
|
pid={record.pid} pPid={record.pPid}
|
|
priority={record.priority}
|
|
refreshDate={() => {
|
|
actionRef.current?.reload(false);
|
|
}}/>,
|
|
}
|
|
];
|
|
let toolBarRenderList = [
|
|
<DetailModelForm open={false} haveButton={true} key={1} operationId={OPERATION_BUTTON_TYPE.ADD}
|
|
description='添加主线任务' reloadData={() => {
|
|
actionRef.current?.reload(false);
|
|
}}/>,
|
|
<Switch key={2} checkedChildren="树" unCheckedChildren="列表" checked={switchChecked}
|
|
onChange={(checked, event) => {
|
|
setSwitchChecked(checked);
|
|
actionRef.current?.reload?.();
|
|
}}/>,
|
|
];
|
|
if (switchChecked) {
|
|
toolBarRenderList.push(<><span>树子集是否参与过滤</span> <Tooltip
|
|
title="开启树子集过滤后儿子不满足条件，孙子满足条件，儿子和孙子都不会显示。"><QuestionCircleOutlined/></Tooltip>
|
|
<Switch checkedChildren="是" unCheckedChildren="否" checked={filterChecked}
|
|
onChange={(checked, event) => {
|
|
setFilterChecked(checked);
|
|
actionRef.current?.reload(false);
|
|
}}/></>)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (props.joinId) {
|
|
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
actionRef.current?.reload(false)
|
|
}, [useSearchParams()])
|
|
return (
|
|
<ProTable<DataType>
|
|
columns={columns}
|
|
actionRef={actionRef}
|
|
cardBordered
|
|
request={async (params, sort, filter) => {
|
|
// console.log('request',params,params.keyword,sort, filter);
|
|
// const searchList=[]
|
|
// if (switchChecked) {
|
|
// searchList.push({name:'tree',value:'TRUE',operateType:"TREE"})
|
|
// }
|
|
// searchList.push({name:"pid",value:pid,operateType:"="})
|
|
// if (filterChecked) {
|
|
// searchList.push({name:'tree',value:'TRUE',operateType:"TREE-FILTER"})
|
|
// }
|
|
// if (params.state instanceof Array&¶ms.state.length>0){
|
|
// searchList.push({name:'state',value:params.state.join(','),operateType:"IN"})
|
|
// }
|
|
// if (params.priority instanceof Array&¶ms.state.length>0){
|
|
// searchList.push({name:'priority',value:params.priority.join(','),operateType:"IN"})
|
|
// }
|
|
// if (params.expectedStartTime instanceof Array&¶ms.expectedStartTime.length>0){
|
|
// if (params.expectedStartTime[0]){
|
|
// searchList.push({name:'expectedStartTime',value:dayjs(params.expectedStartTime[0]),operateType:">="})
|
|
// }
|
|
// if (params.expectedStartTime[1]){
|
|
// searchList.push({name:'expectedStartTime',value:dayjs(params.expectedStartTime[1]),operateType:"<="})
|
|
// }
|
|
// }
|
|
// if (params.name){
|
|
// searchList.push({name:'name',value:params.name,operateType:"LIKE"})
|
|
// }
|
|
// if (params.description){
|
|
// searchList.push({name:'description',value:params.description,operateType:"LIKE"})
|
|
// }
|
|
// if (params.code){
|
|
// searchList.push({name:'code',value:params.code,operateType:"="})
|
|
// }
|
|
// let request = JSON.stringify({
|
|
// pageSize:params.pageSize,
|
|
// pageNumber:params.current,
|
|
// data: searchList
|
|
// })
|
|
// // const response = await getTaskTreeResult(request)
|
|
console.log({params})
|
|
const search: TaskWebSelectVO =
|
|
{
|
|
pid: pid,
|
|
name: params.name,
|
|
description: params.description,
|
|
}
|
|
// 列表展示
|
|
if (!switchChecked) {
|
|
search.treeOrList = false;
|
|
search.treeList = true;
|
|
search.treeFilter = true;
|
|
} else {
|
|
// 树展示
|
|
search.treeOrList = true;
|
|
search.treeList = true;
|
|
search.treeFilter = filterChecked;
|
|
}
|
|
if (params.state) {
|
|
search.state = params.state.join(',');
|
|
}
|
|
if (params.priority) {
|
|
search.priority = params.priority.join(',');
|
|
}
|
|
if (params.expectedStartTime instanceof Array && params.expectedStartTime.length > 0) {
|
|
if (params.expectedStartTime[0]) {
|
|
search.expectedStartTimeStart = dayjs(params.expectedStartTime[0])
|
|
}
|
|
if (params.expectedStartTime[1]) {
|
|
search.expectedStartTimeEnd = dayjs(params.expectedStartTime[1])
|
|
}
|
|
}
|
|
|
|
const response1 = await getTaskTreeResultAPI({
|
|
pageSize: params.pageSize ? params.pageSize : pageSize,
|
|
pageNumber: params.current ? params.current : currentPage,
|
|
data: search
|
|
})
|
|
|
|
return {
|
|
data: response1.data.content,
|
|
success: response1.status.success,
|
|
total: response1.data.totalElements,
|
|
}
|
|
}}
|
|
editable={{
|
|
type: 'multiple',
|
|
}}
|
|
columnsState={{
|
|
persistenceKey: 'pro-table-singe-demos',
|
|
persistenceType: 'localStorage',
|
|
defaultValue: {
|
|
option: {fixed: 'right', disable: true},
|
|
},
|
|
// onChange(value) {
|
|
// console.log('value: ', value);
|
|
// },
|
|
}}
|
|
rowKey="id"
|
|
rowClassName={(record, i) => (i % 2 === 1 ? "even" : "odd")}
|
|
pagination={{
|
|
current: currentPage,
|
|
pageSize: pageSize,
|
|
onChange: (current, pageSize) => {
|
|
console.log('onChange', current, pageSize)
|
|
setCurrentPage(current)
|
|
setPageSize(pageSize)
|
|
}
|
|
}}
|
|
dateFormatter="string"
|
|
// scroll={{y: 580}}
|
|
// headerTitle="任务管理"
|
|
toolBarRender={() => toolBarRenderList}>
|
|
</ProTable>
|
|
);
|
|
};
|
|
export default TreeTablePro
|