|
|
|
|
@ -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 `<div>
|
|
|
|
|
<div style="position: relative;">
|
|
|
|
|
@ -154,13 +209,15 @@ export default function userPage() {
|
|
|
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #000000;
|
|
|
|
|
">${d.data.fname}</span>
|
|
|
|
|
" 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}</span>
|
|
|
|
|
<span style="margin-left: 70px;">
|
|
|
|
|
<img src="./img/user-card/line1.png" />
|
|
|
|
|
<img src="./img/user-card/line2.png" />
|
|
|
|
|
</span>
|
|
|
|
|
<div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
|
|
|
|
|
<div style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
|
|
|
|
|
<div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${userUrl + d.data.fleader}', '_blank')">
|
|
|
|
|
<div onclick="window.open('${userUrl + d.data.fleader}', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
|
|
|
|
|
<img src="${d.data.fleaderimg ? d.data.fleaderimg : "./img/default_avator.png"}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block; margin-left: 6px;">
|
|
|
|
|
@ -178,9 +235,9 @@ export default function userPage() {
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 19px;
|
|
|
|
|
">${d.data.fname} / ${d.data.fleaderjob}</div>
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 28px; padding: 0px 5px; min-width: 69px;">编制: ${d.data.fplan}</div>
|
|
|
|
|
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 28px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${d.data.fonjob}</div>
|
|
|
|
|
<div style="display: flex;" onclick="window.open('${addressBookUrl}', '_blank')">
|
|
|
|
|
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${d.data.fplan}</div>
|
|
|
|
|
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${d.data.fonjob}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -201,7 +258,9 @@ export default function userPage() {
|
|
|
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #000000;
|
|
|
|
|
">${d.data.fname}</span>
|
|
|
|
|
" onclick="window.open('${
|
|
|
|
|
jobtitleUrl + d.data.fnumber
|
|
|
|
|
}', '_blank')">${d.data.fname}</span>
|
|
|
|
|
<span style="margin-left: 70px;">
|
|
|
|
|
<img src="./img/user-card/line1.png" />
|
|
|
|
|
<img src="./img/user-card/line2.png" />
|
|
|
|
|
@ -215,13 +274,15 @@ export default function userPage() {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 23px;
|
|
|
|
|
">${d.data.fname}</div>
|
|
|
|
|
" onclick="window.open('${
|
|
|
|
|
jobtitleUrl + d.data.fnumber
|
|
|
|
|
}', '_blank')">${d.data.fname}</div>
|
|
|
|
|
<div style="
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #333333;
|
|
|
|
|
">
|
|
|
|
|
" onclick="window.open('${addressBookUrl}', '_blank')">
|
|
|
|
|
<span>编制：${d.data.fplan}</span>
|
|
|
|
|
<span style="margin-left: 10px;">在岗：${d.data.fonjob}</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -231,7 +292,7 @@ export default function userPage() {
|
|
|
|
|
</div>`
|
|
|
|
|
} else if(d.data.ftype == 4) {
|
|
|
|
|
return `<div>
|
|
|
|
|
<div style="position: relative;">
|
|
|
|
|
<div style="position: relative;" onclick="window.open('${userUrl + d.data.fnumber}', '_blank')">
|
|
|
|
|
<img src="./img/user-card/card-label-start.png" />
|
|
|
|
|
<span >
|
|
|
|
|
<img src="./img/user-card/line1.png" />
|
|
|
|
|
@ -291,6 +352,7 @@ export default function userPage() {
|
|
|
|
|
setChart={(chart) => orgChart = chart}
|
|
|
|
|
setClick={click => (addNodeChildFunc = click)}
|
|
|
|
|
onNodeClick={onNodeClick}
|
|
|
|
|
onButtonClick={onButtonClick}
|
|
|
|
|
data={data}
|
|
|
|
|
buttonContent={
|
|
|
|
|
buttonContentRender
|
|
|
|
|
|
MustangDeng
3 years ago