Merge branch 'feature/2.9.9.2312.01-工资单查看页面重构' into release/2.9.10.2312.02
This commit is contained in:
commit
6a7220ffc2
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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({});
|
||||
// 未分类不展示标题
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue