Merge branch 'master' into feature/2.9.42310.01-薪资项目拓扑图
commit
20c9897d06
@ -0,0 +1,107 @@
|
|||||||
|
/*
|
||||||
|
* 大成二开项目
|
||||||
|
* 薪酬统计报表-薪资明细表格
|
||||||
|
* @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;
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
/*
|
||||||
|
*
|
||||||
|
* 合计行
|
||||||
|
* @Author: 黎永顺
|
||||||
|
* @Date: 2024/5/24
|
||||||
|
* @Wechat:
|
||||||
|
* @Email: 971387674@qq.com
|
||||||
|
* @description:
|
||||||
|
*/
|
||||||
|
import React, { FunctionComponent } from "react";
|
||||||
|
import { Table, Typography } from "antd";
|
||||||
|
import { ColumnType } from "antd/lib/table";
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
interface OwnProps {
|
||||||
|
columns: ColumnType<any>[];
|
||||||
|
sumRow: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = OwnProps;
|
||||||
|
|
||||||
|
const sumTotal: FunctionComponent<Props> = (props) => {
|
||||||
|
return (<>
|
||||||
|
{
|
||||||
|
_.map(props.columns, (item: any, index) => {
|
||||||
|
return <Table.Summary.Cell index={index + 1} key={index + 1}>
|
||||||
|
<Text>{!_.isEmpty(props?.sumRow) ? props?.sumRow[item.dataIndex] : "-"}</Text>
|
||||||
|
</Table.Summary.Cell>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default sumTotal;
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
.DC_table {
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
:global {
|
||||||
|
|
||||||
|
.ant-table-tbody > tr.ant-table-row:hover > td {
|
||||||
|
background: #e9f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anticon-more {
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-spin-container {
|
||||||
|
.ant-pagination {
|
||||||
|
font-size: 12px;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
.ant-pagination-item, .ant-pagination-prev, .ant-pagination-next {
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
& > button {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-pagination-item-active {
|
||||||
|
background: var(--ant-primary-color);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-pagination-options {
|
||||||
|
.ant-select {
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.ant-select-selector {
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.ant-select-selection-search-input {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-selection-item {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-item {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-pagination-options-quick-jumper {
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
|
||||||
|
& > input {
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
background-color: #f7fbfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
.ant-input-number {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue