|
|
@@ -1,6 +1,7 @@
|
|
|
import React from 'react'
|
|
|
-import { Layout, Row, Col, Input, Button, Icon, Card, Tooltip, Select } from 'antd'
|
|
|
+import { Layout, Row, Col, Input, Button, Icon, Card, Tooltip, Select, DatePicker } from 'antd'
|
|
|
import { connect } from 'dva'
|
|
|
+import moment from 'moment'
|
|
|
import DeleteBox from '../common/deleteBox/deleteBox'
|
|
|
import DataConnectBox from '../dataSourceDetail/dataConnectBox'
|
|
|
import './list.less'
|
|
|
@@ -8,6 +9,7 @@ const CardGrid = Card.Grid
|
|
|
const { Content } = Layout
|
|
|
const { Search } = Input
|
|
|
const { Option } = Select
|
|
|
+const { RangePicker } = DatePicker
|
|
|
|
|
|
class DataConnect extends React.Component {
|
|
|
constructor(props) {
|
|
|
@@ -63,11 +65,29 @@ class DataConnect extends React.Component {
|
|
|
const { dataConnect, dispatch } = this.props;
|
|
|
const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
let filterLabel = dataConnect.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
|
|
|
- let typeLabel = dataConnect.typeLabel
|
|
|
+ let filterItem = dataConnect.filterItem
|
|
|
+ let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
|
|
|
+ let cards = dataConnect.list.map(l => {
|
|
|
+ let o = Object.assign({}, l);
|
|
|
|
|
|
- let cards = dataConnect.list.filter(l => {
|
|
|
- return ((l[dataConnect.typeLabel] || '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) !== -1);
|
|
|
- }).map( (l, i) => (
|
|
|
+ if(filterItem.type === 'date') {
|
|
|
+ if(filterLabel===""){
|
|
|
+ return o;
|
|
|
+ }else if(filterLabel.indexOf('#')>-1){
|
|
|
+ let start = filterLabel.split('#')[0]
|
|
|
+ let end = filterLabel.split('#')[1]
|
|
|
+ let nowTime = o[filterItem.name].getTime();
|
|
|
+ if(nowTime>=start && nowTime<=end){
|
|
|
+ return o;
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ }else{
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ return ((o[filterItem.name] + '').search(filterReg) > -1) ? o : null
|
|
|
+ }
|
|
|
+ }).filter(a => a!==null).map( (l, i) => (
|
|
|
<CardGrid className='dataconnect-card' key={i}>
|
|
|
<Card
|
|
|
hoverable={true}
|
|
|
@@ -84,7 +104,7 @@ class DataConnect extends React.Component {
|
|
|
}}
|
|
|
>
|
|
|
<Col className='label'>
|
|
|
- { filterLabel && typeLabel==='name' ?
|
|
|
+ { (filterItem.name === 'name' && filterLabel) ?
|
|
|
((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
return (
|
|
|
fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
@@ -141,7 +161,7 @@ class DataConnect extends React.Component {
|
|
|
}}
|
|
|
>
|
|
|
<Row className='address'>
|
|
|
- { filterLabel && typeLabel==='address' ?
|
|
|
+ { filterLabel && filterItem.name === 'address' ?
|
|
|
((l.address || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
return (
|
|
|
fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
@@ -153,7 +173,7 @@ class DataConnect extends React.Component {
|
|
|
}
|
|
|
</Row>
|
|
|
<Row className='username'>
|
|
|
- { filterLabel && typeLabel==='userName' ?
|
|
|
+ { filterLabel && filterItem.name === 'userName' ?
|
|
|
((l.userName || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
|
|
|
return (
|
|
|
fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
|
|
|
@@ -176,9 +196,14 @@ class DataConnect extends React.Component {
|
|
|
return cards;
|
|
|
}
|
|
|
|
|
|
+ generateFilterItems = () => {
|
|
|
+ const { filterItems } = this.props.dataConnect;
|
|
|
+ return filterItems.map(t => <Option key={t.name} value={t.name}>{t.label}</Option>);
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const { dataConnect, dispatch } = this.props;
|
|
|
- const { selected, changeSearchType } = dataConnect;
|
|
|
+ const { selected } = dataConnect;
|
|
|
const { visibleDeleteBox } = this.state;
|
|
|
|
|
|
return (
|
|
|
@@ -191,42 +216,52 @@ class DataConnect extends React.Component {
|
|
|
<Col className='search'>
|
|
|
<Col style={{ padding: '0 1px', margin: '0 -5px' }}>
|
|
|
<Select
|
|
|
- value={dataConnect.typeLabel}
|
|
|
- style={{ width: 90 }}
|
|
|
- onChange={e => {
|
|
|
- dispatch({ type: 'dataConnect/setTypeLabel', selected: e });
|
|
|
+ value={dataConnect.filterItem.name}
|
|
|
+ style={{ width: 120 }}
|
|
|
+ onChange={value => {
|
|
|
+ let item = dataConnect.filterItems.find(i => i.name === value);
|
|
|
+ dispatch({ type: 'dataConnect/setFilterItem', item });
|
|
|
}}
|
|
|
>
|
|
|
- <Option value="name">连接名</Option>
|
|
|
- <Option hidden value="userName">用户名</Option>
|
|
|
- <Option hidden value="dbType">数据库类型</Option>
|
|
|
- <Option hidden value="address">数据库地址</Option>
|
|
|
+ { this.generateFilterItems() }
|
|
|
</Select>
|
|
|
</Col>
|
|
|
<Col style={{ padding: '0 5px' }}>
|
|
|
- {changeSearchType ?
|
|
|
- <Select
|
|
|
- value={dataConnect.filterLabel}
|
|
|
- style={{ width: 120 }}
|
|
|
+ {dataConnect.filterItem.type === 'date' ?
|
|
|
+ <RangePicker
|
|
|
+ ranges={{
|
|
|
+ '今天': [moment().startOf('day'), moment().endOf('day')],
|
|
|
+ '昨天': [moment().startOf('day').add(-1,'days'), moment().endOf('day')],
|
|
|
+ '近七天': [moment().startOf('day'),moment().endOf('day').add(6,'days')],
|
|
|
+ '本月': [moment().startOf('month'), moment().endOf('month')],
|
|
|
+ '本年': [moment().startOf('year'), moment().endOf('year')]
|
|
|
+ }}
|
|
|
+ showTime={{ format: 'HH:mm' }}
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
onChange={e => {
|
|
|
- dispatch({ type: 'dataConnect/setFilterLabel', label: e });
|
|
|
+ //清空时间时
|
|
|
+ if(e.length === 0){
|
|
|
+ dispatch({ type: 'dataConnect/setFilterLabel', label: '' });
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onOk={e => {
|
|
|
+ //解析时间格式
|
|
|
+ let start = e[0]
|
|
|
+ let end = e[1]
|
|
|
+ let time = start._d.getTime() + "#" + end._d.getTime()
|
|
|
+ dispatch({ type: 'dataConnect/setFilterLabel', label: time });
|
|
|
}}
|
|
|
>
|
|
|
- <Option value="oracle">ORACLE</Option>
|
|
|
- <Option value="mysql">MYSQL</Option>
|
|
|
- <Option value="sqlserver">SQLSERVER</Option>
|
|
|
- <Option value="sqlite">SQLITE</Option>
|
|
|
- </Select>
|
|
|
+ </RangePicker>
|
|
|
:
|
|
|
<Search
|
|
|
- placeholder="请输入关键字"
|
|
|
value={dataConnect.filterLabel}
|
|
|
+ placeholder="请输入关键字"
|
|
|
onChange={e => {
|
|
|
dispatch({ type: 'dataConnect/setFilterLabel', label: e.target.value });
|
|
|
}}
|
|
|
/>
|
|
|
}
|
|
|
-
|
|
|
</Col>
|
|
|
<Col >
|
|
|
<Button onClick={() => {
|
zhuth