Browse Source

记住密码逻辑完善/调整看板表格容器高度

zhuth 7 years ago
parent
commit
9c280127c8

+ 0 - 1
src/components/chartDesigner/header.jsx

@@ -31,7 +31,6 @@ class Header extends React.Component {
         const { chartDesigner, main } = this.props;
         const { creatorCode } = chartDesigner;
         const { currentUser } = main;
-        console.log(currentUser, chartDesigner);
         return currentUser.code === creatorCode;
     }
 

+ 17 - 12
src/components/common/login/login.jsx

@@ -9,13 +9,14 @@ import './login.less'
 
 const { UserName, Password, Submit } = Login;
 
-function authenticate(token, expireTime, user, cb) {
+function authenticate(token, expireTime, user, autoLogin, cb ) {
     window.localStorage.setItem("token", token);
     window.localStorage.setItem("expireTime", expireTime);
 
     window.localStorage.setItem("usercode", user.code);
-    window.localStorage.setItem("account", user.account);
-    // window.localStorage.setItem("password", user.password);
+    autoLogin ? window.localStorage.setItem("autoLogin", 'true') : window.localStorage.setItem("autoLogin", 'false');
+    autoLogin ? window.localStorage.setItem("account", user.account) : window.localStorage.removeItem('account');
+    autoLogin ? window.localStorage.setItem("password", user.password) : window.localStorage.removeItem('password');
     window.localStorage.setItem("username", user.name);
     window.localStorage.setItem("userrole", user.role);
 
@@ -25,12 +26,11 @@ function authenticate(token, expireTime, user, cb) {
 class LoginComponent extends React.Component {
     state = {
         notice: '',
-        autoLogin: true,
+        autoLogin: window.localStorage.getItem('autoLogin') ? window.localStorage.getItem('autoLogin') === 'true' : true,
         redirectToReferrer: false
     };
 
     onSubmit = (err, values) => {
-        console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin });
         this.setState({
             notice: '',
         }, () => {
@@ -47,6 +47,8 @@ class LoginComponent extends React.Component {
 
     login = (username, password) => {
         const { dispatch } = this.props;
+        const { autoLogin } = this.state;
+
         const self = this;
         let body = {
             userName: username,
@@ -79,7 +81,7 @@ class LoginComponent extends React.Component {
                     role: user.role
                 };
                 dispatch({ type: 'main/setCurrentUser', user: currentUser });
-                authenticate(token, expireTime, currentUser, () => {
+                authenticate(token, expireTime, currentUser, autoLogin, () => {
                     this.setState({ redirectToReferrer: true });
                 });
             }).catch(ex => {
@@ -92,7 +94,10 @@ class LoginComponent extends React.Component {
 
     render() {
         const { from } = this.props.location.state || { from: { pathname: "/" } };
-        const { redirectToReferrer } = this.state;
+        const { notice, autoLogin, redirectToReferrer } = this.state;
+
+        const defaultAccount = window.localStorage.getItem('account');
+        const defaultPassword = window.localStorage.getItem('password');
 
         if (redirectToReferrer) {
             return <Redirect to={from} />;
@@ -108,10 +113,10 @@ class LoginComponent extends React.Component {
                             onSubmit={this.onSubmit}
                         >
                             {
-                                this.state.notice &&
-                                <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
+                                notice &&
+                                <Alert style={{ marginBottom: 24 }} message={notice} type="error" showIcon closable />
                             }
-                            <UserName name="username" placeholder='输入用户名' onChange={() => {
+                            <UserName name="username" placeholder='输入用户名' defaultValue={autoLogin ? defaultAccount : ''} onChange={() => {
                                 this.setState({
                                     notice: ''
                                 });
@@ -119,7 +124,7 @@ class LoginComponent extends React.Component {
                                 required: true,
                                 message: '用户名不能为空'
                             }]}/>
-                            <Password name="password" placeholder='输入密码' onChange={() => {
+                            <Password name="password" placeholder='输入密码' defaultValue={autoLogin ? defaultPassword : ''} onChange={() => {
                                 this.setState({
                                     notice: ''
                                 });
@@ -128,7 +133,7 @@ class LoginComponent extends React.Component {
                                 message: '密码不能为空'
                             }]}/>
                             <div>
-                                <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
+                                <Checkbox defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
                                 <a style={{ float: 'right' }} href="">忘记密码</a>
                             </div>
                             <Submit>登录</Submit>

+ 5 - 6
src/components/dashboardDesigner/chartView.jsx

@@ -5,7 +5,7 @@ import { Table } from 'antd'
 import resolveChartOption from '../chart/resolveChartOption.js'
 import RichTextEditor from './richTextEditor'
 
-const ChartView = ({ item, itemSize, chart, editMode, dispatch }) => {
+const ChartView = ({ item, tableBodyHeight, chart, editMode, dispatch }) => {
     const { viewType, chartCode, content } = item;
     let children = <div className='chart-default mover'></div>;
 
@@ -24,19 +24,18 @@ const ChartView = ({ item, itemSize, chart, editMode, dispatch }) => {
                 />
             }else if(type === 'table') {
                 const { columns, data } = option;
-                const { height } = itemSize;
                 const tableRowHeight = 38;
                 children = <Table
                     className='dashboard-table'
                     size='small'
                     scroll={{
-                        x: columns ? columns.length * 100 : 0,
-                        y: height - 38 - 50 - 16 , // 减去工具栏高度、表格标题栏高度、分页工具高度、缩放调整按钮高度
+                        x: columns ? columns.length * 200 : 0,
+                        y: tableBodyHeight,
                     }}
-                    pagination={{ defaultPageSize: Math.floor(height/tableRowHeight) || 10 }}
+                    pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
                     columns={columns ? columns.map(c => ({
                         ...c,
-                        width: 100
+                        width: 200
                     })) : []}
                     dataSource={data}
                 />

+ 22 - 2
src/components/dashboardDesigner/viewLayout.jsx

@@ -9,13 +9,31 @@ class ViewLayout extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            visiblePreviewBox: false
+            visiblePreviewBox: false,
+            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
+            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
         };
     }
 
+    componentDidMount() {
+        window.addEventListener('resize', this.onWindowResize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onWindowResize);
+    }
+
+    onWindowResize = () => {
+        this.setState({
+            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
+            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
+        });
+    }
+
     createElement = (item, isPreview) => {
         const { dispatch, editMode } = this.props;
         const { code, name, viewType, layout, chartCode } = item;
+        console.log(this.state.screenHeight);
         return (
             <div className={`chartview${editMode ? ' chartview-edit' : ''}`} key={code} data-grid={layout}>
                 <div className='chartview-toolbar mover'>
@@ -33,7 +51,7 @@ class ViewLayout extends React.PureComponent {
                         {isPreview && <Icon type="close" onClick={this.hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView itemSize={{ width: '100%', height: isPreview ? '100%' : 50*layout.h }} editMode={isPreview ? false : editMode} item={{...item}}/>
+                <ChartView tableBodyHeight={isPreview ? (this.state.screenHeight * 0.8 - 24 - 40 - 50 - 38) : 50 * layout.h - 30 - 50 -38} editMode={isPreview ? false : editMode} item={{...item}}/>
             </div>
         )
     }
@@ -88,6 +106,8 @@ class ViewLayout extends React.PureComponent {
             </ReactGridLayout>
             <Modal
                 className='previewbox'
+                width='80%'
+                height='80%'
                 visible={visiblePreviewBox}
                 onCancel={this.hidePreviewBox}
                 footer={null}

+ 16 - 24
src/components/dashboardDesigner/viewLayout.less

@@ -31,24 +31,14 @@
             padding-bottom: 50px;
             .ant-table {
               height: 100%;
+              overflow: hidden;
               .ant-table-content {
                 height: 100%;
                 .ant-table-scroll {
                   height: 100%;
                 }
-                .ant-table-header {
-                  overflow-y: auto;
-                  margin-bottom: 0 !important;
-                }
                 .ant-table-body {
-                  overflow: auto !important;
-                  .ant-table-tbody {
-                    tr {
-                      td {
-                        // padding: 0;
-                      }
-                    }
-                  }
+                  height: calc(~"100% - 38px");
                 }
               }
             }
@@ -123,9 +113,8 @@
     }
   }
   .previewbox {
-    top: 50px;
-    width: 98% !important;
-    height: 80%;
+    top: 10%;
+    padding-bottom: 0;
     .ant-modal-content {
       height: 100%;
       .ant-modal-close {
@@ -133,17 +122,20 @@
       }
       .ant-modal-body {
         height: 100%;
-        .chartview {
+        padding-top: 0;
+        .chartview  {
           height: 100%;
-        }
-        .chartview-edit {
+          padding-top: 40px;
           .chartview-toolbar {
-            cursor: default;
-          }
-          .chartview-content {
-            canvas {
-              cursor: default;
-            } 
+            padding: 0;
+            height: 40px;
+            margin-top: -40px;
+            .chart-title {
+              line-height: 2.5;
+            }
+            .chart-tools {
+              line-height: 2;
+            }
           }
         }
       }

+ 19 - 4
src/components/datasource/dataSource.jsx

@@ -490,7 +490,7 @@ class DataSource extends React.Component {
                             onOk={() =>{
                                 dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code })
                         }} />
-                        <DataPreview
+                        {visibleDataPreviewBox && <DataPreview
                             visibleBox={visibleDataPreviewBox}
                             hideBox={() => {
                                 this.setState({
@@ -515,17 +515,32 @@ class DataSource extends React.Component {
                             }, {
                                 title: '列6',
                                 dataIndex: 'c6'
+                            }, {
+                                title: '列7',
+                                dataIndex: 'c7'
+                            }, {
+                                title: '列8',
+                                dataIndex: 'c8'
+                            }, {
+                                title: '列9',
+                                dataIndex: 'c9'
+                            }, {
+                                title: '列10',
+                                dataIndex: 'c10'
+                            }, {
+                                title: '列11',
+                                dataIndex: 'c11'
                             }]}
                             dataSource={((count) => {
                                 let arr = [];
                                 for(let i = 0; i < count; i++) {
                                     arr.push({
-                                        key: i, c1: 0, c2: 0, c3: 0, c4: 0, c5: 0, c6: 0
+                                        key: i, c1: i+'1', c2: i+'2', c3: i+'3', c4: i+'4', c5: i+'5', c6: i+'6', c7: i+'7', c8: i+'8', c9: i+'9', c10: i+'10', c11: i+'11'
                                     });
                                 }
                                 return arr;
-                            })(20)}
-                        />
+                            })(25)}
+                        />}
                     </Card>
                 </Content>
             </Layout>

+ 1 - 1
src/constants/url.js

@@ -102,7 +102,7 @@ const URLS = {
 
     CHART_AGGREGATETABLE_OPTION: BASE_URL + '/showPopulation', // 请求总体统计数据
 
-    CHART_QUERY_DATACOLUMNS: BASE_URL + '/getColumnByChartId', // 通过图表id获得列数据
+    CHART_QUERY_DATACOLUMNS: BASE_URL + '/DataBase/getColumnByChartId', // 通过图表id获得列数据
 
     CHART_POLICY_LIST: BASE_URL + '/getChartStrategys', // 获得图表的策略