feat:formRef.submit会更新页码

This commit is contained in:
shixiaohua 2024-04-29 10:50:41 +08:00
parent 8c7ea87a0f
commit d513ebee9e
6 changed files with 33 additions and 39 deletions

View File

@ -1,3 +0,0 @@
export default function Page() {
return <p>Customer Page</p>;
}

View File

@ -1,3 +0,0 @@
export default function Page() {
return <p>Invoice Page</p>;
}

View File

@ -1,12 +0,0 @@
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}

View File

@ -1,3 +0,0 @@
export default function Loading() {
return <div>Loading...</div>;
}

View File

@ -1,3 +0,0 @@
export default function Page() {
return <p>Dashboard Page</p>;
}

View File

@ -3,7 +3,7 @@ import {
CheckSquareFilled,
QuestionCircleOutlined
} from '@ant-design/icons';
import type {ActionType, FormInstance, ProColumns} from '@ant-design/pro-components';
import type {ActionType, FormInstance, ProColumns, ProFormInstance} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {Button, DatePicker, Dropdown, Space, Switch, Tag, Tooltip} from 'antd';
import React, {useContext, useEffect, useRef} from 'react';
@ -16,18 +16,17 @@ import {
} from "@/app/lib/task/project/data";
import {DetailModelForm} from "@/app/ui/task/project/DetailModelForm";
import OperationButton from "@/app/ui/task/OperationButton";
import dayjs from "dayjs";
const TreeTablePro: React.FC = () => {
const actionRef = useRef<ActionType>();
const formRef = useRef<FormInstance>();
const formRef = useRef<ProFormInstance>();
const [switchChecked, setSwitchChecked] = React.useState(true);
const [filterChecked, setFilterChecked] = React.useState(true);
const reloadData=()=>{
actionRef.current?.reload();
formRef.current?.submit();
}
const [current,setCurrent] = React.useState(1);
const [pageSize,setPageSize] = React.useState(5);
const { RangePicker } = DatePicker;
const columns: ProColumns<DataType>[] = [
{
@ -58,7 +57,7 @@ const TreeTablePro: React.FC = () => {
{
title: '任务优先级',
dataIndex: 'priority',
order:1,
order:2,
valueType: 'select',
fieldProps: {
mode:"tags",
@ -89,7 +88,7 @@ const TreeTablePro: React.FC = () => {
title: '任务状态',
dataIndex: 'state',
valueType: 'select',
order:2,
order:3,
initialValue:['8','9'],
fieldProps: {
defaultValue:['8','9'],
@ -116,6 +115,7 @@ const TreeTablePro: React.FC = () => {
title: '期望开始时间',
dataIndex: 'expectedStartTime',
valueType: 'date',
order:1,
renderFormItem:()=><RangePicker allowEmpty={[true,true]}/>
},
{
@ -137,23 +137,28 @@ const TreeTablePro: React.FC = () => {
title: '操作',
key: 'option',
valueType: 'option',
render: (_, record) => <OperationButton itemId={record.id} pid={record.pid} pPid={record.pPid} refreshDate={reloadData}/>,
render: (_, record) => <OperationButton itemId={record.id} pid={record.pid} pPid={record.pPid} refreshDate={()=>{
actionRef.current?.reload( false);
}}/>,
}
];
let toolBarRenderList = [
<DetailModelForm operationId={OPERATION_BUTTON_TYPE.ADD} description='添加主线任务' reloadData={reloadData}/>,
<DetailModelForm operationId={OPERATION_BUTTON_TYPE.ADD} description='添加主线任务' reloadData={()=>{
actionRef.current?.reload( false);
}}/>,
<Switch checkedChildren="树" unCheckedChildren="列表" checked={switchChecked}
onChange={(checked, event) => {setSwitchChecked(checked);actionRef.current?.reset?.();formRef.current?.submit();}} />,
onChange={(checked, event) => {setSwitchChecked(checked);actionRef.current?.reset?.();}} />,
];
if (switchChecked){
toolBarRenderList.push(<><span></span> <Tooltip title="开启树子集过滤后儿子不满足条件,孙子满足条件,儿子和孙子都不会显示。"><QuestionCircleOutlined /></Tooltip>
<Switch checkedChildren="是" unCheckedChildren="否" checked={filterChecked}
onChange={(checked, event) => {setFilterChecked(checked);reloadData();}} /></>)
onChange={(checked, event) => {setFilterChecked(checked);
actionRef.current?.reload( false);
}} /></>)
}
return (
<ProTable<DataType>
columns={columns}
formRef={formRef}
actionRef={actionRef}
cardBordered
request={async (params, sort, filter) => {
@ -171,6 +176,14 @@ const TreeTablePro: React.FC = () => {
if (params.priority instanceof Array&&params.state.length>0){
searchList.push({name:'priority',value:params.priority.join(','),operateType:"IN"})
}
if (params.expectedStartTime instanceof Array&&params.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"})
}
@ -207,8 +220,13 @@ const TreeTablePro: React.FC = () => {
}}
rowKey="id"
pagination={{
pageSize: 5,
onChange: (page) => console.log(page),
current: current,
pageSize: pageSize,
onChange: (current,pageSize) => {
console.log('onChange',current,pageSize)
setCurrent(current)
setPageSize(pageSize)
}
}}
dateFormatter="string"
// headerTitle="任务管理"