91 lines
3.7 KiB
JavaScript
91 lines
3.7 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 移动端-工资单预览
|
|
* Description:
|
|
* Date: 2023/10/19
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import { dealTemplate } from "../pcTemplate";
|
|
import moment from "moment";
|
|
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, "mobile");
|
|
return (
|
|
<React.Fragment>
|
|
<div className="pbmc-head">{getLabel(111, "薪酬预览")}</div>
|
|
<div className="pbmc-body">
|
|
<div className="weapp-salary-payroll-mobile-preview">
|
|
<div className="bill-container">
|
|
<div className="bill-info-header">
|
|
<div className="title">{theme || ""}</div>
|
|
<div className="time">{moment().format("YYYY-MM-DD HH:mm:ss")}</div>
|
|
{
|
|
background &&
|
|
<div className="img"><img src={`${background}`} alt="logo"/></div>
|
|
}
|
|
</div>
|
|
{
|
|
!onlyOneGrup && tipPosi === "1" && tip &&
|
|
<div className="corporate-culture-text top" title={tip}>{tip}</div>
|
|
}
|
|
<div className="salary-detail-table-container">
|
|
{
|
|
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="list-item 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 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>;
|
|
})
|
|
}
|
|
{
|
|
(onlyOneGrup && tipPosi === "2" && tip) && (<div className="list-item 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 footer" title={tip}>{tip}</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pbmc-footer">
|
|
<div className="pbmcf-indicator"></div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|