116 lines
4.2 KiB
TypeScript
116 lines
4.2 KiB
TypeScript
/*
|
||
* Author: 黎永顺
|
||
* name: 薪酬系统-线下对比
|
||
* Description:
|
||
* Date: 2023/11/28
|
||
*/
|
||
import React, { FC, useEffect, useState } from "react";
|
||
import { Table } from "antd";
|
||
import { exceptStr, paginationFun } from "@/utils/common";
|
||
import styles from "@/pages/atdTable/components/index.less";
|
||
import { defaultPage, IPage } from "@/common/types";
|
||
import cs from "classnames";
|
||
|
||
const OCTable: FC = (props) => {
|
||
const [columns, setColumns] = useState<Array<any>>([]);
|
||
const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
|
||
const [dataSource, setDataSource] = useState<Array<any>>([]);
|
||
const [i18n, setI18n] = useState<any>({});
|
||
|
||
useEffect(() => {
|
||
window.parent.postMessage({ type: "init" }, "*");
|
||
window.addEventListener("message", receiveMessageFromIndex, false);
|
||
return () => {
|
||
window.removeEventListener("message", receiveMessageFromIndex, false);
|
||
};
|
||
}, []);
|
||
const receiveMessageFromIndex = (event: any) => {
|
||
const data: any = exceptStr(event.data);
|
||
if (!_.isEmpty(data)) {
|
||
const { columns, dataSource, pageInfo, i18n: i18nRes = {} } = data;
|
||
const { current: pageNum, pageSize: size, total } = pageInfo;
|
||
setDataSource(dataSource);
|
||
setI18n(i18nRes);
|
||
setPageInfo({ pageNum, size, total });
|
||
setColumns(convertColumns(columns, i18nRes));
|
||
}
|
||
};
|
||
const convertColumns: any = (cols: any[], lanObj: any) => {
|
||
return _.map(cols, item => {
|
||
if (_.isNaN(parseInt(item.dataIndex))) {
|
||
return { ...item };
|
||
} else {
|
||
return {
|
||
...item, children: convertColumns(item.children, lanObj),
|
||
render: (__: any, record: any) => {
|
||
const formulaDesc = record["customParameters"][`${item["dataIndex"]}`];
|
||
const showDifference = record[`${item["dataIndex"]}_type`] === "number";
|
||
const { acctResultValue, excelResultValue } = record[item["dataIndex"]] || {};
|
||
return <div className={styles["comparison-column-item-container"]}
|
||
onClick={() => {
|
||
window.parent.postMessage(
|
||
{
|
||
type: "turn",
|
||
payload: { id: "FORMULA", params: { formulaDesc } }
|
||
},
|
||
"*"
|
||
);
|
||
}}>
|
||
<div className={styles["comparison-single-row"]}>
|
||
<span>{lanObj["系统值"]}：</span>
|
||
<span>{acctResultValue}</span>
|
||
</div>
|
||
<div className={styles["comparison-single-row"]}>
|
||
<span>{lanObj["线下值"]}：</span>
|
||
<span>{excelResultValue}</span>
|
||
</div>
|
||
{
|
||
showDifference && !!parseInt(calculateDifference(acctResultValue, excelResultValue || 0)) &&
|
||
<div className={cs(styles["danger"], styles["comparison-single-row"])}>
|
||
<span>{lanObj["差值"]}：</span>
|
||
<span>{calculateDifference(acctResultValue, excelResultValue || 0)}</span>
|
||
</div>
|
||
}
|
||
</div>;
|
||
}
|
||
};
|
||
}
|
||
});
|
||
};
|
||
// 计算差值
|
||
const calculateDifference = (systemValue: string, excelValue: string) => {
|
||
if (_.isNil(systemValue) || _.isNil(excelValue)) return "";
|
||
const systemNum = Number(systemValue);
|
||
const excelNum = Number(excelValue);
|
||
return (systemNum - excelNum).toFixed(2);
|
||
};
|
||
|
||
const sizeChange = (pageobj: IPage) => {
|
||
};
|
||
const onChange = (pageobj: IPage) => {
|
||
const { pageNum, size: pageSize } = pageobj;
|
||
setPageInfo((prevState) => {
|
||
const { size } = prevState;
|
||
window.parent.postMessage(
|
||
{
|
||
type: "turn",
|
||
payload: { id: "PAGEINFO", params: { ...pageInfo, pageNum: size === pageSize ? pageNum : 1, size: pageSize } }
|
||
},
|
||
"*"
|
||
);
|
||
return { ...pageInfo, current: size === pageSize ? pageNum : 1, size: pageSize };
|
||
});
|
||
};
|
||
return <Table
|
||
rowKey="id" className={styles.tableWrapper}
|
||
columns={columns} dataSource={dataSource} bordered size="small"
|
||
scroll={{ x: 1200, y: `calc(100vh - 165px)` }}
|
||
pagination={{
|
||
...paginationFun(pageInfo, sizeChange, onChange, i18n),
|
||
size: "default"
|
||
}}
|
||
/>;
|
||
};
|
||
|
||
export default OCTable;
|