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.
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
2 years ago
|
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: 24, paddingLeft: 20, paddingRight: 20 },
|
||
|
|
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;
|