qt
/
salary-management-oneself
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

泛微薪资核算iframe表格-

This commit is contained in:
黎永顺 2023-11-07 11:06:15 +08:00
parent 670d3da752
commit e6e93f8fc4
14 changed files with 554 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
public/css/iconfont/demo_index.html
View File

@ -47,11 +47,67 @@
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4257468" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">全部</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">批量导出</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">批量删除</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">批量操作</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">导出</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">批量分配</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe724;</span>
<div class="name">操作日志</div>
<div class="code-name">&amp;#xe724;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6aa;</span>
<div class="name">警告</div>
<div class="code-name">&amp;#xe6aa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70c;</span>
<div class="name">应急处理</div>
<div class="code-name">&amp;#xe70c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">批量解锁</div>
@ -82,7 +138,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1695032721128') format('truetype');
src: url('iconfont.woff2?t=1698914262517') format('woff2'),
url('iconfont.woff?t=1698914262517') format('woff'),
url('iconfont.ttf?t=1698914262517') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -108,6 +166,87 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-quanbu"></span>
<div class="name">
全部
</div>
<div class="code-name">.icon-quanbu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piliangdaochu"></span>
<div class="name">
批量导出
</div>
<div class="code-name">.icon-piliangdaochu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piliangshanchu"></span>
<div class="name">
批量删除
</div>
<div class="code-name">.icon-piliangshanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piliangcaozuo"></span>
<div class="name">
批量操作
</div>
<div class="code-name">.icon-piliangcaozuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icon-daochu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piliangfenpei"></span>
<div class="name">
批量分配
</div>
<div class="code-name">.icon-piliangfenpei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caozuorizhi32"></span>
<div class="name">
操作日志
</div>
<div class="code-name">.icon-caozuorizhi32
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jinggao"></span>
<div class="name">
警告
</div>
<div class="code-name">.icon-jinggao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingjichuli"></span>
<div class="name">
应急处理
</div>
<div class="code-name">.icon-yingjichuli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piliangjiesuo"></span>
<div class="name">
@ -153,6 +292,78 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanbu"></use>
</svg>
<div class="name">全部</div>
<div class="code-name">#icon-quanbu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piliangdaochu"></use>
</svg>
<div class="name">批量导出</div>
<div class="code-name">#icon-piliangdaochu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piliangshanchu"></use>
</svg>
<div class="name">批量删除</div>
<div class="code-name">#icon-piliangshanchu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piliangcaozuo"></use>
</svg>
<div class="name">批量操作</div>
<div class="code-name">#icon-piliangcaozuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daochu"></use>
</svg>
<div class="name">导出</div>
<div class="code-name">#icon-daochu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piliangfenpei"></use>
</svg>
<div class="name">批量分配</div>
<div class="code-name">#icon-piliangfenpei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caozuorizhi32"></use>
</svg>
<div class="name">操作日志</div>
<div class="code-name">#icon-caozuorizhi32</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jinggao"></use>
</svg>
<div class="name">警告</div>
<div class="code-name">#icon-jinggao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingjichuli"></use>
</svg>
<div class="name">应急处理</div>
<div class="code-name">#icon-yingjichuli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piliangjiesuo"></use>

42
public/css/iconfont/iconfont.css
View File

@ -1,6 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1695032721128') format('truetype');
font-family: "iconfont"; /* Project id 4257468 */
src: url('iconfont.woff2?t=1698914262517') format('woff2'),
url('iconfont.woff?t=1698914262517') format('woff'),
url('iconfont.ttf?t=1698914262517') format('truetype');
}
.iconfont {
@ -11,6 +13,42 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-quanbu:before {
content: "\e603";
}
.icon-piliangdaochu:before {
content: "\e649";
}
.icon-piliangshanchu:before {
content: "\e622";
}
.icon-piliangcaozuo:before {
content: "\e645";
}
.icon-daochu:before {
content: "\e636";
}
.icon-piliangfenpei:before {
content: "\e619";
}
.icon-caozuorizhi32:before {
content: "\e724";
}
.icon-jinggao:before {
content: "\e6aa";
}
.icon-yingjichuli:before {
content: "\e70c";
}
.icon-piliangjiesuo:before {
content: "\e652";
}

2
public/css/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

67
public/css/iconfont/iconfont.json
View File

@ -1,10 +1,73 @@
{
"id": "",
"name": "",
"id": "4257468",
"name": "weaver-salary",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "5925304",
"name": "全部",
"font_class": "quanbu",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "6447192",
"name": "批量导出",
"font_class": "piliangdaochu",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "20422590",
"name": "批量删除",
"font_class": "piliangshanchu",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "22378766",
"name": "批量操作",
"font_class": "piliangcaozuo",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "24848378",
"name": "导出",
"font_class": "daochu",
"unicode": "e636",
"unicode_decimal": 58934
},
{
"icon_id": "35054680",
"name": "批量分配",
"font_class": "piliangfenpei",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "763145",
"name": "操作日志",
"font_class": "caozuorizhi32",
"unicode": "e724",
"unicode_decimal": 59172
},
{
"icon_id": "947139",
"name": "警告",
"font_class": "jinggao",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "4551216",
"name": "应急处理",
"font_class": "yingjichuli",
"unicode": "e70c",
"unicode_decimal": 59148
},
{
"icon_id": "16043851",
"name": "批量解锁",

BIN
public/css/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
public/css/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
public/css/iconfont/iconfont.woff2
View File

Binary file not shown.

5
src/layouts/BlankLayout/index.tsx
View File

@ -23,8 +23,9 @@ export default ({ children, style = {} }: any) => {
window.location.hash.indexOf("atdTable") !== -1 ||
window.location.hash.indexOf("standingbookTable") !== -1 ||
window.location.hash.indexOf("previewTable") !== -1 ||
window.location.hash.indexOf("calcTable") !== -1
) ? "#f6f6f6" : "#FFF",
window.location.hash.indexOf("calcTable") !== -1 ||
window.location.hash.indexOf("welfareArchiveTable") !== -1
) ? "rgb(241,241,241)" : "#FFF",
...style
}}
>

1
src/layouts/config.js
View File

@ -16,6 +16,7 @@ module.exports = {
"/welfareLedgerTable.*": "blank",
"/payrollFilesTable.*": "blank",
"/employeeDeclareTable.*": "blank",
"/welfareArchiveTable.*": "blank",
"/manage.*": "manage",
"/portal.*": "template",
"/passport/oauth-in": "blank",

15
src/pages/atdTable/components/index.less
View File

@ -154,6 +154,10 @@
}
:global {
.ant-btn-link {
height: inherit !important;
}
.ant-btn-link, .ant-dropdown-trigger {
padding: 0;
font-size: 12px;
@ -288,6 +292,17 @@
}
:global {
.ant-dropdown-placement-bottomRight {
.ant-dropdown-menu {
max-height: inherit !important;
}
}
.ant-dropdown-menu-item {
font-size: 12px;
color: #333;
}
.rankMapWrapper {
.ant-table-thead > tr > th {
background: #ED7D31;

2
src/pages/calcTable/index.tsx
View File

@ -72,7 +72,7 @@ const index: FunctionComponent<Props> = (props) => {
<span className={styles.contentSpan}>
<span title={text} className={styles.contentTitle}>{text}</span>
{
item.lockStatus === "LOCK" ? <LockOutlined title="锁定的项目值"/> : null
item.lockStatus === "LOCK" ? <LockOutlined title={i18n["锁定的项目值"]}/> : null
}
</span>
)

8
src/pages/reportTable/index.tsx
View File

@ -63,7 +63,7 @@ const ReportTable: FC = (props) => {
if (!showSumrow) return;
let totalColumns: any[] = [];
_.forEach(columns, it => {
if (!it.children) {
if (_.isEmpty(it.children)) {
totalColumns.push(it);
} else {
totalColumns = [...totalColumns, ...it.children];
@ -73,11 +73,7 @@ const ReportTable: FC = (props) => {
<Table.Summary fixed>
<Table.Summary.Row>
{
_.map([{}, ...totalColumns], (item, index) => {
if (index === 0) {
return <Table.Summary.Cell index={0} key={index} align="center"><Text
type="danger">总计</Text></Table.Summary.Cell>;
}
_.map(totalColumns, (item, index) => {
return <Table.Summary.Cell index={index} key={index} align="center">
<Text type="danger">{!_.isNil(sumRow[item.dataIndex]) ? sumRow[item.dataIndex] : "-"}</Text>
</Table.Summary.Cell>;

191
src/pages/welfareArchiveTable/index.tsx Normal file
View File

@ -0,0 +1,191 @@
/*
* Author: 黎永顺
* name: 社保福利档案列表
* Description:
* Date: 2023/11/1
*/
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
import { ColumnType } from "antd/lib/table";
import { PaginationData } from "rc-pagination";
import styles from "@/pages/atdTable/components/index.less";
import { exceptStr, paginationAction } from "@/utils/common";
import type { MenuProps } from "antd";
import { Button, Dropdown, Space, Table } from "antd";
import { MoreOutlined } from "@ant-design/icons";
interface OwnProps {
}
type Props = OwnProps;
const Index: FunctionComponent<Props> = (props) => {
const [columns, setColumns] = useState<ColumnType<any>[]>([]);
const [dataSource, setDataSource] = useState<any[]>([]);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
const [i18n, setI18n] = useState<any>({});
const [runStatuses, setRunStatuses] = useState<string>("");
const [showOperateBtn, setShowOperateBtn] = useState<boolean>(false);
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, selectedRowKeys, i18n: i18nRes = {},
runStatuses, showOperateBtn
} = data;
setShowOperateBtn(showOperateBtn);
setRunStatuses(runStatuses);
setI18n(i18nRes);
setPageInfo(pageInfo);
setDataSource(dataSource);
setSelectedRowKeys(selectedRowKeys);
setColumns(columns);
}
};
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: selectedRowKeys,
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
window.parent.postMessage(
{
type: "turn",
payload: { id: "CHECKBOX", params: { selectedRowKeys } }
},
"*"
);
}
};
const handleWelfareOperate = (type: string, record: any, interfaceParams?: any) => {
window.parent.postMessage(
{
type: "turn",
payload: { id: type, params: { record, interfaceParams } }
},
"*"
);
};
const cols: any = useMemo(() => {
let opts: any = { title: i18n["操作"], dataIndex: "operate", fixed: "right", width: 185 };
switch (runStatuses) {
case "1":
opts = {
...opts,
render: (__: any, record: any) => {
const items: MenuProps["items"] = [
{
key: "DeleteFiles",
label: i18n["删除档案"],
onClick: () => handleWelfareOperate("DEL-ARCHIVE", record)
},
{
key: "DeleteTodoList",
label: i18n["删除待办"],
onClick: () => handleWelfareOperate("DEL-TO-DO", record, { runStatus: "4" })
}
];
return (<Space>
<Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>
<Button type="link" onClick={() => handleWelfareOperate("ADD-TO-PAY", record)}>{i18n["增员"]}</Button>
<Dropdown menu={{ items }} placement="bottomRight">
<Button type="link" icon={<MoreOutlined/>}/>
</Dropdown>
</Space>);
}
};
break;
case "2,3":
case "ext":
opts = {
...opts,
render: (__: any, record: any) => (
<Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>)
};
break;
case "3":
opts = {
...opts,
render: (__: any, record: any) => {
const downsizingItems: MenuProps["items"] = [
{
key: "DeleteTodoList",
label: i18n["删除待办"],
onClick: () => handleWelfareOperate("DEL-TO-DO-STAY", record, { runStatus: "3" })
}
];
return (<Space>
<Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>
<Button type="link"
onClick={() => handleWelfareOperate("STAY-DEL-TO-STOP", record)}>{i18n["减员"]}</Button>
<Dropdown menu={{ items: downsizingItems }} placement="bottomRight">
<Button type="link" icon={<MoreOutlined/>}/>
</Dropdown>
</Space>);
}
};
break;
case "4,5":
opts = {
...opts,
render: (__: any, record: any) => {
const stopItems: MenuProps["items"] = [
{
key: "CancelSuspension",
label: i18n["取消停缴"],
onClick: () => handleWelfareOperate("CANCEL-STOP", record)
}
];
return (<Space>
<Button type="link" onClick={() => handleWelfareOperate("VIEW", record)}>{i18n["查看"]}</Button>
<Button type="link"
onClick={() => handleWelfareOperate("DEL-ARCHIVE", record)}>{i18n["删除档案"]}</Button>
<Dropdown menu={{ items: stopItems }} placement="bottomRight">
<Button type="link" icon={<MoreOutlined/>}/>
</Dropdown>
</Space>);
}
};
break;
default:
break;
}
return showOperateBtn ? [...columns, opts] : [...columns, {
...opts,
render: (__: any, record: any) => (
<Button type="link" onClick={() => handleWelfareOperate("VIEW", record)}>{i18n["查看"]}</Button>)
}];
}, [columns, runStatuses, i18n, showOperateBtn]);
return (<Table
rowKey="baseInfo" size="small" className={styles.tableWrapper}
columns={cols} dataSource={dataSource} rowSelection={rowSelection}
scroll={{ x: 1200, y: `calc(100vh - 103px)` }}
pagination={{
...paginationAction(pageInfo, i18n, onChange),
size: "default"
}}
/>);
};
export default Index;

26
src/utils/common.js
View File

@ -72,14 +72,21 @@ export const exceptStr = (str) => {
export const paginationFun = (tableListPageObj, sizeChange, onChange, i18n = {}) => {
return {
current: tableListPageObj.pageNum,
pageSize: tableListPageObj.size,
current: tableListPageObj.pageNum || tableListPageObj.current,
pageSize: tableListPageObj.size || tableListPageObj.pageSize,
total: tableListPageObj.total,
showTotal: total => `${i18n["共"] ? i18n["共"] : "共"} ${total} ${i18n["条"] ? i18n["条"] : "条"}`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: () => sizeChange(),
onShowSizeChange: (page, size) => {
const { total } = tableListPageObj;
sizeChange({
pageNum: page,
size,
total
});
},
onChange: (page, size) => {
const { total } = tableListPageObj;
onChange({
@ -90,3 +97,16 @@ export const paginationFun = (tableListPageObj, sizeChange, onChange, i18n = {})
}
};
};
export const paginationAction = (pageInfo = {}, i18n = {}, onChange, onShowSizeChange) => {
return {
pageSize: pageInfo.pageSize || 10,
current: pageInfo.current || 1,
total: pageInfo.total || 0,
pageSizeOptions: ["10", "20", "50", "100"],
showTotal: total => `${i18n["共"] ? i18n["共"] : "共"} ${total} ${i18n["条"] ? i18n["条"] : "条"}`,
onChange, onShowSizeChange,
showQuickJumper: true,
showSizeChanger: true
};
};