user right control/data preview style

src/components/common/dataPreview/dataPreview.jsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Modal, Table } from 'antd'
 import { connect } from 'dva'
+import EllipsisTooltip from '../ellipsisTooltip/index'
 import './dataPreview.less'
 
-// const DataPreview = ({ visibleBox, hideBox, columns, dataSource }) => {
 class DataPreview extends React.Component {
     
     constructor(props) {
         super(props);
         this.state = {
-            boxW: 0.8, // 0 ~ 1
-            boxH: 0.8, // 0 ~ 1
-            columnWidth: 100,
+            boxW: 1, // 0 ~ 1
+            boxH: 1, // 0 ~ 1
+            columnWidth: 200,
             tableHeaderHeight: 60,
             screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
             screenHeight: document.documentElement.clientHeight || document.body.clientHeight
@@ -59,10 +59,24 @@ class DataPreview extends React.Component {
             maskClosable={false}
         >
             <Table
-                columns={columns.map(c => ({
-                    ...c,
-                    width: columnWidth,
-                }))}
+                bordered
+                columns={columns.map((c, i) => {
+                    let obj = { ...c,
+                        onCell: () => {
+                            return {
+                                style: {
+                                    whiteSpace: 'nowrap',
+                                    maxWidth: 150,
+                                }
+                            }
+                        },
+                        render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>,
+                    };
+                    if(i !== columns.length - 1) {
+                        obj.width = columnWidth
+                    }
+                    return obj; 
+                })}
                 dataSource={dataSource.map((d, i) => ({
                     ...d,
                     key: i

src/components/common/ellipsisTooltip/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Tooltip } from 'antd'
+
+class EllipsisTooltip extends React.Component {
+    state = {
+        visible: false
+    }
+    handleVisibleChange = (visible) => {
+        if (this.container.clientWidth < this.container.scrollWidth) {
+            this.setState({
+                visible: visible
+            })
+        }
+    }
+    render() {
+        return (
+        <Tooltip visible={this.state.visible} onVisibleChange={this.handleVisibleChange} title={this.props.title}>
+            <div ref={node => this.container = node} style={{
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+            }}>{this.props.children}</div>
+        </Tooltip>
+        )
+    }
+}
+
+export default EllipsisTooltip

src/components/common/navigator.jsx

@@ -25,11 +25,6 @@ class Navigator extends React.Component {
                 }}>
                     <Icon type="info-circle-o" /><span>账号信息</span>
                 </Menu.Item>
-                {/* {currentUser.role === 'admin' && <Menu.Item key="1" onClick={() => {
-                    dispatch({ type: 'main/redirect', path: '/admin' });
-                }}>
-                    <Icon type="setting" />用户管理
-                </Menu.Item>} */}
                 <Menu.Divider />
                 <Menu.Item key="3" onClick={() => {
                     dispatch({ type: 'main/logout' });
@@ -51,7 +46,7 @@ class Navigator extends React.Component {
                 LOGO
             </div>
             <div className='navigator-content'>
-                <Menu
+                {currentUser.role === 'admin' && <Menu
                     className='navigator-menu'
                     selectedKeys={[page]}
                     mode="horizontal"
@@ -65,7 +60,7 @@ class Navigator extends React.Component {
                     <Menu.Item className='nav-page' key="setting">
                         <Link to={lastSettingPage}><Icon type="setting" />系统管理</Link>
                     </Menu.Item>
-                </Menu>
+                </Menu>}
             </div>
             <div className='navigator-right'>
                 <Dropdown overlay={userMenu} trigger={['click']}>