168 lines
8.0 KiB
JavaScript
168 lines
8.0 KiB
JavaScript
import React from 'react'
|
|
import { Modal, Row, Col } from 'antd'
|
|
import { inject, observer } from 'mobx-react';
|
|
import { getQueryString } from '../../util/url'
|
|
|
|
@inject('mySalaryStore')
|
|
@observer
|
|
export default class MobilePayroll extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.id = "";
|
|
this.state = {
|
|
type: 'phone'
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
let id = getQueryString("id");
|
|
let type = getQueryString("type");
|
|
this.setState({type})
|
|
this.id = id;
|
|
const { mySalaryStore: {getMySalaryBill}} = this.props;
|
|
getMySalaryBill(this.id)
|
|
}
|
|
|
|
render() {
|
|
const { mySalaryStore: { mySalaryBill }} = this.props;
|
|
const { type } = this.state
|
|
return (
|
|
<div className="computerTemplate" style={{
|
|
backgroundColor: "rgb(246, 246, 246)",
|
|
minHeight: "600px",
|
|
height: "600px",
|
|
overflowY: "scroll",
|
|
paddingTop: "30px",
|
|
paddingBottom: "20px",
|
|
margin: "20px auto",
|
|
}}>
|
|
{/* 标题 */}
|
|
<div className="titleWrapper" style={{
|
|
textAlign: "center",
|
|
fontSize: "18px",
|
|
fontWeight: 700
|
|
}}>
|
|
{ mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.theme }
|
|
</div>
|
|
{
|
|
mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.background && mySalaryBill.salaryTemplate.background !== ""
|
|
&& <div className="background-wrapper" style={{
|
|
height: "200px",
|
|
margin: "10px"
|
|
}}>
|
|
<img className="background-img" src={mySalaryBill.salaryTemplate.background} style={{
|
|
width: "100%",
|
|
height: "200px"
|
|
}}/>
|
|
</div>
|
|
}
|
|
|
|
{/* 员工信息 */}
|
|
<div className="sobItemWrapper">
|
|
<div className="sobItem" style={{
|
|
margin: "10px",
|
|
backgroundColor: "#FFF",
|
|
padding: "10px",
|
|
lineHeight: "35px",
|
|
textAlign: "center"
|
|
}}>
|
|
{
|
|
mySalaryBill.employeeInformation && <Row className="titleRow" style={{
|
|
border: "1px solid #f2f2f2",
|
|
textAlign: "left"
|
|
}}>
|
|
<Col span={24} className="sobTitle" style={{
|
|
paddingLeft: "10px"
|
|
}}>{mySalaryBill.employeeInformation.groupName}</Col>
|
|
</Row>
|
|
}
|
|
<Row className="contentRow" style={{
|
|
borderLeft: "1px solid #f2f2f2",
|
|
borderBottom: "1px solid #f2f2f2",
|
|
borderRight: "1px solid #f2f2f2"
|
|
}}>
|
|
{
|
|
mySalaryBill.employeeInformation && mySalaryBill.employeeInformation.items.map((item, index) => (
|
|
<Col>
|
|
<Col span={ type == "phone" ? 12 : 4 } className="contentItem" style={{
|
|
borderRight: "1px solid #f2f2f2",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
height: "35px"
|
|
}}>{item.name}</Col>
|
|
<Col span={ type == "phone" ? 12 : 4 } className="contentItem"
|
|
style={{
|
|
borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
height: "35px"
|
|
}}
|
|
>{item.salaryItemValue}</Col>
|
|
</Col>
|
|
))
|
|
}
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
mySalaryBill.salaryGroups && mySalaryBill.salaryGroups.length > 0 &&
|
|
mySalaryBill.salaryGroups.map(group => (
|
|
<div className="sobItemWrapper">
|
|
<div className="sobItem" style={{
|
|
margin: "10px",
|
|
backgroundColor: "#FFF",
|
|
padding: "10px",
|
|
lineHeight: "35px",
|
|
textAlign: "center"
|
|
}}>
|
|
{
|
|
mySalaryBill.employeeInformation && <Row className="titleRow" style={{
|
|
border: "1px solid #f2f2f2",
|
|
textAlign: "left"
|
|
}}>
|
|
<Col span={24} className="sobTitle" style={{
|
|
paddingLeft: "10px"
|
|
}}>{group.groupName}</Col>
|
|
</Row>
|
|
}
|
|
<Row className="contentRow" style={{
|
|
borderLeft: "1px solid #f2f2f2",
|
|
borderBottom: "1px solid #f2f2f2",
|
|
borderRight: "1px solid #f2f2f2"
|
|
}}>
|
|
{
|
|
group.items && group.items.map((item, index) => (
|
|
<Col>
|
|
<Col span={ type == "phone" ? 12 : 4 } className="contentItem" style={{
|
|
borderRight: "1px solid #f2f2f2",
|
|
borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
height: "35px"
|
|
}}>{item.name}</Col>
|
|
<Col span={ type == "phone" ? 12 : 4 } className="contentItem"
|
|
style={{
|
|
borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
|
|
borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
height: "35px"
|
|
}}
|
|
>{item.salaryItemValue}</Col>
|
|
</Col>
|
|
))
|
|
}
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
} |