添加报表名称长度校验/logo图标样式

src/components/chartDesigner/header.jsx

@@ -61,7 +61,7 @@ class Header extends React.Component {
                         onConfirm={() => {
                             if(this.isValid()) {
                                 dispatch({ type: 'chart/remoteModify' });
-                                dispatch({ type: 'main/goBack', path: '/chart' });
+                                dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                             }
                             this.setState({
                                 visibleConfirm: false
@@ -71,7 +71,7 @@ class Header extends React.Component {
                             this.setState({
                                 visibleConfirm: false
                             });
-                            dispatch({ type: 'main/goBack', path: '/chart' });
+                            dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                         }}
                         okText="保存"
                         cancelText="不保存"

src/components/common/login/login.less

@@ -19,10 +19,12 @@
                 justify-content: center;
                 align-items: center;
                 .logo {
-                    height: 28px;
+                    height: 100%;
                     width: 84px;
-                    margin-top: 3px;
                     background-image: url(../../../../static/images/uas.png);
+                    background-repeat: no-repeat;
+                    background-position: center;
+                    margin-top: 2px;
                 }
                 .text {
                     font-size: 24px;

src/components/common/navigator.less

@@ -7,7 +7,6 @@
         .logo {
             height: 100%;
             width: 84px;
-            margin-top: 3px;
             background-image: url(../../../static/images/uas.png);
             background-repeat: no-repeat;
             background-position: center;

src/components/dashboardDesigner/header.jsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Input, Icon, Button, Popconfirm, Switch } from 'antd'
+import { Input, Icon, Button, Popconfirm, Switch, Form } from 'antd'
 import { connect } from 'dva'
 import DeleteBox from '../common/deleteBox/deleteBox'
 import './header.less'
+const FormItem = Form.Item
 
 class Header extends React.Component {
     constructor(props) {
@@ -11,6 +12,9 @@ class Header extends React.Component {
             visibleConfirm: false,
             visibleSettingBox: false,
             visibleDeleteBox: false,
+            validInfo: {
+                name: { status: 'success', help: '' }
+            },
         }
     }
 
@@ -25,32 +29,35 @@ class Header extends React.Component {
         return currentUser.code === creatorCode || currentUser.role === 'superAdmin';
     }
 
+    isValid = () => {
+        const { dashboardDesigner } = this.props;
+        const { name } = dashboardDesigner; 
+
+        return !!name && name.trim().length > 0 && name.length <= 50;
+    }
+
     render() {
         const { dashboardDesigner, dispatch } = this.props;
-        const { visibleDeleteBox } = this.state;
+        const { visibleDeleteBox, validInfo } = this.state;
         const { editMode } = dashboardDesigner;
 
         return (
             <div className='dashboarddesigner-header'>
                 <div className='header-item toolbar-back'>
                     {this.isOwner() && <Popconfirm
+                        overlayClassName={`close-popconfirm${this.isValid() ? '' : ' confirm-disabled'}`}
                         placement="bottomLeft"
                         title="离开前保存修改吗？"
                         visible={this.state.visibleConfirm}
                         onVisibleChange={this.handleVisibleChange}
                         onConfirm={async () => {
-                            let url;
+                            if(this.isValid()) {
+                                dispatch({ type: 'dashboard/remoteModify' });
+                                dispatch({ type: 'main/goBack', path: '/workshop/dashboard' });
+                            }
                             this.setState({
                                 visibleConfirm: false
                             });
-                            if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
-                                url = 'dashboard/remoteModify'
-                            }else {
-                                url = 'dashboard/remoteAdd'
-                            }
-                            dispatch({ type: url }).then(() => {
-                                dispatch({ type: 'main/redirect', path: '/workshop/dashboard' });
-                            });
                         }}
                         onCancel={() => {
                             this.setState({
@@ -78,34 +85,49 @@ class Header extends React.Component {
                     </Button>}
                 </div>
                 <div className='header-item toolbar-title'>
-                    <Input
-                        key={dashboardDesigner.name}
-                        className='input-title'
-                        defaultValue={dashboardDesigner.name}
-                        disabled={!this.isOwner()}
-                        addonAfter={this.isOwner() ? <Icon type="edit" 
-                            onClick={(e) => {
-                                const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
-                                input && input.focus()
+                    <FormItem
+                        validateStatus={validInfo.name.status}
+                        help={validInfo.name.help}
+                    >
+                        <Input
+                            key={dashboardDesigner.name}
+                            className='input-title'
+                            defaultValue={dashboardDesigner.name}
+                            readOnly={!this.isOwner()}
+                            addonAfter={this.isOwner() ? <Icon type="edit" 
+                                onClick={(e) => {
+                                    const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
+                                    input && input.focus()
+                                }}
+                            /> : null}
+                            onChange={e => {
+                                let val = e.target.value + '';
+                                let status, help;
+                                if(val.trim().length === 0) {
+                                    status = 'error';
+                                    help = '报表名称不能为空';
+                                }else if(val.trim().length > 50) {
+                                    status = 'error';
+                                    help = '报表名称不能超过50个字符';
+                                }else {
+                                    status = 'success';
+                                    help = '';
+                                }
+                                window.clearTimeout(this.headerTimeout);
+                                this.headerTimeout = window.setTimeout(() => {
+                                    this.setState({
+                                        validInfo: { ...validInfo, name: { status, help } }
+                                    });
+                                }, 100);
                             }}
-                        /> : null}
-                        onBlur={(e) => {
-                            let value = e.target.value;
-                            if(!!value.trim()) {
+                            onBlur={(e) => {
                                 dispatch({ type: 'dashboardDesigner/setField', name: 'name', value: e.target.value });
-                            }else {
-                                e.target.value = dashboardDesigner.name;
-                            }
-                        }}
-                        onPressEnter={(e) => {
-                            let value = e.target.value;
-                            if(!!value.trim()) {
+                            }}
+                            onPressEnter={(e) => {
                                 dispatch({ type: 'dashboardDesigner/setField', name: 'name', value: e.target.value });
-                            }else {
-                                e.target.value = dashboardDesigner.name;
-                            }
-                        }}
-                    />
+                            }}
+                        />
+                    </FormItem>
                 </div>
                 <div className='header-item toolbar-viewswitch'>
                     {this.isOwner() && <Switch
@@ -123,7 +145,7 @@ class Header extends React.Component {
                             }, 300);
                         }}
                     />}
-                    {this.isOwner() && <Button style={{ marginLeft: '8px' }} onClick={() => {
+                    {this.isOwner() && <Button disabled={!this.isValid()} style={{ marginLeft: '8px' }} onClick={() => {
                         if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
                             dispatch({ type: 'dashboard/remoteModify' });
                         }else {

src/components/dashboardDesigner/header.less

@@ -28,6 +28,10 @@
                 color: #40a9ff;
             }
         }
+        .ant-form-explain {
+            margin-right: -520px;
+            margin-top: -30px;
+        }
     }
     .toolbar-viewswitch {
         .edit-mode-switch {