import React, { useState, useEffect } from 'react';
import { ProCard, PageContainer } from '@ant-design/pro-components';
import {Form, Radio, Tree, Table, Row, Col} from 'antd';
import axios from 'axios';
// 默认静态树数据
const defaultTreeData = [
{
title: '研发',
key: '研发',
children: [],
},
{
title: '生产',
key: '生产',
children: [],
},
{
title: '供应链',
key: '供应链',
children: [],
},
{
title: '财务',
key: '财务',
children: [],
},
{
title: '人力',
key: '人力',
children: [],
},{
title: '经营',
key: '经营',
children: [],
},
{
title: '销售',
key: '销售',
children: [],
},
{
title: '车联',
key: '车联',
children: [],
}
];
// 树形数据处理函数
const filterTreeData = (nodes) =>
nodes
.filter(node => node.count !== 0) // 过滤当前层 count 为 0 的节点
.map(node => ({
...node,
title: `${node.title}${node.count !== null && node.count !== 0 ? ` (${node.count})` : ''}`,
children: node.children ? filterTreeData(node.children) : [],
}));
// 获取树形结构数据的函数
const fetchTreeData = async () => {
const res = await axios.get('/ds/baseinfo/getinfo');
return filterTreeData(res.data);
};
// 树形结构
const AssetPage: React.FC = () => {
const [treeData, setTreeData] = useState(defaultTreeData); // 默认树
const [expanded
Keys, setExpanded
Keys] = useState<string[]>([]);
const [selected
Domain, setSelected
Domain] = useState<string>('0');
const [hasLoaded, setHasLoaded] = useState(false); // 标记是否已加载过数据
// 点击树节点时触发
const onSelect = async (selected
Keys: string[], info: any) => {
const selectedNode = info.node;
console.log('点击的节点:', selectedNode);
// 如果还未加载过数据，则请求接口
if (!hasLoaded) {
const data = await fetchTreeData();
setTreeData(data);
setHasLoaded(true);
}
// 调用后端接口，传入选中节点数据
axios.post('/api/clickNode', selectedNode)
.then(res => {
console.log('后端响应:', res.data);
})
.catch(err => {
console.error('请求失败:', err);
});
};
// 领域选择变化时触发
const handle
DomainChange = async (e: any) => {
const selected
Domain = e.target.value;
setSelected
Domain(selected
Domain);
let
keys = [];
if (selected
Domain === '1') {
keys = ['研发'];
} else if (selected
Domain === '2') {
keys = ['生产'];
} else if (selected
Domain === '3') {
keys = ['供应链'];
} else {
keys = [];
}
// 如果还未加载过数据，则请求接口
if (!hasLoaded) {
const data = await fetchTreeData();
setTreeData(data);
setHasLoaded(true);
}
setExpanded
Keys(
keys);
};
// 自动只展开一个领域
const onExpand = (
keys: string[]) => {
const last
Key =
keys.length > 0 ?
keys[
keys.length - 1] : null;
if (last
Key) {
setExpanded
Keys([last
Key]);
} else {
setExpanded
Keys([]);
}
};
return (
<PageContainer style={{ marginTop: 5 }}>
<ProCard style={{ margin: '0 auto', width: 1300, border: 1 }}>
<Form layout="inline" style={{ padding: 3, flexDirection: 'column' }}>
{/* 数据类型 */}
<Form.Item label="数据类型" style={{ marginBottom: 16 }}>
<Radio.Group defaultValue="原始数据">
<Radio value="原始数据">原始数据</Radio>
<Radio value="清洗后数据">清洗后数据</Radio>
</Radio.Group>
</Form.Item>
{/* 是否认证 */}
<Form.Item label="是否认证" style={{ marginBottom: 16 }}>
<Radio.Group defaultValue="是">
<Radio value="是">是</Radio>
<Radio value="否">否</Radio>
</Radio.Group>
</Form.Item>
{/* 领域 */}
<Form.Item label="所属领域" style={{ marginBottom: 16 }} onChange={handle
DomainChange}>
<Radio.Group
value={selected
Domain}
style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
>
<Radio value="0">不限</Radio>
<Radio value="1">研发</Radio>
<Radio value="2">生产</Radio>
<Radio value="3">供应链</Radio>
<Radio value="4">财务</Radio>
<Radio value="5">人力</Radio>
<Radio value="6">经营</Radio>
<Radio value="7">销售</Radio>
<Radio value="8">品质</Radio>
<Radio value="9">车联</Radio>
</Radio.Group>
</Form.Item>
</Form>
</ProCard>
<Row gutter={5} style={{marginTop:5}}>
<Col span={4}> {/* 7/24 ≈ 29.17% */}
<ProCard title="领域树">
<Tree
showLine
treeData={treeData}
onSelect={onSelect}
expanded
Keys={expanded
Keys}
onExpand={onExpand}
/>
</ProCard>
</Col>
<Col span={20}> {/* 17/24 ≈ 70.83% */}
<ProCard title="数据资产列表">
<Table
columns={[
{ title: '名称', dataIndex: 'name' },
{ title: '数据类型', dataIndex: 'type' },
{ title: '是否认证', dataIndex: 'certified' },
{ title: '领域', dataIndex: '
domain' },
]}
pagination={{ pageSize: 5 }}
/>
</ProCard>
</Col>
</Row>
</PageContainer>
);
};
export default AssetPage;
以上代码 当选中所属领域时，树结构也跟着选中，并请求后台接口，展开对应领域的树
扫一扫
26
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
