|
|
@@ -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>
|
zhuth