泛微薪资核算iframe表格
parent
6ec6ab2962
commit
5dfcbe1af9
@ -0,0 +1,95 @@
|
|||||||
|
/*
|
||||||
|
* Author: 黎永顺
|
||||||
|
* name: 社保福利台账总览-穿透列表
|
||||||
|
* Description:
|
||||||
|
* Date: 2023/10/17
|
||||||
|
*/
|
||||||
|
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||||
|
import { Table, Typography } from "antd";
|
||||||
|
import styles from "@/pages/atdTable/components/index.less";
|
||||||
|
import { exceptStr, paginationFun } from "@/utils/common";
|
||||||
|
import { IPage } from "@/common/types";
|
||||||
|
import { ColumnType } from "antd/lib/table";
|
||||||
|
import type { PaginationData } from "rc-pagination";
|
||||||
|
import WelfareFixedTotal from "@/pages/welfareLedgerTable/welfareFixedTotal";
|
||||||
|
|
||||||
|
interface OwnProps {
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = OwnProps;
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
const Index: FunctionComponent<Props> = (props) => {
|
||||||
|
const [columns, setColumns] = useState<ColumnType<any>[]>([]);
|
||||||
|
const [dataSource, setDataSource] = useState<any[]>([]);
|
||||||
|
const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
|
||||||
|
const [sumRowlistUrl, setSumRowlistUrl] = useState<string>("");
|
||||||
|
const [payload, setPayload] = useState<string>("");
|
||||||
|
|
||||||
|
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, sumRowlistUrl = "", payload = {}
|
||||||
|
} = data;
|
||||||
|
setSumRowlistUrl(sumRowlistUrl);
|
||||||
|
setPayload(payload);
|
||||||
|
setPageInfo(pageInfo);
|
||||||
|
setDataSource(dataSource);
|
||||||
|
setColumns(_.map(columns, it => {
|
||||||
|
if (it.dataIndex === "userName") {
|
||||||
|
return {
|
||||||
|
...it, width: 200, title: (
|
||||||
|
<span dangerouslySetInnerHTML={{ __html: it.title }}></span>
|
||||||
|
), fixed: "left"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...it, width: 200, title: (
|
||||||
|
<span dangerouslySetInnerHTML={{ __html: it.title }}></span>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const sizeChange = (pageobj: IPage) => {
|
||||||
|
};
|
||||||
|
const onChange = (pageobj: IPage) => {
|
||||||
|
setPageInfo(() => {
|
||||||
|
window.parent.postMessage(
|
||||||
|
{
|
||||||
|
type: "turn",
|
||||||
|
payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
return { ...pageInfo, ...pageobj };
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (<Table
|
||||||
|
rowKey="id" size="small" className={styles.tableWrapper}
|
||||||
|
columns={columns} dataSource={dataSource}
|
||||||
|
scroll={{ x: 1200, y: `calc(100vh - 120px)` }}
|
||||||
|
pagination={{
|
||||||
|
...paginationFun(pageInfo, sizeChange, onChange),
|
||||||
|
size: "default"
|
||||||
|
}}
|
||||||
|
summary={() => (
|
||||||
|
<Table.Summary fixed>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={0} align="center"><Text type="danger">总计</Text></Table.Summary.Cell>
|
||||||
|
<WelfareFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload}/>
|
||||||
|
</Table.Summary.Row>
|
||||||
|
</Table.Summary>
|
||||||
|
)}
|
||||||
|
/>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Index;
|
@ -0,0 +1,55 @@
|
|||||||
|
/*
|
||||||
|
* Author: 黎永顺
|
||||||
|
* name:社保福利台账总览-总计行
|
||||||
|
* Description:
|
||||||
|
* Date: 2023/10/17
|
||||||
|
*/
|
||||||
|
import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { ColumnType } from "antd/lib/table";
|
||||||
|
import { Spin, Table, Typography } from "antd";
|
||||||
|
import API from "@/api";
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
interface OwnProps {
|
||||||
|
columns: ColumnType<any>[];
|
||||||
|
dataSourceUrl: string;
|
||||||
|
payload: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = OwnProps;
|
||||||
|
|
||||||
|
const welfareFixedTotal: FunctionComponent<Props> = (props) => {
|
||||||
|
const [sumRow, setSumRow] = useState<Partial<{}>>({});//薪资核算总计行数据
|
||||||
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
const columns = useMemo(() => {
|
||||||
|
return !_.isEmpty(props.columns) ? props.columns : [];
|
||||||
|
}, [props.columns]);
|
||||||
|
const dataSourceUrl = useCallback((payload) => {
|
||||||
|
return API.CalculateService.getSyMixSum(payload);
|
||||||
|
}, [props.dataSourceUrl]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!_.isEmpty(props.payload)) {
|
||||||
|
setLoading(true);
|
||||||
|
dataSourceUrl(props.payload).then(({ data }) => {
|
||||||
|
setLoading(false);
|
||||||
|
const { data: result, status } = data;
|
||||||
|
if (status) setSumRow(result.sumRow || {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [props.payload]);
|
||||||
|
return (<>
|
||||||
|
{
|
||||||
|
_.map(columns.slice(1), (item: any, index) => {
|
||||||
|
return <Table.Summary.Cell index={index + 1} key={index + 1}>
|
||||||
|
{
|
||||||
|
loading ? <Spin spinning={loading} size="small"></Spin> :
|
||||||
|
<Text type="danger">{sumRow[item.dataIndex] || "-"}</Text>
|
||||||
|
}
|
||||||
|
</Table.Summary.Cell>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default welfareFixedTotal;
|
Loading…
Reference in New Issue