Compare commits
No commits in common. 'feature/2.9.42310.01-薪资项目拓扑图' and 'master' have entirely different histories.
feature/2.
...
master
@ -1,446 +0,0 @@
|
|||||||
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 AntdTableColumns2: 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 = [], columns2 = [], pageInfo = {} } = dataCopy;
|
|
||||||
const { list = [], total, pageSize: size, pageNum } = pageInfo;
|
|
||||||
setColumns(getColumns(columns2, 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 (child.children) {
|
|
||||||
child.children.map((grandSon: any) => {
|
|
||||||
grandSon.title = <span className={styles.titleWrapper}>
|
|
||||||
<span title={grandSon.text} onClick={() => {
|
|
||||||
window.parent.postMessage(
|
|
||||||
{
|
|
||||||
type: "PR",
|
|
||||||
data: { id: "COLUMNINDEX", data: grandSon.column }
|
|
||||||
},
|
|
||||||
"*"
|
|
||||||
);
|
|
||||||
}}>{grandSon.text}</span>
|
|
||||||
{
|
|
||||||
grandSon.lockStatus &&
|
|
||||||
<span className={styles.titleIcon}>
|
|
||||||
{
|
|
||||||
grandSon.lockStatus === "UNLOCK" &&
|
|
||||||
<LockOutlined
|
|
||||||
title="点击锁定所有解锁的项目值"
|
|
||||||
onClick={() => {
|
|
||||||
window.parent.postMessage(
|
|
||||||
{
|
|
||||||
type: "PR",
|
|
||||||
data: { id: "COLUMNINDEX", data: grandSon.column, extraId: "LOCK" }
|
|
||||||
},
|
|
||||||
"*"
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{
|
|
||||||
grandSon.lockStatus !== "UNLOCK" &&
|
|
||||||
<UnlockOutlined
|
|
||||||
title="点击解锁所有锁定的项目值"
|
|
||||||
onClick={() => {
|
|
||||||
window.parent.postMessage(
|
|
||||||
{
|
|
||||||
type: "PR",
|
|
||||||
data: { id: "COLUMNINDEX", data: grandSon.column, extraId: "UNLOCK" }
|
|
||||||
},
|
|
||||||
"*"
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
</span>;
|
|
||||||
grandSon.dataIndex = grandSon.column;
|
|
||||||
grandSon.width = "150px";
|
|
||||||
grandSon.ellipsis = true;
|
|
||||||
grandSon.render = (text: string) => {
|
|
||||||
return <span className={styles.contentSpan}>
|
|
||||||
<span title={text} className={styles.contentTitle}>{text}</span>
|
|
||||||
{
|
|
||||||
grandSon.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 (_.isEmpty(it.children)) {
|
|
||||||
totalColumns.push(it);
|
|
||||||
} else {
|
|
||||||
_.forEach(it.children, gt => {
|
|
||||||
if (_.isEmpty(gt.children)) {
|
|
||||||
totalColumns.push(gt);
|
|
||||||
} else {
|
|
||||||
totalColumns = [...totalColumns, ...gt.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 AntdTableColumns2;
|
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import AntdTableColumns2 from './components/antdTable';
|
import AntdTable from './components/antdTable';
|
||||||
|
|
||||||
const AtdTable: FC = (props) => {
|
const AtdTable: FC = (props) => {
|
||||||
|
|
||||||
return <AntdTableColumns2 />
|
return <AntdTable />
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AtdTable;
|
export default AtdTable;
|
||||||
|
|||||||
@ -1,125 +0,0 @@
|
|||||||
export const data = {
|
|
||||||
id: "root",
|
|
||||||
label: "利息收入",
|
|
||||||
subLabel: "3,283.456",
|
|
||||||
ratio: 3,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: "child-a",
|
|
||||||
label: "平均利息",
|
|
||||||
subLabel: "9%",
|
|
||||||
ratio: 1,
|
|
||||||
increase: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "child-b",
|
|
||||||
label: "贷款余额",
|
|
||||||
subLabel: "1,789,567",
|
|
||||||
ratio: 23,
|
|
||||||
increase: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: "child-b-a",
|
|
||||||
label: "投放金额",
|
|
||||||
subLabel: "2,385,124",
|
|
||||||
ratio: 17,
|
|
||||||
increase: true,
|
|
||||||
operator: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "child-b-b",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: 'child-b-b-a',
|
|
||||||
label: '还款期限',
|
|
||||||
subLabel: '7',
|
|
||||||
ratio: 23,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a-a-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
id: "child-b-b-a-a-a-a-a-a-a-a",
|
|
||||||
label: "还款金额",
|
|
||||||
subLabel: "595,557",
|
|
||||||
ratio: 12,
|
|
||||||
increase: true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'child-b-b-6',
|
|
||||||
label: '还款期限',
|
|
||||||
subLabel: '7',
|
|
||||||
ratio: 23,
|
|
||||||
increase: true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "child-c",
|
|
||||||
label: "还款期限",
|
|
||||||
subLabel: "7",
|
|
||||||
ratio: 23,
|
|
||||||
increase: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -1,156 +0,0 @@
|
|||||||
/*
|
|
||||||
* Author: 黎永顺
|
|
||||||
* name: 薪资项目-拓扑图
|
|
||||||
* Description:
|
|
||||||
* Date: 2023/10/19
|
|
||||||
*/
|
|
||||||
import React, { FunctionComponent, useEffect, useRef } from "react";
|
|
||||||
// @ts-ignore
|
|
||||||
import G6 from "@antv/g6";
|
|
||||||
import API from "@/api";
|
|
||||||
// @ts-ignore
|
|
||||||
import uuidV4 from "uuid/v4";
|
|
||||||
import "./registerShape";
|
|
||||||
|
|
||||||
interface OwnProps {
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = OwnProps;
|
|
||||||
|
|
||||||
const index: FunctionComponent<Props> = (props) => {
|
|
||||||
const ref: any = useRef(null);
|
|
||||||
let graph: any = null;
|
|
||||||
useEffect(() => {
|
|
||||||
initG6().then(r => {
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
// 1688699208883
|
|
||||||
const initG6 = async () => {
|
|
||||||
const { data: { data: result } }: any = await API.CalculateService.getSalarysobItemTopology({
|
|
||||||
salarySobId: "31",
|
|
||||||
salaryItemId: "1688699208872"
|
|
||||||
});
|
|
||||||
const dataSource = {
|
|
||||||
id: result.salaryItemId.toString(), label: result.salaryItemName || "",
|
|
||||||
subLabel: result.result || "", formula: result.formula, level: 0,
|
|
||||||
children: !_.isEmpty(result.children) ? traverse(result.children) : []
|
|
||||||
};
|
|
||||||
const width = ref.current.scrollWidth;
|
|
||||||
const height = ref.current.scrollHeight;
|
|
||||||
// @ts-ignore
|
|
||||||
G6.Util.traverseTree(dataSource, (subtree: any) => {
|
|
||||||
// if (subtree.level === undefined) subtree.level = 0;
|
|
||||||
// subtree.children?.forEach((child: any) => child.level = subtree.level + 1);
|
|
||||||
switch (subtree.level) {
|
|
||||||
case 0:
|
|
||||||
subtree.type = "root";
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
subtree.type = "level1node";
|
|
||||||
// subtree.collapsed = true;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
subtree.type = "othernode";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!graph) {
|
|
||||||
graph = new G6.TreeGraph({
|
|
||||||
// fitCenter: true, linkCenter: true,
|
|
||||||
container: ref.current, width, height, fitView: true,
|
|
||||||
layout: {
|
|
||||||
// LR
|
|
||||||
type: "compactBox", direction: "LR", getHGap: function getVGap() {
|
|
||||||
return 5;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
defaultEdge:
|
|
||||||
// {
|
|
||||||
// type: "cubic-vertical",
|
|
||||||
// style: {
|
|
||||||
// stroke: "#A3B1BF"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
type: "round-poly",
|
|
||||||
sourceAnchor: 0,
|
|
||||||
targetAnchor: 1,
|
|
||||||
style: {
|
|
||||||
radius: 8,
|
|
||||||
stroke: "rgb(19, 33, 92)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
defaultNode: {
|
|
||||||
style: {
|
|
||||||
cursor: "pointer"
|
|
||||||
},
|
|
||||||
// anchorPoints: [
|
|
||||||
// [0.5, 0],
|
|
||||||
// [0.5, 1]
|
|
||||||
// ]
|
|
||||||
anchorPoints: [
|
|
||||||
[0.9, 0.5],
|
|
||||||
[0, 0.5]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nodeStateStyles: {
|
|
||||||
hover: {
|
|
||||||
fill: "#fff",
|
|
||||||
shadowBlur: 30,
|
|
||||||
shadowColor: "#ddd"
|
|
||||||
},
|
|
||||||
operatorhover: {
|
|
||||||
"operator-box": {
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
modes: {
|
|
||||||
default: ["zoom-canvas", "drag-canvas", "collapse-expand", "drag-node"]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
graph.data(dataSource);
|
|
||||||
graph.render();
|
|
||||||
graph.on("node:mouseenter", (e: any) => {
|
|
||||||
if (e.target.get("name")?.includes("operator")) {
|
|
||||||
graph.setItemState(e.item, "operatorhover", true);
|
|
||||||
} else {
|
|
||||||
graph.setItemState(e.item, "hover", true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
graph.on("node:mouseleave", (e: any) => {
|
|
||||||
graph.setItemState(e.item, "operatorhover", false);
|
|
||||||
graph.setItemState(e.item, "hover", false);
|
|
||||||
});
|
|
||||||
graph.on("node:click", (e: any) => {
|
|
||||||
// graph.zoom(3, { x: e.canvasX, y: e.canvasY });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (<div ref={ref} style={{ width: "100%", height: "100%" }}/>);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default index;
|
|
||||||
|
|
||||||
const traverse: any = (arr: any[]) => {
|
|
||||||
return _.map(arr, item => {
|
|
||||||
if (!_.isEmpty(item.children)) {
|
|
||||||
const uuid = uuidV4();
|
|
||||||
return {
|
|
||||||
id: uuid, label: item.salaryItemName,
|
|
||||||
subLabel: item.result, formula: item.formula,
|
|
||||||
ratio: 1, increase: true, level: 1, collapsed: true,
|
|
||||||
children: traverse(item.children)
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
const uuid = uuidV4();
|
|
||||||
return {
|
|
||||||
id: uuid, label: item.salaryItemName,
|
|
||||||
subLabel: item.result, formula: item.formula,
|
|
||||||
ratio: 1, increase: true, level: 2
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,192 +0,0 @@
|
|||||||
/*
|
|
||||||
* Author: 黎永顺
|
|
||||||
* name: 薪资项目-拓扑图
|
|
||||||
* Description:
|
|
||||||
* Date: 2023/10/19
|
|
||||||
*/
|
|
||||||
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
|
|
||||||
import { DecompositionTreeGraph, NodeConfig } from "@ant-design/graphs";
|
|
||||||
import { notification } from "antd";
|
|
||||||
import { exceptStr } from "@/utils/common";
|
|
||||||
import API from "@/api";
|
|
||||||
// @ts-ignore
|
|
||||||
import uuidV4 from "uuid/v4";
|
|
||||||
|
|
||||||
interface OwnProps {
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = OwnProps;
|
|
||||||
const index: FunctionComponent<Props> = (props) => {
|
|
||||||
const [dataSource, setDataSource] = useState<any>({});
|
|
||||||
const [i18n, setI18n] = useState<any>({});
|
|
||||||
useEffect(() => {
|
|
||||||
window.parent.postMessage({ type: "initDiagram" }, "*");
|
|
||||||
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, acctEmpId, salaryItemId, salarySobId } = data;
|
|
||||||
setI18n(i18n);
|
|
||||||
init({ acctEmpId, salaryItemId, salarySobId });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const init = (paylaod: any) => {
|
|
||||||
API.CalculateService.getSalarysobItemTopology(paylaod).then(({ data }) => {
|
|
||||||
const { status, data: result } = data;
|
|
||||||
if (status) {
|
|
||||||
const dataSource = {
|
|
||||||
id: result.salaryItemId.toString(),
|
|
||||||
value: { title: result.salaryItemName, formula: result.formula, items: [{ text: result.result }] },
|
|
||||||
children: !_.isEmpty(result.children) ? traverse(result.children) : []
|
|
||||||
};
|
|
||||||
setDataSource(dataSource);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getChildren = async (nodeCfg: NodeConfig) => {
|
|
||||||
return findChildren(extractTree(dataSource.children), nodeCfg.id);
|
|
||||||
};
|
|
||||||
const openNotification = (data: any) => {
|
|
||||||
const { value: { formula } } = data;
|
|
||||||
notification.destroy();
|
|
||||||
if (_.isEmpty(formula)) return;
|
|
||||||
const { formula: description } = formula;
|
|
||||||
notification.open({
|
|
||||||
message: i18n["公式"],
|
|
||||||
duration: 5,
|
|
||||||
description,
|
|
||||||
style: { maxWidth: 600 }
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const component: any = useMemo(() => {
|
|
||||||
const config = {
|
|
||||||
data: {
|
|
||||||
...dataSource,
|
|
||||||
children: dataSource.children ? _.map(dataSource.children, o => ({ ...o, children: null })) : null
|
|
||||||
},
|
|
||||||
autoFit: false, animate: true,
|
|
||||||
nodeCfg: {
|
|
||||||
getChildren,
|
|
||||||
autoWidth: true,
|
|
||||||
title: {
|
|
||||||
style: { fill: "#333" },
|
|
||||||
containerStyle: () => {
|
|
||||||
return {
|
|
||||||
fill: "#f7fbfe",
|
|
||||||
stroke: "#e5e5e5"
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nodeStateStyles: {
|
|
||||||
hover: {
|
|
||||||
stroke: '#e5e5e5',
|
|
||||||
lineWidth: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
items: {
|
|
||||||
style: (cfg: any, group: any, type: string) => {
|
|
||||||
const styles = {
|
|
||||||
value: { fill: "#333" }
|
|
||||||
};
|
|
||||||
return styles[type];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
stroke: "#e5e5e5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markerCfg: (cfg: any) => {
|
|
||||||
const { g_level, id } = cfg;
|
|
||||||
return {
|
|
||||||
show: (g_level === 0 && !_.isEmpty(dataSource.children)) || getStorageIds(dataSource.children).includes(id)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
graph.zoom(1);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
behaviors: ["drag-canvas", "zoom-canvas"]
|
|
||||||
};
|
|
||||||
// @ts-ignore
|
|
||||||
return !_.isEmpty(dataSource) ? <DecompositionTreeGraph {...config} /> : null;
|
|
||||||
}, [dataSource]);
|
|
||||||
return component;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default index;
|
|
||||||
|
|
||||||
const traverse: any = (arr: any[]) => {
|
|
||||||
return _.map(arr, item => {
|
|
||||||
if (!_.isEmpty(item.children)) {
|
|
||||||
const uuid = uuidV4();
|
|
||||||
return {
|
|
||||||
id: uuid,
|
|
||||||
value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] },
|
|
||||||
children: traverse(item.children)
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
const uuid = uuidV4();
|
|
||||||
return {
|
|
||||||
id: uuid, value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const findChildren: any = (arr: any[], id: string) => {
|
|
||||||
const dataSource = _.find(arr, o => o.id === id).children;
|
|
||||||
return _.map(dataSource, o => ({ ...o, children: [] }));
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
* Author: 黎永顺
|
|
||||||
* Description:数组扁平换
|
|
||||||
* Params:
|
|
||||||
* Date: 2023/10/26
|
|
||||||
*/
|
|
||||||
export const extractTree = (data: any[]) => {
|
|
||||||
if (!data.length) return [];
|
|
||||||
const list: any[] = [];
|
|
||||||
const getObj = (arr: any[]) => {
|
|
||||||
arr.forEach((row: any) => {
|
|
||||||
let obj = {};
|
|
||||||
obj = JSON.parse(JSON.stringify(row));
|
|
||||||
list.push(obj);
|
|
||||||
if (row.children) {
|
|
||||||
getObj(row.children);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
return getObj(data);
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
* Author: 黎永顺
|
|
||||||
* Description: 有children子集的id集合
|
|
||||||
* Params:
|
|
||||||
* Date: 2023/10/26
|
|
||||||
*/
|
|
||||||
const getStorageIds = (array: any[]) => {
|
|
||||||
let ids: any = [];
|
|
||||||
const getIds = (array: any, ids: any) => {
|
|
||||||
array.forEach((item: any) => {
|
|
||||||
if (item.children) ids.push(item.id);
|
|
||||||
if (item.children) ids = getIds(item.children, ids);
|
|
||||||
});
|
|
||||||
return ids;
|
|
||||||
};
|
|
||||||
if (Array.isArray(array)) {
|
|
||||||
if (array.length === 0) return [];
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
ids = getIds(array, ids);
|
|
||||||
return ids;
|
|
||||||
};
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
// @ts-ignore
|
|
||||||
import G6 from "@antv/g6";
|
|
||||||
|
|
||||||
G6.registerNode("root", {
|
|
||||||
draw: (cfg: any, group: any) => {
|
|
||||||
const size = [80, 30];
|
|
||||||
const keyShape = group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
width: size[0],
|
|
||||||
height: size[1],
|
|
||||||
x: -size[0] / 2,
|
|
||||||
y: -size[1] / 2,
|
|
||||||
fill: "rgb(19, 33, 92)",
|
|
||||||
radius: 5
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "root-keyshape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.ratio}%`,
|
|
||||||
fill: "rgba(255, 255, 255, 0.85)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: 10 - size[0] / 2,
|
|
||||||
y: 3
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "ratio-shape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.label}`,
|
|
||||||
fill: "rgba(255, 255, 255, 0.85)",
|
|
||||||
fontSize: 9,
|
|
||||||
x: -6,
|
|
||||||
y: 0
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "label-shape"
|
|
||||||
});
|
|
||||||
group.addShape("line", {
|
|
||||||
attrs: {
|
|
||||||
x1: -6,
|
|
||||||
x2: 35,
|
|
||||||
y1: 2,
|
|
||||||
y2: 2,
|
|
||||||
stroke: "rgba(255, 255, 255, 0.85)",
|
|
||||||
lineWidth: 0.5
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "divider-shape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.subLabel}`,
|
|
||||||
fill: "rgba(255, 255, 255, 0.65)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: -6,
|
|
||||||
y: 10
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "sublabel-shape"
|
|
||||||
});
|
|
||||||
return keyShape;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
G6.registerNode("level1node", {
|
|
||||||
draw: (cfg: any, group: any) => {
|
|
||||||
const size = [60, 40];
|
|
||||||
const keyShape = group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
width: size[0],
|
|
||||||
height: size[1],
|
|
||||||
x: -size[0] / 2,
|
|
||||||
y: -size[1] / 2,
|
|
||||||
fill: "rgb(213, 225, 247)",
|
|
||||||
radius: 5
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "level1node-keyshape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.label}`,
|
|
||||||
fill: "rgba(19, 33, 92, 0.65)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: 0,
|
|
||||||
y: -6,
|
|
||||||
textAlign: "center"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "label-shape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.subLabel}`,
|
|
||||||
fill: "rgba(19, 33, 92, 0.65)",
|
|
||||||
fontSize: 8,
|
|
||||||
x: 0,
|
|
||||||
y: 6,
|
|
||||||
fontWeight: 800,
|
|
||||||
textAlign: "center"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "sublabel-shape"
|
|
||||||
});
|
|
||||||
group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
x: -12,
|
|
||||||
y: 8,
|
|
||||||
width: 25,
|
|
||||||
height: 8,
|
|
||||||
radius: 4,
|
|
||||||
fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "ratio-box"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.ratio}%`,
|
|
||||||
fill: "rgba(255, 255, 255, 0.85)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: 0,
|
|
||||||
y: 9,
|
|
||||||
textAlign: "center",
|
|
||||||
textBaseline: "top"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "ratio-shape"
|
|
||||||
});
|
|
||||||
// edge end
|
|
||||||
group.addShape("line", {
|
|
||||||
attrs: {
|
|
||||||
x1: -size[0] / 2,
|
|
||||||
x2: -size[0] / 2 + 6,
|
|
||||||
y1: 0,
|
|
||||||
y2: 0,
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: "rgb(19, 33, 92)"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
group.addShape("circle", {
|
|
||||||
attrs: {
|
|
||||||
r: 2,
|
|
||||||
x: -size[0] / 2 + 6,
|
|
||||||
y: 0,
|
|
||||||
fill: "rgb(19, 33, 92)"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return keyShape;
|
|
||||||
},
|
|
||||||
update: undefined
|
|
||||||
}, "rect");
|
|
||||||
G6.registerNode("othernode", {
|
|
||||||
draw: (cfg: any, group: any) => {
|
|
||||||
const size = [100, 30];
|
|
||||||
const keyShape = group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
width: size[0],
|
|
||||||
height: size[1],
|
|
||||||
x: -size[0] / 2,
|
|
||||||
y: -size[1] / 2,
|
|
||||||
fill: "rgb(213, 225, 247)",
|
|
||||||
radius: 5
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "level1node-keyshape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.label}`,
|
|
||||||
fill: "rgba(19, 33, 92, 0.65)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: 10 - size[0] / 2,
|
|
||||||
y: -2,
|
|
||||||
textAlign: "left"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "label-shape"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.subLabel}`,
|
|
||||||
fill: "rgba(19, 33, 92, 0.65)",
|
|
||||||
fontSize: 8,
|
|
||||||
fontWeight: 800,
|
|
||||||
x: 10 - size[0] / 2,
|
|
||||||
y: 8,
|
|
||||||
textAlign: "left"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "sublabel-shape"
|
|
||||||
});
|
|
||||||
group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
x: 12,
|
|
||||||
y: -4,
|
|
||||||
width: 25,
|
|
||||||
height: 8,
|
|
||||||
radius: 4,
|
|
||||||
fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "ratio-box"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: `${cfg.ratio}%`,
|
|
||||||
fill: "rgba(255, 255, 255, 0.85)",
|
|
||||||
fontSize: 6,
|
|
||||||
x: 18,
|
|
||||||
y: -3,
|
|
||||||
textAlign: "left",
|
|
||||||
textBaseline: "top"
|
|
||||||
},
|
|
||||||
draggable: true,
|
|
||||||
name: "ratio-shape"
|
|
||||||
});
|
|
||||||
if (cfg.operator) {
|
|
||||||
group.addShape("rect", {
|
|
||||||
attrs: {
|
|
||||||
x: -8,
|
|
||||||
y: 27,
|
|
||||||
width: 16,
|
|
||||||
height: 16,
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: "#aaa",
|
|
||||||
lineDash: [2, 1],
|
|
||||||
opacity: 0
|
|
||||||
},
|
|
||||||
name: "operator-box"
|
|
||||||
});
|
|
||||||
group.addShape("circle", {
|
|
||||||
attrs: {
|
|
||||||
r: 6,
|
|
||||||
x: 0,
|
|
||||||
y: 35,
|
|
||||||
fill: "rgba(240, 90, 109, 0.15)"
|
|
||||||
},
|
|
||||||
name: "operator-circle"
|
|
||||||
});
|
|
||||||
group.addShape("text", {
|
|
||||||
attrs: {
|
|
||||||
text: cfg.operator,
|
|
||||||
x: 0,
|
|
||||||
y: 34,
|
|
||||||
fontSize: 12,
|
|
||||||
fill: "rgba(240, 90, 109, 0.85)",
|
|
||||||
textAlign: "center",
|
|
||||||
textBaseline: "middle"
|
|
||||||
},
|
|
||||||
name: "operator-symbol"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// edge end
|
|
||||||
group.addShape("line", {
|
|
||||||
attrs: {
|
|
||||||
x1: -size[0] / 2,
|
|
||||||
x2: -size[0] / 2 + 6,
|
|
||||||
y1: 0,
|
|
||||||
y2: 0,
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: "rgb(19, 33, 92)"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
group.addShape("circle", {
|
|
||||||
attrs: {
|
|
||||||
r: 2,
|
|
||||||
x: -size[0] / 2 + 6,
|
|
||||||
y: 0,
|
|
||||||
fill: "rgb(19, 33, 92)"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return keyShape;
|
|
||||||
},
|
|
||||||
update: undefined
|
|
||||||
}, "rect");
|
|
||||||
G6.registerEdge("round-poly", {
|
|
||||||
getControlPoints: (cfg: any) => {
|
|
||||||
const { startPoint, endPoint } = cfg;
|
|
||||||
return [
|
|
||||||
startPoint,
|
|
||||||
{
|
|
||||||
x: startPoint.x,
|
|
||||||
y: endPoint.y
|
|
||||||
},
|
|
||||||
endPoint
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}, "polyline");
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.relation-graph .rel-toolbar-h {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rootNode {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgb(0, 154, 73);
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 25px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.levelNode {
|
|
||||||
background: rgb(170, 212, 179) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commonNode {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-right-menu-panel {
|
|
||||||
z-index: 999;
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
border: 1px solid rgb(238, 238, 238);
|
|
||||||
box-shadow: rgb(204, 204, 204) 0px 0px 8px;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
.c-node-menu-item {
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 5px 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: rgb(68, 68, 68);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-node-menu-item:first-child {
|
|
||||||
border-bottom: 1px solid rgb(239, 239, 239);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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", 'drag-node'],
|
|
||||||
// autoFit: false,
|
|
||||||
// fitCenter: true
|
|
||||||
};
|
|
||||||
}, [nodes, edges]);
|
|
||||||
// <FundFlowGraph {...config} />
|
|
||||||
return ((!_.isEmpty(nodes) && !_.isEmpty(edges)) ? <div></div> : null);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default index;
|
|
||||||
Loading…
Reference in New Issue