qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工资单预览

This commit is contained in:
MustangDeng 2022-05-05 15:53:35 +08:00
parent ae3ee29592
commit 00f867914a
9 changed files with 153 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pc4mobx/hrmSalary/apis/payroll.js
View File

@ -137,7 +137,14 @@ export const savePayroll = params => {
//工资单-编辑工资单
export const updatePayroll = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/update', 'POST', params);
return fetch('/api/bs/hrmsalary/salaryBill/template/update', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
}

2
pc4mobx/hrmSalary/components/progressModal/index.js
View File

@ -6,7 +6,7 @@ export default class ProgressModal extends React.Component {
render() {
return (
<div>
<Modal style={{top: 20}} visible={this.props.visible} width={this.props.width ? this.props.width: 600} onCancel={() => {this.props.onCancel()}} footer={null}>
<Modal title="正在核算请稍后" style={{top: 20}} visible={this.props.visible} width={this.props.width ? this.props.width: 600} onCancel={() => {this.props.onCancel()}} footer={null}>
<div>
<WeaProgress percent={this.props.progress ? this.props.progress : 0} strokeColor={this.props.color ? this.props.color: "#B37BFA"} />
</div>

29
pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
View File

@ -21,16 +21,13 @@ function beforeUpload(file) {
}
export default class BackgroundUpload extends React.Component {
constructor(props) {
super(props)
this.state = {
showOperate: false,
visible: false
}
}
componentWillMount() {
this.props.imageUrl && this.setState({imageUrl: this.props.imageUrl})
}
constructor(props) {
super(props)
this.state = {
showOperate: false,
visible: false
}
}
// 上传完成监听
handleChange = (info) => {
@ -42,10 +39,7 @@ function beforeUpload(file) {
// 删除
handleDelete = () => {
this.setState({
imageUrl: null,
})
this.props.onChange && this.props.onChagne("");
this.props.onChange && this.props.onChange(null);
}
// 预览
@ -61,11 +55,11 @@ function beforeUpload(file) {
showUploadList: false,
onChange: this.handleChange.bind(this)
};
const imageUrl = this.state.imageUrl;
const { imageUrl } = this.props;
return (
<div className="uploadPictureWrapper">
{
imageUrl ?
(imageUrl || imageUrl == "") ?
<div className="previewWrapper" onMouseEnter={() => {this.setState({showOperate: true})}} onMouseLeave={() => {this.setState({showOperate: false})}}>
<img src={imageUrl} alt="" className="previewImg"/>
{
@ -86,9 +80,6 @@ function beforeUpload(file) {
</div>
</Modal>
</div>
);
}
}

32
pc4mobx/hrmSalary/pages/payroll/index.js
View File

@ -42,6 +42,7 @@ export default class Payroll extends React.Component {
templateCurrentId: "",
copyModalVisible: false
}
this.recordId = ""
columns.map(item => {
if(item.dataIndex == "cz") {
item.render = (text, record) => {
@ -132,6 +133,10 @@ export default class Payroll extends React.Component {
// 模板列表编辑
handleTemplateListEdit(record) {
const { payrollStore } = this.props;
const { getPayrollShowForm } = payrollStore
this.recordId = record.id
getPayrollShowForm(record.id)
this.setState({templateCurrentId: record.id, selectedTab: 0},() => {
this.setState({editSlideVisible: true})
})
@ -184,9 +189,24 @@ export default class Payroll extends React.Component {
// 预览
handlePreview() {
const { payrollStore : {templateBaseData, salaryTemplateShowSet, salaryItemSet}} = this.props;
window.localStorage.setItem("templateBaseData", JSON.stringify(templateBaseData))
window.localStorage.setItem("salaryTemplateShowSet", JSON.stringify(salaryTemplateShowSet))
window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet))
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview")
}
// 更新保存
handleUpdateSave() {
const { payrollStore} = this.props;
const { fetchUpdatePayroll } = payrollStore;
fetchUpdatePayroll(this.recordId).then(() => {
this.setState({
editSlideVisi1le: false,
selectedTab: 0
})
})
}
render() {
const { payrollStore } = this.props;
@ -280,6 +300,12 @@ export default class Payroll extends React.Component {
currentStep: this.state.currentStep + 1
})
}
// 上一步
const prevStep = () => {
this.setState({
currentStep: this.state.currentStep - 1
})
}
return (
<div className="mySalaryBenefitsWrapper">
@ -338,7 +364,7 @@ export default class Payroll extends React.Component {
}
{
currentStep == 1 && <div style={{display: "inline-block"}}>
<Button type="default" style={{marginRight: "10px"}}>上一步</Button>
<Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
<Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
<Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
</div>
@ -360,7 +386,6 @@ export default class Payroll extends React.Component {
/>
}
{
this.state.editSlideVisible &&
<WeaSlideModal visible={this.state.editSlideVisible}
@ -374,6 +399,7 @@ export default class Payroll extends React.Component {
subtitle={"编辑工资单模板"}
tabs={[{title: '基础设置', key: 0}, {title: "显示设置", key: 1}]}
editable={true}
onSave={() => {this.handleUpdateSave()}}
selectedTab={selectedTab}
subItemChange={
(item) => {this.setState({selectedTab: item.key})}
@ -382,7 +408,7 @@ export default class Payroll extends React.Component {
}
content={<div>
{
selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId}/>
selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {this.handleBaseInfoChange(request)}}/>
}
{
selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>

17
pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
View File

@ -1,9 +1,10 @@
import React from 'react'
import { Row, Col, Switch } from 'antd'
import { Row, Col, Switch, Select } from 'antd'
import { WeaInput, WeaSelect } from 'ecCom'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../../components/requiredLabelTip';
import "./index.less"
const { Option } = Select
@inject('payrollStore')
@observer
@ -21,9 +22,13 @@ export default class BaseInformForm extends React.Component {
const { getPayrollBaseForm} = payrollStore
getPayrollBaseForm(this.props.id).then(data => {
this.setState({
inited: true,
options: data.salarySobOptions,
request: data.templateBaseData
}, () => {
this.setState({
inited: true,
})
})
})
}
@ -49,8 +54,14 @@ export default class BaseInformForm extends React.Component {
<Row className="formItem">
<Col span={8}>薪资账套<RequiredLabelTip /></Col>
<Col span={16}>
{
this.state.inited && <WeaSelect options={this.state.options} value={salarySob} style={{width: "200px"}} onChange={(value) => {this.hanldeChange({salarySob: value})}}/>
this.state.inited && this.state.options.length > 0 && <Select
defaultValue={salarySob ? salarySob : ""} value={salarySob ? salarySob : ""} style={{ width: "200px" }} onChange={(value) => this.hanldeChange({salarySob: value})}>
{this.state.options.map(item => (
<Option value={item.key} key={item.key}>{item.showname}</Option>
))}
</Select>
}
</Col>
</Row>

72
pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js
View File

@ -1,35 +1,77 @@
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>
<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>
{
this.salaryItemSet.length > 0 &&
this.salaryItemSet.map(group => (
<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">{item.salaryItemValue}</Col>
</Row>
</Col>
))
}
</Row>
</div>
))
<Row className="contentRow">
<Col span={ 4 } className="contentItem">个税扣缴义务人</Col>
<Col span={ 4 } className="contentItem">上海泛微</Col>
<Col span={ 4 } className="contentItem">姓名</Col>
<Col span={ 4 } className="contentItem">张三</Col>
<Col span={ 4 } className="contentItem">部门</Col>
<Col span={ 4 } className="contentItem">研发部</Col>
</Row>
</div>
}
</div>
<div style={{margin: "20px auto"}}>
{
this.salaryTemplateShowSet.textContentPosition == 2 && this.salaryTemplateShowSet.textContent
}
</div>
</div>
)

7
pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js
View File

@ -4,7 +4,10 @@ import computer from './computer.png'
import './index.less'
import ComputerTemplate from './computerTemplate'
import PhoneTemplate from './phoneTemplate'
import { inject, observer } from 'mobx-react';
@inject('payrollStore')
@observer
export default class TemplatePreview extends React.Component {
constructor(props) {
super(props)
@ -13,6 +16,8 @@ export default class TemplatePreview extends React.Component {
}
}
handleSelectClick(selectKey) {
this.setState({selectKey})
}
@ -34,7 +39,7 @@ export default class TemplatePreview extends React.Component {
<div className="contentWrapper">
{
this.state.selectKey == "0" ? <ComputerTemplate/> : <PhoneTemplate />
this.state.selectKey == "0" ? <ComputerTemplate /> : <PhoneTemplate />
}
</div>

5
pc4mobx/hrmSalary/pages/payroll/templatePreview/phoneTemplate/index.js
View File

@ -2,8 +2,13 @@ import React from 'react'
import { Row, Col} from 'antd'
import background from '../computerTemplate/background.png'
import "../index.less"
import { inject, observer } from 'mobx-react';
@inject('payrollStore')
@observer
export default class PhoneTemplate extends React.Component {
render() {
return (
<div className="computerTemplate phoneTemplate" >

24
pc4mobx/hrmSalary/stores/payroll.js
View File

@ -133,7 +133,7 @@ export class payrollStore {
if(res.status) {
let response = res.data.salaryTemplateBaseSet
let templateBaseData = response.data
templateBaseData.salarySob = templateBaseData.salarySob !== undefined ? templateBaseData.salarySob + "": null;
templateBaseData.salarySob = templateBaseData.salarySob != undefined ? templateBaseData.salarySob + "": null;
this.templateBaseData = templateBaseData // 基础信息表单数据
this.salarySobOptions = response.salarySobOptions ?
@ -242,6 +242,28 @@ export class payrollStore {
})
}
// 工资单模板-更新工资单模板
@action
fetchUpdatePayroll = () => {
if(!(this.validateSalaryTemplateShowSet())) {
return false
}
let params = this.convertParams()
params.id = id
return new Promise((resolve, reject) => {
API.updatePayroll(params).then(res => {
if(res.status) {
message.success("保存成功");
this.getPayrollTemplateList();
resolve();
} else {
message.error(res.errormsg || "保存失败")
reject()
}
})
})
}
//工资单-获取薪资账套下拉列表
@action
getPayrollTemplateLedgerList = () => {