- 描述：
共有4个二级页面，分别是应收、应付、实收、实付。action为0时，就是应收应付，为1时，就是实收实付。而categorize为0时，就是应收或实收，为1时，就是应付或者实付。每个二级页面分别有4个三级页面，分别是客户、合作商、员工和其他，使用type值判断。
应收应付和实收实付分别调用两个接口，用categorize的值来判断。
左边选择用户列表写在financialLeft文件中，右边显示数据列表写在financialList文件中，由financialBoardPage文件拼接。
- 问题：现在需要点击客户应收中的某一个客户时，在redux中进行存储。从其他页面跳转回客户应收时，页面状态仍然显示的是上一次选择的那个客户的列表。其他页面同理。目前知道需要存储subjectId和page，
- 页面显示如下：
- financialBoardPage文件代码如下：
export default withError<{ type: number; action: number; categorize: number }>(
({ type, categorize, action }) => {
const [object, setObject] = useState(null);
const objectId = useSelector<ReduxState, number>(
(state) => state.financial?.objectId
);
const {
saveObjectId,
} = useFinancingActions();
useEffect(() => {
setObject(null);
}, [type, categorize]);
if (!accountList) return <></>;
console.log('object===>', object);
console.log('objectId===>', objectId);
return (
<PageContainer ghost={true} className={styles.exchange} title={false}>
<ProCard split={'vertical'}>
<FinancialLeft
object={object}
setObject={setObject}
type={type}
categorize={categorize}
/>
{object && (
<ProCard colSpan="65%">
<FinancialList
// objectId={object.sid}
objectId={objectId}
objectName={object.name}
categorize={categorize}
type={type}
action={action}
/>
</ProCard>
)}
- financialLeft文件代码如下：
export default ({ object, setObject, type, categorize = 0 }) => {
const [data, setData] = useState(null);
const state = useStore().getState();
const [pageSize, setPageSize] = useState(12);
// const [page, setPage] = useState(1);
const [page, setPage] = useState(state.page?.objectListPage || 1)；
const [total, setTotal] = useState(1);
const { saveObjectListPage } = usePageActions();
const objectId = useSelector<ReduxState, number>(
(state) => state.financial?.objectId
);
const { saveObjectId } = useFinancingActions();
const loadData = () => {
switch (type) {
case 0:
fetchCustomerList({ page, pageSize, ...searchParams }).then((res) => {
setData(res.list);
setTotal(res.total);
});
break;
case 1:
fetchPartnerList({ page, pageSize, ...searchParams }).then((res) => {
setData(res.list);
setTotal(res.total);
});
break;
case 2:
fetchStaffList({ page, pageSize, ...searchParams }).then((res) => {
setData(res.list);
setTotal(res.total);
});
break;
case 3:
subjectList({ categorize, ...searchParams }).then((res) => {
setData(res);
setTotal(res.length);
});
break;
}
};
useEffect(() => {
loadData();
}, [type, categorize, page, pageSize, searchParams]);
const onPagination = (lastPage) => {
setData(null);
changePage(lastPage);
};
const onShowSizeChange = (a, b) => {
setData(null);
setPageSize(b);
};
const handleUPartnerClick = (item) => {
setObject(item);
saveObjectId(item.sid);
};
const changePage = (page) => {
setPage(page);
saveObjectListPage(page);
};
return (
// <ProCard colSpan="35%" loading={!data}>
<ProCard colSpan="35%">
<div style={{ height: '80%' }}>
<Row gutter={[4, 8]}>
<Col span={22}>
{/* 输入框 */}
<Input.Group compact>
{/* 搜索小图标 */}
<Input.Search allowClear defaultValue="" onSearch={onSearch} />
</Input.Group>
</Col>
<Col span={24}>
{Array.isArray(data) && data.length > 0 ? (
<List loading={!data}>
<VirtualList
data={data}
height={600}
itemHeight={47}
itemKey="sid"
>
{(item) => (
<Button
type="text"
onClick={() => handleUPartnerClick(item)}
style={{
padding: '10px 6px',
width: '100%',
height: '100%',
backgroundColor:
item.sid == object?.sid ? '#f0f5ff' : '',
borderBottom: '1px solid #eee',
}}
>
<List.Item
key={item.sid}
style={{
height: '60px',
textAlign: 'start',
alignItems: 'start',
}}
>
<List.Item.Meta title={item.name} />
</List.Item>
</Button>
)}
</VirtualList>
</List>
<Pagination
current={page}
onChange={onPagination}
total={total}
pageSize={pageSize}
onShowSizeChange={onShowSizeChange}
pageSizeOptions={['12', '24', '36', '48']}
/>
- financialList文件如下：
const loadData = () => {
let data: any;
if (objectId) {
data = {
page,
limit,
categorize,
objectId,
type,
status,
...searchParams,
};
} else {
data = { page, limit, categorize, type, status, ...searchParams };
}
// 应收应付
action == 0 &&
fetchPayableList(data).then((res) => {
unstable_batchedUpdates(() => {
setData(res.list);
setTotal(res.total);
});
});
// 实收实付
action == 1 &&
fetchPayabledList(data).then((res) => {
unstable_batchedUpdates(() => {
setData(res.list);
setTotal(res.total);
});
});
};
useEffect(() => {
loadData();
}, [page, limit, objectId, status, searchParams, categorize, action, type]);
const onShowSizeChange = (a, b) => {
setData(null);
setLimit(b);
};
const changePage = (page) => {
setPage(page);
};
const onPagination = (lastPage) => {
setData(null);
changePage(lastPage);
};
