Browse Source

数据源设置界面已选中数据连接勾选效果保留、样式调整/部分细节优化

zhuth 7 years ago
parent
commit
fe52a6612e

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

@@ -55,11 +55,7 @@ class Header extends React.Component {
                         cancelText="不保存"
                     >
                         <Button onClick={() => {
-                            if(chartDesigner.dirty) {
-                                this.setState({
-                                    visibleConfirm: true
-                                });
-                            }else {
+                            if(!chartDesigner.dirty) {
                                 dispatch({ type: 'main/redirect', path: '/chart' });
                             }
                         }}>

+ 34 - 12
src/components/datasource/columnConfig.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, Input, Button, Select, Table, Checkbox, Switch, Divider, Icon } from 'antd'
+import { Form, Input, Button, Select, Table, Checkbox, Switch, Divider, Icon, Popconfirm } from 'antd'
 import { connect } from 'dva'
 import COLUMN_TYPE from './columnType.json'
 const FormItem = Form.Item
@@ -10,12 +10,13 @@ class DataSourceColumnConfig extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            
+            visibleConfirm: false
         }
     }
 
-    onCheckAllChange() {
-
+    handleVisibleChange = (visible) => {
+        const { columns } = this.props.dataSource.newOne;
+        this.setState({ visibleConfirm: visible && (columns && columns.length > 0) });
     }
 
     render() {
@@ -205,14 +206,35 @@ class DataSourceColumnConfig extends React.Component {
                                 </FormItem>
                                 <div className='buttons'>
                                     <div className='errormessage' style={{ cursor: dataSource.newOne.invalidSQL ? 'text' : 'default', opacity: dataSource.newOne.invalidSQL ? '1' : '0' }}>未查询到列数据,请检查SQL是否正确</div>
-                                    <Button disabled={!dataSource.newOne.address || loading.models.dataSource} onClick={() => {
-                                        dispatch({ type: 'dataSource/importNewModelColumns' })
-                                    }}>
-                                    {
-                                        loading.models.dataSource ? <Icon type="loading" /> : ''
-                                    }
-                                    {'获取数据列'}
-                                    </Button>
+                                    <Popconfirm
+                                        title="已存在列数据,确定要覆盖吗?"
+                                        visible={this.state.visibleConfirm}
+                                        onVisibleChange={this.handleVisibleChange}
+                                        onConfirm={() => {
+                                            this.setState({
+                                                visibleConfirm: false
+                                            });
+                                            dispatch({ type: 'dataSource/importNewModelColumns' });
+                                        }}
+                                        onCancel={() => {
+                                            this.setState({
+                                                visibleConfirm: false
+                                            });
+                                        }}
+                                        okText="确定"
+                                        cancelText="取消"
+                                    >
+                                        <Button disabled={!dataSource.newOne.address || loading.models.dataSource} onClick={() => {
+                                            if(!dataSource.newOne.columns || dataSource.newOne.columns.length === 0) {
+                                                dispatch({ type: 'dataSource/importNewModelColumns' });
+                                            }
+                                        }}>
+                                        {
+                                            loading.models.dataSource ? <Icon type="loading" /> : ''
+                                        }
+                                        {'获取数据列'}
+                                        </Button>
+                                    </Popconfirm>
                                 </div>
                             </Form>
                             <Divider orientation="left">数据列</Divider>

+ 10 - 5
src/components/datasource/dataConnectBox.less

@@ -1,10 +1,15 @@
 .dataconnect-box {
     width: 600px !important;
-    .ant-input-number-handler-wrap {
-        display: none;
-    }
-    .textarea-desc {
-        margin-top: 4px;
+    .ant-modal-body {
+        max-height: 60vh;
+        overflow-y: auto;
+
+        .ant-input-number-handler-wrap {
+            display: none;
+        }
+        .textarea-desc {
+            margin-top: 4px;
+        }
     }
     .validatemessage {
         text-align: left;

+ 5 - 4
src/components/datasource/dataConnectConfig.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Layout, Form, Row, Col, Input, Icon, Menu, Dropdown, Divider, Upload, message, Card } from 'antd'
 import { connect } from 'dva'
 import DataConnectBox from './dataConnectBox'
+import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 const { Content } = Layout
 const CardGrid = Card.Grid
 const UploadDragger = Upload.Dragger
@@ -12,13 +13,11 @@ class DataConnectConfig extends React.Component {
     componentDidMount() {
         const { dispatch } = this.props;
         dispatch({ type: 'dataConnect/fetchList' });
-        dispatch({ type: 'dataConnect/resetSelected' });
     }
 
     render() {
         const { dataSource, dataConnect, dispatch } = this.props;
         const filterLabel = dataConnect.filterLabel;
-
         const generateCard = () => {
             const operationMenu = (
                 <Menu className='menu-operation'>
@@ -63,9 +62,11 @@ class DataConnectConfig extends React.Component {
                             ] });
                         }}
                     >
-                        <div>
+                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
                             <Row>
-                                {l.description}
+                                <Ellipsis lines={3}>
+                                    {l.description}
+                                </Ellipsis>
                             </Row>
                             <Row type='flex' justify='space-between'>
                                 <Col>{l.dbType}</Col>

+ 1 - 0
src/components/datasource/dataSource.jsx

@@ -405,6 +405,7 @@ class DataSource extends React.Component {
                                         <Menu onClick={(item, key, keyPath) => {
                                             const type = item.key;
                                             dispatch({ type: 'dataSource/resetNewModel' });
+                                            dispatch({ type: 'dataConnect/resetSelected' });
                                             dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
                                             dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create/base'}});
                                         }}>

+ 2 - 0
src/components/datasource/dataSourceDetail.less

@@ -55,6 +55,8 @@
                                 cursor: pointer;
                                 .ant-card {
                                     height: 100%;
+                                    display: flex;
+                                    flex-direction: column;
                                     .ant-card-head {
                                         background: #F5F5F5;
                                         .selected {