工资单预览模板

This commit is contained in:
MustangDeng 2022-05-05 16:10:22 +08:00
parent 00f867914a
commit e4e4f791eb
4 changed files with 70 additions and 26 deletions

View File

@ -398,9 +398,20 @@ export default class Payroll extends React.Component {
<SlideModalTitle
subtitle={"编辑工资单模板"}
tabs={[{title: '基础设置', key: 0}, {title: "显示设置", key: 1}]}
editable={true}
onSave={() => {this.handleUpdateSave()}}
editable={false}
selectedTab={selectedTab}
customOperate={<span>
{
selectedTab == 0 && <Button type="primary" onClick={() => {this.handleUpdateSave()}}>保存</Button>
}
{
selectedTab == 1 &&
<span>
<Button type="primary" onClick={() => {this.handleUpdateSave()}} style={{marginRight: '10px'}}>保存</Button>
<Button type="default" onClick={() => {this.handlePreview()}}>预览</Button>
</span>
}
</span>}
subItemChange={
(item) => {this.setState({selectedTab: item.key})}
}

View File

@ -44,7 +44,7 @@ export default class ComputerTemplate extends React.Component {
<div className="sobItemWrapper">
{
this.salaryItemSet.length > 0 &&
this.salaryItemSet.map(group => (
this.salaryItemSet.map((group,index) => (
<div className="sobItem">
<Row className="titleRow">
<Col span={24} className="sobTitle">{group.groupName}</Col>
@ -56,7 +56,7 @@ export default class ComputerTemplate extends React.Component {
<Col span={8}>
<Row>
<Col span={ 12 } className="contentItem">{item.name}</Col>
<Col span={ 12 } className="contentItem">{item.salaryItemValue}</Col>
<Col span={ 12 } className="contentItem">{index == 0 ? item.salaryItemValue : 10000}</Col>
</Row>
</Col>
))
@ -64,9 +64,7 @@ export default class ComputerTemplate extends React.Component {
</Row>
</div>
))
}
</div>
<div style={{margin: "20px auto"}}>
{

View File

@ -16,8 +16,6 @@ export default class TemplatePreview extends React.Component {
}
}
handleSelectClick(selectKey) {
this.setState({selectKey})
}

View File

@ -3,41 +3,78 @@ import { Row, Col} from 'antd'
import background from '../computerTemplate/background.png'
import "../index.less"
import { inject, observer } from 'mobx-react';
import moment from 'moment'
@inject('payrollStore')
@observer
export default class PhoneTemplate 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() {
return (
<div className="computerTemplate phoneTemplate" >
<div className="phoneBar">薪酬预览</div>
<div className="titleWrapper">
测试标题
{this.salaryTemplateShowSet.theme.replace("${companyName}", "上海泛微").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
</div>
<div className="background-wrapper">
<img className="background-img" src={background} />
<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">
<div className="sobItem">
<Row className="titleRow">
<Col span={24} className="sobTitle">员工信息</Col>
</Row>
<Row className="contentRow">
<Col span={ 6 } className="contentItem">个税扣缴义务人</Col>
<Col span={ 6 } className="contentItem">上海泛微</Col>
<Col span={ 6 } className="contentItem">姓名</Col>
<Col span={ 6 } className="contentItem">张三</Col>
</Row>
{
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={12}>
<Row>
<Col span={ 6 } className="contentItem">{item.name}</Col>
<Col span={ 6 } className="contentItem">{index == 0 ? item.salaryItemValue : 10000}</Col>
</Row>
</Col>
))
}
</Row>
</div>
))
}
</div>
<Row className="contentRow">
<Col span={ 6 } className="contentItem">部门</Col>
<Col span={ 6 } className="contentItem">研发部</Col>
</Row>
</div>
<div style={{margin: "20px auto"}}>
{
this.salaryTemplateShowSet.textContentPosition == 2 && this.salaryTemplateShowSet.textContent
}
</div>
</div>
)