SheetHead.js
4.5 KB
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,{PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import cx from 'classnames';
import s from './sheet.scss';
import { Progress,Row,Col,Menu, Dropdown,Popconfirm} from 'antd';
import {changeSheetType,changeSheet,deleteSheet} from '../../../redux/actions/payroll';
import { Scrollbars } from 'react-custom-scrollbars';
class SheetHead extends React.Component {
constructor(props) {
super(props);
}
static propTypes = {
sheets:PropTypes.array,
dispatch:PropTypes.func,
activeSheet:PropTypes.object
}
static defaultProps={
sheets:[],
hideBtn:true,
close:()=>{
}
}
componentDidMount(){
}
componentWillReceiveProps(nextProps){
}
componentDidUpdate(prevProps,prevState){
}
componentWillUnmount() {
}
changeSheetType(sheet,paySheetFlag=false){
const {dispatch,sheets}=this.props;
console.log(sheet);
sheet.isPaySheet=paySheetFlag
dispatch(changeSheetType(sheet,sheets));
}
choseSheet(sheet){
const {dispatch,sheets}=this.props;
console.log(sheet);
dispatch(changeSheet(sheet,sheets));
}
deleteSheet(sheet){
const {dispatch,sheets}=this.props;
console.log(sheet);
dispatch(deleteSheet(sheet,sheets));
}
renderMenu(sheet){
const self=this;
return (
<Menu>
<Menu.Item key="0">
<a onClick={self.changeSheetType.bind(self,sheet,true)} className={cx(s.sheet_head_menu_item)}> - 工资表 {sheet.isPaySheet&&<i className='kr_icon'></i>}</a>
</Menu.Item>
<Menu.Item key="1">
<a onClick={self.changeSheetType.bind(self,sheet,false)} className={cx(s.sheet_head_menu_item)}> - 辅助表 {!sheet.isPaySheet&&<i className='kr_icon'></i>}</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">
<Popconfirm title="确定要删除吗？" onConfirm={self.deleteSheet.bind(self,sheet)} onCancel={()=>{}}>
<a className={cx(s.sheet_head_menu_item)}><span> - 删除</span></a>
</Popconfirm>
</Menu.Item>
</Menu>
)
}
render(){
const {sheets,hideBtn,activeSheet,is_archived}=this.props,self=this;
console.log(hideBtn);
console.log(activeSheet);
if(hideBtn){
return (
<div style={{position: 'absolute',bottom: '25px'}} className={cx(s.sheet_head_wrap , s.active ,s.sheet_head_first)} >
<div style={{borderRight:'0px'}} className={cx(s.sheet_head_btn)} onClick={self.choseSheet.bind(self,activeSheet)}>{activeSheet.name}</div>
</div>
)
}else{
return (
<Scrollbars className={cx(s.sheets_wrap)} style={{width:'100%',height:'40px',position:'absolute',bottom:'20px',whiteSpace:'nowrap'}}
autoHide autoHideTimeout={2000} autoHideDuration={1000}
>
{sheets.map((sheet,i)=>{
return (
<div key={i} className={cx(s.sheet_head_wrap
,sheet.active?s.active:null
,i==0?s.sheet_head_first:null)}
>
<div>
<div className={cx(s.sheet_head_btn)} onClick={self.choseSheet.bind(self,sheet)}>{sheet.name}</div>
{is_archived?
<div className={cx(s.sheet_head_drop_btn_disabled)}>
{sheet.isPaySheet?"工":"辅"}
</div>:
<Dropdown overlay={self.renderMenu(sheet)} trigger={['click']}>
<div className={cx(s.sheet_head_drop_btn,"ant-dropdown-link")}>
{sheet.isPaySheet?"工":"辅"}
</div>
</Dropdown>}
</div>
</div>
)
})}
</Scrollbars>
)
}
}
}
const mapStateToProps = (state) => {
const {payroll:{is_archived}} = state ;
return {
is_archived
};
}
export default connect(mapStateToProps)(SheetHead);