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

我的工资单

This commit is contained in:
MustangDeng 2022-04-22 14:51:51 +08:00
parent d2dd726b20
commit 9eeaf2d9e9
5 changed files with 291 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,14 @@ import { WeaTools } from 'ecCom';
// 工资单列表
export const mySalaryBillList = params => {
return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/mySalaryBillList', 'POST', params);
return fetch('/api/bs/hrmsalary/salaryBill/mySalaryBillList', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
}).then(res => res.json())
};
// 社保福利列表

96
pc4mobx/hrmSalary/pages/mySalary/index.js
View File

@ -4,35 +4,96 @@ import { toJS } from 'mobx';
import { Button, Table, DatePicker } from 'antd';
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker } from 'ecCom';
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';
import moment from 'moment'
import "./index.less"
import { payrollColumns,
socialSecurityBenefitsColumns,
salaryRecordColumns,
dataSource } from './columns';
import PayrollModal from './payrollModal';
const { MonthPicker } = DatePicker;
@inject('baseTableStore')
@inject('mySalaryStore')
@observer
export default class MySalary extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
selectedKey: "0"
selectedKey: "0",
salaryStartDate: moment(new Date()).format("YYYY-MM"),
salaryEndDate: moment(new Date()).format("YYYY-MM"),
salaryBillVisible: false
}
this.salaryInfoId = ""
}
render() {
const { baseTableStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
const { tabIndex } = baseTableStore
componentWillMount() {
const { mySalaryStore : {mySalaryBillList}} = this.props;
mySalaryBillList([this.state.salaryStartDate, this.state.salaryEndDate])
}
// 查看工资单
handleView(record) {
this.salaryInfoId = record.id;
this.setState({
salaryBillVisible: true
})
}
getColumns() {
const { mySalaryStore: {myBillTableStore}} = this.props;
let columns = myBillTableStore.columns ? myBillTableStore.columns: []
columns = columns.filter(item => item.hide == "false")
columns.map(item => {
if(item.dataIndex == "salaryYearMonth") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
}
} else if(item.dataIndex == "sendTime") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
}
}
})
columns.push({
title: "操作",
dataIndex: "operate",
render: (text,record) => {
return (
<a onClick={() => {this.handleView(record)}}>查看</a>
)
}
})
return columns;
}
// 工资单开始时间
onSalaryStartDateChange(value) {
this.setState({salaryStartDate: value})
const { mySalaryStore : {mySalaryBillList}} = this.props;
mySalaryBillList([value, this.state.salaryEndDate])
}
// 工资单结束时间
onSalaryEndDateChange(value) {
this.setState({salaryEndDate: value})
const { mySalaryStore : {mySalaryBillList}} = this.props;
mySalaryBillList([this.state.salaryStartDate, value])
}
render() {
const { mySalaryStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = mySalaryStore;
const { tabIndex, myBillTableStore, myBillDataSource } = mySalaryStore
const { salaryBillVisible } = this.state;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
@ -78,13 +139,21 @@ export default class MySalary extends React.Component {
return (<div><span className="tabSearchLabel">薪资所属月：</span>
<div className="weaRangePickerWrapper">
<div className="monthPickerWrapper">
<MonthPicker />
<WeaDatePicker
format="yyyy-MM"
value={this.state.salaryStartDate}
onChange={value => this.onSalaryStartDateChange(value)}
/>
</div>
<span className="betweenLable">
至
</span>
<div className="monthPickerWrapper">
<MonthPicker />
<WeaDatePicker
format="yyyy-MM"
value={this.state.salaryEndDate}
onChange={value => this.onSalaryEndDateChange(value)}
/>
</div>
</div></div>)
} else if(this.state.selectedKey == "1"){
@ -130,7 +199,7 @@ export default class MySalary extends React.Component {
/>
{
this.state.selectedKey == '0' && <WeaTable columns={payrollColumns} dataSource={dataSource}/>
this.state.selectedKey == '0' && <WeaTable columns={this.getColumns()} dataSource={myBillDataSource ? myBillDataSource : []}/>
}
{
this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
@ -141,6 +210,13 @@ export default class MySalary extends React.Component {
</WeaTop>
</WeaRightMenu>
{
salaryBillVisible && <PayrollModal
visible={salaryBillVisible}
id={this.salaryInfoId}
onCancel={() => {this.setState({salaryBillVisible: false})}}
/>
}
</div>
)
}

152
pc4mobx/hrmSalary/pages/mySalary/payrollModal.js Normal file
View File

@ -0,0 +1,152 @@
import React from 'react'
import { Modal, Row, Col } from 'antd'
import { inject, observer } from 'mobx-react';
@inject('mySalaryStore')
@observer
export default class PayrollModal extends React.Component {
componentWillMount() {
const { mySalaryStore: {getMySalaryBill}} = this.props;
getMySalaryBill(this.props.id)
}
render() {
const { mySalaryStore: { mySalaryBill }} = this.props;
return (
<Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}}
width={900}
footer={null}>
<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={ 4 } className="contentItem" style={{
borderRight: "1px solid #f2f2f2",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}>{item.name}</Col>
<Col span={ 4 } className="contentItem"
style={{
borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>{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={ 4 } className="contentItem" style={{
borderRight: "1px solid #f2f2f2",
borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}>{item.name}</Col>
<Col span={ 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"
}}
>{item.salaryItemValue}</Col>
</Col>
))
}
</Row>
</div>
</div>
))
}
</div>
</Modal>
)
}
}

12
pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import { inject, observer } from 'mobx-react';
import { Table, Menu, Dropdown } from 'antd'
import { WeaTable } from 'ecCom'
import moment from 'moment'
@inject('payrollStore')
@observer
@ -39,6 +40,17 @@ export default class SalarySendList extends React.Component {
}
let result = columns.filter(item => item.hide == "false")
result.map(item => {
if(item.dataIndex == "salaryYearMonth") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
}
} else if(item.dataIndex == "lastSendTime") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
}
}
})
return result
.concat([
{

34
pc4mobx/hrmSalary/stores/mySalary.js
View File

@ -1,6 +1,6 @@
import { observable, action, toJS } from 'mobx';
import { message } from 'antd';
import { WeaForm, WeaLogView } from 'comsMobx';
import { WeaForm, WeaLogView, WeaTableNew } from 'comsMobx';
import { WeaLocaleProvider } from 'ecCom';
import moment from 'moment'
@ -8,6 +8,7 @@ import * as API from '../apis/mySalaryBenefits'; // 引入API接口文件
const {LogStore} = WeaLogView;
const getLabel = WeaLocaleProvider.getLabel;
const { TableStore } = WeaTableNew;
export class MySalaryStore {
@observable tableStore = new TableStore(); // new table
@ -19,6 +20,12 @@ export class MySalaryStore {
@observable tabIndex = 0; // tab选中坐标
@observable params = {}; // 搜索条件
// 工资单列表
@observable myBillDataSource = [];
@observable myBillTableStore = new TableStore();
// 工资单详情
@observable mySalaryBill = {};
@action
initParams = () => {
@ -88,5 +95,30 @@ export class MySalaryStore {
this.getTableDatas();
this.showSearchAd = false;
}
// 我的工资单列表
@action
mySalaryBillList = (salaryYearMonth = []) => {
API.mySalaryBillList({salaryYearMonth}).then(res => {
if(res.status) {
this.myBillDataSource = res.data.datas
this.myBillTableStore.getDatas(res.data.dataKey.datas)
} else {
message.error(res.errormsg || "获取失败")
}
})
}
// 我的工资单详情
@action
getMySalaryBill = (salaryInfoId) => {
API.mySalaryBill({salaryInfoId}).then(res => {
if(res.status) {
this.mySalaryBill = res.data
} else {
message.error(res.errormsg || "获取失败")
}
})
}
}