|
|
@@ -18,23 +18,36 @@ class DataConnect extends React.Component {
|
|
|
this.state = {
|
|
|
visibleDeleteBox: false,
|
|
|
}
|
|
|
+ this.bodyRef = React.createRef();
|
|
|
};
|
|
|
componentDidMount() {
|
|
|
const { dispatch } = this.props;
|
|
|
- // this.setScrollTableHeight();
|
|
|
+ this.setBodyWidth();
|
|
|
dispatch({ type: 'dataConnect/fetchList' });
|
|
|
+ window.addEventListener('resize', this.setBodyWidth);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ window.removeEventListener('resize', this.setBodyWidth)
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 根据视图设置表格高度以呈现滚动条
|
|
|
+ * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
|
|
|
*/
|
|
|
- // setScrollTableHeight() {
|
|
|
- // const mainContent = document.getElementsByClassName('main-content')[0];
|
|
|
- // const toolbar = mainContent.getElementsByClassName('dataconnect-tools')[0];
|
|
|
- // const tableHeader = mainContent.getElementsByClassName('ant-table-header')[0];
|
|
|
- // const tableBody = mainContent.getElementsByClassName('ant-table-body')[0];
|
|
|
- // tableBody.style.maxHeight=`${mainContent.offsetHeight - toolbar.offsetHeight - tableHeader.offsetHeight - 58}px`;
|
|
|
- // }
|
|
|
+ setBodyWidth = () => {
|
|
|
+ const cardBody = this.bodyRef.current; // 卡片容器
|
|
|
+ const parent = cardBody.parentNode; // 父级容器
|
|
|
+ const pWidth = parent.offsetWidth; // 父级容器宽度
|
|
|
+ const pPadding = 10 + 10; // 父级容器左右padding
|
|
|
+ const cWidth = 160; // 每个卡片宽度
|
|
|
+ const cMargin = 5 + 5; // 每个卡片左右margin
|
|
|
+ const pTrueWidth = pWidth - pPadding; // 父容器实际可用宽度
|
|
|
+ const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度
|
|
|
+ const count = Math.floor(pTrueWidth/cTrueWidth); // 每行最大卡片数量
|
|
|
+ const cardBodyWidth = count * cTrueWidth;
|
|
|
+
|
|
|
+ cardBodyWidth > 0 ? cardBody.style.width = cardBodyWidth + 'px' : void(0);
|
|
|
+ }
|
|
|
|
|
|
onSearch(list, text) {
|
|
|
const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
@@ -265,6 +278,12 @@ class DataConnect extends React.Component {
|
|
|
}
|
|
|
</Col>
|
|
|
<Col >
|
|
|
+ <Button style={{ marginRight: '8px' }} onClick={() => {
|
|
|
+ dispatch({ type: 'dataConnect/setFilterLabel', label: '' });
|
|
|
+ dispatch({ type: 'dataConnect/fetchList', mandatory: true });
|
|
|
+ }}>
|
|
|
+ <Icon type="sync" />
|
|
|
+ </Button>
|
|
|
<Button onClick={() => {
|
|
|
dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle' } });
|
|
|
dispatch({ type: 'dataConnect/setNewModelFields', fields: [
|
|
|
@@ -278,7 +297,7 @@ class DataConnect extends React.Component {
|
|
|
</Col>
|
|
|
</Row>
|
|
|
}>
|
|
|
- <div className='body'>
|
|
|
+ <div ref={this.bodyRef} className='body'>
|
|
|
{ this.generateCard() }
|
|
|
</div>
|
|
|
</Card>
|