diff --git a/package.json b/package.json index e3252241..51bf8abe 100755 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@babel/polyfill": "^7.0.0-beta.36", "antd": "^3.1.0", "babel-runtime": "^6.9.2", - "bizcharts": "^3.1.0-beta.4", + "bizcharts": "^3.1.3-beta.1", "bizcharts-plugin-slider": "^2.0.1", "classnames": "^2.2.5", "dva": "^2.1.0", diff --git a/src/components/Authorized/Authorized.js b/src/components/Authorized/Authorized.js index d9a2a781..8e7aacb2 100644 --- a/src/components/Authorized/Authorized.js +++ b/src/components/Authorized/Authorized.js @@ -5,11 +5,7 @@ class Authorized extends React.Component { render() { const { children, authority, noMatch = null } = this.props; const childrenRender = typeof children === 'undefined' ? null : children; - return CheckPermissions( - authority, - childrenRender, - noMatch - ); + return CheckPermissions(authority, childrenRender, noMatch); } } diff --git a/src/components/Authorized/AuthorizedRoute.js b/src/components/Authorized/AuthorizedRoute.js index 3d03226a..f7cd679d 100644 --- a/src/components/Authorized/AuthorizedRoute.js +++ b/src/components/Authorized/AuthorizedRoute.js @@ -4,16 +4,28 @@ import Authorized from './Authorized'; class AuthorizedRoute extends React.Component { render() { - const { component: Component, render, authority, - redirectPath, ...rest } = this.props; + const { + component: Component, + render, + authority, + redirectPath, + ...rest + } = this.props; return ( } />} + noMatch={ + } + /> + } > (Component ? : render(props))} + render={props => + (Component ? : render(props)) + } /> ); diff --git a/src/components/Authorized/CheckPermissions.js b/src/components/Authorized/CheckPermissions.js index 0a7dbaed..d51e9833 100644 --- a/src/components/Authorized/CheckPermissions.js +++ b/src/components/Authorized/CheckPermissions.js @@ -3,7 +3,11 @@ import PromiseRender from './PromiseRender'; import { CURRENT } from './index'; function isPromise(obj) { - return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'; + return ( + !!obj && + (typeof obj === 'object' || typeof obj === 'function') && + typeof obj.then === 'function' + ); } /** @@ -38,9 +42,7 @@ const checkPermissions = (authority, currentAuthority, target, Exception) => { // Promise 处理 if (isPromise(authority)) { - return () => ( - - ); + return ; } // Function 处理 diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js index 78f762d9..22f1fcb7 100644 --- a/src/components/Authorized/PromiseRender.js +++ b/src/components/Authorized/PromiseRender.js @@ -3,25 +3,37 @@ import { Spin } from 'antd'; export default class PromiseRender extends React.PureComponent { state = { - component: false, + component: null, }; - async componentDidMount() { + componentDidMount() { + const ok = this.checkIsInstantiation(this.props.ok); + const error = this.checkIsInstantiation(this.props.error); this.props.promise .then(() => { this.setState({ - component: this.props.ok, + component: ok, }); }) .catch(() => { this.setState({ - component: this.props.error, + component: error, }); }); } + // Determine whether the incoming component has been instantiated + // AuthorizedRoute is already instantiated + // Authorized render is already instantiated, children is no instantiated + // Secured is not instantiated + checkIsInstantiation = (target) => { + if (!React.isValidElement(target)) { + return target; + } + return () => target; + }; render() { - const C = this.state.component; - return C ? ( - + const Component = this.state.component; + return Component ? ( + ) : (
( ); +// Determine whether the incoming component has been instantiated +// AuthorizedRoute is already instantiated +// Authorized render is already instantiated, children is no instantiated +// Secured is not instantiated +const checkIsInstantiation = (target) => { + if (!React.isValidElement(target)) { + return target; + } + return () => target; +}; + /** * 用于判断是否拥有权限访问此view权限 * authority 支持传入 string ,funtion:()=>boolean|Promise @@ -38,11 +49,8 @@ const authorize = (authority, error) => { throw new Error('authority is required'); } return function decideAuthority(targer) { - return CheckPermissions( - authority, - targer, - classError || Exception403 - ); + const component = CheckPermissions(authority, targer, classError || Exception403); + return checkIsInstantiation(component); }; }; diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index ac5703ce..528b2519 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -26,7 +26,16 @@ export default class Pie extends Component { componentWillReceiveProps(nextProps) { if (this.props.data !== nextProps.data) { - this.getLengendData(); + // because of charts data create when rendered + // so there is a trick for get rendered time + this.setState( + { + legendData: [...this.state.legendData], + }, + () => { + this.getLengendData(); + } + ); } } diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js index 8ce5e66f..f43be9d2 100644 --- a/src/components/GlobalHeader/index.js +++ b/src/components/GlobalHeader/index.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd'; +import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd'; import moment from 'moment'; import groupBy from 'lodash/groupBy'; import Debounce from 'lodash-decorators/debounce'; @@ -8,8 +8,6 @@ import NoticeIcon from '../NoticeIcon'; import HeaderSearch from '../HeaderSearch'; import styles from './index.less'; -const { Header } = Layout; - export default class GlobalHeader extends PureComponent { componentWillUnmount() { this.triggerResizeEvent.cancel(); @@ -68,7 +66,7 @@ export default class GlobalHeader extends PureComponent { ); const noticeData = this.getNoticeData(); return ( -
+
{isMobile && ( [ ( @@ -135,7 +133,7 @@ export default class GlobalHeader extends PureComponent { ) : }
-
+
); } } diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less index f1c38bde..6f885152 100644 --- a/src/components/GlobalHeader/index.less +++ b/src/components/GlobalHeader/index.less @@ -1,6 +1,7 @@ @import "~antd/lib/style/themes/default.less"; .header { + height: 64px; padding: 0 12px 0 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, .08); diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 58484803..f8c956a9 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -16,7 +16,7 @@ import Authorized from '../utils/Authorized'; import { getMenuData } from '../common/menu'; import logo from '../assets/logo.svg'; -const { Content } = Layout; +const { Content, Header, Footer } = Layout; const { AuthorizedRoute } = Authorized; /** @@ -164,18 +164,20 @@ class BasicLayout extends React.PureComponent { onCollapse={this.handleMenuCollapse} /> - +
+ +
{ @@ -201,29 +203,31 @@ class BasicLayout extends React.PureComponent { - , - href: 'https://github.com/ant-design/ant-design-pro', - blankTarget: true, - }, { - key: 'Ant Design', - title: 'Ant Design', - href: 'http://ant.design', - blankTarget: true, - }]} - copyright={ -
- Copyright 2018 蚂蚁金服体验技术部出品 -
- } - /> +
+ , + href: 'https://github.com/ant-design/ant-design-pro', + blankTarget: true, + }, { + key: 'Ant Design', + title: 'Ant Design', + href: 'http://ant.design', + blankTarget: true, + }]} + copyright={ +
+ Copyright 2018 蚂蚁金服体验技术部出品 +
+ } + /> +
); diff --git a/src/router.js b/src/router.js index 54eefd17..23fdae17 100644 --- a/src/router.js +++ b/src/router.js @@ -1,5 +1,5 @@ import React from 'react'; -import { routerRedux, Switch } from 'dva/router'; +import { routerRedux, Route, Switch } from 'dva/router'; import { LocaleProvider, Spin } from 'antd'; import zhCN from 'antd/lib/locale-provider/zh_CN'; import dynamic from 'dva/dynamic'; @@ -21,10 +21,9 @@ function RouterConfig({ history, app }) { - } - redirectPath="/" + component={UserLayout} /> @@ -147,7 +146,7 @@ export default class Monitor extends PureComponent { - + - + - + {getFieldDecorator('members', { initialValue: tableData, })()} diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index 7eb0665f..a8b18c6f 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -23,17 +23,6 @@ export default class TableForm extends PureComponent { } index = 0; cacheOriginData = {}; - handleSubmit = (e) => { - e.preventDefault(); - this.props.form.validateFieldsAndScroll((err, values) => { - if (!err) { - this.props.dispatch({ - type: 'form/submit', - payload: values, - }); - } - }); - } toggleEditable=(e, key) => { e.preventDefault(); const newData = this.state.data.map(item => ({ ...item })); @@ -83,12 +72,7 @@ export default class TableForm extends PureComponent { this.setState({ loading: true, }); - // save field when blur input setTimeout(() => { - if (document.activeElement.tagName === 'INPUT' && - document.activeElement !== e.target) { - return; - } if (this.clickedCancel) { this.clickedCancel = false; return; @@ -121,6 +105,7 @@ export default class TableForm extends PureComponent { delete this.cacheOriginData[key]; } this.setState({ data: newData }); + this.clickedCancel = false; } render() { const columns = [{ @@ -135,7 +120,6 @@ export default class TableForm extends PureComponent { value={text} autoFocus onChange={e => this.handleFieldChange(e, 'name', record.key)} - onBlur={e => this.saveRow(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="成员姓名" /> @@ -154,7 +138,6 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'workId', record.key)} - onBlur={e => this.saveRow(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="工号" /> @@ -173,7 +156,6 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'department', record.key)} - onBlur={e => this.saveRow(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="所属部门" /> @@ -192,7 +174,7 @@ export default class TableForm extends PureComponent { if (record.isNew) { return ( - 保存 + this.saveRow(e, record.key)}>添加 this.remove(record.key)}> 删除 @@ -202,7 +184,7 @@ export default class TableForm extends PureComponent { } return ( - 保存 + this.saveRow(e, record.key)}>保存 this.cancel(e, record.key)}>取消 diff --git a/src/routes/Profile/AdvancedProfile.less b/src/routes/Profile/AdvancedProfile.less index eb24e15e..679a5720 100644 --- a/src/routes/Profile/AdvancedProfile.less +++ b/src/routes/Profile/AdvancedProfile.less @@ -5,7 +5,6 @@ } .tabsCard { - margin-bottom: 24px; :global { .ant-card-head { padding: 0 16px;