|
|
@@ -1,12 +1,11 @@
|
|
|
import React from 'react'
|
|
|
import '../../models/dashboardDesigner'
|
|
|
-import { Modal, Radio, Row, Col, Table, Input, Select, message, DatePicker } from 'antd'
|
|
|
+import { Modal, Radio, Row, Col, Table, message } from 'antd'
|
|
|
import { connect } from 'dva'
|
|
|
import moment from 'moment'
|
|
|
import 'braft-editor/dist/braft.css'
|
|
|
+import ListFilter from '../common/listFilter/index'
|
|
|
import './chooseChartBox.less'
|
|
|
-const { Search } = Input
|
|
|
-const { RangePicker } = DatePicker
|
|
|
|
|
|
class ChooseChartBox extends React.Component {
|
|
|
|
|
|
@@ -14,6 +13,7 @@ class ChooseChartBox extends React.Component {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
filterLabel: '',
|
|
|
+ filterItem: { name: 'name', label: '图表名称', type: 'string' },
|
|
|
selectedRecord: -1,
|
|
|
screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
|
|
|
screenHeight: document.documentElement.clientHeight || document.body.clientHeight
|
|
|
@@ -54,20 +54,48 @@ class ChooseChartBox extends React.Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- generateFilterItems = () => {
|
|
|
- const { filterItems } = this.props.chart;
|
|
|
- return filterItems.map(t => <Select.Option key={t.name} value={t.name}>{t.label}</Select.Option>);
|
|
|
+ onSearch = (list) => {
|
|
|
+ const { filterItem, filterLabel: stateFilterLabel } = this.state;
|
|
|
+ const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
+ let filterLabel = stateFilterLabel ? (stateFilterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
|
|
|
+ let filterReg = new RegExp('('+ filterLabel +'){1}', 'ig');
|
|
|
+
|
|
|
+ return list.map(l => {
|
|
|
+ let o = Object.assign({}, l);
|
|
|
+
|
|
|
+ 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 {
|
|
|
+ let arr = filterItem.name.split('.');
|
|
|
+ let v = o;
|
|
|
+ for(let i = 0; i < arr.length; i++) {
|
|
|
+ v = v[arr[i]]
|
|
|
+ }
|
|
|
+ return ((v + '').search(filterReg) > -1) ? o : null
|
|
|
+ }
|
|
|
+ }).filter(a => a!==null);
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const { main, visibleBox, hideBox, dashboardDesigner, chart, dispatch } = this.props;
|
|
|
- const { selectedRecord, screenWidth, screenHeight } = this.state;
|
|
|
+ const { visibleBox, hideBox, dashboardDesigner, chart } = this.props;
|
|
|
+ const { selectedRecord, screenWidth, screenHeight, filterItem, filterLabel: stateFilterLabel } = this.state;
|
|
|
const tableBodyWidth = screenWidth * 0.8 - 10 - 10 - 18;
|
|
|
const tableBodyHeight = screenHeight * 0.8 - 65 - 53 - 38 - 130;
|
|
|
const tableRowHeight = 38;
|
|
|
- const { filterItem } = dashboardDesigner;
|
|
|
const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
|
|
|
- let filterLabel = this.state.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
|
|
|
+ let filterLabel = stateFilterLabel ? (stateFilterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
|
|
|
const columns = [{
|
|
|
title: '选择',
|
|
|
key: 'selected',
|
|
|
@@ -102,6 +130,11 @@ class ChooseChartBox extends React.Component {
|
|
|
</div>
|
|
|
</div>
|
|
|
}
|
|
|
+ }, {
|
|
|
+ title: '数据源',
|
|
|
+ dataIndex: 'dataSourceName',
|
|
|
+ key: 'dataSourceName',
|
|
|
+ width: 100,
|
|
|
}, {
|
|
|
title: '创建人',
|
|
|
dataIndex: 'creatorName',
|
|
|
@@ -164,60 +197,25 @@ class ChooseChartBox extends React.Component {
|
|
|
<Col >选择图表</Col>
|
|
|
</Row>
|
|
|
<Row type='flex' justify='end'>
|
|
|
- <Col style={{ padding: '0 1px', margin: '0 -5px' }}>
|
|
|
- <Select
|
|
|
- value={filterItem.name}
|
|
|
- style={{ width: 120 }}
|
|
|
- onChange={value => {
|
|
|
- let item = chart.filterItems.find(i => i.name === value);
|
|
|
- dispatch({ type: 'dashboardDesigner/setFilterItem', item });
|
|
|
- }}
|
|
|
- >
|
|
|
- {this.generateFilterItems()}
|
|
|
- </Select>
|
|
|
- </Col>
|
|
|
<Col style={{ padding: '0 5px' }}>
|
|
|
- {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 => {
|
|
|
- //清空时间时
|
|
|
- if(e.length === 0){
|
|
|
- this.setState({
|
|
|
- filterLabel: ''
|
|
|
- });
|
|
|
- }
|
|
|
- }}
|
|
|
- onOk={e => {
|
|
|
- //解析时间格式
|
|
|
- let start = e[0]
|
|
|
- let end = e[1]
|
|
|
- let time = start._d.getTime() + "#" + end._d.getTime()
|
|
|
- this.setState({
|
|
|
- filterLabel: time
|
|
|
- });
|
|
|
- }}
|
|
|
- >
|
|
|
- </RangePicker>
|
|
|
- :
|
|
|
- <Search
|
|
|
- placeholder="请输入关键字"
|
|
|
- value={this.state.filterLabel}
|
|
|
- onChange={e => {
|
|
|
- this.setState({
|
|
|
- filterLabel: e.target.value
|
|
|
- });
|
|
|
- }}
|
|
|
- />
|
|
|
- }
|
|
|
+ <ListFilter
|
|
|
+ modelName={null}
|
|
|
+ model={{
|
|
|
+ filterItems: chart.filterItems,
|
|
|
+ filterItem,
|
|
|
+ filterLabel: stateFilterLabel,
|
|
|
+ }}
|
|
|
+ onChangeFilterItem={(filterItem) => {
|
|
|
+ this.setState({
|
|
|
+ filterItem
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ onChangeFilterValue={(filterLabel) => {
|
|
|
+ this.setState({
|
|
|
+ filterLabel
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</Row>
|
|
|
@@ -234,26 +232,7 @@ class ChooseChartBox extends React.Component {
|
|
|
...c,
|
|
|
width: 100
|
|
|
}))}
|
|
|
- dataSource={chart.list.map((l, i) => {
|
|
|
- let o = Object.assign({}, l);
|
|
|
- if(filterItem.type === 'date') {
|
|
|
- if(filterLabel===""){
|
|
|
- return { ...o, key: i };
|
|
|
- }else if(filterLabel.indexOf('#')>-1){
|
|
|
- let start = filterLabel.split('#')[0]
|
|
|
- let end = filterLabel.split('#')[1]
|
|
|
- let nowTime = new Date(o[filterItem.name]).getTime();
|
|
|
- if(nowTime>=start && nowTime<=end){
|
|
|
- return { ...o, key: i};
|
|
|
- }
|
|
|
- return null
|
|
|
- }else{
|
|
|
- return null
|
|
|
- }
|
|
|
- }else {
|
|
|
- return ((o[filterItem.name] + '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) > -1) ? { ...o, key: i } : null
|
|
|
- }
|
|
|
- }).filter(a => a!==null && a.creatorCode === main.currentUser.code)}
|
|
|
+ dataSource={this.onSearch(chart.list)}
|
|
|
size='small'
|
|
|
scroll={{ x: columns ? columns.length * 100 : tableBodyWidth, y: tableBodyHeight }}
|
|
|
pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
|
|
|
@@ -279,8 +258,8 @@ class ChooseChartBox extends React.Component {
|
|
|
|
|
|
|
|
|
|
|
|
-function mapStateToProps({ present: { main, dashboardDesigner, chart } }) {
|
|
|
- return { main, dashboardDesigner, chart };
|
|
|
+function mapStateToProps({ present: { dashboardDesigner, chart } }) {
|
|
|
+ return { dashboardDesigner, chart };
|
|
|
}
|
|
|
|
|
|
export default connect(mapStateToProps)(ChooseChartBox)
|
zhuth