liang.cheng
/
org-chart-frant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed

This commit is contained in:
Chengliang 2022-08-11 10:03:55 +08:00
parent 57cc610174
commit 44c17194c8
2 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.umirc.ts
View File

@ -2,7 +2,7 @@
* @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2022-08-08 16:31:31
* @LastEditTime: 2022-08-09 10:34:39
* @FilePath: /org-chart-frant/.umirc.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -26,7 +26,7 @@ export default defineConfig({
proxy: {
'/api': {
// 标识需要进行转换的请求的url
target: 'http://localhost:8686/api', // 服务端域名
target: 'http://localhost:8686/api', // 服务端域名 / http://localhost:8686
changeOrigin: true, // 允许域名进行转换
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
},

71
src/components/orgChart/index.jsx
View File

@ -1,7 +1,15 @@
/*
* @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2022-08-09 11:01:43
* @FilePath: /org-chart-frant/src/components/orgChart/index.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useLayoutEffect, useRef, useEffect } from 'react';
import { OrgChart } from 'd3-org-chart';
import * as d3 from 'd3';
import { message } from "antd";
import { message } from 'antd';
export const OrgChartComponent = (props, ref) => {
const d3Container = useRef(null);
@ -12,54 +20,53 @@ export const OrgChartComponent = (props, ref) => {
}
props.setClick(addNode);
// We need to manipulate DOM
useLayoutEffect(() => {
if (props.data && d3Container.current) {
if (!chart) {
chart = new OrgChart({expandLevel: 3});
window.chart = chart
chart = new OrgChart({ expandLevel: 3 });
window.chart = chart;
}
props.setChart(chart)
props.setChart(chart);
try {
let buttonClick = chart.onButtonClick
let buttonClick = chart.onButtonClick;
chart
.container(d3Container.current)
.data(props.data)
.nodeWidth(props.nodeWidth)
.nodeHeight(props.nodeHeight)
.layout("top")
.linkUpdate(function(d, i, arr) {
d3.select(this)
.attr("stroke", "#66BAF5")
.attr("stroke-width", 1)
.style("stroke-dasharray", ("3, 3"))
})
.onNodeClick((d, i, arr) => {
console.log(d, 'Id of clicked node ');
props.onNodeClick(d);
})
.buttonContent(props.buttonContent)
.nodeContent(props.nodeContent)
.render()
.container(d3Container.current)
.data(props.data)
.nodeWidth(props.nodeWidth)
.nodeHeight(props.nodeHeight)
.layout('top')
.linkUpdate(function (d, i, arr) {
d3.select(this)
.attr('stroke', '#66BAF5')
.attr('stroke-width', 1)
.style('stroke-dasharray', '3, 3');
})
.onNodeClick((d, i, arr) => {
console.log(d, 'Id of clicked node ');
props.onNodeClick(d);
})
chart.setCentered(chart.getChartState().root.id).expandExpandNodes().render();
.buttonContent(props.buttonContent)
.nodeContent(props.nodeContent)
.render();
chart
.setCentered(chart.getChartState().root.id)
.expandExpandNodes()
.render();
chart.onButtonClick = (event, d) => {
buttonClick.bind(chart)(event, d)
buttonClick.bind(chart)(event, d);
props.onButtonClick && props.onButtonClick(event, d);
}
} catch(err) {
};
} catch (err) {
console.log(err);
message.warning(err);
}
}
}, [props.data, d3Container.current]);
return (
<div>