| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { DatePicker, Tooltip } from 'antd' |
| | | import { DatePicker, Tooltip, Icon } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | |
| | | class DateGroup extends Component { |
| | | static propTpyes = { |
| | | card: PropTypes.object // 字典项 |
| | | card: PropTypes.object, // 搜索条件 |
| | | onGroupChange: PropTypes.func // 搜索内容切换 |
| | | } |
| | | |
| | | state = { |
| | | active: '', |
| | | quarterId: Utils.getuuid(), |
| | | yearId: Utils.getuuid(), |
| | | dateRange: '' |
| | | dateRange: '', |
| | | initDateRange: '', |
| | | initType: '' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | |
| | | } |
| | | this.setState({ |
| | | active: card.initval[0], |
| | | dateRange: _dateRange |
| | | dateRange: _dateRange, |
| | | initDateRange: _dateRange, |
| | | initType: card.initval[0] |
| | | }) |
| | | } |
| | | } |
| | | |
| | | changeTab = () => { |
| | | |
| | | } |
| | | |
| | | onChange = (date, type) => { |
| | |
| | | this.setState({ |
| | | active: type, |
| | | dateRange: values |
| | | }, () => { |
| | | this.props.onGroupChange() |
| | | }) |
| | | } |
| | | |
| | | clearTime = () => { |
| | | this.setState({ |
| | | active: '', |
| | | dateRange: '' |
| | | }, () => { |
| | | this.props.onGroupChange() |
| | | }) |
| | | } |
| | | |
| | | reset = () => { |
| | | const { initDateRange, initType } = this.state |
| | | |
| | | this.setState({ |
| | | active: initType, |
| | | dateRange: initDateRange |
| | | }) |
| | | } |
| | | |
| | | getSearchItems = () => { |
| | | const { card } = this.props |
| | | const { dateRange, active } = this.state |
| | | let items = [] |
| | | |
| | | items.push({ |
| | | type: 'daterange', |
| | | key: card.datefield, |
| | | value: dateRange, |
| | | label: card.label, |
| | | match: 'between', |
| | | required: card.required === 'true' |
| | | }) |
| | | |
| | | if (card.transfer === 'true') { |
| | | items.push({ |
| | | type: card.type, |
| | | key: card.field, |
| | | value: active, |
| | | label: card.label, |
| | | match: '=', |
| | | required: card.required === 'true' |
| | | }) |
| | | } |
| | | |
| | | return items |
| | | } |
| | | |
| | | render() { |
| | |
| | | </span>) |
| | | } |
| | | })} |
| | | <div className="table-search-date-group-value">{dateRange ? dateRange.join(' ~ ') : ''}</div> |
| | | |
| | | {dateRange ? <div className="table-search-date-group-value"> |
| | | {dateRange.join(' ~ ')} |
| | | <Icon type="close-circle" onClick={this.clearTime} className="ant-calendar-picker-clear" /> |
| | | </div> : null} |
| | | {!dateRange && card.required === 'true' ? <div className="ant-form-explain">请选择{card.label}!</div> : null} |
| | | </div> |
| | | ) |
| | | } |