You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
/*
|
|
* @Author: zhoux zhouxia@supervision.ltd
|
|
* @Date: 2023-11-21 13:42:31
|
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
|
* @LastEditTime: 2023-11-24 16:01:20
|
|
* @FilePath: \general-ai-platform-web\src\layouts\treeAndTableList.tsx
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
*/
|
|
import { ProCard } from '@ant-design/pro-components';
|
|
import { CardProps } from 'antd';
|
|
// 此模块使用的 ProCardType
|
|
export interface ProCardTypeProps extends CardProps {
|
|
colSpan?: string;
|
|
headerBordered?: boolean;
|
|
}
|
|
|
|
// 当前组件类型
|
|
type TreeAndTableListProps = {
|
|
leftCard?: ProCardTypeProps;
|
|
rightCard?: ProCardTypeProps;
|
|
leftDom: any;
|
|
rightDom: any;
|
|
};
|
|
|
|
const TreeAndTableList: React.FC<TreeAndTableListProps> = (props) => {
|
|
// 业务层接收
|
|
const { leftCard, rightCard, leftDom, rightDom } = props;
|
|
|
|
// 统一配置
|
|
let finalLeftCard: ProCardTypeProps = {
|
|
// 左侧卡片
|
|
headStyle: { paddingTop: 20, paddingLeft: 20, paddingRight: 20, paddingBottom: 20,borderBottom: '1px solid #E0E0E0' },
|
|
bodyStyle: {paddingLeft: 20, paddingRight: 20},
|
|
colSpan: '22%',
|
|
};
|
|
let finalRightCard: ProCardTypeProps = {
|
|
headStyle: { padding: 0, margin: 0, background: 'transparent' },
|
|
bodyStyle: { padding: 0, margin: 0 },
|
|
headerBordered: true,
|
|
// 右侧卡片
|
|
colSpan: '76.5%',
|
|
};
|
|
if (leftCard) {
|
|
Object.assign(finalLeftCard, leftCard);
|
|
}
|
|
|
|
if (rightCard) {
|
|
Object.assign(finalRightCard, rightCard);
|
|
}
|
|
return (
|
|
<>
|
|
<ProCard
|
|
style={{ display: 'flex', width: '100%', background: 'transparent' }}
|
|
bodyStyle={{
|
|
padding: 0,
|
|
margin: 0,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
{/* 后续依据业务需要动态调整 */}
|
|
<ProCard {...finalLeftCard}>{leftDom}</ProCard>
|
|
<ProCard {...finalRightCard}>{rightDom}</ProCard>
|
|
</ProCard>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TreeAndTableList;
|