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

feature/2.9.9.2312.01-工资单查看页面重构

This commit is contained in:
黎永顺 2023-12-08 13:39:55 +08:00
parent 676d8d2850
commit 3eb8c47a87
6 changed files with 266 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
pc4mobx/hrmSalary/components/pcTemplate/content.js Normal file
View File

@ -0,0 +1,81 @@
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import moment from "moment";
import { dealTemplate } from "./index";
const getLabel = WeaLocaleProvider.getLabel;
class Content extends Component {
render() {
const { theme, background, tip, tipPosi, itemTypeList, sendTime = new Date() } = this.props;
const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc");
return (
<div className="salary-preview-container">
<div className="edition-center">
<div className="header">
<div className="header-title">{theme || ""}</div>
<div className="header-salary-date-time">{moment(sendTime).format("YYYY-MM-DD HH:mm:ss")}</div>
</div>
<div className="body">
{
background &&
<div className="comp-img"><img src={`${background}`} alt="logo"/></div>
}
{
!onlyOneGrup && tipPosi.toString() === "1" && tip &&
<div className="corporate-culture-text" title={tip}>{tip}</div>
}
<div className="data-detail">
{
showData.map((groupItem, index) => {
// 如果当前组下没有条目 当前组直接不展示。
if (!groupItem) return null;
const { groupId, groupName, items = [] } = groupItem;
return (
<div className="salary-group" key={groupId || index}>
{
groupName ? <div className="group-title">{groupName}</div> : null
}
<div className="group-list">
{
(onlyOneGrup && tipPosi.toString() === "1" && tip) && (<div className="send-tip top">
<div className="label">{getLabel(111, "发放说明")}</div>
<div className="detail">{tip}</div>
</div>)
}
{
items.map((templatItem, index) => {
const { salaryItemValue, name, salaryItemShowName } = templatItem || {};
return <div key={index}
className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
<div className="item-name" title={salaryItemShowName || name}>
<span className="text">{salaryItemShowName || name || ""}</span>
</div>
<div className="item-count">{salaryItemValue || ""}</div>
</div>;
})
}
{
(onlyOneGrup && tipPosi.toString() === "2" && tip) && (<div className="send-tip bottom">
<div className="label">{getLabel(111, "发放说明")}</div>
<div className="detail">{tip}</div>
</div>)
}
</div>
</div>);
})
}
</div>
{
!onlyOneGrup && tipPosi.toString() === "2" && tip &&
<div className="corporate-culture-text" title={tip}>{tip}</div>
}
</div>
</div>
</div>
);
}
}
export default Content;

71
pc4mobx/hrmSalary/components/pcTemplate/index.js
View File

@ -1,82 +1,15 @@
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import moment from "moment";
import Content from "./content";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
class Index extends Component {
render() {
const { theme, background, tip, tipPosi, itemTypeList } = this.props;
const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc");
return (
<div className="pbpc-content">
<div className="weapp-salary-sp weapp-salary-payroll-pc-preview">
<div className="salary-preview-container">
<div className="edition-center">
<div className="header">
<div className="header-title">{theme || ""}</div>
<div className="header-salary-date-time">{moment().format("YYYY-MM-DD HH:mm:ss")}</div>
</div>
<div className="body">
{
background &&
<div className="comp-img"><img src={`${background}`} alt="logo"/></div>
}
{
!onlyOneGrup && tipPosi === "1" && tip &&
<div className="corporate-culture-text" title={tip}>{tip}</div>
}
<div className="data-detail">
{
showData.map((groupItem, index) => {
// 如果当前组下没有条目 当前组直接不展示。
if (!groupItem) return null;
const { groupId, groupName, items = [] } = groupItem;
return (
<div className="salary-group" key={groupId || index}>
{
groupName ? <div className="group-title">{groupName}</div> : null
}
<div className="group-list">
{
(onlyOneGrup && tipPosi === "1" && tip) && (<div className="send-tip top">
<div className="label">{getLabel(111, "发放说明")}</div>
<div className="detail">{tip}</div>
</div>)
}
{
items.map((templatItem, index) => {
const { salaryItemValue, name, salaryItemShowName } = templatItem || {};
return <div key={index}
className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
<div className="item-name" title={salaryItemShowName || name}>
<span className="text">{salaryItemShowName || name || ""}</span>
</div>
<div className="item-count">{salaryItemValue || ""}</div>
</div>;
})
}
{
(onlyOneGrup && tipPosi === "2" && tip) && (<div className="send-tip bottom">
<div className="label">{getLabel(111, "发放说明")}</div>
<div className="detail">{tip}</div>
</div>)
}
</div>
</div>);
})
}
</div>
{
!onlyOneGrup && tipPosi === "2" && tip &&
<div className="corporate-culture-text" title={tip}>{tip}</div>
}
</div>
</div>
</div>
</div>
<div className="weapp-salary-sp weapp-salary-payroll-pc-preview"><Content {...this.props}/></div>
</div>
);
}

276
pc4mobx/hrmSalary/components/pcTemplate/index.less
View File

@ -5,144 +5,6 @@
.weapp-salary-sp {
background: #f6f6f6;
.salary-preview-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
width: 100%;
.edition-center {
max-width: 1000px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-bottom: 32px;
.header {
height: 48px;
padding: 0 16px;
font-size: 12px;
color: #111;
.header-title {
height: 22px;
font-size: 17px;
color: #111;
line-height: 22px;
font-weight: 400;
text-align: center;
}
.header-salary-date-time {
margin-top: 16px;
text-align: center;
height: 14px;
font-size: 14px;
color: #999;
line-height: 14px;
font-weight: 400;
}
}
.body {
width: 100%;
margin-top: 32px;
.comp-img {
text-align: center;
img {
width: 100%;
}
}
.corporate-culture-text {
width: 100%;
margin-top: 16px;
text-align: center;
min-height: 12px;
font-size: 12px;
color: #111;
white-space: pre-wrap;
word-break: break-all;
}
.data-detail {
margin-top: 16px;
.salary-group {
margin-bottom: 16px;
.group-title {
font-size: 14px;
}
.group-list {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
.even {
border-left: 1px solid #e5e5e5;
}
.zero, .first {
border-top: 1px solid #e5e5e5;
}
.list-item {
width: 50%;
display: flex;
justify-content: left;
min-height: 40px;
align-items: center;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
.item-name {
flex-basis: 170px;
box-sizing: border-box;
width: 170px;
padding: 0 16px;
height: 100%;
background: #fbfbfb;
border-right: 1px solid #e5e5e5;
font-size: 12px;
color: #666;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
}
.item-count {
flex-basis: 328px;
padding-left: 16px;
height: 100%;
line-height: 40px;
background: #fff;
font-size: 12px;
color: #111;
word-break: break-all;
}
}
}
}
}
}
}
}
}
.weapp-salary-payroll-pc-preview {
@ -151,3 +13,141 @@
overflow-y: auto;
}
}
.salary-preview-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
width: 100%;
.edition-center {
max-width: 1000px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-bottom: 32px;
.header {
height: 48px;
padding: 0 16px;
font-size: 12px;
color: #111;
.header-title {
height: 22px;
font-size: 17px;
color: #111;
line-height: 22px;
font-weight: 400;
text-align: center;
}
.header-salary-date-time {
margin-top: 16px;
text-align: center;
height: 14px;
font-size: 14px;
color: #999;
line-height: 14px;
font-weight: 400;
}
}
.body {
width: 100%;
margin-top: 32px;
.comp-img {
text-align: center;
img {
width: 100%;
}
}
.corporate-culture-text {
width: 100%;
margin-top: 16px;
text-align: center;
min-height: 12px;
font-size: 12px;
color: #111;
white-space: pre-wrap;
word-break: break-all;
}
.data-detail {
margin-top: 16px;
.salary-group {
margin-bottom: 16px;
.group-title {
font-size: 14px;
}
.group-list {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
.even {
border-left: 1px solid #e5e5e5;
}
.zero, .first {
border-top: 1px solid #e5e5e5;
}
.list-item {
width: 50%;
display: flex;
justify-content: left;
min-height: 40px;
align-items: center;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
.item-name {
flex-basis: 170px;
box-sizing: border-box;
width: 170px;
padding: 0 16px;
height: 100%;
background: #fbfbfb;
border-right: 1px solid #e5e5e5;
font-size: 12px;
color: #666;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
}
.item-count {
flex-basis: 328px;
padding-left: 16px;
height: 100%;
line-height: 40px;
background: #fff;
font-size: 12px;
color: #111;
word-break: break-all;
}
}
}
}
}
}
}
}

9
pc4mobx/hrmSalary/pages/mySalary/index.less
View File

@ -20,3 +20,12 @@
}
}
}
.weapp-salary-my-salary-view-payroll {
padding: 32px 0;
height: 100vh;
overflow-y: auto;
}
.page {
}

54
pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
View File

@ -9,10 +9,12 @@ import { inject, observer } from "mobx-react";
import { Button, message, Modal } from "antd";
import { WeaLocaleProvider } from "ecCom";
import Authority from "./authority";
import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
import Content from "../../components/pcTemplate/content";
// import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
import CaptchaModal from "../../components/captchaModal";
import "../payroll/templatePreview/index.less";
import "./index.less";
// import "../payroll/templatePreview/index.less";
const { getLabel } = WeaLocaleProvider;
@ -57,7 +59,7 @@ class MySalaryView extends Component {
handleGoFeedback = () => {
Modal.confirm({
title: getLabel(131329, "信息确认"),
content: getLabel(111, "请确认薪资信息是有误，进行反馈并发起反馈流程。"),
content: getLabel(544271, "请确认薪资信息是有误，进行反馈并发起反馈流程。"),
onOk: () => {
const { params: { salaryInfoId }, mySalaryStore: { getMySalaryBill } } = this.props;
feedBackSalaryBill({ salaryInfoId }).then(({ status, errorMsg }) => {
@ -84,29 +86,37 @@ class MySalaryView extends Component {
if (_.isEmpty(mySalaryStore)) {
return <div></div>;
}
const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation;
const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups;
const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate;
const { salaryTemplate, salaryGroups, employeeInformation, sendTime } = mySalaryStore;
const salaryProps = {
theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
itemTypeList: [employeeInformation, ...salaryGroups]
};
console.log(mySalaryStore);
// const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation;
// const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups;
// const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate;
return (
<React.Fragment>
<Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
store={this.props.mySalaryStore}>
<div style={{ height: "100%", overflow: "auto" }}>
<div className="templatePreview">
<ComputerTemplate
isMsgPreview
salaryTemplateShowSet={salaryTemplateShowSet ? JSON.stringify(salaryTemplateShowSet) : []}
salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
>
{
(!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</ComputerTemplate>
</div>
<div className="weapp-salary-my-salary-view-payroll page">
<Content {...salaryProps}/>
{/*<div className="templatePreview">*/}
{/* <ComputerTemplate*/}
{/* isMsgPreview*/}
{/* salaryTemplateShowSet={salaryTemplateShowSet ? JSON.stringify(salaryTemplateShowSet) : []}*/}
{/* salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}*/}
{/* >*/}
{/* {*/}
{/* (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) &&*/}
{/* <ConfirmBtns*/}
{/* confirmSalaryBill={this.confirmSalaryBill}*/}
{/* goFeedback={this.handleGoFeedback}*/}
{/* />*/}
{/* }*/}
{/* </ComputerTemplate>*/}
{/*</div>*/}
</div>
</Authority>
<CaptchaModal

8
pc4mobx/hrmSalary/pages/mySalaryMobile/index.js
View File

@ -39,7 +39,7 @@ class Index extends Component {
mySalaryMobile.removeEventListener("scroll", this.handleScroll, true);
}
getMySalaryBillList = () => {
getMySalaryBillList = (type) => {
const { salaryYearMonth, pageInfo } = this.state;
this.setState({ loading: true });
mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => {
@ -48,14 +48,13 @@ class Index extends Component {
const { datas: dataSource, pageInfo: pageResult } = data;
const { pageNum: current, pageSize, total } = pageResult;
this.setState({
dataSource: [...this.state.dataSource, ...dataSource],
dataSource: type ? dataSource : [...this.state.dataSource, ...dataSource],
pageInfo: { ...pageInfo, current, pageSize, total }
}, () => this.setState({ isMore: this.state.dataSource.length < total }));
}
}).catch(() => this.setState({ loading: false }));
};
handleLoadMore = () => {
// 为测试效果临时使用 message
const { pageInfo, isMore } = this.state;
if (!isMore) return;
const { current } = pageInfo;
@ -71,8 +70,9 @@ class Index extends Component {
const { salaryYearMonth } = this.state;
const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
this.setState({
pageInfo: { ...this.state.pageInfo, current: 1 },
salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
}, () => this.getMySalaryBillList());
}, () => this.getMySalaryBillList(true));
};
render() {