搜索功能扩展优化

src/components/dashboard/list.jsx

@@ -93,21 +93,18 @@ class DashboardList extends React.Component {
     onSearch(list, dashboard) {
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = (dashboard.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
-        let typeLabel = dashboard.typeLabel
-        
+        let filterItem = dashboard.filterItem;
+        let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
         return list.map(l => {
             let o = Object.assign({}, l);
-            let reg = new RegExp('('+ filterLabel +'){1}', 'ig');
 
-            if(o[typeLabel] && typeLabel!=='createTime' && o[typeLabel].search(reg) !== -1){
-                return o;
-            }else if(o[typeLabel] && typeLabel==='createTime'){
+            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 = new Date(o[typeLabel]).getTime();
+                    let nowTime = new Date(o[filterItem.name]).getTime();
                     if(nowTime>=start && nowTime<=end){
                         return o;
                     }
@@ -115,8 +112,8 @@ class DashboardList extends React.Component {
                 }else{
                     return null 
                 }
-            }else{
-                return null 
+            }else {
+                return ((o[filterItem.name] + '').search(filterReg) > -1) ? o : null
             }
         }).filter(a => a!==null);
     }
@@ -127,11 +124,16 @@ class DashboardList extends React.Component {
         });
     }
 
+    generateFilterItems = () => {
+        const { filterItems } = this.props.dashboard;
+        return filterItems.map(t => <Option key={t.name} value={t.name}>{t.label}</Option>);
+    }
+
     render() {
         const { dispatch, dashboard, main } = this.props;
         const { visibleShareBox, shareUrl, visibleDistributeBox, visibleTransferBox, visibleDeleteBox, visibleCopyBox, selectedRecord, defaultSelectedGroups, defaultSelectedUsers } = this.state
         const { currentUser } = main;
-        const { changeSearchType } = dashboard;
+        const { filterItem } = dashboard;
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dashboard.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
@@ -186,7 +188,7 @@ class DashboardList extends React.Component {
                         dispatch({ type: 'main/redirect', path: '/dashboard/' + record.code });
                         dispatch({ type: 'recent/addRecentRecord', tarId: record.code, recordType: 1});
                     }}>
-                        { filterLabel ?
+                        { filterLabel && filterItem.name === 'name' ?
                             ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                 return (
                                     fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
@@ -207,7 +209,7 @@ class DashboardList extends React.Component {
             render: (text, record) => {
                 return (
                     <span>
-                        { filterLabel ?
+                        { filterLabel && filterItem.name === 'description' ?
                             ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                 return (
                                     fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
@@ -224,7 +226,23 @@ class DashboardList extends React.Component {
             title: '创建人',
             dataIndex: 'creatorName',
             key: 'creatorName',
-            width: 100
+            width: 100,
+            render: (text, record) => {
+                return (
+                    <span>
+                        { filterLabel && filterItem.name === 'creatorName' ?
+                            ((text || '').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
+                                )
+                            }
+                            )) : text
+                        }
+                    </span>
+                )
+            }
         }, {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -252,27 +270,25 @@ class DashboardList extends React.Component {
                             <Col className='search'>
                                 <Col style={{ padding: '0 1px', margin: '0 -5px' }}>
                                     <Select 
-                                        value={dashboard.typeLabel}
+                                        value={dashboard.filterItem.name}
                                         style={{ width: 120 }}
-                                        onChange={e => {
-                                            dispatch({ type: 'dashboard/setTypeLabel', selected: e });
+                                        onChange={value => {
+                                            let item = dashboard.filterItems.find(i => i.name === value);
+                                            dispatch({ type: 'dashboard/setFilterItem', item });
                                         }}
                                     >
-                                        <Option value="name">名称</Option>
-                                        <Option hidden value="description">说明</Option>
-                                        <Option value="creatorName">创建人</Option>
-                                        <Option value="createTime">创建时间</Option>
+                                        { this.generateFilterItems() }
                                     </Select>
                                 </Col>
                                 <Col style={{ padding: '0 5px' }}>
-                                   {changeSearchType ? 
+                                    {dashboard.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')]  
+                                                '今天': [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"
@@ -293,13 +309,13 @@ class DashboardList extends React.Component {
                                         </RangePicker> 
                                         : 
                                         <Search
-                                            placeholder="请输入关键字"
                                             value={dashboard.filterLabel}
+                                            placeholder="请输入关键字"
                                             onChange={e => {
                                                 dispatch({ type: 'dashboard/setFilterLabel', label: e.target.value });
                                             }}
                                         />
-                                   }
+                                    }
                                 </Col>
                                 <Col >
                                     <Button onClick={() => {

src/components/dataConnect/list.jsx

@@ -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={() => {

src/models/chart.js

@@ -10,10 +10,15 @@ export default {
             list: [],
             filterLabel: '',
             typeLabel: 'name',
-            changeSearchType:false,
             groupList: [],
             currentGroup: null,
-            groupDirty: false
+            filterItems: [ // 可选过滤字段
+                { name: 'name', label: '图表名称', type: 'string' },
+                { name: 'description', label: '说明', type: 'string' },
+                { name: 'creatorName', label: '创建人', type: 'string' },
+                { name: 'createTime', label: '创建时间', type: 'date' },
+            ],
+            filterItem: { name: 'name', label: '图表名称', type: 'string' }, // 已选过滤字段
         },
     },
     reducers: {
@@ -27,14 +32,14 @@ export default {
             let list = action.list;
             return Object.assign({}, state, {list: list});
         },
+        setFilterItem(state, action) {
+            const { item } = action;
+            return Object.assign({}, state, {filterItem: item, filterLabel: ''});
+        },
         setFilterLabel(state, action) {
             const { label } = action;
             return Object.assign({}, state, {filterLabel: label});
         },
-        setTypeLabel(state, action) {
-            const { selected } = action;
-            return Object.assign({}, state, {typeLabel: selected , filterLabel:'', changeSearchType:selected==='createTime'?true:false});
-        },
         groupList(state, action) {
             let data = action.data;
             return Object.assign({}, state, {groupList: data});

src/models/dashboard.js

@@ -16,14 +16,13 @@ export default {
                 defaultSelectedUsers: []
             },
             filterLabel: '',
-            typeLabel: 'name',
-            changeSearchType:false,
-            groupList: [],
-            currentGroup: [{
-                code: 'all',
-                label: '全部分组'
-            }],
-            groupDirty: false,
+            filterItems: [ // 可选过滤字段
+                { name: 'name', label: '报表名称', type: 'string' },
+                { name: 'description', label: '说明', type: 'string' },
+                { name: 'creatorName', label: '创建人', type: 'string' },
+                { name: 'createTime', label: '创建时间', type: 'date' },
+            ],
+            filterItem: { name: 'name', label: '报表名称', type: 'string' }, // 已选过滤字段
         }
     },
     reducers: {
@@ -31,14 +30,14 @@ export default {
             let list = action.list;
             return Object.assign({}, state, {list});
         },
+        setFilterItem(state, action) {
+            const { item } = action;
+            return Object.assign({}, state, {filterItem: item, filterLabel: ''});
+        },
         setFilterLabel(state, action) {
             let { label } = action;
             return Object.assign({}, state, {filterLabel: label});
         },
-        setTypeLabel(state, action) {
-            const { selected } = action;
-            return Object.assign({}, state, {typeLabel: selected , filterLabel:'', changeSearchType:selected==='createTime'?true:false});
-        },
         reset(state, action) {
             let newState = Object.assign({}, state, state.originData);
             return Object.assign({}, newState);

src/models/dataConnect.js

@@ -9,9 +9,11 @@ export default {
             list: [],
             newOne: {},
             filterLabel: '',
-            typeLabel: 'name',
-            changeSearchType:false,
-            validInfo: {}
+            validInfo: {},
+            filterItems: [ // 可选过滤字段
+                { name: 'name', label: '名称', type: 'string' },
+            ],
+            filterItem: { name: 'name', label: '名称', type: 'string' }, // 已选过滤字段
         },
     },
     reducers: {
@@ -56,14 +58,14 @@ export default {
         resetSelected(state, action) {
             return Object.assign({}, state, {selected: null});
         },
+        setFilterItem(state, action) {
+            const { item } = action;
+            return Object.assign({}, state, {filterItem: item, filterLabel: ''});
+        },
         setFilterLabel(state, action) {
             const { label } = action;
             return Object.assign({}, state, { filterLabel: label });
         },
-        setTypeLabel(state, action) {
-            const { selected } = action;
-            return Object.assign({}, state, { typeLabel: selected , filterLabel:'',changeSearchType:selected==='dbType'?true:false });
-        },
         setNewModelField(state, action) {
             const { name, value } = action;
             let newOne = state.newOne;

src/models/dataSource.js

@@ -9,12 +9,16 @@ export default {
         originData: {
             list: [],
             filterLabel: '',
-            typeLabel: 'name',
             invalidSQL: false,
-            changeSearchType:false,
             groupList: [],
             currentGroup: null,
-            groupDirty: false
+            filterItems: [ // 可选过滤字段
+                { name: 'name', label: '名称', type: 'string' },
+                { name: 'description', label: '说明', type: 'string' },
+                { name: 'creatorName', label: '创建人', type: 'string' },
+                { name: 'createTime', label: '创建时间', type: 'date' },
+            ],
+            filterItem: { name: 'name', label: '名称', type: 'string' }, // 已选过滤字段
         }
     },
     reducers: {
@@ -33,14 +37,14 @@ export default {
             return Object.assign({}, state, {list});
 
         },
+        setFilterItem(state, action) {
+            const { item } = action;
+            return Object.assign({}, state, {filterItem: item, filterLabel: ''});
+        },
         setFilterLabel(state, action) {
             const { label } = action;
             return Object.assign({}, state, {filterLabel: label});
         },
-        setTypeLabel(state, action) {
-            const { selected } = action;
-            return Object.assign({}, state, {typeLabel: selected , filterLabel:'', changeSearchType:selected==='createTime'?true:false});
-        },
         groupList(state, action) {
             let data = action.data;
             return Object.assign({}, state, {groupList: data});