Merge branch 'feature/2.9.9.2312.01-工资单查看页面重构' into release/2.9.10.2312.02

This commit is contained in:
黎永顺 2023-12-29 10:08:36 +08:00
commit 6a7220ffc2
10 changed files with 346 additions and 303 deletions

View File

@ -14,11 +14,11 @@ const getLabel = WeaLocaleProvider.getLabel;
class Index extends Component {
render() {
const { theme, background, tip, tipPosi, itemTypeList } = this.props;
const { theme, background, tip, tipPosi, itemTypeList, title } = this.props;
const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "mobile");
return (
<React.Fragment>
<div className="pbmc-head">{getLabel(111, "薪酬预览")}</div>
<div className="pbmc-head">{title || getLabel(111, "薪酬预览")}</div>
<div className="pbmc-body">
<div className="weapp-salary-payroll-mobile-preview">
<div className="bill-container">
@ -57,7 +57,7 @@ class Index extends Component {
return <div className="list-item" key={index}>
<div className="item-name" title={salaryItemShowName || name}><span
className="text">{salaryItemShowName || name || ""}</span></div>
<div className="item-count">{salaryItemValue || "100"}</div>
<div className="item-count">{salaryItemValue}</div>
</div>;
})
}
@ -76,6 +76,7 @@ class Index extends Component {
!onlyOneGrup && tipPosi === "2" && tip &&
<div className="corporate-culture-text footer" title={tip}>{tip}</div>
}
{this.props.children}
</div>
</div>
</div>

View File

@ -20,6 +20,18 @@
.bill-container {
background: #f6f6f6;
.space {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 16px;
.ant-btn {
margin-right: 16px;
}
}
.bill-info-header {
padding-top: 16px;

View File

@ -0,0 +1,82 @@
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>
{this.props.children}
</div>
);
}
}
export default Content;

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>
);
}
@ -91,7 +24,7 @@ export const dealTemplate = (itemTypeList, type) => {
const { items, groupName, groupId } = group;
if (items.length !== 0) {
items.forEach((item) => {
item.salaryItemValue = "100";
item.salaryItemValue = !_.isNil(item.salaryItemValue) ? item.salaryItemValue : "100";
});
if (items.length % 2 && type === "pc") items.push({});
// 未分类不展示标题

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;
}
}
}
}
}
}
}
}

View File

@ -1,11 +1,10 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { getQueryString } from "../../util/url";
import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider } from "ecCom";
import { Button, message, Modal } from "antd";
import Authority from "../mySalary/authority";
import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
import PhoneTemplate from "../payroll/templatePreview/phoneTemplate";
import "../payroll/templatePreview/index.less";
import * as API from "../../apis/mySalaryBenefits";
import { salaryBillGetToken } from "../../apis/mySalaryBenefits";
@ -13,7 +12,9 @@ import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../a
import CaptchaModal from "../../components/captchaModal";
import PassSetDialog from "./passSetDialog";
import { ConfirmBtns } from "../mySalary/mySalaryView";
import "./index.less";
import Content from "../../components/pcTemplate/content";
import MobileTemplate from "../../components/mobileTemplate";
import "../mySalary/index.less";
const getLabel = WeaLocaleProvider.getLabel;
@ -174,76 +175,68 @@ export default class MobilePayroll extends React.Component {
const { mySalaryStore: { clearLoading, pwdForm } } = this.props;
const { mySalaryBillData, visible, captchaVisible, notSetting, pwdSetVisible } = this.state;
const type = getQueryString("type");
const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {};
const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : [];
if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return <div>
<WeaDialog
onCancel={() => this.setState({ visible: false }, () => clearLoading())}
title="请输入二次验证密码" visible={visible} initLoadCss
className="verifyWrapper"
hasScroll buttons={[
<Button type="primary" size="small" onClick={this.doSecondAuth}>确定</Button>
]}
>
<WeaError tipPosition="bottom" ref="weaError" error="此项必填">
<WeaInput value={this.state.authCode} type="password" viewAttr={3}
onChange={authCode => this.setState({ authCode })}/>
</WeaError>
{
notSetting &&
<div style={{ clear: "both", paddingTop: 10 }}>
{getLabel("514970", "您还未设置二次验证密码,点击")}
<a href="javascript:void(0);"
onClick={() => this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")}</a>
</div>
}
</WeaDialog>
<PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
</div>;
const {
salaryTemplate, salaryGroups, employeeInformation,
sendTime, confirmStatus
} = toJS(this.props.mySalaryStore.mySalaryBill);
const salaryProps = {
theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
itemTypeList: [employeeInformation, ...salaryGroups]
};
return (
<div className="computerTemplate" style={{
height: "100%",
overflowY: "hidden",
paddingBottom: "20px"
}}>
<WeaDialog
onCancel={() => this.setState({ visible: false }, () => clearLoading())}
title="请输入二次验证密码" visible={visible} initLoadCss
className="verifyWrapper"
hasScroll buttons={[
<Button type="primary" size="small" onClick={this.doSecondAuth}>确定</Button>
]}
>
<WeaError tipPosition="bottom" ref="weaError" error="此项必填">
<WeaInput value={this.state.authCode} type="password" viewAttr={3}
onChange={authCode => this.setState({ authCode })}/>
</WeaError>
{
notSetting &&
<div style={{ clear: "both", paddingTop: 10 }}>
{getLabel("514970", "您还未设置二次验证密码,点击")}
<a href="javascript:void(0);"
onClick={() => this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")}</a>
</div>
}
</WeaDialog>
<PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
<React.Fragment>
{
type === "phone" ?
<Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
store={this.props.mySalaryStore}>
<div className="templatePreview">
<div className="contentWrapper">
<PhoneTemplate
isPreview
salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
>
{
(!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</PhoneTemplate>
</div>
</div>
<MobileTemplate {...salaryProps} title={getLabel(111, "工资单查看")}>
{
(_.isNil(confirmStatus) || confirmStatus === "0") &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</MobileTemplate>
</Authority>
:
<Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
store={this.props.mySalaryStore}>
<div className="templatePreview">
<div className="contentWrapper">
<ComputerTemplate
salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : JSON.stringify([])}
>
{
(!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</ComputerTemplate>
</div>
<div className="weapp-salary-my-salary-view-payroll">
<Content {...salaryProps}>
{
(_.isNil(confirmStatus) || confirmStatus === "0") &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</Content>
</div>
</Authority>
}
@ -252,7 +245,7 @@ export default class MobilePayroll extends React.Component {
onCancel={() => this.setState({ captchaVisible: false })}
onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
/>
</div>
</React.Fragment>
);
}
}

View File

@ -20,3 +20,25 @@
}
}
}
.weapp-salary-my-salary-view-payroll {
padding: 32px 0;
height: 100vh;
overflow-y: auto;
background: #f6f6f6;
.space {
width: 100%;
max-width: 1000px;
display: flex;
align-items: center;
justify-content: flex-end;
.ant-btn {
margin-right: 16px;
}
}
}
.page {
}

View File

@ -9,10 +9,10 @@ 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 { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
import CaptchaModal from "../../components/captchaModal";
import "../payroll/templatePreview/index.less";
import "./index.less";
const { getLabel } = WeaLocaleProvider;
@ -57,7 +57,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 +84,26 @@ 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]
};
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">
<Content {...salaryProps}>
{
(_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0") &&
<ConfirmBtns
confirmSalaryBill={this.confirmSalaryBill}
goFeedback={this.handleGoFeedback}
/>
}
</Content>
</div>
</Authority>
<CaptchaModal

View File

@ -27,7 +27,10 @@ class Index extends Component {
<span>{getLabel(111, "发放时间")}</span>
<span>{moment(it.sendTime).format("YYYY-MM")}</span>
</div>
<a href="javascript:void(0);">{`${getLabel(33564, "查看")}>`}</a>
<a href={`/spa/hrmSalary/static/index.html#/main/hrmSalary/mobilepayroll?id=${it.id}&type=phone`}
target="_blank">
{`${getLabel(33564, "查看")}>`}
</a>
</li>;
})
}

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() {