import
React, { useState, useEffect } from '
react';
import {Card, Col, Row, Tabs} from '
antd';
import { PageConta
iner } from '@
ant-design/pro
-components';
import Bus
inessSystem
List from '
./sysview';
import Doma
inProcessPage from '
./processview';
import Bus
iness
ObjectList from '
./objview';
import AssetsView from '
./assetsview'
const Doma
inContent:
React.FC = () => {
const [doma
inId, setDoma
inId] = useState<str
ing | null>('');
const [doma
inName, setDoma
inName] = useState<str
ing | null>('');
const [bussObj, setBussObj] = useState<str
ing | null>('');
const [processPo
int, setProcessPo
int] = useState<str
ing | null>('');
const [sys, setSys] = useState<str
ing | null>('');
// 页面加载时从 URL 获取 doma
inId
useEffect(() => {
const query = new URLSearchParams(w
indow
.location
.search);
const id = query
.get('doma
in');
const doma
inName = query
.get('doma
inName');
setDoma
inName(doma
inName)
setDoma
inId(id);
}, []);
// 处理子组件点击事件的回调函数
const handleSysClick = (data: any) => {
setSys(data
.sysName)
setProcessPo
int('')
setBussObj('')
};
const handleProcessClick = (data: any) => {
setSys('')
setProcessPo
int(data
.target
.innerHTML)
setBussObj('')
};
const handleObjClick = (data: any) => {
setSys('')
setProcessPo
int('')
setBussObj(data
.objName)
// 在这里处理业务对象点击逻辑
};
// @ts
-ignore
return (
<PageConta
iner>
<Row>
<Col offset={2} style={{fontWeight:'bold'}}>
领域名称: <span>{doma
inName || '暂无数据'}</span>
</Col>
</Row>
<Row gutter={8} style={{marg
inTop:8}}>
<Col span={2}>
</Col>
<Col span={7}
style={{
maxHeight: '8
0vh', // 设置最大高度
overflowY: 'auto', // 超出显示滚动条
padd
ing: '
0 8px', // 可选：增加内边距避免贴边
}}>
<Card>
<Tabs
defaultActive
Key="bus
inessSystem"
destroy
InactiveTabPane={false}
>
<Tabs
.TabPane
key="bus
inessSystem" tab="业务系统">
<Bus
inessSystem
List key={doma
inId + "sys"} doma
inId={doma
inId} onRowClick={handleSysClick} />
</Tabs
.TabPane>
<Tabs
.TabPane
key="endToEndProcess" tab="端到端流程">
<Doma
inProcessPage
key={doma
inId + "process"} doma
inId={doma
inId} onNodeClick={handleProcessClick} />
</Tabs
.TabPane>
<Tabs
.TabPane
key="bus
iness
Object" tab="业务对象">
<Bus
iness
ObjectList key={doma
inId + "obj"} doma
inId={doma
inId} onRowClick={handleObjClick} />
</Tabs
.TabPane>
</Tabs>
</Card>
</Col>
<Col span={13}>
<AssetsView bussObj={bussObj || ''}
doma
in={doma
inId || ''}
processPo
int={processPo
int || ''}
sys={sys || ''}
/>
</Col>
<Col span={2}>
</Col>
</Row>
</PageConta
iner>
);
};
export default Doma
inContent;
报错 Each child in a
list should have a
unique "
key"
prop.
扫一扫
1306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
