You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
salary-management-oneself/src/pages/custom-project/dacheng/salaryDetailTable.tsx

108 lines
3.9 KiB
TypeScript

1 year ago
/*
*
* -
* @Author:
* @Date: 2024/5/24
* @Wechat:
* @Email: 971387674@qq.com
* @description:
*/
import React, { FunctionComponent, useEffect, useState } from "react";
import { exceptStr, paginationAction } from "@/utils/common";
import { PaginationData } from "rc-pagination";
import { Table, Typography } from "antd";
import SumTotal from "./sumTotal";
import styles from "../index.less";
const { Text } = Typography;
export type extraType = {
selectedRowKeys: React.Key[];
i18n: Partial<{}>;
sumRow: Partial<{}>;
scrollHeight: number;
showTotalCell: boolean
}
interface OwnProps {
}
type Props = OwnProps;
const salaryDetailTable: FunctionComponent<Props> = (props) => {
const [columns, setColumns] = useState<Array<any>>([]);
const [dataSource, setDataSource] = useState<Array<any>>([]);
const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
const [parent, setParent] = useState<Partial<extraType>>({});//参数
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 {
i18n, columns, dataSource, pageInfo, showTotalCell, tableScrollHeight: scrollHeight, selectedRowKeys,
sumRow
} = data;
setColumns(_.map(columns, item => ({
...item, render: (text: string, record: any) => {
if (record.showRed) {
return (<Text type="danger">{text}</Text>);
} else {
return (<Text>{text}</Text>);
}
}
})));
setDataSource(dataSource);
setPageInfo(pageInfo);
setParent({ i18n, showTotalCell, scrollHeight, selectedRowKeys, sumRow });
}
};
const onChange = (current: number, pageSize: number) => {
setPageInfo((prevState) => {
const { pageSize: size } = prevState;
window.parent.postMessage(
{
type: "turn",
payload: { id: "PAGEINFO", params: { ...pageInfo, current: size === pageSize ? current : 1, pageSize } }
},
"*"
);
return { ...pageInfo, current: size === pageSize ? current : 1, pageSize };
});
};
const rowSelection = {
columnWidth: 60, selectedRowKeys: parent.selectedRowKeys,
renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => (record?.showCheck === "1" ? originNode : null),
onChange: (selectedRowKeys: React.Key[]) => {
setParent({ ...parent, selectedRowKeys: selectedRowKeys });
window.parent.postMessage(
{ type: "turn", payload: { id: "CHECKBOX", params: { selectedRowKeys } } }, "*"
);
}
};
return (<Table rowKey="id" className={styles.DC_table} dataSource={dataSource}
size="small" columns={columns} rowSelection={rowSelection}
scroll={{ x: 1200, y: `calc(100vh - ${parent?.scrollHeight || 109}px)` }}
pagination={!_.isNil(pageInfo) ? {
...paginationAction(pageInfo, parent.i18n, onChange),
size: "default"
} : false}
expandable={{ expandedRowKeys: _.map(dataSource, it => it.id), expandIcon: () => null }}
summary={() => (!parent.showTotalCell ? <></> :
<Table.Summary fixed={true}>
<Table.Summary.Row>
<Table.Summary.Cell index={0}><Text
type="danger">{parent["i18n"]?.["总计"]}</Text></Table.Summary.Cell>
<SumTotal columns={columns} sumRow={parent.sumRow}/>
</Table.Summary.Row>
</Table.Summary>
)}
/>);
};
export default salaryDetailTable;