添加界面loading控制

src/components/authority/index.jsx

@@ -4,6 +4,7 @@
 import React from 'react'
 import { Tabs, Layout, Row, Col, Input, Menu, Table, Checkbox, message, Button, Icon } from 'antd'
 import { connect } from 'dva'
+import Loading from '../common/loading/index'
 import './index.less'
 const { Sider, Header, Content } = Layout
 const { Search } = Input
@@ -57,10 +58,11 @@ class Authority extends React.Component {
 
     render() {
         const { dashboard, authority, userGroup, user, dispatch } = this.props;
-        const { menuSelectedKeys, tabActiveKey, groupFilterLabel, userFilterLabel, dashboardFilterLabel, groupLimit, userLimit } = authority;
+        const { panelLoading, menuSelectedKeys, tabActiveKey, groupFilterLabel, userFilterLabel, dashboardFilterLabel, groupLimit, userLimit } = authority;
         
         const dashboardTreeList = this.checkIndeterminate(JSON.parse(JSON.stringify(dashboard.menuTree)));
         return <Layout className='layout-authority'>
+            <Loading visible={panelLoading} />
             <Sider>
                 <Tabs
                     className='tabs-authority'
@@ -85,10 +87,12 @@ class Authority extends React.Component {
                             displayField='name'
                             valueField='code'
                             onItemClick={(item) => {
-                                dispatch({ type: 'authority/setFields', fields: [
-                                    { name: 'menuSelectedKeys', value: [item.code] },
-                                ] })
-                                dispatch({ type: 'authority/fetchDashboardTree', dtype: '0', code: item.code });
+                                dispatch({ type: 'authority/batchActions', actions: [
+                                    { type: 'setFields', fields: [
+                                        { name: 'menuSelectedKeys', value: [item.code] },
+                                    ] },
+                                    { type: 'fetchDashboardTree', dtype: '0', code: item.code }
+                                ] });
                             }}
                             limit={groupLimit}
                             onScrollToBottom={() => {
@@ -116,10 +120,10 @@ class Authority extends React.Component {
                             displayField='fullName'
                             valueField='code'
                             onItemClick={(item) => {
-                                dispatch({ type: 'authority/setFields', fields: [
-                                    { name: 'menuSelectedKeys', value: [item.code] },
-                                ] })
-                                dispatch({ type: 'authority/fetchDashboardTree', dtype: '1', code: item.code });
+                                dispatch({ type: 'authority/batchActions', actions: [
+                                    { type: 'setFields', fields: [ { name: 'menuSelectedKeys', value: [item.code] }, ]},
+                                    { type: 'fetchDashboardTree', dtype: '1', code: item.code }
+                                ] });
                             }}
                             limit={userLimit}
                             onScrollToBottom={() => {
@@ -139,9 +143,12 @@ class Authority extends React.Component {
                     <Row className='search-bar' type='flex' justify='end'>
                         <Col className='search'>
                             <Button className='btn-refresh' onClick={() => {
+                                dispatch({ type: 'authority/setField', name: 'panelLoading', value: true });
                                 dispatch({ type: 'userGroup/fetchList', mandatory: true });
                                 dispatch({ type: 'user/fetchList', mandatory: true });
-                                dispatch({ type: 'dashboard/remoteMenuTree', mandatory: true });
+                                dispatch({ type: 'dashboard/remoteMenuTree', mandatory: true }).then(() => {
+                                    dispatch({ type: 'authority/setField', name: 'panelLoading', value: false });
+                                });
                             }}>
                                 <Icon type='sync'/>
                             </Button>

src/components/logs/logs.jsx

@@ -4,6 +4,7 @@ import { connect } from 'dva'
 import moment from 'moment'
 import ListFilter from '../common/listFilter/index'
 import EllipsisTooltip from '../common/ellipsisTooltip/index'
+import Loading from '../common/loading/index'
 import './logs.less'
 const { Content } = Layout
 
@@ -83,7 +84,7 @@ class Logs extends React.Component {
     render() {
         const { logs, dispatch } = this.props;
         const { pageSize, tableBodyHeight } = this.state;
-        const { filterItem, filterLabel, currentPage } = logs;
+        const { listLoading, filterItem, filterLabel, currentPage } = logs;
 
         let dataList = this.onSort(this.onSearch());
         let total = dataList.length;
@@ -172,6 +173,7 @@ class Logs extends React.Component {
 
         return (      
             <Layout className='layout-logs'>
+                <Loading visible={listLoading}/>
                 <Content>
                     <Card bordered={false} className='logs-body' title={
                         <Row className='logs-tools' type='flex' justify='end'>

src/models/authority.js

@@ -6,6 +6,7 @@ export default {
     namespace: 'authority',
     state: {
         originData: {
+            panelLoading: false,
             tabActiveKey: 'userGroup',
             menuSelectedKeys: [],
             groupFilterLabel: '',
@@ -36,11 +37,15 @@ export default {
     effects: {
         *fetchDashboardTree(action, { put, call, select }) {
             try{
-                const { dtype, code } = action;
+                const { dtype, code, silent } = action;
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'panelLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.ACCESS_DASHBOARD_TREE + '/' + dtype + '/' + code,
                     method: 'GET'
                 })
+                
                 if(!res.err && res.data.code > 0) {
                     const list = res.data.data || [];
                     const dashboardList = list.map(l => l.id + '');
@@ -54,11 +59,16 @@ export default {
             }catch(e) {
                 message.error('获取报表目录失败: ' + e.message);
                 return false;
+            }finally {
+                yield put({ type: 'setField', name: 'panelLoading', value: false });
             }
         },
         *add(action, { select, put, call }) {
             try {
-                const { dtype, code, dashboardCode } = action;
+                const { dtype, code, dashboardCode, silent } = action;
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'panelLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.ACCESS_ADD,
                     method: 'POST',
@@ -75,11 +85,16 @@ export default {
                 }
             }catch(e) {
                 message.error('设置权限失败: ' + e.message);
+            }finally {
+                yield put({ type: 'setField', name: 'panelLoading', value: false });
             }
         },
         *addAll(action, { select, put, call }) {
             try {
-                const { dtype, code, dashboardCodes } = action;
+                const { dtype, code, dashboardCodes, silent } = action;
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'panelLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.ACCESS_ADD_ALL,
                     method: 'POST',
@@ -96,11 +111,16 @@ export default {
                 }
             }catch(e) {
                 message.error('设置权限失败: ' + e.message);
+            }finally {
+                yield put({ type: 'setField', name: 'panelLoading', value: false });
             }
         },
         *remove(action, { select, put, call }) {
             try {
-                const { dtype, code, dashboardCode } = action;
+                const { dtype, code, dashboardCode, silent } = action;
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'panelLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.ACCESS_REMOVE,
                     method: 'POST',
@@ -117,11 +137,16 @@ export default {
                 }
             }catch(e) {
                 message.error('设置权限失败: ' + e.message);
+            }finally {
+                yield put({ type: 'setField', name: 'panelLoading', value: false });
             }
         },
         *removeAll(action, { select, put, call }) {
             try {
-                const { dtype, code, dashboardCodes } = action;
+                const { dtype, code, dashboardCodes, silent } = action;
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'panelLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.ACCESS_REMOVE_ALL,
                     method: 'POST',
@@ -138,6 +163,19 @@ export default {
                 }
             }catch(e) {
                 message.error('设置权限失败: ' + e.message);
+            }finally {
+                yield put({ type: 'setField', name: 'panelLoading', value: false });
+            }
+        },
+        *batchActions(action, { select, put, call}) {
+            try {
+                const { actions } = action;
+                for(let i = 0; i < actions.length; i++) {
+                    let act = actions[i];
+                    yield put({ ...act });
+                }
+            }catch(e) {
+                message.error(e.message);
             }
         }
     },

src/models/logs.js

@@ -6,6 +6,7 @@ export default {
     namespace: 'logs',
     state: {
         originData: {
+            listLoading: false,
             list: [],
             total: 0,
             filterLabel: '',
@@ -65,7 +66,7 @@ export default {
     },
     effects: {
        *fetchList(action, { select, call, put }) {
-            const { pageNum, pageSize } = action;
+            const { pageNum, pageSize, silent } = action;
             const body = {
                 pageNum: pageNum || 1,
                 pageSize: pageSize || 99999999
@@ -75,6 +76,9 @@ export default {
                 // if(!action.mandatory && logs.list.length > 0) {
                 //     return;
                 // }
+                if(!silent) {
+                    yield put({ type: 'setField', name: 'listLoading', value: true });
+                }
                 const res = yield call(service.fetch, {
                     url: URLS.MESSAGELOG_LIST,
                     method: 'GET',
@@ -103,6 +107,8 @@ export default {
                 }
             }catch(e) {
                 message.error('请求操作日志列表失败: ' + e.message);
+            }finally {
+                yield put({ type: 'setField', name: 'listLoading', value: false });
             }
         } 
     },