112 lines
4.6 KiB
JavaScript
112 lines
4.6 KiB
JavaScript
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
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, "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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|
|
|
|
export const dealTemplate = (itemTypeList, type) => {
|
|
let cloneItemTypeList = _.cloneDeep(itemTypeList);
|
|
let showData = [], onlyOneGrup = false;
|
|
cloneItemTypeList.forEach((group) => {
|
|
const { items, groupName, groupId } = group;
|
|
if (items.length !== 0) {
|
|
items.forEach((item) => {
|
|
item.salaryItemValue = "100";
|
|
});
|
|
if (items.length % 2 && type === "pc") items.push({});
|
|
// 未分类不展示标题
|
|
if (!groupId.includes("222222222222222222")) {
|
|
showData.push({ groupId, groupName, items });
|
|
} else {
|
|
showData.push({ items });
|
|
}
|
|
}
|
|
});
|
|
if (cloneItemTypeList.length === 1) {
|
|
onlyOneGrup = true;
|
|
// 只有一个分组的时候不展示分组名
|
|
cloneItemTypeList[0].name = "";
|
|
}
|
|
return { onlyOneGrup, showData };
|
|
};
|