fix(zhst/biz): 修复穿梭框溢出

This commit is contained in:
NICE CODE BY DEV 2024-04-24 15:36:50 +08:00
parent 681a2009b3
commit da80151c37
3 changed files with 44 additions and 15 deletions

View File

@ -1,7 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Card, Flex, Input, InputProps, Tree } from 'antd'; import { Button, Card, ConfigProvider, Flex, Input, InputProps, TransferProps, TreeDataNode, TreeProps, Tree } from 'antd';
import theme from 'antd/es/theme' import theme from 'antd/es/theme'
import { TransferProps, TreeDataNode, TreeProps } from 'antd';
import './index.less' import './index.less'
import { DeleteOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons'; import { DeleteOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons';
import { getAllRootKeyById } from './treeTransferHelper'; import { getAllRootKeyById } from './treeTransferHelper';
@ -59,6 +58,15 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
bodyStyle={{ padding: 12 }} bodyStyle={{ padding: 12 }}
> >
<Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' {...searchInputProps} /> <Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' {...searchInputProps} />
<ConfigProvider
theme={{
components: {
Tree: {
colorBgContainer: '#FCFCFC'
}
}
}}
>
<Tree <Tree
style={{ marginTop: '6px' }} style={{ marginTop: '6px' }}
height={420} height={420}
@ -70,6 +78,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
onSelect={(keys, info) => onTreeSelect?.(keys, info)} onSelect={(keys, info) => onTreeSelect?.(keys, info)}
{...treeProps} {...treeProps}
/> />
</ConfigProvider>
</Card> </Card>
</div> </div>
<DoubleRightOutlined/> <DoubleRightOutlined/>
@ -82,6 +91,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
> >
<div <div
className={`${componentName}-right_card__items`} className={`${componentName}-right_card__items`}
style={{ maxHeight: '422px' }}
> >
{targetItems.map(item => ( {targetItems.map(item => (
<div <div

View File

@ -24,6 +24,24 @@ export const boxDataSource: TreeDataNode[] = [
{ key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true }, { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
{ key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true }, { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
], ],
},{
key: '0-1-3',
title: '分组0-1-3',
isLeaf: false,
children: [
{ key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
{ key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
{ key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
],
},{
key: '0-1-3',
title: '分组0-1-3',
isLeaf: false,
children: [
{ key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
{ key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
{ key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
],
}, },
], ],
}, },

View File

@ -2,7 +2,7 @@
&-left { &-left {
&_card { &_card {
width: 500px; width: 500px;
height: 522px; min-height: 522px;
background-color: #FCFCFC; background-color: #FCFCFC;
} }
} }
@ -10,7 +10,7 @@
&-right { &-right {
&_card { &_card {
width: 300px; width: 300px;
height: 522px; min-height: 544px;
background-color: #FCFCFC; background-color: #FCFCFC;
&__items { &__items {
@ -27,6 +27,7 @@
margin: 0; margin: 0;
padding: 4px 12px; padding: 4px 12px;
cursor: pointer; cursor: pointer;
transition: 0.3s ease-out all;
} }
} }