泛微薪资核算iframe表格
parent
8394cf8872
commit
aa64deb95a
@ -0,0 +1,33 @@
|
||||
import BasicService from "./BasicService";
|
||||
|
||||
/**
|
||||
* @desc 全局服务
|
||||
*/
|
||||
class CalculateService extends BasicService {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
//获取人员确认列表信息
|
||||
getPCDataList = async ({ url, queryParams }: any) => {
|
||||
const { departmentIds = "", positionIds = "", subcompanyIds="", ...extraParams } = queryParams || {};
|
||||
queryParams = {
|
||||
...extraParams,
|
||||
departmentIds: departmentIds ? departmentIds.split(",") : undefined,
|
||||
positionIds: positionIds ? positionIds.split(",") : undefined,
|
||||
subcompanyIds: subcompanyIds ? subcompanyIds.split(",") : undefined
|
||||
};
|
||||
for (let key in queryParams) {
|
||||
if (queryParams[key] === "" || queryParams[key] === "0") {
|
||||
delete queryParams[key];
|
||||
}
|
||||
}
|
||||
return this.post(
|
||||
url,
|
||||
queryParams
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const calculateService = new CalculateService();
|
||||
|
||||
export default calculateService;
|
||||
@ -0,0 +1,317 @@
|
||||
import React, { FC, useEffect, useState } from "react";
|
||||
import { exceptStr, paginationFun } from "@/utils/common";
|
||||
import { defaultPage, ILoading, IPage } from "@/common/types/page";
|
||||
import { message, Table, Typography } from "antd";
|
||||
import { LockOutlined, UnlockOutlined } from "@ant-design/icons";
|
||||
import API from "@/api";
|
||||
import styles from "./index.less";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface ITableProps {
|
||||
}
|
||||
|
||||
const AntdTable: FC<ITableProps> = (props) => {
|
||||
const [selected, setSelected] = useState<Array<string>>([]); //列表选中的数据
|
||||
const [tab, setTab] = useState<string>(""); //顶部TAB变量
|
||||
const [usertab, setUsertab] = useState<string>(""); //底部TAB变量
|
||||
const [pageParams, setPageParams] = useState<IPage>(defaultPage); //分页变量
|
||||
const [loading, setLoading] = useState<ILoading>({});
|
||||
const [columns, setColumns] = useState<any[]>([]);
|
||||
const [dataSource, setDataSource] = useState<any[]>([]);
|
||||
const [sumRow, setSumRow] = useState<Partial<{}>>({});//薪资核算总计行数据
|
||||
useEffect(() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PC",
|
||||
data: { id: "SA" }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
window.addEventListener("message", receiveMessageFromIndex, false);
|
||||
return () => {
|
||||
setSumRow({});
|
||||
window.removeEventListener("message", receiveMessageFromIndex, false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getPCDataList = (params: any = {}) => {
|
||||
let { type, listType, ...extraParams } = params;
|
||||
setLoading({ query: true });
|
||||
setTab(type);
|
||||
setUsertab(listType);
|
||||
API.CalculateService.getPCDataList(extraParams).then(({ success, data, errorMsg }) => {
|
||||
setLoading({ query: false });
|
||||
if (success) {
|
||||
const { data: dataCopy } = data;
|
||||
if (type === "PC") {
|
||||
if (listType === "SA") {
|
||||
const { columns = [], list = [], total, pageSize: size, pageNum } = dataCopy;
|
||||
setColumns(getUserListColumns(columns));
|
||||
setDataSource(list);
|
||||
setPageParams({ ...pageParams, total, size, pageNum });
|
||||
} else if (listType === "MA") {
|
||||
const { columns = [], list = [], total, pageSize: size, pageNum } = dataCopy;
|
||||
setColumns(columns);
|
||||
setDataSource(list);
|
||||
setPageParams({ ...pageParams, total, size, pageNum });
|
||||
}
|
||||
} else {
|
||||
const { columns = [], pageInfo = {}, sumRow = {} } = dataCopy;
|
||||
const { list = [], total, pageSize: size, pageNum } = pageInfo;
|
||||
setColumns(getColumns(columns));
|
||||
setDataSource(list);
|
||||
setSumRow(sumRow);
|
||||
setPageParams({ ...pageParams, total, size, pageNum });
|
||||
}
|
||||
} else {
|
||||
message.error(errorMsg || "");
|
||||
}
|
||||
});
|
||||
};
|
||||
const getUserListColumns = (acctemployeeListColumns: any) => {
|
||||
let tmpColumns = [...acctemployeeListColumns, {
|
||||
key: "cz",
|
||||
title: "操作",
|
||||
render: (text: string, record: any) => {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PC",
|
||||
data: { id: "DELETE", data: record }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}];
|
||||
return tmpColumns;
|
||||
};
|
||||
//薪资核算页面列表
|
||||
const getColumns = (column: any) => {
|
||||
let tmpColumns = [...column];
|
||||
tmpColumns = tmpColumns.filter(item => item.hide == "FALSE").map((item, index) => {
|
||||
let result = { ...item };
|
||||
result.title = <span className={styles.titleWrapper}>
|
||||
<span onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: item.column }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}>{item.text}</span>
|
||||
{
|
||||
item.lockStatus && <span className={styles.titleIcon}>
|
||||
{
|
||||
item.lockStatus === "UNLOCK" && <LockOutlined
|
||||
title="点击锁定所有解锁的项目值"
|
||||
onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: item.column, extraId: "LOCK" }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
{
|
||||
item.lockStatus !== "UNLOCK" && <UnlockOutlined
|
||||
title="点击解锁所有锁定的项目值"
|
||||
onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: item.column, extraId: "UNLOCK" }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</span>;
|
||||
result.dataIndex = item.column;
|
||||
result.oldWidth = result.width;
|
||||
result.width = "150px";
|
||||
if (result.children) {
|
||||
result.width = (result.children.length * 150) + "px";
|
||||
result.children.map((child: any) => {
|
||||
child.title = <span className={styles.titleWrapper}>
|
||||
<span title={child.text} onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: child.column }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}>{child.text}</span>
|
||||
{
|
||||
child.lockStatus &&
|
||||
<span className={styles.titleIcon}>
|
||||
{
|
||||
child.lockStatus === "UNLOCK" &&
|
||||
<LockOutlined
|
||||
title="点击锁定所有解锁的项目值"
|
||||
onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: child.column, extraId: "LOCK" }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
{
|
||||
child.lockStatus !== "UNLOCK" &&
|
||||
<UnlockOutlined
|
||||
title="点击解锁所有锁定的项目值"
|
||||
onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "COLUMNINDEX", data: child.column, extraId: "UNLOCK" }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</span>;
|
||||
child.dataIndex = child.column;
|
||||
child.width = "150px";
|
||||
child.render = (text: string) => {
|
||||
return <span className={styles.contentSpan}>
|
||||
<span>{text}</span>
|
||||
{
|
||||
child.lockStatus === "LOCK" ? <LockOutlined title="锁定的项目值"/> : null
|
||||
}
|
||||
</span>;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (index < 3) {
|
||||
result.fixed = "left";
|
||||
result.render = (text: string) => {
|
||||
return <span title={text}>{text}</span>;
|
||||
};
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
tmpColumns.push({
|
||||
title: "操作",
|
||||
key: "cz",
|
||||
width: "100px",
|
||||
fixed: "right",
|
||||
render: (text: string, record: any) => {
|
||||
return <a onClick={() => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "PR",
|
||||
data: { id: "EDIT", data: record }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}}>编辑</a>;
|
||||
}
|
||||
});
|
||||
return tmpColumns;
|
||||
};
|
||||
const receiveMessageFromIndex = (event: any) => {
|
||||
setDataSource([]);
|
||||
const data: any = exceptStr(event.data);
|
||||
if (!_.isEmpty(data)) {
|
||||
getPCDataList({ ...data, ...pageParams });
|
||||
}
|
||||
};
|
||||
|
||||
const sizeChange = (pageobj: IPage) => {
|
||||
};
|
||||
const onChange = (pageobj: IPage) => {
|
||||
setPageParams({ ...pageParams, ...pageobj });
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: tab,
|
||||
data: { id: "PAGEINFO", extraId: usertab, data: { ...pageParams, ...pageobj } }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys: selected,
|
||||
onChange: (selectedRowKeys: Array<any>) => {
|
||||
setSelected(selectedRowKeys);
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: tab,
|
||||
data: { id: "BATCHDELETE", extraId: usertab, data: selectedRowKeys }
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}
|
||||
};
|
||||
return <Table
|
||||
rowKey="id"
|
||||
loading={loading.query}
|
||||
className={styles.tableWrapper}
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
size="small"
|
||||
bordered
|
||||
rowSelection={tab === "PC" && usertab === "SA" ? rowSelection : undefined}
|
||||
pagination={{
|
||||
...paginationFun(pageParams, sizeChange, onChange),
|
||||
size: "default"
|
||||
}}
|
||||
scroll={{
|
||||
x: "calc(700px + 50%)",
|
||||
y: tab !== "PR" ? "calc(100vh - 96px)" : !_.isEmpty(sumRow) ? "calc(100vh - 192px)" : "calc(100vh - 156px)"
|
||||
}}
|
||||
summary={() => {
|
||||
if (tab !== "PR" || _.isEmpty(sumRow)) return;
|
||||
let totalColumns: any[] = [];
|
||||
_.forEach(columns, it => {
|
||||
if (!it.children) {
|
||||
totalColumns.push(it);
|
||||
} else {
|
||||
totalColumns = [...totalColumns, ...it.children];
|
||||
}
|
||||
});
|
||||
return (
|
||||
<Table.Summary fixed>
|
||||
<Table.Summary.Row>
|
||||
{
|
||||
_.map(totalColumns, (item, index) => {
|
||||
if (index === 0) {
|
||||
return <Table.Summary.Cell index={0}><Text type="danger">总计</Text></Table.Summary.Cell>;
|
||||
}
|
||||
return <Table.Summary.Cell index={index} key={index}>
|
||||
<Text type="danger">{sumRow[item.dataIndex] || "-"}</Text>
|
||||
</Table.Summary.Cell>;
|
||||
})
|
||||
}
|
||||
</Table.Summary.Row>
|
||||
</Table.Summary>
|
||||
);
|
||||
}}
|
||||
/>;
|
||||
};
|
||||
|
||||
export default AntdTable;
|
||||
@ -0,0 +1,101 @@
|
||||
//表格样式
|
||||
.tableWrapper {
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span:first-child {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > span.titleIcon {
|
||||
margin-left: 4px;
|
||||
display: none;
|
||||
|
||||
& > span {
|
||||
cursor: pointer;
|
||||
color: #5d9cec;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.contentSpan {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
:global {
|
||||
span.anticon-lock {
|
||||
color: #5d9cec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper:hover {
|
||||
& > span.titleIcon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
background: #e9f7ff;
|
||||
}
|
||||
|
||||
.ant-spin-container {
|
||||
.ant-pagination {
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
|
||||
.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-options {
|
||||
.ant-select {
|
||||
font-size: 12px;
|
||||
|
||||
.ant-select-selector {
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import React, { FC } from 'react';
|
||||
import AntdTable from './components/antdTable';
|
||||
|
||||
const AtdTable: FC = (props) => {
|
||||
|
||||
return <AntdTable />
|
||||
};
|
||||
|
||||
export default AtdTable;
|
||||
@ -0,0 +1,17 @@
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
|
||||
export class CalculateStore {
|
||||
constructor() {
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@observable
|
||||
showOperatePermission: boolean = false;
|
||||
|
||||
@action
|
||||
setgPermission = (permission: boolean) => {
|
||||
this.showOperatePermission = permission;
|
||||
};
|
||||
}
|
||||
|
||||
export const calculateStore = new CalculateStore();
|
||||
@ -1,9 +1,11 @@
|
||||
import { appStore } from './AppStore';
|
||||
import { baseLayoutStore } from '@/layouts/BaseLayout/Store';
|
||||
import { appStore } from "./AppStore";
|
||||
import { calculateStore } from "./CalculateStore";
|
||||
import { baseLayoutStore } from "@/layouts/BaseLayout/Store";
|
||||
|
||||
export { baseLayoutStore, appStore };
|
||||
export { baseLayoutStore, appStore, calculateStore };
|
||||
|
||||
export default {
|
||||
baseLayoutStore,
|
||||
appStore,
|
||||
calculateStore,
|
||||
appStore
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue