列表界面字段超长优化

src/components/dashboard/layout.jsx

@@ -26,8 +26,11 @@ class DashboardLayout extends React.Component {
                             { name: 'menuAutoExpandParent', value: false },
                         ] });
                     }}
-                    onSelect={selectedMenu => {
-                        dispatch({ type: 'dashboard/setField', name: 'menuSelectedKeys', value: !!selectedMenu ? [selectedMenu.code] : [] })
+                    onSelect={(selectedMenu, parents) => {
+                        dispatch({ type: 'dashboard/setFields', fields: [
+                            { name: 'currentMenu', value: selectedMenu },
+                            { name: 'currentMenuParents', value: parents },
+                        ] })
                         if(!!selectedMenu) {
                             if(selectedMenu.code === '-1') {
                                 dispatch({ type: 'dashboard/fetchList', mandatory: true });

src/components/dashboard/list.jsx

@@ -8,6 +8,7 @@ import DeleteBox from '../common/deleteBox/deleteBox'
 import ShareBox from './shareBox'
 import CopyBox from './copyBox'
 import ListFilter from '../common/listFilter/index'
+import EllipsisTooltip from '../common/ellipsisTooltip/index'
 import './list.less'
 const { Content } = Layout
 const { Option } = Select
@@ -179,12 +180,22 @@ class DashboardList extends React.Component {
         })
     }
 
+    // generateCurrentMenu = () => {
+    //     const { currentMenuParents } = this.props.dashboard;
+    //     let arr = [];
+    //     for(let i = currentMenuParents.length - 1; i >= 0; i--) {
+    //         arr.push();
+    //     }
+    //     return arr;
+    // }
+
     render() {
         const { dispatch, dashboard, main } = this.props;
         const { visibleShareBox, shareUrl, visibleDistributeBox, visibleTransferBox, visibleDeleteBox,
             visibleCopyBox, selectedRecord, defaultSelectedGroups, defaultSelectedUsers } = this.state
         const { currentUser } = main;
-        const { menuTree, menuSelectedKeys, filterItem } = dashboard;
+        const { menuTree, menuSelectedKeys, filterItem, currentMenuParents } = dashboard;
+        console.log(currentMenuParents);
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dashboard.filterLabel ? (dashboard.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
@@ -268,22 +279,23 @@ class DashboardList extends React.Component {
             dataIndex: 'description',
             key: 'description',
             width: 200,
-            render: (text, record) => {
-                return (
-                    <span>
-                        { filterLabel && filterItem.name === 'description' ?
-                            ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                return (
-                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                    fragment
-                                )
-                            }
-                            )) : text
-                        }
-                    </span>
-                )
-            }
+            onCell: () => {
+                return {
+                    style: {
+                        whiteSpace: 'nowrap',
+                        maxWidth: 200,
+                    }
+                }
+            },
+            render: (text) => <EllipsisTooltip title={text}>{
+                filterLabel && filterItem.name === 'description' ? ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                    return (
+                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                        fragment
+                    )
+                })) : text
+            }</EllipsisTooltip>,
         }, {
             title: '创建人',
             dataIndex: 'creatorName',
@@ -331,7 +343,9 @@ class DashboardList extends React.Component {
                 <Content>
                     <Card className="dashboard-body" title={
                         <Row className='dashboard-tools' type='flex' justify='space-between'>
-                            <Col style={{ display: 'flex' }}>
+                            <Col className='menus' style={{ display: 'flex' }}>
+                                {/* { this.generateCurrentMenu() } */}
+                                { [].concat(currentMenuParents).reverse().map(m => m.name).join(' > ') }
                             </Col>
                             <Col className='search'>
                                 <Col style={{ padding: '0 5px' }}>

src/components/dashboard/list.less

@@ -8,6 +8,11 @@
             padding: 0 10px;
             .dashboard-tools {
                 flex: 1;
+                flex-wrap: nowrap;
+                .menus {
+                    font-size: 14px;
+                    white-space: normal;
+                }
                 .anticon-bars {
                     cursor: pointer;
                     line-height: 1.6;

src/components/dashboard/menu.jsx

@@ -188,9 +188,10 @@ class DashboardMenu extends React.Component {
         const { dashboard, onSelect: propsOnSelect } = this.props;
         const { menuList } = dashboard;
         let selectedMenu = [{ code: '-1', name: '报表目录' }].concat(menuList).find(l => l.code === selectedKeys[0]);
+        let parents = this.getParens(selectedMenu);
 
         if(typeof propsOnSelect === 'function') {
-            propsOnSelect(selectedMenu);
+            propsOnSelect(selectedMenu, parents);
         }
     }
 

src/components/dataSource/list.jsx

@@ -9,6 +9,7 @@ import CopyBox from './copyBox'
 import DeleteBox from '../common/deleteBox/deleteBox'
 import DataPreview from '../common/dataPreview/dataPreview'
 import ListFilter from '../common/listFilter/index'
+import EllipsisTooltip from '../common/ellipsisTooltip/index'
 import './list.less'
 const { Content } = Layout
 const { Option } = Select
@@ -299,7 +300,16 @@ class DataSource extends React.Component {
             title: '数据链接',
             dataIndex: 'dbConfig.name',
             key: 'dbConfig.name',
-            width: 100
+            width: 100,
+            onCell: () => {
+                return {
+                    style: {
+                        whiteSpace: 'nowrap',
+                        maxWidth: 100,
+                    }
+                }
+            },
+            render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>,
         }, {
             title: '创建人',
             dataIndex: 'creatorName',

src/components/dataSourceDetail/header.jsx

@@ -41,7 +41,7 @@ class DataSourceDetailHeader extends React.Component {
                                 // do nothing...
                             }else {
                                 dispatch({ type: 'dataSource/remoteModify' });
-                                dispatch({ type: 'main/goBack', path: '/workshop/datasource' });
+                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                             }
                             this.setState({
                                 visibleConfirm: false
@@ -51,7 +51,7 @@ class DataSourceDetailHeader extends React.Component {
                             this.setState({
                                 visibleConfirm: false
                             }, () => {
-                                dispatch({ type: 'main/goBack', path: '/workshop/datasource' });
+                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                             });
                         }}
                         okText="保存"
@@ -59,14 +59,14 @@ class DataSourceDetailHeader extends React.Component {
                     >
                         <Button onClick={(e) => {
                             if(!dataSourceDetail.dirty) {
-                                dispatch({ type: 'main/goBack', path: '/workshop/datasource' });
+                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                             }
                         }}>
                             <Icon type='left' />返回
                         </Button>
                     </Popconfirm>}
                     {!code || code === 'create' && <Button onClick={(e) => {
-                        dispatch({ type: 'main/goBack', path: '/workshop/datasource' });
+                        dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                     }}>
                         <Icon type='left' />返回
                     </Button>}

src/models/chartDesigner.js

@@ -293,53 +293,57 @@ export default {
             const { baseConfig } = chartDesigner;
             const { viewType } = baseConfig;
 
-            yield put({ type: 'silentSetField', name: 'fetchConfig', value: {} });
-            if(viewType === 'bar') {
-                const { barConfig } = chartDesigner;
-                if(barConfig.xAxis.column.value && barConfig.yAxis.column.value) {
-                    yield put({ type: 'fetchBarData' });
-                }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                }
-            }else if(viewType === 'pie') {
-                const { pieConfig } = chartDesigner;
-                if(pieConfig.xAxis.column.value && pieConfig.yAxis.column.value) {
-                    yield put({ type: 'fetchPieData' });
-                }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                }
-            }else if(viewType === 'line') {
-                const { lineConfig } = chartDesigner;
-                if(lineConfig.xAxis.column.value && lineConfig.yAxis.column.value) {
-                    yield put({ type: 'fetchLineData' });
-                }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                }
-            }else if(viewType === 'scatter') {
-                const { scatterConfig } = chartDesigner;
-                if(scatterConfig.xAxis.column.value && scatterConfig.yAxis.column.value) {
-                    yield put({ type: 'fetchScatterData' });
-                }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                }
-            }else if(viewType === 'dataView') {
-                const { dataViewConfig } = chartDesigner;
-                if(dataViewConfig.viewColumns.length > 0 && 
-                    dataViewConfig.sortColumn.key && 
-                    dataViewConfig.sortType) {
-                    yield put({ type: 'fetchDataViewData' });
-                }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                }
-            }else if(viewType === 'aggregateTable') {
-                const { aggregateTableConfig } = chartDesigner;
-                if(aggregateTableConfig.targetColumn.name && aggregateTableConfig.statistics.length > 0) {
-                    yield put({ type: 'fetchAggregateTableData' });
+            try{
+                yield put({ type: 'silentSetField', name: 'fetchConfig', value: {} });
+                if(viewType === 'bar') {
+                    const { barConfig } = chartDesigner;
+                    if(barConfig.xAxis.column.value && barConfig.yAxis.column.value) {
+                        yield put({ type: 'fetchBarData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
+                }else if(viewType === 'pie') {
+                    const { pieConfig } = chartDesigner;
+                    if(pieConfig.xAxis.column.value && pieConfig.yAxis.column.value) {
+                        yield put({ type: 'fetchPieData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
+                }else if(viewType === 'line') {
+                    const { lineConfig } = chartDesigner;
+                    if(lineConfig.xAxis.column.value && lineConfig.yAxis.column.value) {
+                        yield put({ type: 'fetchLineData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
+                }else if(viewType === 'scatter') {
+                    const { scatterConfig } = chartDesigner;
+                    if(scatterConfig.xAxis.column.value && scatterConfig.yAxis.column.value) {
+                        yield put({ type: 'fetchScatterData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
+                }else if(viewType === 'dataView') {
+                    const { dataViewConfig } = chartDesigner;
+                    if(dataViewConfig.viewColumns.length > 0 && 
+                        dataViewConfig.sortColumn.key && 
+                        dataViewConfig.sortType) {
+                        yield put({ type: 'fetchDataViewData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
+                }else if(viewType === 'aggregateTable') {
+                    const { aggregateTableConfig } = chartDesigner;
+                    if(aggregateTableConfig.targetColumn.name && aggregateTableConfig.statistics.length > 0) {
+                        yield put({ type: 'fetchAggregateTableData' });
+                    }else {
+                        yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    }
                 }else {
-                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    console.log('no viewType......')
                 }
-            }else {
-                console.log('no viewType......')
+            }catch(e) {
+                message.error('加载数据错误: ' + e.message);
             }
         },
         *fetchBarData(action, { select, call, put }) {

src/models/dashboard.js

@@ -18,13 +18,15 @@ export default {
             menuList: [],
             menuTree: [],
             menuExpandedKeys: ['-1'],
-            menuSelectedKeys: ['-1'],
+            menuSelectedKeys: [],
             menuFilterLabel: '',
             menuAutoExpandParent: true,
+            currentMenu: null,
+            currentMenuParents: [],
             filterLabel: '',
             filterItems: [ // 可选过滤字段
                 { name: 'name', label: '报表名称', type: 'string' },
-                { name: 'description', label: '说明', type: 'string' },
+                { name: 'description', label: '备注', type: 'string' },
                 { name: 'creatorName', label: '创建人', type: 'string' },
                 { name: 'createTime', label: '创建时间', type: 'date' },
             ],

src/models/dataSourceDetail.js

@@ -94,7 +94,13 @@ export default {
                 yield put({ type: 'setField', name: 'targetDirty', value: false });
     
                 if(!res.err && res.data.code > 0) {
+                    let colNames = [];
+                    let repeatColumnName = false;
                     let columns = res.data.data.map((d, i) => {
+                        if(colNames.findIndex(cn => cn === d.columnName) > -1) {
+                            repeatColumnName = d.columnName;
+                        }
+                        colNames.push(d.columnName);
                         return {
                             key: i,
                             using: true,
@@ -106,9 +112,15 @@ export default {
                             filterable: true,
                         }
                     });
+                    if(repeatColumnName) {
+                        message.error('加载列数据失败: 存在重复列[ ' + repeatColumnName + ' ]');
+                        return false;
+                    }
                     if(cover) {
+                        // 覆盖
                         yield put({ type: 'setField', name: 'columns', value: columns });
                     }else {
+                        // 保留重复列
                         let mergeColumns = [];
                         columns.forEach(c => {
                             let tc = oldColumns.find(o => o.name === c.name );
@@ -135,7 +147,7 @@ export default {
                     { name: 'columns', value: [] },
                     { name: 'notice', value: e.message + '' || e + '' }
                 ] });
-                message.error('请求列数据错误: ' + e.message);
+                message.error('加载列数据失败: ' + e.message);
             }
         },
     },

src/models/main.js

@@ -62,16 +62,19 @@ export default {
             let newState = Object.assign({}, state, obj);
             return Object.assign({}, newState );
         },
+        reset(state, action) {
+            return Object.assign({}, state, { currentPage: '', lastWorkshopPage: '/workshop/dataConnect', lastSettingPage: '/setting/admin' });
+        }
     },
     effects: {
-        * redirect (action, { put }) {
+        *redirect (action, { put }) {
             const { path, reload } = action;
             yield put(routerRedux.push(path || '/'));
             if(reload) {
                 window.location.reload();
             }
         },
-        * goBack (action, { put }) {
+        *goBack (action, { put }) {
             const { reload, path } = action;
             if(window.history.length === 1) {
                 yield put(routerRedux.push(path || '/'));
@@ -180,6 +183,7 @@ export default {
                 yield put({ type: 'home/reset' });
                 yield put({ type: 'logs/reset' });
                 yield put({ type: 'recent/reset' });
+                yield put({ type: 'reset' });
             }catch(e) {
                 console.log(e);
                 message.error('注销失败: ' + e.message);

src/themes/default/base.less

@@ -34,11 +34,8 @@
 // }
 
 // Table
-.ant-table-header {
-    margin-bottom: 0 !important;
-}
 .ant-table-body {
-    margin-top: 0 !important;
+    margin-top: 10px;
 }
 .ant-table-small > .ant-table-content > .ant-table-body {
     margin: 0;