diff --git a/mock/api.ts b/mock/api.ts
index f845c0d..4455f17 100644
--- a/mock/api.ts
+++ b/mock/api.ts
@@ -73,86 +73,156 @@ export default {
"parentId": 2
}
],
- 'GET /user/data': [
- {
- "id": 1,
- "parentId": null,
- "ftype": 0,
- "fname": "维森集团",
+ 'GET /user/data': {
+ "data": [
+ {
+ "fleaderjob": "销售",
+ "fname": "维森总部",
+ "ftype": "0",
"fleadername": "杨文元",
- "fleaderimg": "./img/avator.png",
- "fleaderjob": "董事长",
- "fplan": 1000,
- "fonjob": 987
- },
- {
- "id": 2,
- "parentId": 1,
- "ftype": 1,
- "fname": "南京分公司",
+ "fonjob": "7902",
+ "fleaderimg": "",
+ "id": "15",
+ "fplan": "10",
+ "expand": true
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "人力资源部",
+ "ftype": "2",
"fleadername": "杨文元",
- "fleaderimg": "./img/avator.png",
- "fleaderjob": "总经理",
- "fplan": 300,
- "fonjob": 287
- },
- {
- "id": 3,
- "parentId": 1,
- "ftype": 1,
- "fname": "南京分公司",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "5",
+ "fnumber": "5",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "培训组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "6",
+ "fnumber": "6",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "服务管理组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "7",
+ "fnumber": "7",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "人事服务组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "8",
+ "fnumber": "8",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "员工关系组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "9",
+ "fnumber": "9",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "信息与数据组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "10",
+ "fnumber": "10",
+ "parentId": "2",
+ "fplan": "200"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "招聘组",
+ "ftype": "2",
+ "fleadername": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "11",
+ "fnumber": "11",
+ "parentId": "3",
+ "fplan": "200",
+ "expand": "1"
+ },
+ {
+ "fleaderjob": "部长",
+ "fname": "薪酬核算组",
+ "ftype": "2",
"fleadername": "杨文元",
- "fleaderimg": "./img/avator.png",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "12",
+ "fnumber": "12",
+ "parentId": "4",
+ "fplan": "200"
+ },
+ {
"fleaderjob": "总经理",
- "fplan": 300,
- "fonjob": 287
- },
- {
- "id": 4,
- "parentId": 1,
- "ftype": 1,
- "fname": "南京分公司",
+ "fname": "共享服务中心",
+ "ftype": "1",
"fleadername": "杨文元",
- "fleaderimg": "./img/avator.png",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "2",
+ "fnumber": "2",
+ "parentId": "15",
+ "fplan": "200",
+ "expand": "1"
+ },
+ {
"fleaderjob": "总经理",
- "fplan": 300,
- "fonjob": 287
- },
- {
- "id": 5,
- "parentId": 2,
- "ftype": 2,
- "fname": "销售部",
+ "fname": "事业部A",
+ "ftype": "1",
"fleadername": "杨文元",
- "fleaderimg": "./img/avator.png",
- "fleaderjob": "部长",
- "fplan": 200,
- "fonjob": 200
- },
- {
- "id": 6,
- "parentId": 5,
- "ftype": 3,
- "fname": "销售",
- "fleadername": null,
- "fleaderimg": null,
- "fleaderjob": null,
- "fplan": 200,
- "fonjob": 200
- },
- {
- "id": 7,
- "parentId": 6,
- "ftype": 4,
- "fname": "杨文元",
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "3",
+ "fnumber": "3",
+ "parentId": "15",
+ "fplan": "200",
+ "expand": "1"
+ },
+ {
+ "fleaderjob": "总经理",
+ "fname": "苏州分公司",
+ "ftype": "1",
"fleadername": "杨文元",
- "department": "销售部",
- "fleaderimg": "./img/avator.png",
- "fleaderjob": "销售",
- "mobile": "13989058743",
- "address": "秦淮区新街口12-201",
- "fplan": 200,
- "fonjob": 200
- }
- ]
+ "fonjob": "198",
+ "fleaderimg": "",
+ "id": "4",
+ "fnumber": "4",
+ "parentId": "15",
+ "fplan": "200",
+ "expand": "1"
+ }
+ ],
+ "api_status": true
+ }
}
\ No newline at end of file
diff --git a/src/components/orgChart/index.jsx b/src/components/orgChart/index.jsx
index a010448..bfa43f3 100644
--- a/src/components/orgChart/index.jsx
+++ b/src/components/orgChart/index.jsx
@@ -17,17 +17,20 @@ export const OrgChartComponent = (props, ref) => {
useLayoutEffect(() => {
if (props.data && d3Container.current) {
if (!chart) {
- chart = new OrgChart();
+ chart = new OrgChart({expandLevel: 3});
+ window.chart = chart
}
props.setChart(chart)
try {
+
+ let buttonClick = chart.onButtonClick
+
chart
.container(d3Container.current)
.data(props.data)
.nodeWidth(props.nodeWidth)
.nodeHeight(props.nodeHeight)
.layout("left")
-
.linkUpdate(function(d, i, arr) {
d3.select(this)
.attr("stroke", "#66BAF5")
@@ -38,11 +41,17 @@ export const OrgChartComponent = (props, ref) => {
console.log(d, 'Id of clicked node ');
props.onNodeClick(d);
})
+
.buttonContent(props.buttonContent)
.nodeContent(props.nodeContent)
- .render();
+ .render()
+
+ chart.setCentered(chart.getChartState().root.id).expandExpandNodes().render();
+ chart.onButtonClick = (event, d) => {
+ buttonClick.bind(chart)(event, d)
+ props.onButtonClick && props.onButtonClick(event, d);
+ }
- chart.expandAll()
} catch(err) {
console.log(err);
}
diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx
index c0a888a..1de3824 100644
--- a/src/components/topBar/index.jsx
+++ b/src/components/topBar/index.jsx
@@ -65,12 +65,12 @@ export class TopBar extends React.Component {
-
- 数据日期: this.handleFormChange({date: value && value != "" ? value.format("YYYY-MM-DD") : ""})} />
+
+ 数据日期: this.handleFormChange({date: value && value != "" ? value.format("YYYY-MM-DD") : ""})} />
-
+
维度:
-
+
根节点:
-
+
显示层级:
-
+ {/*
this.handleFormChange({fisvitual: e.target.checked ? "1": "0"})}>显示虚拟组织
-
+ */}
diff --git a/src/pages/company.jsx b/src/pages/company.jsx
index 0a6fd8c..404142e 100644
--- a/src/pages/company.jsx
+++ b/src/pages/company.jsx
@@ -14,12 +14,51 @@ export default function companyPage() {
const [sliderProgress, setSliderProgress] = useState(50);
let addNodeChildFunc = null;
let orgChart = null;
+
+ let topBarSearchRequest = null;
// 点击节点
function onNodeClick(nodeId) {
// alert('clicked ' + nodeId);
}
+
+ // 扩展按钮点击
+ function onButtonClick(event, d) {
+ if(d.children) {
+ let idsList = []
+ d.children.forEach(item => {
+ if(item.data.hasChildren && !item._children) {
+ idsList.push(item.data.id);
+ }
+ })
+
+ if(idsList.length == 0) {
+ return
+ }
+
+ let idsStr = idsList.join(",")
+
+ console.log("idsStr", idsStr);
+
+ let api = "";
+ if(topBarSearchRequest) {
+ let request = {...topBarSearchRequest, ids: idsStr}
+ api = "/api/bs/hrmorganization/orgchart/asyncCompanyData" + qs.stringify(request, {addQueryPrefix: true})
+ } else {
+ api = "/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") + "&ids="+idsStr
+ }
+
+ fetch(api).then(res => res.json()).then(data => {
+ if(data.data) {
+ data.data.forEach(item => {
+ window.chart.addNode(item)
+ })
+ }
+ })
+ }
+ }
+
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1
@@ -78,8 +117,15 @@ export default function companyPage() {
const nodeContentRender = (d, i, arr, state) => {
+ // 集团地址
+ let companyUrl = "/spa/organization/static/index.html#/main/organization/group"
+ // 分部地址
+ let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/"
+ // 部门地址
+ let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/"
+
if(d.data.ftype == 0) {
- return `
+ return `
@@ -104,7 +150,7 @@ export default function companyPage() {
`
} else if(d.data.ftype == 1) {
- return `
+ return `
@@ -121,7 +167,7 @@ export default function companyPage() {
`
} else if(d.data.ftype == 2) {
return `
-
+
res.json()).then(data => {
setData(data.data);
})
@@ -226,7 +273,7 @@ export default function companyPage() {
{handleExport(type)}}
onSearch={(requestData) => {handleSearch(requestData)}}
- url="/bs/hrmorganization/orgchart/jcl/orgchart/getCondition?type=company"
+ url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
/>
handleTopLayoutClick(progressBtn)}
diff --git a/src/pages/user.jsx b/src/pages/user.jsx
index 0dea0da..118f92b 100644
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@@ -14,12 +14,51 @@ export default function userPage() {
let addNodeChildFunc = null;
let orgChart = null;
let progressBtnRef = null;
+ let topBarSearchRequest = null;
+
// 点击节点
function onNodeClick(nodeId) {
// alert('clicked ' + nodeId);
}
+ function onButtonClick(event, d) {
+
+ if(d.children) {
+ let idsList = []
+ d.children.forEach(item => {
+ if(item.data.hasChildren && !item._children) {
+ idsList.push(item.data.id);
+ }
+ })
+
+ if(idsList.length == 0) {
+ return
+ }
+
+ let idsStr = idsList.join(",")
+
+ console.log("idsStr", idsStr);
+
+ let api = "";
+ if(topBarSearchRequest) {
+ let request = {...topBarSearchRequest, ids: idsStr}
+ api = "/api/bs/hrmorganization/orgchart/asyncUserData" + qs.stringify(request, {addQueryPrefix: true})
+
+ } else {
+ api = "/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") + "&ids="+idsStr
+ }
+
+ fetch(api).then(res => res.json()).then(data => {
+ if(data.data) {
+ data.data.forEach(item => {
+ window.chart.addNode(item)
+ })
+ }
+ })
+ }
+ }
+
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1
@@ -64,12 +103,12 @@ export default function userPage() {
// tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top= 50 + "px";
- orgChart && orgChart.layout('top').render().fit();
+ orgChart && orgChart.layout('top').render()
}
const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top= 50 + "px";
- orgChart && orgChart.layout('left').render().fit();
+ orgChart && orgChart.layout('left').render()
}
const handleZoomIn = (progressBtn) => {
@@ -130,7 +169,8 @@ export default function userPage() {
}
const handleSearch = (requestData) => {
- let api = "/api/bs/hrmorganization/orgchart/jcl/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
+ topBarSearchRequest = requestData
+ let api = "/api/bs/hrmorganization/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
fetch(api).then(res => res.json()).then(data => {
setData(data.data)
})
@@ -139,6 +179,21 @@ export default function userPage() {
// top bar end
const nodeContentRender = (d, i, arr, state) => {
+ // 集团地址
+ let companyUrl = "/spa/organization/static/index.html#/main/organization/group"
+ // 分部地址
+ let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/"
+ // 部门地址
+ let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/"
+ // 岗位地址
+ let jobtitleUrl = "/spa/organization/static/index.html#/main/organization/jobExtend/";
+
+ // 人员地址
+ let userUrl = "/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/";
+
+ // 通讯录
+ let addressBookUrl = "/spa/hrm/index_mobx.html#/main/hrm/addressBook";
+
if(d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
return `
@@ -154,13 +209,15 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #000000;
- ">${d.data.fname}
+ " onclick="window.open('${d.data.ftype == 0 ? companyUrl :
+ d.data.ftype == 1 ? subcompanyUrl + d.data.fnumber :
+ d.data.ftype == 2 ? departmentUrl + d.data.fnumber : ""}', '_blank')">${d.data.fname}
-
-
+
+
@@ -178,9 +235,9 @@ export default function userPage() {
color: #333333;
margin-bottom: 19px;
">${d.data.fname} / ${d.data.fleaderjob}
-
-
编制: ${d.data.fplan}
-
在岗: ${d.data.fonjob}
+
+
编制: ${d.data.fplan}
+
在岗: ${d.data.fonjob}
@@ -201,7 +258,9 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #000000;
- ">${d.data.fname}
+ " onclick="window.open('${
+ jobtitleUrl + d.data.fnumber
+ }', '_blank')">${d.data.fname}
@@ -215,13 +274,15 @@ export default function userPage() {
font-weight: bold;
color: #333333;
margin-bottom: 23px;
- ">${d.data.fname}
+ " onclick="window.open('${
+ jobtitleUrl + d.data.fnumber
+ }', '_blank')">${d.data.fname}
+ " onclick="window.open('${addressBookUrl}', '_blank')">
编制:${d.data.fplan}
在岗:${d.data.fonjob}
@@ -231,7 +292,7 @@ export default function userPage() {
`
} else if(d.data.ftype == 4) {
return `
-
+
@@ -291,6 +352,7 @@ export default function userPage() {
setChart={(chart) => orgChart = chart}
setClick={click => (addNodeChildFunc = click)}
onNodeClick={onNodeClick}
+ onButtonClick={onButtonClick}
data={data}
buttonContent={
buttonContentRender