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