feature/业务线管理
This commit is contained in:
parent
ca12e057b9
commit
0e65d086dc
|
|
@ -1,136 +0,0 @@
|
||||||
.pbmc_body {
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
background: #f6f6f6;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
.weapp-salary-payroll-mobile-preview {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
padding: 0 16px;
|
|
||||||
font-size: 19px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time {
|
|
||||||
padding: 0 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.corporate-culture-text {
|
|
||||||
text-align: left;
|
|
||||||
color: #111;
|
|
||||||
padding: 8px 16px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.salary-detail-table-container {
|
|
||||||
padding-top: 8px;
|
|
||||||
|
|
||||||
.salary-group {
|
|
||||||
border-top: 1px solid #f2f2f2;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.group-title {
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 45px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border-bottom: 1px solid #f2f2f2;
|
|
||||||
font-weight: bolder;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-list {
|
|
||||||
.list-item {
|
|
||||||
display: flex;
|
|
||||||
min-height: 45px;
|
|
||||||
border-bottom: 1px solid #f2f2f2;
|
|
||||||
width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.item-name {
|
|
||||||
padding: 8px 16px;
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #fbfbfb;
|
|
||||||
border-right: 1px solid #f2f2f2;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-count {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbmc_footer {
|
|
||||||
position: relative;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
.pbmcf_indicator {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 16px;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translateX(-50%);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 110px;
|
|
||||||
height: 4px;
|
|
||||||
background-color: #ebebeb;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,119 +0,0 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
||||||
import styles from "./index.less";
|
|
||||||
import { Util } from "@/utils";
|
|
||||||
import cs from "classnames";
|
|
||||||
import API from "@/api";
|
|
||||||
|
|
||||||
interface OwnProps {}
|
|
||||||
|
|
||||||
type Props = OwnProps;
|
|
||||||
|
|
||||||
const MPayroll: React.FC<Props> = (props) => {
|
|
||||||
const [mySalaryBillData, setMySalaryBillData] = useState<any>({});
|
|
||||||
useEffect(() => {
|
|
||||||
getMySalaryBill();
|
|
||||||
return () => {};
|
|
||||||
}, []);
|
|
||||||
const getMySalaryBill = useCallback(() => {
|
|
||||||
API.CalculateService.getMySalaryBill(Util.getUrlData("salaryInfoId")).then(({ data: res }) => {
|
|
||||||
const { data, status } = res || {};
|
|
||||||
if (status) setMySalaryBillData(data);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
const dealTemplate = (itemTypeList: any, type: string) => {
|
|
||||||
let cloneItemTypeList = _.cloneDeep(itemTypeList);
|
|
||||||
let showData: any = [],
|
|
||||||
onlyOneGrup = false;
|
|
||||||
cloneItemTypeList.forEach((group: any) => {
|
|
||||||
const { items, groupName, groupId } = group;
|
|
||||||
if (items.length !== 0) {
|
|
||||||
items.forEach((item: any) => {
|
|
||||||
item.salaryItemValue = !_.isNil(item.salaryItemValue) ? item.salaryItemValue : "";
|
|
||||||
});
|
|
||||||
if (items.length % 2 && type === "pc") items.push({});
|
|
||||||
showData.push({ groupId, groupName, items });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (cloneItemTypeList.length === 1) {
|
|
||||||
onlyOneGrup = true;
|
|
||||||
cloneItemTypeList[0].name = "";
|
|
||||||
}
|
|
||||||
return { onlyOneGrup, showData };
|
|
||||||
};
|
|
||||||
const salaryTemplate = useMemo(() => {
|
|
||||||
return !_.isEmpty(mySalaryBillData) ? mySalaryBillData?.salaryTemplate : {};
|
|
||||||
}, [mySalaryBillData]);
|
|
||||||
const itemTypeList = useMemo(() => {
|
|
||||||
return !_.isEmpty(mySalaryBillData) ? [mySalaryBillData?.employeeInformation, ...mySalaryBillData?.salaryGroups] : [];
|
|
||||||
}, [mySalaryBillData]);
|
|
||||||
const payrollData: any = useMemo(() => {
|
|
||||||
return !_.isEmpty(itemTypeList)
|
|
||||||
? dealTemplate(
|
|
||||||
_.filter(itemTypeList, (o) => !!o),
|
|
||||||
"mobile"
|
|
||||||
)
|
|
||||||
: {};
|
|
||||||
}, [mySalaryBillData, itemTypeList]);
|
|
||||||
console.log(payrollData);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className={styles.pbmc_body}>
|
|
||||||
<div className={styles["weapp-salary-payroll-mobile-preview"]}>
|
|
||||||
<div className={styles["bill-container"]}>
|
|
||||||
<div className={styles["bill-info-header"]}>
|
|
||||||
<div className={styles["title"]}>{salaryTemplate?.theme || ""}</div>
|
|
||||||
</div>
|
|
||||||
{!payrollData?.onlyOneGrup && salaryTemplate?.textContentPosition == 1 && salaryTemplate.textContent && (
|
|
||||||
<div className={cs(styles["corporate-culture-text"], styles["top"])} title={salaryTemplate.textContent} dangerouslySetInnerHTML={{ __html: salaryTemplate.textContent }} />
|
|
||||||
)}
|
|
||||||
<div className={styles["salary-detail-table-container"]}>
|
|
||||||
{!_.isEmpty(payrollData?.showData) &&
|
|
||||||
payrollData?.showData.map((groupItem: any, index: number) => {
|
|
||||||
if (!groupItem) return null;
|
|
||||||
const { groupId, groupName, items = [] } = groupItem;
|
|
||||||
return (
|
|
||||||
<div className={styles["salary-group"]} key={groupId || index}>
|
|
||||||
{groupName ? <div className={styles["group-title"]}>{groupName}</div> : null}
|
|
||||||
<div className={styles["group-list"]}>
|
|
||||||
{payrollData?.onlyOneGrup && salaryTemplate?.textContentPosition == "1" && salaryTemplate.textContent && (
|
|
||||||
<div className={cs(styles["list-item"], styles["top"])}>
|
|
||||||
<div>发放说明</div>
|
|
||||||
<div>{salaryTemplate.textContent}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{items.map((templatItem: any, index: number) => {
|
|
||||||
const { salaryItemValue, name, salaryItemShowName } = templatItem || {};
|
|
||||||
return (
|
|
||||||
<div className={styles["list-item"]} key={index}>
|
|
||||||
<div className={styles["item-name"]} title={salaryItemShowName || name}>
|
|
||||||
<span>{salaryItemShowName || name || ""}</span>
|
|
||||||
</div>
|
|
||||||
<div className={styles["item-count"]}>{salaryItemValue}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{payrollData?.onlyOneGrup && salaryTemplate?.textContentPosition == "2" && salaryTemplate.textContent && (
|
|
||||||
<div className={styles["list-item"]}>
|
|
||||||
<div>发放说明</div>
|
|
||||||
<div>{salaryTemplate.textContent}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{!payrollData?.onlyOneGrup && salaryTemplate?.textContentPosition == 2 && salaryTemplate.textContent && (
|
|
||||||
<div className={cs(styles["corporate-culture-text"], styles["footer"])} title={salaryTemplate.textContent} dangerouslySetInnerHTML={{ __html: salaryTemplate.textContent }} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.pbmc_footer}>
|
|
||||||
<div className={styles.pbmcf_indicator}></div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MPayroll;
|
|
||||||
Loading…
Reference in New Issue