Requirements: Select different types according to classification conditions, and the table calls different interfaces to display different data.
Code:
import React, {<!-- --> useRef, useState, Fragment, useEffect } from 'react';
import {<!-- --> getNoticeInfo, getBannerList, delNotice } from './service';
import {<!-- --> getCodeSelecBytybe } from '@/services/globalServices';
import {<!-- -->
ProFormSelect,
QueryFilter,
PageContainer,
ProFormText,
ProTable,
} from '@ant-design/pro-components';
import {<!-- --> Button, Form, message, Table, Pagination, Spin, Card } from 'antd';
import {<!-- --> FormattedMessage } from 'umi';
import {<!-- --> twoToneColor } from '@/utils/twoToneColor';
const TableList = () => {<!-- -->
const ref = useRef();
const [classifyInitialValue, setClassifyInitialValue] = useState('fees'); // Classification type
const [managecomnameParam, setManagecomnameParam] = useState(''); //Search condition management organization parameters
const [bankcodenameParam, setBankcodenameParam] = useState(''); // Search condition channel parameters
const [displayStatus, setDisplayStatus] = useState('1'); // Display status
const [xgStatus, setXgStatus] = useState('1'); // pin management status
const [currentPage, setCurrentPage] = useState(1); // Current page number
const [curPageSize, setCurPageSize] = useState(10); //The number of current page numbers displayed
const [loading, setLoading] = useState(false); // Loading
const [data1, setData1] = useState([]); // Fee and protocol data
const [curPage1, setCurPage1] = useState(1); // Handling fee and agreement current page number
const [data1Total, setData1Total] = useState(0); // Handling fee and total number of agreement data
const [data2, setData2] = useState([]); // Protocol management data
const [curPage2, setCurPage2] = useState(1); // Protocol management current page number
const [data2Total, setData2Total] = useState(0); //Total number of protocol management data
const [manageComList, setManageComList] = useState([]);
const [managecomObj, setManagecomObj] = useState({<!-- -->}); // Organization object
const [bankcodenameArray, setBankcodenameArray] = useState([]);
useEffect(() => {<!-- -->
getCodeSelecBytybe({<!-- --> codeType: 'managecomshortname2' }).then((res) => {<!-- -->
if (res & amp; & amp; res.success) {<!-- -->
setManageComList(res.data);
// Convert organization into object
const obj = {<!-- -->};
res.data.map((item) => {<!-- -->
obj[item.value] = item.title;
return true;
});
setManagecomObj(managecomObj);
} else {<!-- -->
setManageComList([]);
}
});
getCodeSelecBytybe({<!-- --> codeType: 'agentcomshortname' }).then((res) => {<!-- -->
if (res & amp; & amp; res.success) {<!-- -->
setBankcodenameArray(res.data);
} else {<!-- -->
setBankcodenameArray([]);
}
});
}, []);
const [param, setParmam] = useState({<!-- -->
current: currentPage,
pageSize: curPageSize,
// manageCom: managecomnameParam, // Management organization
// bankCode: bankcodenameParam, // Channel
f2: displayStatus, // display status
f1: xgStatus, // Pin tube status
}); // Handling fee and agreement request parameters
// const [param2, setParmam2] = useState({<!-- -->
// current: 1,
// pageSize: 10,
// manageCom: managecomnameParam, // Management organization
// bankCode: bankcodenameParam, // Channel
// f2: displayStatus, // display status
// f1: xgStatus, // pin management status
// }); // Protocol management request parameters
// Parameter reset
const rest = () => {<!-- -->
setManagecomnameParam('');
setBankcodenameParam('');
setCurrentPage(1);
setCurPageSize(10);
setData1([]);
setCurPage1(1);
setData1Total(0);
setData2([]);
setCurPage2(1);
setData2Total(0);
setParmam({<!-- -->
current: 1,
pageSize: 10,
// manageCom: '', // Management organization
// bankCode: '', // Channel
f2: 1, //display status
f1: 1, // pin tube status
});
if (ref.current) {<!-- -->
ref.current.setFieldsValue({<!-- -->
managecomname: '',
bankcodename: '',
});
}
};
// Category switching method
const classifyChange1 = (value) => {<!-- -->
// console.log('value classification switching method', value);
setClassifyInitialValue(value);
rest();
};
//Request data
useEffect(() => {<!-- -->
setLoading(true);
if (classifyInitialValue == 'fees') {<!-- -->
getData1();
} else if (classifyInitialValue == 'agreement') {<!-- -->
getData2();
}
}, [classifyInitialValue, param]);
// Fees and agreements
const getData1 = () => {<!-- -->
getNoticeInfo(param).then((res) => {<!-- -->
// console.log(res);
const {<!-- --> data, success, total, page } = res;
if (success) {<!-- -->
setData1(data);
setData1Total(total);
setCurPage1(page);
setLoading(false);
}
});
};
//Protocol management
const getData2 = () => {<!-- -->
getBannerList(param).then((res) => {<!-- -->
// console.log(res);
const {<!-- --> data, success, total, page } = res;
if (success) {<!-- -->
setData2(data);
setData2Total(total);
setCurPage2(page);
setLoading(false);
}
});
};
//Page switching
const onShowSizeChange = (current, pageSize) => {<!-- -->
// console.log(current, pageSize);
setCurrentPage(current);
setCurPageSize(pageSize);
setParmam({<!-- -->
current: current,
pageSize: pageSize,
manageCom: managecomnameParam, // Management organization
bankCode: bankcodenameParam, // Channel
f2: displayStatus, // display status
f1: xgStatus, // Pin tube status
});
};
// Query button
const QueryFilterOnFinish = (values) => {<!-- -->
const {<!-- --> classify, managecomname, bankcodename, f2, f1 } = values;
// console.log(values);
setManagecomnameParam(managecomname);
setBankcodenameParam(bankcodename);
setDisplayStatus(f2); // Display status
setXgStatus(f1); // pin tube status
setParmam({<!-- -->
current: currentPage,
pageSize: curPageSize,
manageCom: managecomname, // Management organization
bankCode: bankcodename, // channel
f2: f2, // display status
f1: f1, // pin tube status
});
};
const ProTable = () => {<!-- -->
return (
<Spin spinning={<!-- -->loading}>
<Card>
<h3>Query list</h3>
<Table
columns={<!-- -->classifyInitialValue == 'fees' ? columns1 : columns2}
dataSource={<!-- -->classifyInitialValue == 'fees' ? data1 : data2}
scroll={<!-- -->{<!-- -->
x: 1300,
}}
pagination={<!-- -->false}
/>
<div style={<!-- -->{<!-- --> marginTop: 10, display: 'flex', justifyContent: 'flex-end' }}>
<Pagination
// showSizeChanger={false}
// onChange={classifyInitialValue == 'fees' ? onShowSizeChange1 : onShowSizeChange2}
// onShowSizeChange={<!-- -->
// classifyInitialValue == 'fees' ? onShowSizeChange1 : onShowSizeChange2
// }
showSizeChanger
onChange={<!-- -->onShowSizeChange}
onShowSizeChange={<!-- -->onShowSizeChange}
current={<!-- -->classifyInitialValue == 'fees' ? curPage1 : curPage2}
total={<!-- -->classifyInitialValue == 'fees' ? data1Total : data2Total}
showTotal={<!-- -->(total, range) => `No.${<!-- -->range[0]}-${<!-- -->range[1]}/ Total ${<!-- -->total} items`}
/>
</div>
</Card>
</Spin>
);
};
const columns1 = [
{<!-- -->
title: 'Management Agency',
dataIndex: 'managecomname',
align: 'center',
valueType: 'select',
fieldProps: {<!-- -->
options: manageComList, //The array of pull-down dictionaries in the background
fieldNames: {<!-- -->
// alias
label: 'codeName',
value: 'codeValue',
},
},
search: false,
},
{<!-- -->
title: 'Channel',
dataIndex: 'bankcodename',
align: 'center',
valueType: 'select',
fieldProps: {<!-- -->
options: bankcodenameArray, //array of pull-down dictionary in background
fieldNames: {<!-- -->
// alias
label: 'codeName',
value: 'codeValue',
},
},
search: false,
},
{<!-- -->
title: 'product name',
dataIndex: 'riskname',
align: 'center',
search: false,
},
{<!-- -->
title: 'handling fee',
dataIndex: 'feeradix',
align: 'center',
search: false,
},
{<!-- -->
title: 'Payment Period',
dataIndex: 'payyears',
align: 'center',
search: false,
render: (text) => {<!-- -->
return text === '1000' ? '踸交' : text;
},
},
{<!-- -->
title: 'Validity date (start date - end date)',
dataIndex: 'caldate',
align: 'center',
search: false,
},
{<!-- -->
title: 'Sales management status',
dataIndex: 'f1',
align: 'center',
valueType: 'select',
initialValue: '1',
valueEnum: {<!-- -->
1: {<!-- --> text: 'valid', status: 'Success' },
2: {<!-- --> text: 'Invalid', status: 'Error' },
},
search: false,
},
{<!-- -->
title: 'Display status',
dataIndex: 'f2',
align: 'center',
valueType: 'select',
// initialValue: ['1'],
valueEnum: {<!-- -->
1: {<!-- --> text: 'Displayed' },
2: {<!-- --> text: 'Not shown' },
},
search: false,
},
{<!-- -->
title: <FormattedMessage id="pages.searchTable.titleOption" />,
dataIndex: 'option',
valueType: 'option',
align: 'center',
width: 180,
render: (_, record) => [
<div key={<!-- -->record.id}>
<Fragment></Fragment>
</div>,
],
},
];
const columns2 = [
{<!-- -->
title: 'Management Agency',
dataIndex: 'managecomname',
align: 'center',
valueType: 'select',
fieldProps: {<!-- -->
options: manageComList, //The array of pull-down dictionaries in the background
fieldNames: {<!-- -->
// alias
label: 'codeName',
value: 'codeValue',
},
},
search: false,
},
{<!-- -->
title: 'Channel',
dataIndex: 'bankcodename',
align: 'center',
valueType: 'select',
fieldProps: {<!-- -->
options: bankcodenameArray, //The array of pull-down dictionaries in the background
fieldNames: {<!-- -->
// alias
label: 'codeName',
value: 'codeValue',
},
},
search: false,
},
{<!-- -->
title: 'Protocol name',
dataIndex: 'protocononame',
align: 'center',
search: false,
},
{<!-- -->
title: 'Validity date (start date - end date)',
dataIndex: 'caldate',
align: 'center',
search: false,
},
{<!-- -->
title: 'Sales management status',
dataIndex: 'f1',
align: 'center',
valueType: 'select',
initialValue: '1',
valueEnum: {<!-- -->
1: {<!-- --> text: 'valid', status: 'Success' },
2: {<!-- --> text: 'Invalid', status: 'Error' },
},
search: false,
},
{<!-- -->
title: 'Display status',
dataIndex: 'f2',
align: 'center',
valueType: 'select',
// initialValue: ['1'],
valueEnum: {<!-- -->
1: {<!-- --> text: 'Displayed' },
2: {<!-- --> text: 'Not shown' },
},
search: false,
},
{<!-- -->
title: <FormattedMessage id="pages.searchTable.titleOption" />,
dataIndex: 'option',
valueType: 'option',
align: 'center',
width: 180,
render: (_, record) => [
<div key={<!-- -->record.id}>
<Fragment></Fragment>
</div>,
],
},
];
return (
<PageContainer breadcrumb={<!-- -->false}>
<div style={<!-- -->{<!-- --> background: '#fff', paddingTop: 20, paddingRight: 50 }}>
<QueryFilter
labelWidth={<!-- -->125}
formRef={<!-- -->ref}
defaultCollapsed={<!-- -->false}
collapseRender={<!-- -->false}
onFinish={<!-- -->async (values) => {<!-- -->
QueryFilterOnFinish(values);
}}
submitter={<!-- -->{<!-- -->
// Fully customize the entire area
render: (props, doms) => {<!-- -->
// console.log(props);
return [
<Button
key="rest"
onClick={<!-- -->() => {<!-- -->
props.form?.resetFields();
rest();
}}
>
reset
</Button>,
<Button type="primary" key="submit" onClick={<!-- -->() => props.form?.submit?.()}>
Inquire
</Button>,
];
},
}}
>
<ProFormSelect
name="classify"
label="category"
width="lg"
initialValue={<!-- -->classifyInitialValue}
fieldProps={<!-- -->{<!-- -->
options: [
{<!-- --> label: 'fee management', value: 'fees' },
{<!-- --> label: 'Agreement Management', value: 'agreement' },
],
onChange: (value) => {<!-- -->
// console.log(value);
classifyChange1(value);
},
}}
/>
<ProFormSelect
name="managecomname"
label="Management Organization"
width="lg"
fieldProps={<!-- -->{<!-- -->
options: manageComList,
fieldNames: {<!-- -->
//Tree attribute rename
label: 'codeName',
value: 'codeValue',
},
}}
/>
<ProFormSelect
name="bankcodename"
label="channel"
width="lg"
fieldProps={<!-- -->{<!-- -->
options: bankcodenameArray,
fieldNames: {<!-- -->
//Tree attribute rename
label: 'codeName',
value: 'codeValue',
},
}}
/>
<ProFormSelect
name="f2"
label="show status"
width="lg"
initialValue={<!-- -->'1'}
valueEnum={<!-- -->{<!-- -->
1: 'shown',
2: 'Not shown',
}}
/>
<ProFormSelect
name="f1"
label="Pin tube status"
width="lg"
initialValue={<!-- -->'1'}
valueEnum={<!-- -->{<!-- -->
1: 'valid',
2: 'Invalid',
}}
/>
</QueryFilter>
</div>
<div style={<!-- -->{<!-- --> marginTop: 15 }}>
{<!-- -->ProTable()}
</div>
</PageContainer>
);
};
export default TableList;