数据源详情页样式调整

src/components/dataSourceDetail/baseConfig.jsx

@@ -59,7 +59,6 @@ class DataSourceBaseConfig extends React.Component {
             if(key === '-1') {
                 return ['-1'];
             }else {
-                console.log(key);
                 let group = dataSource.groupList.find(g => g.code === key);
                 if(group) {
                     console.log(group);

src/components/dataSourceDetail/columnConfig.jsx

@@ -290,7 +290,7 @@ class DataSourceColumnConfig extends React.Component {
                                 <FormItem className='textarea-target'>
                                     <Input.TextArea
                                         disabled={!dataSourceDetail.address}
-                                        placeholder={dataSourceDetail.address ? '输入表名或查询SQL，注意不能以分号结尾' : '请点击底部“上一步”按钮返回上一步选择数据库连接'}
+                                        placeholder={dataSourceDetail.address ? '输入表名或查询SQL，注意不能以分号结尾' : '请先返回上一步选择数据库连接'}
                                         autosize={{ minRows: 3 }}
                                         // value={dataSourceDetail.target}
                                         defaultValue={dataSourceDetail.target}

src/components/dataSourceDetail/content.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'dva'
-import { Layout, Steps, Button, Tabs } from 'antd'
+import { Layout, Steps, Button, Tabs, Popconfirm, Icon } from 'antd'
 import DataConnectConfig from './dataConnectConfig'
 import BaseConfig from './baseConfig'
 import ColumnConfig from './columnConfig'
@@ -21,7 +21,8 @@ class DataSourceDetailContent extends React.Component {
             code: props.params.code,
             tab: props.params.tab,
             // current: ['base', 'column', 'access', 'other'].indexOf(props.match.params.tab)
-            current: ['base', 'column', 'other'].indexOf(props.params.tab)
+            current: ['base', 'column', 'other'].indexOf(props.params.tab),
+            visibleConfirm: false,
         }
     }
 
@@ -41,6 +42,10 @@ class DataSourceDetailContent extends React.Component {
         this.props.dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/create/' + step })
     }
 
+    handleVisibleChange = (visible) => {
+        this.setState({ visibleConfirm: visible });
+    }
+
     render() {
         const { dispatch, dataSourceDetail, dataConnect } = this.props;
         const { type, code, tab, mode, current } = this.state;
@@ -76,39 +81,68 @@ class DataSourceDetailContent extends React.Component {
             <Layout className='content-datasourcedetail'>
                 <Content className='content'>
                     {mode === 'create' ? (<div className='datasource-steps-container'>
+                        <div className="steps-action">
+                            <Popconfirm
+                                placement="bottomLeft"
+                                title="确定不保存直接退出吗？"
+                                visible={this.state.visibleConfirm}
+                                onVisibleChange={this.handleVisibleChange}
+                                onConfirm={() => {
+                                    dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
+                                    this.setState({
+                                        visibleConfirm: false
+                                    });
+                                }}
+                                onCancel={() => {
+                                    this.setState({
+                                        visibleConfirm: false
+                                    });
+                                }}
+                                okText="确定"
+                                cancelText="取消"
+                            >
+                                <Button onClick={(e) => {
+                                    if(!dataSourceDetail.dirty) {
+                                        dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
+                                    }
+                                }}>
+                                    <Icon type='left' />返回
+                                </Button>
+                            </Popconfirm>
+                            <div className='steps-buttons'>
+                                {
+                                    current > 0 && (
+                                    <Button onClick={() => this.prev()}>
+                                        上一步
+                                    </Button>)
+                                }
+                                {
+                                    current < steps.length - 1
+                                    && <Button disabled={
+                                        // 第一步：没有选择数据连接或没有上传文件或上传文件有误
+                                        ( current === 0 && ( ( type === 'database' && !dataSourceDetail.connectCode ) || ( type === 'file' && +1 === 2) ) ) ||
+                                        // 第二步：数据列为空或者数据对象有变更
+                                        (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0 || dataSourceDetail.targetDirty))
+                                    } type="primary" onClick={() => this.next()}>下一步</Button>
+                                }
+                                {
+                                    current === steps.length - 1
+                                    && <Button disabled={
+                                        !dataSourceDetail.name || 
+                                        !dataConnect.selected ||
+                                        (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0)
+                                    } type="primary" onClick={() => {
+                                        dispatch({ type: 'dataSource/remoteAdd' })
+                                    }}>完成</Button>
+                                }
+                            </div>
+                        </div>
                         <Steps className='steps-body' current={current}>
                             {steps.map((item,index) => <Step key={'step-' + index} title={item.title} />)}
                         </Steps>
                         <div className="steps-content">
                             {steps[current].content}
                         </div>
-                        <div className="steps-action">
-                            {
-                                current > 0 && (
-                                <Button onClick={() => this.prev()}>
-                                    上一步
-                                </Button>)
-                            }
-                            {
-                                current < steps.length - 1
-                                && <Button disabled={
-                                    // 第一步：没有选择数据连接或没有上传文件或上传文件有误
-                                    ( current === 0 && ( ( type === 'database' && !dataSourceDetail.connectCode ) || ( type === 'file' && +1 === 2) ) ) ||
-                                    // 第二步：数据列为空或者数据对象有变更
-                                    (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0 || dataSourceDetail.targetDirty))
-                                } type="primary" onClick={() => this.next()}>下一步</Button>
-                            }
-                            {
-                                current === steps.length - 1
-                                && <Button disabled={
-                                    !dataSourceDetail.name || 
-                                    !dataConnect.selected ||
-                                    (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0)
-                                } type="primary" onClick={() => {
-                                    dispatch({ type: 'dataSource/remoteAdd' })
-                                }}>完成</Button>
-                            }
-                        </div>
                     </div>) : (
                         <Tabs activeKey={tab} type="card"
                             onChange={(key) => {

src/components/dataSourceDetail/content.less

@@ -5,12 +5,8 @@
         padding: 10px;
         .datasource-steps-container {
             height: 100%;
-            padding-top: 32px;
-            padding-bottom: 60px;
-            .ant-steps {
-                border-bottom: none;
-                margin-top: -32px;
-            }
+            display: flex;
+            flex-direction: column;
         }
         &>.ant-tabs {
             height: 100%;
@@ -44,7 +40,7 @@
             }
         }
         .steps-body {
-            height: 40px;
+            height: 48px;
             display: flex;
             align-items: center;
             border: 1px solid @border-color-base;
@@ -53,8 +49,6 @@
         .steps-content,.tab-datasource {
             height: 100%;
             overflow: auto;
-            padding: 10px 30px;
-            border: 1px solid @border-color-base;
             .ant-divider {
                 margin: 10px 0;
             }
@@ -72,6 +66,8 @@
                 }
             }
             .form-base {
+                height: 100%;
+                overflow: hidden;
                 .links {
                     display: flex;
                     justify-content: flex-end;
@@ -90,57 +86,83 @@
                     margin-top: 4px;
                 }
                 .dataconnect {
-                    .ant-card-body {
-                        padding: 16px;
-                        .dataconnect-list {
-                            .dataconnect-card {
-                                width: 160px;
-                                height: 160px;
-                                padding: 0;
-                                margin: 5px;
-                                cursor: pointer;
-                                .ant-card {
-                                    height: 100%;
-                                    display: flex;
-                                    flex-direction: column;
-                                    .ant-card-head {
-                                        min-height: 32px;
-                                        background: #F5F5F5;
+                    height: 100%;
+                    >.ant-layout-content {
+                        >.ant-card {
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            >.ant-card-head {
+                                height: 48px;
+                                >.ant-card-head-wrapper {
+                                    height: 48px;
+                                }
+                            }
+                            >.ant-card-body {
+                                background: #f4f4f5;
+                                height: calc(~"100% - 48px");
+                                overflow: auto;
+                                padding: 16px;
+                                .dataconnect-list {
+                                    .dataconnect-card {
+                                        width: 160px;
+                                        height: 160px;
                                         padding: 0;
-                                        .ant-card-head-wrapper {
+                                        margin: 8px;
+                                        cursor: pointer;
+                                        .ant-card {
                                             height: 100%;
-                                            .ant-card-head-title {
-                                                padding: 0 16px;
-                                                .ant-row-flex {
-                                                    .label {
-                                                        overflow: hidden;
-                                                        text-overflow: ellipsis
+                                            display: flex;
+                                            flex-direction: column;
+                                            .ant-card-head {
+                                                min-height: 32px;
+                                                background: #F5F5F5;
+                                                padding: 0;
+                                                .ant-card-head-wrapper {
+                                                    height: 100%;
+                                                    .ant-card-head-title {
+                                                        padding: 0 16px;
+                                                        .ant-row-flex {
+                                                            .label {
+                                                                overflow: hidden;
+                                                                text-overflow: ellipsis
+                                                            }
+                                                        }
                                                     }
                                                 }
+                                                .selected {
+                                                    width: 32px;
+                                                    height: 32px;
+                                                    background-repeat: no-repeat;
+                                                    background-size: 32px;
+                                                    background-image: url(../../../static/images/selected.png);
+                                                    position: absolute;
+                                                    right: 0px;
+                                                    top: 0px;
+                                                    border-top-right-radius: 1px;
+                                                }
+                                            }
+                                            .ant-card-body {
+                                                padding: 10px;
+                                                height: 100%;
+                                                display: flex;
+                                                width: 100%;
+                                                flex-direction: column;
+                                                justify-content: center;
+                                                .content {
+                                                    display: flex;
+                                                    height: 100%;
+                                                    flex-direction: column;
+                                                    justify-content: space-between;
+                                                }
+                                            }
+                                            .ant-card-actions {
+                                                height: 32px;
+                                                background: #fff;
+                                                li {
+                                                    margin: 4px 0;
+                                                }
                                             }
-                                        }
-                                        .selected {
-                                            width: 32px;
-                                            height: 32px;
-                                            background-repeat: no-repeat;
-                                            background-size: 32px;
-                                            background-image: url(../../../static/images/selected.png);
-                                            position: absolute;
-                                            right: 0px;
-                                            top: 0px;
-                                            border-top-right-radius: 1px;
-                                        }
-                                    }
-                                    .ant-card-body {
-                                        padding: 10px;
-                                        height: 100%;
-                                        display: flex;
-                                        width: 100%;
-                                        flex-direction: column;
-                                        justify-content: center;
-                                        .anticon-plus-circle-o {
-                                            margin: 0 auto;
-                                            font-size: 60px;
                                         }
                                     }
                                 }
@@ -180,11 +202,14 @@
         }
         .steps-action {
             height: 50px;
+            width: 100%;
             display: flex;
-            align-items: center;
+            justify-content: space-between;
             float: right;
-            button {
-                margin-left: 8px;
+            .steps-buttons {
+                button {
+                    margin-left: 8px;
+                }
             }
         }
     }

src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -2,7 +2,6 @@ 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'
 import EmptyContent from '../common/emptyContent/index'
 const { Content } = Layout
 const CardGrid = Card.Grid
@@ -10,55 +9,76 @@ const UploadDragger = Upload.Dragger
 const Search = Input.Search
 
 class DataConnectConfig extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            filterLabel: '',
+        }
+    }
     
     componentDidMount() {
         const { dispatch } = this.props;
         dispatch({ type: 'dataConnect/fetchList' });
     }
 
-    render() {
-        const { dataSourceDetail, dataConnect, dispatch } = this.props;
+    generateCard() {
+        const { dataConnect, dispatch } = this.props;
+        const { filterLabel: stateFilterLabel } = this.state;
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
-        let filterLabel = dataConnect.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
-        
-        const generateCard = () => {
-            const operationMenu = (
-                <Menu className='menu-operation'>
-                    <Menu.Item onClick={() => {
-                        dispatch({ type: 'dataConnect/setNewModel', model: dataConnect.selected });
-                        dispatch({ type: 'dataConnect/setNewModelFields', fields: [
-                            { name: 'visibleBox', value: true },
-                            { name: 'boxOperation', value: 'view' }
-                        ] });
-                    }}>
-                        <Icon type='edit'/>详情
-                    </Menu.Item>
-                </Menu>
-            )
-
-            let cards = dataConnect.list.filter(l => {
-                return ((l.name || '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) !== -1) ||
-                    ((l.description || '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) !== -1);
-            }).map( (l, i) => (
-                <CardGrid className='dataconnect-card' key={i}>
-                    <Card
-                        title={
-                            <Row type='flex' justify='start'>
-                                <Col className='label'>
-                                    { filterLabel ?
-                                        ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
-                                        }
-                                        )) : l.name
+        let filterLabel = stateFilterLabel ? (stateFilterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
+        let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
+        let cards = dataConnect.list.map(l => {
+            let o = Object.assign({}, l);
+            return ((o['name'] + '').search(filterReg) > -1) ? o : null
+        }).filter(a => a!==null).map( (l, i) => (
+            <CardGrid className='dataconnect-card' key={i}>
+                <Card
+                    hoverable={true}
+                    title={
+                        <Row type='flex' justify='start'
+                            onClick={() => {
+                                // 选中项设置
+                                dispatch({ type: 'dataConnect/setSelected', selected: l });
+                                dispatch({ type: 'dataSourceDetail/setFields', fields: [
+                                    { name: 'connectCode', value: l.code },
+                                    { name: 'dbType', value: l.dbType },
+                                    { name: 'address', value: l.address },
+                                    { name: 'port', value: l.port },
+                                    { name: 'dbName', value: l.dbName },
+                                    { name: 'userName', value: l.userName },
+                                    { name: 'password', value: l.password },
+                                    { name: 'target', value: '' },
+                                    { name: 'columns', value: [] },
+                                    { name: 'notice', value: '' },
+                                ] });
+                            }}
+                        >
+                            <Col className='label'>
+                                { (filterLabel) ?
+                                    ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                        return (
+                                            fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                            fragment
+                                        )
                                     }
-                                </Col>
-                                <div style={{ display: (dataConnect.selected && dataConnect.selected.code === l.code) ? 'block' : 'none' }} className='selected'></div>
-                            </Row>
-                        }
+                                    )) : l.name
+                                }
+                            </Col>
+                            <div style={{ display: (dataConnect.selected && dataConnect.selected.code === l.code) ? 'block' : 'none' }} className='selected'></div>
+                        </Row>
+                    }
+                    actions={[
+                        <div>
+                            {l.dbType === 'file' ? <Icon type='file' /> : <div><Icon type='database' />{l.dbType[0].toUpperCase() + l.dbType.slice(1)}</div>}
+                        </div>,
+                        <Dropdown overlay={this.generateOperationMenu(l)} trigger={['click']}>
+                            <Icon style={{ fontSize: '24px' }} type="ellipsis" theme="outlined" />
+                        </Dropdown>
+                    ]}
+                >
+                    <div className='content'
                         onClick={() => {
                             // 选中项设置
                             dispatch({ type: 'dataConnect/setSelected', selected: l });
@@ -76,54 +96,40 @@ class DataConnectConfig extends React.Component {
                             ] });
                         }}
                     >
-                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
-                            <Row>
-                                <Ellipsis lines={3}>
-                                    { filterLabel ?
-                                        ((l.description || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
-                                        }
-                                        )) : l.description
-                                    }
-                                </Ellipsis>
-                            </Row>
-                            <Row type='flex' justify='space-between'>
-                                <Col>{l.dbType}</Col>
-                                <Col>
-                                    <Dropdown overlay={operationMenu} trigger={['click']}>
-                                        <Icon type="ellipsis" />
-                                    </Dropdown>
-                                </Col>
-                            </Row>
-                        </div>
-                    </Card>
-                </CardGrid>
-            ))
-
-            // cards.unshift(
-            //     <CardGrid className='dataconnect-card dataconnect-card-create' key='create' onClick={() => {
-            //         dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle' } });
-            //         dispatch({ type: 'dataConnect/setNewModelFields', fields: [
-            //             { name: 'visibleBox', value: true },
-            //             { name: 'boxOperation', value: 'create' }
-            //         ] });
-            //     }}>
-            //         <Card>
-            //             <Icon type="plus-circle-o" />
-            //         </Card>
-            //     </CardGrid>
-            // );
+                        { /** TODO 这里只考虑了数据库的展示情况，需要兼容展示文件类型的数据链接 */ }
+                        <Row className='address'>{l.address}</Row>
+                        <Row className='username'>{l.userName}</Row>
+                    </div>
+                </Card>
+            </CardGrid>
+        ))
 
-            if(cards.length === 0) {
-                return <EmptyContent />
-            }
-            
-            return cards;
+        if(cards.length === 0) {
+            return <EmptyContent />
         }
+        
+        return cards;
+    }
+
+    generateOperationMenu = () => {
+        const { dataConnect, dispatch } = this.props;
+
+        return <Menu className='menu-operation'>
+            <Menu.Item onClick={() => {
+                dispatch({ type: 'dataConnect/setNewModel', model: dataConnect.selected });
+                dispatch({ type: 'dataConnect/setNewModelFields', fields: [
+                    { name: 'visibleBox', value: true },
+                    { name: 'boxOperation', value: 'view' }
+                ] });
+            }}>
+                <Icon type='edit'/>详情
+            </Menu.Item>
+        </Menu>
+    }
+
+    render() {
+        const { dataSourceDetail, dispatch } = this.props;
+        const { filterLabel } = this.state;
 
         return (
             <Form className='form-base' size='small'>
@@ -184,16 +190,19 @@ class DataConnectConfig extends React.Component {
                                     <Row type='flex' justify='end'>
                                         <Search
                                             style={{ width: '200px' }}
-                                            value={dataConnect.filterLabel}
+                                            value={filterLabel}
                                             placeholder="请输入关键字"
                                             onChange={e => {
-                                                dispatch({ type: 'dataConnect/setFilterLabel', label: e.target.value });
+                                                this.setState({
+                                                    filterLabel: e.target.value
+                                                })
+                                                // dispatch({ type: 'dataConnect/setFilterLabel', label: e.target.value });
                                             }}
                                         />
                                     </Row>
                                 }>
                                     <div className='dataconnect-list'>
-                                        { generateCard() }
+                                        { this.generateCard() }
                                     </div>
                                     <DataConnectBox />
                                 </Card>

src/components/dataSourceDetail/layout.jsx

@@ -9,9 +9,17 @@ const { Header, Content } = Layout
 
 class DataSourceDetail extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            paramsType: props.match.params.type,
+            paramsCode: props.match.params.code,
+        }
+    }
+
     componentDidMount() {
         const { dispatch } = this.props;
-        const { type, code } = this.props.match.params;
+        const { paramsType: type, paramsCode: code } = this.state;
         
         dispatch({ type: 'dataSourceDetail/reset' });
         if(code !== 'create') {
@@ -25,10 +33,12 @@ class DataSourceDetail extends React.Component {
     }
 
     render() {
+        const { paramsCode: code } = this.state;
+
         return <Layout className='layout-datasourcedetail'>
-            <Header>
+            {code !== 'create' && <Header>
                 <DataSourceDetailHeader updateThumbnail={this.updateThumbnail} />
-            </Header>
+            </Header>}
             <Content style={{ height: 0 }}>
                 <DataSourceDetailContent params={this.props.match.params}/>
             </Content>

src/themes/default/datasourcedetail.less

@@ -34,6 +34,23 @@
                         }
                     }
                 }
+                >.datasource-steps-container {
+                    .steps-content {
+                        .dataconnect-card {
+                            .ant-card {
+                                .ant-card-head {
+                                    .ant-card-head-wrapper {
+                                        background: #D6EEFE;
+                                        .label {
+                                            font-size: 14px;
+                                            color: #2C82BE;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
             }
         }
     }