请求token验证/看板富文本编辑器编辑栏位置计算

src/components/common/login.jsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import Login from 'ant-design-pro/lib/Login'
 import { Alert, Checkbox } from 'antd'
-import { Link, Redirect } from 'dva/router';
+import { Link, Redirect } from 'dva/router'
+import { connect } from 'dva'
+import * as service from '../../services/index'
+import URLS from '../../constants/url'
 import './login.less'
 
 const { UserName, Password, Submit } = Login;
 
-function authenticate(cb) {
-    window.localStorage.setItem("isAuthenticated", "true");
-    window.localStorage.setItem("expireTime", (new Date().getTime()+ 24 * 60 * 60 * 1000 ) + '');
+function authenticate(token, expireTime, cb) {
+    window.localStorage.setItem("token", token);
+    window.localStorage.setItem("expireTime", expireTime);
     setTimeout(cb, 100); // fake async
 }
 
@@ -24,14 +27,8 @@ class LoginComponent extends React.Component {
         this.setState({
             notice: '',
         }, () => {
-            if (err && (values.username !== 'admin' || values.password !== '888888')) {
-                setTimeout(() => {
-                    this.setState({
-                        notice: '账号名或密码错误!',
-                    });
-                }, 500);
-            }else {
-                this.login();
+            if (!err) {
+                this.login(values.username, values.password);
             }
         });
     }
@@ -41,9 +38,35 @@ class LoginComponent extends React.Component {
         });
     }
 
-    login = () => {
-        authenticate(() => {
-            this.setState({ redirectToReferrer: true });
+    login = (username, password) => {
+        const self = this;
+        let body = {
+            userName: username,
+            passWord: password
+        };
+        service.fetch({
+            url: URLS.LOGIN,
+            body: body
+        }).then(r => {
+            if(!r.err && r.data.code > 0) {
+                return r.data.data;
+            }else {
+                self.setState({
+                    notice: r.err || r.data.msg,
+                });
+                let obj = {};
+                throw obj;
+            }
+        }).then(resData => {
+            console.log('登录', body, resData);
+            const token = resData.token;
+            // const expireTime = (new Date().getTime()+ 24 * 60 * 60 * 1000 ) + '';
+            const expireTime = resData.times;
+            authenticate(token, expireTime, () => {
+                this.setState({ redirectToReferrer: true });
+            });
+        }).catch(ex => {
+            console.error('fetch error', ex);
         });
     };
 
@@ -68,8 +91,8 @@ class LoginComponent extends React.Component {
                                 this.state.notice &&
                                 <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
                             }
-                            <UserName name="username" />
-                            <Password name="password" />
+                            <UserName name="username" placeholder='输入用户名' />
+                            <Password name="password" placeholder='输入密码'/>
                             <div>
                                 <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
                                 <a style={{ float: 'right' }} href="">忘记密码</a>
@@ -88,4 +111,4 @@ class LoginComponent extends React.Component {
     }
 }
 
-export default LoginComponent;
+export default connect(({ present: { main } }) => ({ main }))(LoginComponent);

src/components/common/navigator.jsx

@@ -5,19 +5,6 @@ import { connect } from 'dva'
 import '../../models/main'
 import './navigator.less'
 
-const userMenu = (
-    <Menu>
-        <Menu.Item key="0">
-            <span>账号信息</span>
-        </Menu.Item>
-        <Menu.Item key="1">
-            <Link to='/admin'><Icon type="setting" />系统管理</Link>
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item key="3">注销</Menu.Item>
-    </Menu>
-);
-
 class Navigator extends React.Component {
     constructor(props) {
         super(props)
@@ -27,8 +14,24 @@ class Navigator extends React.Component {
     
 
     render() {
+        const { main, dispatch } = this.props;
 
-        const { main } = this.props;
+        const userMenu = (
+            <Menu>
+                <Menu.Item key="0">
+                    <span>账号信息</span>
+                </Menu.Item>
+                <Menu.Item key="1">
+                    <Link to='/admin'><Icon type="setting" />系统管理</Link>
+                </Menu.Item>
+                <Menu.Divider />
+                <Menu.Item key="3" onClick={() => {
+                    window.localStorage.removeItem("token");
+                    window.localStorage.removeItem("expireTime");
+                    dispatch({ type: 'main/redirect', path: '/login' });
+                }}>注销</Menu.Item>
+            </Menu>
+        );
 
         return <div className='navigator'>
             <div className='navigator-left'>

src/components/dashboardDesigner/richTextEditor.jsx

@@ -29,12 +29,36 @@ class RichTextEditor extends Component {
             this.setState({
                 _html: editor.txt.html()
             });
-            let toolbar = elem.getElementsByClassName('w-e-toolbar')[0];
-            toolbar.style.display = 'flex';
+            let boardEl = document.getElementsByClassName('react-grid-layout')[0]; // 看板容器组件
+            let viewEl = elem.parentElement.parentElement; // chart/richText组件
+            let toolbarEl = elem.getElementsByClassName('w-e-toolbar')[0]; // 工具栏组件
+
+            toolbarEl.style.display = 'flex';
+            viewEl.style.zIndex = 2; // 使工具栏组件置于其他chat/richText组件上层
+
+            let boardElLayout = boardEl.getBoundingClientRect(); // 看板容器组件layout
+            let viewElLayout = viewEl.getBoundingClientRect(); // chart/richText组件layout
+            let toolbarElLayout = toolbarEl.getBoundingClientRect(); // 工具栏组件layout
+            
+            
+            console.log(toolbarEl);
+            let viewElX = viewElLayout.left; // chart/richText组件左起位置
+            let toolbarWidth = toolbarElLayout.width; // 工具栏组件宽度
+            let boardWidth = boardElLayout.width; // 看板容器宽度
+
+            console.log(viewElX, toolbarWidth, boardWidth);
+            if((viewElX + toolbarWidth) > boardWidth) { // 工具栏超出容器组件右边
+                toolbarEl.style.left = -(viewElX + toolbarWidth - boardWidth + 62) + 'px';
+            }else {
+                toolbarEl.style.left = '0px';
+            }
+            
         }; // 获得焦点时显示工具栏（需要计算位置）
         editor.customConfig.onblur = function (html) {
             let toolbar = elem.getElementsByClassName('w-e-toolbar')[0];
             toolbar.style.display = 'none';
+            let viewEl = elem.parentElement.parentElement;
+            viewEl.style.zIndex = 1;
         }
         editor.customConfig.uploadImgShowBase64 = true; // 上传图片（base64）
         editor.create()

src/components/dashboardDesigner/viewLayout.jsx

@@ -23,6 +23,7 @@ class ViewLayout extends React.PureComponent {
                     <div className='chart-tools'>
                         {!isPreview && viewType !== 'richText' && <Icon type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
                         {editMode && viewType !== 'richText' &&  <Icon type='edit' onClick={() => {
+                            dispatch({ type: 'dashboard/remoteModify' });
                             dispatch({ type: 'chartDesigner/reset' });
                             dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
                         }}/>}

src/components/dashboardDesigner/viewLayout.less

@@ -1,6 +1,7 @@
 
   .chartview {
     padding-top: 30px;
+    z-index: 1;
     .chartview-toolbar {
       height: 30px;
       margin-top: -30px;
@@ -34,8 +35,7 @@
         .w-e-toolbar {
           height: 30px;
           background-color: white !important;
-          border: none !important;
-          position: fixed;
+          position: absolute;
           top: 0;
           display: none;
         }
@@ -222,7 +222,7 @@
   .react-grid-item.react-draggable-dragging {
     transition: none;
     opacity: 0.5;
-    z-index: 3;
+    z-index: 3 !important;
     will-change: transform;
   }
   

src/components/datasource/columnConfig.jsx

@@ -25,7 +25,7 @@ class DataSourceColumnConfig extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            widths: [ 50, 100, 150, 100, 150, 200 ],
+            widths: [ 80, 150, 150, 80, 80 ],
             visibleConfirm: false
         }
     }
@@ -107,7 +107,7 @@ class DataSourceColumnConfig extends React.Component {
             title: '数据类型',
             dataIndex: 'columnType',
             key: 'columnType',
-            width: widths[4],
+            width: widths[2],
             render: (text, record) => {
                 return (
                     <Select
@@ -156,7 +156,7 @@ class DataSourceColumnConfig extends React.Component {
             />允许分组</div>,
             dataIndex: 'groupable',
             key: 'groupable',
-            width: 50,
+            width: widths[3],
             render: (v, r) => <Checkbox
                 dataKey={r.key}
                 onChange={(e) => {
@@ -190,7 +190,7 @@ class DataSourceColumnConfig extends React.Component {
             />允许过滤</div>,
             dataIndex: 'filterable',
             key: 'filterable',
-            width: 50,
+            width: widths[4],
             render: (v, r) => <Checkbox
                 dataKey={r.key}
                 onChange={(e) => {

src/constants/url.js

@@ -3,6 +3,10 @@ const BASE_URL = 'http://192.168.253.189:8081/BI';
 
 /**后台接口地址 */
 const URLS = {
+
+    /***************************************登录***************************************/
+    
+    LOGIN: BASE_URL + '/login', // 登录
     
     /***************************************数据源***************************************/
 

src/routes/router.js

@@ -11,18 +11,6 @@ import zhCN from 'antd/lib/locale-provider/zh_CN'
 import Demo from '../demo';
 import Xiaomi from '../xiaomi'
 
-if (!window.localStorage.getItem("isAuthenticated")) {
-    window.localStorage.setItem("isAuthenticated", "false");
-}else {
-    /**
-     * 是否过期
-     * 1.是-----设置isAuthenticated为false
-     */
-    if(new Date(+window.localStorage.getItem("expireTime")) < new Date()) {
-        window.localStorage.setItem("isAuthenticated", "false");
-    }
-}
-
 function RouterConfig({ history }) {
     return (
         <LocaleProvider locale={zhCN}>
@@ -46,8 +34,21 @@ export default RouterConfig;
 const PrivateRoute = ({ component: Component, ...rest }) => (
     <Route
         {...rest}
-        render={props =>
-            (window.localStorage.getItem("isAuthenticated") === "true" ? true : false) ? (
+        render={props =>{
+
+            if (!window.localStorage.getItem("token")) {
+                window.localStorage.setItem("token", "false");
+            }else {
+                /**
+                 * 是否过期
+                 * 1.是-----设置isAuthenticated为false
+                 */
+                if(new Date(+window.localStorage.getItem("expireTime")) < new Date()) {
+                    window.localStorage.setItem("token", "false");
+                }
+            }
+
+            return (window.localStorage.getItem("token") !== "false" ? true : false) ? (
                 <Component {...props} />
             ) : (
                     <Redirect
@@ -57,6 +58,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
                         }}
                     />
                 )
+            }
         }
     />
 );

src/services/index.js

@@ -6,9 +6,11 @@ export function fetch(option) {
   // client.setRequestHeader('Content-Type', 'application/json');
   // client.send(JSON.stringify(values));
   const { url, body } = option;
+  const token = window.localStorage.getItem("token");
   return request(url, {
     method: 'POST',
     headers: {
+      token: token,
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(body)