Browse Source

resync button.

zhuth 6 years ago
parent
commit
b370017480

+ 10 - 3
src/components/chart/list.jsx

@@ -38,6 +38,7 @@ class ChartList extends React.Component {
             visibleDataPreviewBox: false,
             noGroup: false, // 显示未分组数据
         }
+        this.bodyRef = React.createRef();
     }
 
     componentDidMount() {
@@ -55,8 +56,8 @@ class ChartList extends React.Component {
     /**
      * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
      */
-    setBodyWidth() {
-        const cardBody = document.getElementsByClassName('chart-body')[0]; // 卡片容器
+    setBodyWidth = () => {
+        const cardBody = this.bodyRef.current; // 卡片容器
         const parent = cardBody.parentNode; // 父级容器
         const pWidth = parent.offsetWidth; // 父级容器宽度
         const pPadding = 10 + 10; // 父级容器左右padding
@@ -413,6 +414,12 @@ class ChartList extends React.Component {
                                 }
                                 </Col>
                                 <Col >
+                                    <Button style={{ marginRight: '8px' }} onClick={() => {
+                                        dispatch({ type: 'chart/setFilterLabel', label: '' });
+                                        dispatch({ type: 'chart/fetchList', mandatory: true });
+                                    }}>
+                                        <Icon type="sync" />
+                                    </Button>
                                     <Button onClick={() => {
                                         dispatch({ type: 'dataSource/fetchList' });
                                         this.setState({
@@ -430,7 +437,7 @@ class ChartList extends React.Component {
                             </Col>
                         </Row>
                     }>
-                        <div className='chart-body'>
+                        <div ref={this.bodyRef} className='chart-body'>
                             { this.generateCard() }
                         </div>
                     </Card>

+ 3 - 0
src/components/chart/list.less

@@ -43,6 +43,9 @@
                 }
             }
             &>.ant-card-body {
+                &:before {
+                    content: none;
+                }
                 flex: 1;
                 padding: 10px;
                 display: flex;

+ 10 - 0
src/components/dashboard/list.jsx

@@ -362,6 +362,16 @@ class DashboardList extends React.Component {
                                     }
                                 </Col>
                                 <Col >
+                                    <Button style={{ marginRight: '8px' }} onClick={() => {
+                                        dispatch({ type: 'dashboard/setFilterLabel', label: '' });
+                                        if(!menuSelectedKeys || menuSelectedKeys.length === 0 || menuSelectedKeys[0] === '-1') {
+                                            dispatch({ type: 'dashboard/fetchList', mandatory: true });
+                                        }else {
+                                            dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: menuSelectedKeys[0] });
+                                        }
+                                    }}>
+                                        <Icon type="sync" />
+                                    </Button>
                                     <Button disabled={menuSelectedKeys.length !== 1 || menuSelectedKeys[0] === '-1'} onClick={() => {
                                         dispatch({ type: 'dashboardDesigner/reset' });
                                         dispatch({ type: 'dashboard/remoteQucikAdd', menuCode: menuSelectedKeys[0] });

+ 29 - 10
src/components/dataConnect/list.jsx

@@ -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>

+ 6 - 0
src/components/dataSource/list.jsx

@@ -408,6 +408,12 @@ class DataSource extends React.Component {
                                     }
                                 </Col>
                                 <Col>
+                                    <Button style={{ marginRight: '8px' }} onClick={() => {
+                                        dispatch({ type: 'dataSource/setFilterLabel', label: '' });
+                                        dispatch({ type: 'dataSource/fetchList', mandatory: true });
+                                    }}>
+                                        <Icon type="sync" />
+                                    </Button>
                                     <Dropdown overlay={(
                                         <Menu onClick={(item, key, keyPath) => {
                                             const type = item.key;