报表目录、收藏细节优化

src/components/dashboard/menu.jsx

@@ -9,6 +9,7 @@ const { Search } = Input
 class DashboardMenu extends React.Component {
 
     constructor(props) {
+        console.log('create');
         super(props);
         this.state = {
             editingKey: null,
@@ -22,10 +23,40 @@ class DashboardMenu extends React.Component {
         dispatch({ type: 'dashboard/remoteMenuTree' });
     }
 
+    cloneTree = (tree) => {
+        let arr = [];
+        tree.forEach(t => {
+            let obj = { ...t, children: []};
+            if(t.children && t.children.length > 0) {
+                obj.children = this.cloneTree(t.children);
+            }
+            arr.push(obj);
+        });
+        return arr;
+    }
+
+    reduceTree = (tree) => {
+        let arr = [ ...tree ];
+        for(let i = arr.length - 1; i >= 0; i--) {
+            let t = arr[i];
+            if(t.children && t.children.length > 0) {
+                t.children = this.reduceTree(t.children);
+            }
+            if((!t.children || t.children.length === 0) && t.type !== 'dashboard') {
+                arr.splice(i, 1);
+            }
+        }
+        return arr;
+    }
+
     generateMenu(tree, regLabel) {
         const { mode, dispatch } = this.props;
         const { editingKey } = this.state;
-        return tree.filter(t => (mode === 'view' || t.type === 'menu')).sort((a, b) => a.index - b.index).map(t => {
+        let ftree = this.cloneTree(tree);
+        if(mode === 'view') {
+            ftree = this.reduceTree(ftree)
+        }
+        return ftree.filter(t => (mode === 'view' || t.type === 'menu')).sort((a, b) => a.index - b.index).map(t => {
             let title = <div className='node-title'>
                 <span>{ (t.code !== editingKey) ?
                    ( regLabel ? ( <span style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>

src/components/homePage/collection.jsx

@@ -12,17 +12,34 @@ class Collection extends React.Component {
             name: c.name
         } })
     }
+
+    componentDidMount() {
+        this.props.dispatch({ type: 'home/fetchCollectionDashboardList' });
+    }
+
     generateCollectionMenus() {
         const { home } = this.props;
-        const { collectionDashboards } = home;
+        const { collectionDashboards, menuFilterLabel } = home;
+        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
+        const regLabel = menuFilterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         if(collectionDashboards.length > 0) {
-            return collectionDashboards.map((c, i) => (
+            return collectionDashboards.filter(c => c.name.search(new RegExp('(' + regLabel + '){1}', 'ig')) > -1).map((c, i) => (
                 <li className='item' key={i}>
                     <span style={{ fontWeight: 'bold', cursor: 'pointer' }} onClick={() => {
                         this.openTab(c);
                     }}>
                         <Icon style={{ marginRight: '8px' }} type="pushpin" />
-                        {c.name}
+                        {
+                            <span>
+                                { (c.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
+                                    return (
+                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === regLabel.toLowerCase() ?
+                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                        fragment
+                                    )
+                                }) }                       
+                            </span>
+                        }
                     </span>
                 </li>
             ));

src/components/homePage/sider.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Input } from 'antd'
+import { Layout, Input, Button, Icon } from 'antd'
 import { connect } from 'dva'
 import DashboardCollection from './collection'
 import DashboardMenu from '../dashboard/menu'
@@ -33,16 +33,21 @@ class MenuLayout extends React.Component {
     }
 
     render() {
-        const { home } = this.props;
+        const { home, dispatch } = this.props;
         const { menuFilterLabel } = home;
 
         return <Layout className='home-menu'>
             <Header>
                 <Input.Search
+                    className='search'
                     placeholder='搜索'
                     defaultValue={menuFilterLabel}
                     onSearch={this.onSearch}
                 />
+                <Button className='refresh' onClick={() => {
+                    dispatch({ type: 'dashboard/remoteMenuTree', mandatory: true });
+                    dispatch({ type: 'dashboard/fetchCollectionDashboardList', mandatory: true });
+                }}><Icon type='sync' /></Button>
             </Header>
             <Content>
                 <DashboardCollection />

src/components/homePage/sider.less

@@ -2,6 +2,12 @@
     .ant-layout-header {
         padding: 0 16px;
         background: transparent;
+        .search {
+            width: 220px;
+        }
+        .refresh {
+            margin-left: 8px;
+        }
     }
     .ant-layout-content {
         display: flex;

src/models/dashboard.js

@@ -408,7 +408,6 @@ export default {
                     },
                 })
                 if(!res.err && res.data.code > 0) {
-                    yield put({ type: 'remoteMenuTree', menuCode: menu.code });
                     yield put({ type: 'remoteMenuDashboardList', menuCode: menu.code });
                     yield put({ type: 'setFields', fields: [
                         { name: 'menuSelectedKeys', value: [menu.code] },

src/models/home.js

@@ -103,15 +103,23 @@ export default {
         },
         *fetchCollectionDashboardList(action, { select, call, put }) {
             try {
+                const home = yield select(state => state.present.home);
+                const { collectionDashboards } = home;
+                const { mandatory } = action;
+                console.log(collectionDashboards);
+                if(collectionDashboards.length > 0 && !mandatory) {
+                    return;
+                }
                 const res = yield call(service.fetch, {
-                    url: URLS.DASHBOARD_COLLECTION_LIST,
+                    url: URLS.DASHBOARD_COLLECT_LIST,
                     method: 'GET'
                 });
                 if(!res.err && res.data.code > 0) {
                     const list = res.data.data.map(d => ({
-                        code: d.id + '',
-                        name: d.name
+                        code: d.ID + '',
+                        name: d.NAME
                     }));
+                    console.log(list);
                     yield put({ type: 'setField', name: 'collectionDashboards', value: list });
                 }else {
                     message.error('获取收藏列表失败: ' + (res.err || res.data.msg));