feature/2.9.42310.01-薪资项目拓扑图以及中江的薪资账套下的图形展示
parent
726e6c6715
commit
ff6f036a38
@ -0,0 +1,378 @@
|
|||||||
|
import React, { FC, useEffect, useState } from "react";
|
||||||
|
import { exceptStr, paginationFun } from "@/utils/common";
|
||||||
|
import { defaultPage, ILoading, IPage } from "@/common/types/page";
|
||||||
|
import { Button, message, Spin, 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<{}>>({});//薪资核算总计行数据
|
||||||
|
const [showSumrow, setShowSumrow] = useState<boolean>(false);//薪资核算总计行是否隐藏
|
||||||
|
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, hasOperate = true, ...extraParams } = params;
|
||||||
|
setLoading({ query: true });
|
||||||
|
setTab(type);
|
||||||
|
setUsertab(listType);
|
||||||
|
API.CalculateService.getPCDataList(extraParams).then(async ({ 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 = {} } = dataCopy;
|
||||||
|
const { list = [], total, pageSize: size, pageNum } = pageInfo;
|
||||||
|
setColumns(getColumns(columns, hasOperate));
|
||||||
|
setDataSource(list);
|
||||||
|
setPageParams({ ...pageParams, total, size, pageNum });
|
||||||
|
const confCode: any = await API.CalculateService.getSysconfcode({ code: "OPEN_ACCT_RESULT_SUM" });
|
||||||
|
setShowSumrow(confCode.data.status && confCode.data.data === "1");
|
||||||
|
if (confCode.data.status && confCode.data.data === "1") {
|
||||||
|
const sumRowlist: any = await API.CalculateService.getAcctresultsum({ ...extraParams["queryParams"] });
|
||||||
|
if (sumRowlist.data.status && !_.isEmpty(sumRowlist.data.data.sumRow)) {
|
||||||
|
setSumRow(sumRowlist.data.data.sumRow);
|
||||||
|
}
|
||||||
|
if (sumRowlist.data.status && _.isNil(sumRowlist.data.data.sumRow)) {
|
||||||
|
setSumRow({ [new Date().getTime()]: new Date().getTime() });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(errorMsg || "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const getUserListColumns = (acctemployeeListColumns: any) => {
|
||||||
|
let tmpColumns = [...acctemployeeListColumns, {
|
||||||
|
key: "cz",
|
||||||
|
title: "操作",
|
||||||
|
render: (text: string, record: any) => {
|
||||||
|
return (
|
||||||
|
<Button type="link" style={{ padding: "0" }}
|
||||||
|
onClick={() => {
|
||||||
|
window.parent.postMessage(
|
||||||
|
{
|
||||||
|
type: "PC",
|
||||||
|
data: { id: "DELETE", data: record }
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
tmpColumns = _.map(tmpColumns, (item) => {
|
||||||
|
if (item.dataIndex === "costCenter") {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
ellipsis: true,
|
||||||
|
width: 110,
|
||||||
|
render: (text: string, r: any) => {
|
||||||
|
const { costCenter } = r;
|
||||||
|
return (
|
||||||
|
<a href="javascript: void(0);" onClick={() => {
|
||||||
|
window.parent.postMessage(
|
||||||
|
{
|
||||||
|
type: "PC",
|
||||||
|
data: { id: "COSTCENTER", data: costCenter }
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
}}>{costCenter.name || ""}</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { ...item, ellipsis: true };
|
||||||
|
});
|
||||||
|
return tmpColumns;
|
||||||
|
};
|
||||||
|
//薪资核算页面列表
|
||||||
|
const getColumns = (column: any, hasOperate: boolean = true) => {
|
||||||
|
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";
|
||||||
|
result.ellipsis = true;
|
||||||
|
result.render = (text: string, r: any) => {
|
||||||
|
if (item.column === "costCenter") {
|
||||||
|
const { costCenter } = r;
|
||||||
|
return <a href="javascript: void(0);" onClick={() => {
|
||||||
|
window.parent.postMessage(
|
||||||
|
{
|
||||||
|
type: "PR",
|
||||||
|
data: { id: "COSTCENTER", data: costCenter }
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
}}>{!_.isEmpty(costCenter) ? costCenter.name : ""}</a>;
|
||||||
|
}
|
||||||
|
return <span className={styles.contentSpan}>
|
||||||
|
<span title={text} className={styles.contentTitle}>{text}</span>
|
||||||
|
{
|
||||||
|
result.lockStatus === "LOCK" ? <LockOutlined title="锁定的项目值"/> : null
|
||||||
|
}
|
||||||
|
</span>;
|
||||||
|
};
|
||||||
|
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.ellipsis = true;
|
||||||
|
child.render = (text: string) => {
|
||||||
|
return <span className={styles.contentSpan}>
|
||||||
|
<span title={text} className={styles.contentTitle}>{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;
|
||||||
|
});
|
||||||
|
hasOperate && tmpColumns.push({
|
||||||
|
title: "操作",
|
||||||
|
key: "cz",
|
||||||
|
width: "100px",
|
||||||
|
fixed: "right",
|
||||||
|
render: (text: string, record: any) => {
|
||||||
|
return <Button type="link" style={{ padding: "0" }} onClick={() => {
|
||||||
|
window.parent.postMessage(
|
||||||
|
{
|
||||||
|
type: "PR",
|
||||||
|
data: { id: "EDIT", data: record }
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
}}>编辑</Button>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return tmpColumns;
|
||||||
|
};
|
||||||
|
const receiveMessageFromIndex = (event: any) => {
|
||||||
|
setDataSource([]);
|
||||||
|
const data: any = exceptStr(event.data);
|
||||||
|
if (!_.isEmpty(data)) {
|
||||||
|
const { selectedRowKeys, ...extraData } = data;
|
||||||
|
getPCDataList({ ...extraData, ...pageParams });
|
||||||
|
if (selectedRowKeys) setSelected(selectedRowKeys);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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}
|
||||||
|
rowSelection={rowSelection}
|
||||||
|
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" || !showSumrow) 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>
|
||||||
|
{
|
||||||
|
_.isEmpty(sumRow) ? <Spin tip="加载中"/> :
|
||||||
|
_.map([{}, ...totalColumns], (item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
return <Table.Summary.Cell index={0} align="center"><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,17 @@
|
|||||||
|
.salaryItemOptWrapper {
|
||||||
|
:global {
|
||||||
|
.ant-menu-item-selected {
|
||||||
|
background: #FFF !important;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-item {
|
||||||
|
height: 26px !important;
|
||||||
|
line-height: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-title-content {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
/*
|
||||||
|
* Author: 黎永顺
|
||||||
|
* name: 中江-薪资账套薪资项目流向图
|
||||||
|
* Description:
|
||||||
|
* Date: 2023/11/14
|
||||||
|
*/
|
||||||
|
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
|
||||||
|
import { Menu } from "antd";
|
||||||
|
import { FundFlowGraph } from "@ant-design/graphs";
|
||||||
|
import { exceptStr } from "@/utils/common";
|
||||||
|
import { extractTree } from "@/pages/salaryItemDiagram";
|
||||||
|
import styles from "./index.less";
|
||||||
|
|
||||||
|
interface OwnProps {
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = OwnProps;
|
||||||
|
|
||||||
|
const index: FunctionComponent<Props> = (props) => {
|
||||||
|
const [nodes, setNodes] = useState<any[]>([]);
|
||||||
|
const [edges, setEdges] = useState<any[]>([]);
|
||||||
|
const [i18n, setI18n] = useState<any>({});
|
||||||
|
useEffect(() => {
|
||||||
|
window.parent.postMessage({ type: "init" }, "*");
|
||||||
|
window.addEventListener("message", receiveMessageFromIndex, false);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("message", receiveMessageFromIndex, false);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
const openNotification = (data: any) => {
|
||||||
|
const { formulaId } = data;
|
||||||
|
window.parent.postMessage({ type: "turn", payload: { id: "VIEW", params: { formulaId } } }, "*");
|
||||||
|
};
|
||||||
|
const receiveMessageFromIndex = (event: any) => {
|
||||||
|
const data: any = exceptStr(event.data);
|
||||||
|
if (!_.isEmpty(data)) {
|
||||||
|
const { itemsTree, i18n } = data;
|
||||||
|
setI18n(i18n);
|
||||||
|
setNodes([{
|
||||||
|
id: "0",
|
||||||
|
salaryItemName: i18n["薪资项目"],
|
||||||
|
value: { text: i18n["薪资项目"] }
|
||||||
|
}, ..._.map(extractTree(itemsTree), o => ({
|
||||||
|
...o,
|
||||||
|
id: o.salaryItemId.toString(),
|
||||||
|
value: { text: o.salaryItemName.length >= 8 ? o.salaryItemName.slice(0, 8) + "..." : o.salaryItemName }
|
||||||
|
}))]);
|
||||||
|
const edges: any = _.map(extractTree(itemsTree), o => ({
|
||||||
|
source: o.parentId ? o.parentId.toString() : "0",
|
||||||
|
target: o.salaryItemId.toString()
|
||||||
|
}));
|
||||||
|
setEdges(edges);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const config: any = useMemo(() => {
|
||||||
|
const data = { nodes, edges };
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
menuCfg: {
|
||||||
|
className: styles.salaryItemOptWrapper,
|
||||||
|
shouldBegin: (evt: any) => {
|
||||||
|
const { item: { _cfg: { model } } } = evt;
|
||||||
|
return model.canAddItem || (!_.isNil(model.formulaId) && model.formulaId !== 0);
|
||||||
|
},
|
||||||
|
handleMenuClick: (__: any, evt: any) => {
|
||||||
|
const { _cfg: { model } } = evt;
|
||||||
|
const id = __.innerText.indexOf(i18n["添加薪资项目"]) !== -1 ? "ADD" : "EDIT";
|
||||||
|
window.parent.postMessage({
|
||||||
|
type: "turn",
|
||||||
|
payload: {
|
||||||
|
id, params: {
|
||||||
|
visible: true, id: model?.groupId, dataType: model?.dateType,
|
||||||
|
formulaId: model?.formulaId, valueType: model?.valueType,
|
||||||
|
salaryItemId: model?.salaryItemId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, "*");
|
||||||
|
},
|
||||||
|
customContent: (evt: any) => {
|
||||||
|
const { item: { _cfg: { model } } } = evt;
|
||||||
|
let items: any = [
|
||||||
|
{ label: i18n["添加薪资项目"], key: "add" },
|
||||||
|
{ label: i18n["编辑公式"], key: "edit" }
|
||||||
|
];
|
||||||
|
(_.isNil(model.formulaId) || model.formulaId === 0) && (items = _.filter(items, o => o.key !== "edit"));
|
||||||
|
(!model.canAddItem) && (items = _.filter(items, o => o.key !== "add"));
|
||||||
|
return (
|
||||||
|
<Menu items={items}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
edgeCfg: {
|
||||||
|
endArrow: { fill: "#333" },
|
||||||
|
style: { stroke: "#333" },
|
||||||
|
edgeStateStyles: {
|
||||||
|
hover: {
|
||||||
|
stroke: "#1890ff",
|
||||||
|
lineWidth: 2,
|
||||||
|
endArrow: {
|
||||||
|
fill: "#1890ff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nodeCfg: {
|
||||||
|
style: (item: any, group: any) => {
|
||||||
|
const { id, parentId } = item;
|
||||||
|
let styleObj = {};
|
||||||
|
switch (id) {
|
||||||
|
case "0":
|
||||||
|
styleObj = { ...styleObj, fill: "rgb(0,154,73)", stroke: "rgb(0,154,73)" };
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
styleObj = { ...styleObj, fill: "#FFF", stroke: "#666", radius: [2, 2, 2, 2] };
|
||||||
|
if (_.isNil(parentId)) styleObj = {
|
||||||
|
...styleObj, fill: "rgb(170,212,179)",
|
||||||
|
stroke: "#000", radius: [2, 2, 2, 2]
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return styleObj;
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
style: (item: any) => {
|
||||||
|
const { id } = item;
|
||||||
|
return { fontWeight: "bold", fill: id === "0" ? "#FFF" : "#333", fontSize: id === "0" ? 18 : 12 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markerCfg: (cfg: any) => {
|
||||||
|
const { edges } = data;
|
||||||
|
return {
|
||||||
|
position: "right",
|
||||||
|
show: edges.find((item) => item.source === cfg.id)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
rankdir: "LR",
|
||||||
|
nodesep: 5,
|
||||||
|
ranksep: 20
|
||||||
|
},
|
||||||
|
tooltipCfg: {
|
||||||
|
show: true,
|
||||||
|
shouldBegin: (evt: any) => {
|
||||||
|
const { item: { _cfg: { model } } } = evt;
|
||||||
|
return model.salaryItemName.length >= 8;
|
||||||
|
},
|
||||||
|
customContent: (item: any) => (<h3>{item.salaryItemName}</h3>)
|
||||||
|
},
|
||||||
|
onReady: (graph: any) => {
|
||||||
|
graph.on("node:click", (evt: any) => {
|
||||||
|
if (_.isEmpty(evt.target.attrs) || JSON.stringify(evt.target.attrs).indexOf("cursor") !== -1) return;
|
||||||
|
openNotification(evt.item._cfg.model);
|
||||||
|
});
|
||||||
|
graph.on("node:contextmenu", (evt: any) => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
behaviors: ["drag-canvas", "zoom-canvas"]
|
||||||
|
};
|
||||||
|
}, [nodes, edges]);
|
||||||
|
return ((!_.isEmpty(nodes) && !_.isEmpty(edges)) ? <FundFlowGraph {...config} /> : null);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default index;
|
||||||
Loading…
Reference in New Issue