Merge branch 'develop'

king

2025-05-23 d5edf87014863eceaa44f28809ae4b54a39b9a8e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
 
import './index.scss'
 
class QuarterPicker extends Component {
  static propTpyes = {
    card: PropTypes.object,    // 搜索配置
    onChange: PropTypes.func
  }
 
  state = {
    year: Math.floor(moment().format('YYYY') / 10) * 10,
    selectYear: +moment().format('YYYY')
  }
 
  UNSAFE_componentWillMount () {
    const { card } = this.props
    const { selectYear } = this.state
    let year = this.state.year
 
    if (card.initval && card.initval[0]) {
      let _type = card.initval[0]
      let _val = parseInt(card.initval[1])
 
      if (_type === 'year' && _val) {
        this.setState({selectYear: selectYear - _val})
        year = Math.floor((selectYear - _val) / 10) * 10
      }
    }
 
    this.setState({
      yearlist: [
        [{value: year - 1, type: 'up'}, {value: year, type: ''}, {value: year + 1, type: ''}],
        [{value: year + 2, type: ''}, {value: year + 3, type: ''}, {value: year + 4, type: ''}],
        [{value: year + 5, type: ''}, {value: year + 6, type: ''}, {value: year + 7, type: ''}],
        [{value: year + 8, type: ''}, {value: year + 9, type: ''}, {value: year + 10, type: 'down'}],
      ],
      year
    })
  }
 
  changeYear = (type) => {
    let _year = this.state.year
 
    if (type === 'up') {
      _year -= 10
    } else {
      _year += 10
    }
    
    this.setState({
      year: _year,
      yearlist: [
        [{value: _year - 1, type: 'up'}, {value: _year, type: ''}, {value: _year + 1, type: ''}],
        [{value: _year + 2, type: ''}, {value: _year + 3, type: ''}, {value: _year + 4, type: ''}],
        [{value: _year + 5, type: ''}, {value: _year + 6, type: ''}, {value: _year + 7, type: ''}],
        [{value: _year + 8, type: ''}, {value: _year + 9, type: ''}, {value: _year + 10, type: 'down'}],
      ]
    })
  }
 
  selectTargetYear = (item) => {
    if (item.type) {
      this.changeYear(item.type)
      return
    }
 
    this.setState({
      selectYear: item.value
    })
    this.props.onChange([item.value + '-01-01', item.value + '-12-31'])
  }
 
  render() {
    const { year, selectYear, yearlist } = this.state
 
    return (
      <div className="ant-calendar-picker-container ant-calendar-year-picker">
        <div className="ant-calendar ant-calendar-month ant-calendar-month-calendar">
          <div className="ant-calendar-month-calendar-content">
            <div className="ant-calendar-month-header-wrap">
              <div className="ant-calendar-header">
                <div className="ant-calendar-year-panel">
                  <div>
                    <div className="ant-calendar-year-panel-header">
                      <span className="ant-calendar-year-panel-prev-decade-btn" onClick={() => this.changeYear('up')} title="上一年代"></span>
                      <span className="ant-calendar-year-panel-year-select">
                        <span className="ant-calendar-year-panel-decade-select-content">{year + '-' + (year + 9)}</span>
                      </span>
                      <span className="ant-calendar-year-panel-next-decade-btn" onClick={() => this.changeYear('down')} title="下一年代"></span>
                    </div>
                    <div className="ant-calendar-year-panel-body">
                      <table className="ant-calendar-year-panel-table">
                        <tbody className="ant-calendar-year-panel-tbody">
                          {yearlist.map((list, i) => (
                            <tr key={'line' + i}>
                              {list.map(item => (
                                <td key={item.value} title={item.value} className={'ant-calendar-year-panel-cell' + (item.type ? ' ant-calendar-year-panel-last-decade-cell' : '')}>
                                  <span onClick={() => this.selectTargetYear(item)} className={'ant-calendar-year-panel-year' + (selectYear === item.value ? ' ant-year-selected' : '')}>{item.value}</span>
                                </td>
                              ))}
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
 
export default QuarterPicker