79 lines
3.3 KiB
JavaScript
79 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import background from './background.png'
|
|
import { Row, Col } from 'antd'
|
|
import moment from 'moment'
|
|
|
|
import { inject, observer } from 'mobx-react';
|
|
|
|
@inject('payrollStore')
|
|
@observer
|
|
export default class ComputerTemplate extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.templateBaseData = {}
|
|
this.salaryItemSetStr = {}
|
|
this.salaryTemplateShowSet = []
|
|
}
|
|
|
|
componentWillMount() {
|
|
let templateBaseDataStr = window.localStorage.getItem("templateBaseData");
|
|
this.templateBaseData = JSON.parse(templateBaseDataStr)
|
|
let salaryTemplateShowSetStr = window.localStorage.getItem("salaryTemplateShowSet");
|
|
let salaryItemSetStr = window.localStorage.getItem("salaryItemSet");
|
|
this.salaryItemSet = JSON.parse(salaryItemSetStr)
|
|
this.salaryTemplateShowSet = JSON.parse(salaryTemplateShowSetStr)
|
|
}
|
|
|
|
render() {
|
|
const { isPC } = this.props;
|
|
return (
|
|
<div className="computerTemplate">
|
|
<div className="titleWrapper">
|
|
{this.salaryTemplateShowSet.theme.replace("${companyName}", "上海泛微").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
|
|
</div>
|
|
{
|
|
this.salaryTemplateShowSet.background && <div className="background-wrapper">
|
|
<img className="background-img" src={this.salaryTemplateShowSet.background} />
|
|
</div>
|
|
}
|
|
|
|
<div className="sobItemDiv" style={{margin: "20px auto"}}>
|
|
{
|
|
this.salaryTemplateShowSet.textContentPosition == 1 && this.salaryTemplateShowSet.textContent
|
|
}
|
|
</div>
|
|
|
|
<div className="sobItemWrapper">
|
|
{
|
|
this.salaryItemSet.length > 0 &&
|
|
this.salaryItemSet.map((group,index) => (
|
|
<div className="sobItem">
|
|
<Row className="titleRow">
|
|
<Col span={24} className="sobTitle">{group.groupName}</Col>
|
|
</Row>
|
|
|
|
<Row className="contentRow">
|
|
{
|
|
group.items && group.items.map(item => (
|
|
<Col span={8}>
|
|
<Row>
|
|
<Col span={ 12 } className="contentItem">{item.name}</Col>
|
|
<Col span={ 12 } className="contentItem">{index == 0 ? item.salaryItemValue : 10000}</Col>
|
|
</Row>
|
|
</Col>
|
|
))
|
|
}
|
|
</Row>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div style={{margin: "20px auto"}}>
|
|
{
|
|
this.salaryTemplateShowSet.textContentPosition == 2 && this.salaryTemplateShowSet.textContent
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |