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

增加权限

Browse Source
feature/fj
Chengliang 3 years ago
parent 44c17194c8
commit 8925fd2d70
3 changed files with 287 additions and 235 deletions
Show Stats Download Patch File Download Diff File

BIN
public/img/permission.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

444
src/pages/company.jsx
Unescape Escape View File

@ -1,131 +1,141 @@
import styles from './index.less'; import styles from './index.less';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import {OrgChartComponent} from '@/components/orgChart' import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { TopBar } from '../components/topBar'; import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar'; import ToolBar from '../components/toolBar';
import jsPDF from 'jspdf' import jsPDF from 'jspdf';
import moment from 'moment'; import moment from 'moment';
import qs from 'qs'; import qs from 'qs';
import { message } from 'antd';
export default function companyPage() { export default function companyPage() {
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [sliderProgress, setSliderProgress] = useState(50); const [sliderProgress, setSliderProgress] = useState(50);
let addNodeChildFunc = null; let addNodeChildFunc = null;
let orgChart = null; let orgChart = null;
let topBarSearchRequest = null; let topBarSearchRequest = null;
const [hasRight, setHasRight] = useState('');
// 点击节点
function onNodeClick(nodeId) { // 点击节点
// alert('clicked ' + nodeId); function onNodeClick(nodeId) {
} // alert('clicked ' + nodeId);
}
// 扩展按钮点击 // 扩展按钮点击
function onButtonClick(event, d) { function onButtonClick(event, d) {
if(d.children) { if (d.children) {
let idsList = [] let idsList = [];
d.children.forEach(item => { d.children.forEach((item) => {
if(item.data.hasChildren && !item._children) { if (item.data.hasChildren && !item._children) {
idsList.push(item.data.id); 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 (idsList.length == 0) {
if(data.data) { return;
data.data.forEach(item => {
window.chart.addNode(item)
})
}
})
} }
}
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1
return `./img/department/${index}.png`
}
// 获取部门图片 let idsStr = idsList.join(',');
function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1
return `./img/subcompany/${index}.png`
}
// 获取数据 console.log('idsStr', idsStr);
useEffect(() => {
d3.json(
// "/company/data"
"/api/bs/hrmorganization/orgchart/companyData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD")
).then(data => {
setData(data.data);
});
}, [true]);
// ButtonContent渲染 let api = '';
const buttonContentRender = ({ node, state }) => { if (topBarSearchRequest) {
if(node.children) { let request = { ...topBarSearchRequest, ids: idsStr };
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`; api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true });
} else { } else {
return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div> </div>` api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') +
'&ids=' +
idsStr;
} }
}
// 节点宽度渲染 fetch(api)
const nodeWidthRender = d => .then((res) => res.json())
{ .then((data) => {
if(d.data.ftype == 0) { if (data.data) {
return 220; data.data.forEach((item) => {
} else if(d.data.ftype == 1) { window.chart.addNode(item);
return 160; });
} else if(d.data.ftype == 2) { }
return 144; });
}
return 200;
} }
}
const nodeHeightRender = d => {
if(d.data.ftype == 0) { // 获取部门图片
return 100; function getDepartmentImage() {
} else if(d.data.ftype == 1) { let index = Math.floor(Math.random() * 8) + 1;
return 160; return `./img/department/${index}.png`;
}else if(d.data.ftype == 2) { }
return 56;
} // 获取部门图片
return 120; function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1;
return `./img/subcompany/${index}.png`;
}
// 获取数据
useEffect(() => {
d3.json(
// "/company/data"
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'),
).then((data) => {
setData(data.data);
setHasRight(data.hasRight);
});
}, [true]);
// ButtonContent渲染
const buttonContentRender = ({ node, state }) => {
if (node.children) {
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`;
} else {
return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div> </div>`;
} }
};
// 节点宽度渲染
const nodeContentRender = (d, i, arr, state) => { const nodeWidthRender = (d) => {
// 集团地址 if (d.data.ftype == 0) {
let companyUrl = "/spa/organization/static/index.html#/main/organization/group" return 220;
// 分部地址 } else if (d.data.ftype == 1) {
let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/" return 160;
// 部门地址 } else if (d.data.ftype == 2) {
let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/" return 144;
}
if(d.data.ftype == 0) { return 200;
return `<div onclick="window.open('${companyUrl}', '_blank')"> };
const nodeHeightRender = (d) => {
if (d.data.ftype == 0) {
return 100;
} else if (d.data.ftype == 1) {
return 160;
} else if (d.data.ftype == 2) {
return 56;
}
return 120;
};
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 `<div onclick="window.open('${companyUrl}', '_blank')">
<div style="display: inline-block; vertical-align: top;"> <div style="display: inline-block; vertical-align: top;">
<img src="./img/company.png" /> <img src="./img/company.png" />
</div> </div>
@ -148,9 +158,11 @@ export default function companyPage() {
margin-top: 10px; margin-top: 10px;
">COMPANY_GROUP</div> ">COMPANY_GROUP</div>
</div> </div>
</div>` </div>`;
} else if(d.data.ftype == 1) { } else if (d.data.ftype == 1) {
return `<div onclick="window.open('${subcompanyUrl + d.data.fnumber}', '_blank')"> return `<div onclick="window.open('${
subcompanyUrl + d.data.fnumber
}', '_blank')">
<div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;"> <div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;">
<img src="${getSubcompanyImage()}" /> <img src="${getSubcompanyImage()}" />
</div> </div>
@ -164,10 +176,12 @@ export default function companyPage() {
"> ">
${d.data.fname} ${d.data.fname}
</div> </div>
</div>` </div>`;
} else if(d.data.ftype == 2) { } else if (d.data.ftype == 2) {
return ` return `
<div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${departmentUrl + d.data.fnumber}')"> <div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${
departmentUrl + d.data.fnumber
}')">
<div style="padding-left: 8px; padding-top: 23px;"> <div style="padding-left: 8px; padding-top: 23px;">
<img src="${getDepartmentImage()}"/> <img src="${getDepartmentImage()}"/>
<span style=" <span style="
@ -179,121 +193,141 @@ export default function companyPage() {
">${d.data.fname}</span> ">${d.data.fname}</span>
</div> </div>
</div> </div>
` `;
}
return `<div>${d.data.fname}</div>`
} }
return `<div>${d.data.fname}</div>`;
};
// tool bar start
const handleTopLayoutClick = (progressBtn) => { // tool bar start
progressBtn.current.style.top= 50 + "px"; const handleTopLayoutClick = (progressBtn) => {
orgChart && orgChart.layout('top').render(); progressBtn.current.style.top = 50 + 'px';
} orgChart && orgChart.layout('top').render();
};
const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top= 50 + "px"; const handleLeftLayoutClick = (progressBtn) => {
orgChart && orgChart.layout('left').render(); progressBtn.current.style.top = 50 + 'px';
} orgChart && orgChart.layout('left').render();
};
const handleZoomIn = (progressBtn) => {
if(progressBtn) { const handleZoomIn = (progressBtn) => {
let top = (parseInt(progressBtn.current.style.top) - 10) if (progressBtn) {
if(top <= 0) { let top = parseInt(progressBtn.current.style.top) - 10;
top = 30; if (top <= 0) {
} top = 30;
progressBtn.current.style.top = top + "px";
} }
orgChart && orgChart.zoomIn(); progressBtn.current.style.top = top + 'px';
} }
orgChart && orgChart.zoomIn();
const handleZoomOut = (progressBtn) => { };
if(progressBtn) {
let top = (parseInt(progressBtn.current.style.top) + 10) const handleZoomOut = (progressBtn) => {
if(top >= 100) { if (progressBtn) {
top = 70; let top = parseInt(progressBtn.current.style.top) + 10;
} if (top >= 100) {
progressBtn.current.style.top = top + "px"; top = 70;
} }
progressBtn.current.style.top = top + 'px';
orgChart && orgChart.zoomOut();
}
const handleZoomBehavior = (value) => {
orgChart && orgChart.zoomBehavior(value - 50);
} }
// tool bar end orgChart && orgChart.zoomOut();
};
// top bar start
const handleZoomBehavior = (value) => {
function downloadPdf(chart) { orgChart && orgChart.zoomBehavior(value - 50);
chart.exportImg({ };
save: false,
onLoad: (base64) => { // tool bar end
var pdf = new jsPDF();
var img = new Image(); // top bar start
img.src = base64;
img.onload = function () { function downloadPdf(chart) {
pdf.addImage( chart.exportImg({
img, save: false,
'JPEG', onLoad: (base64) => {
5, var pdf = new jsPDF();
5, var img = new Image();
595 / 3, img.src = base64;
((img.height / img.width) * 595) / 3 img.onload = function () {
); pdf.addImage(
pdf.save('chart.pdf'); img,
}; 'JPEG',
}, 5,
}); 5,
595 / 3,
((img.height / img.width) * 595) / 3,
);
pdf.save('chart.pdf');
};
},
});
}
const handleExport = (type) => {
if (type == 'png') {
orgChart && orgChart.exportImg({ full: true });
} else {
orgChart && downloadPdf(orgChart);
} }
};
const handleExport = (type) => {
if(type == "png") { const handleSearch = (requestData) => {
orgChart && orgChart.exportImg({full:true}); topBarSearchRequest = requestData;
} else { let api =
orgChart && downloadPdf(orgChart) '/api/bs/hrmorganization/orgchart/companyData' +
} qs.stringify(requestData, { addQueryPrefix: true });
} fetch(api)
.then((res) => res.json())
const handleSearch = (requestData) => { .then((data) => {
topBarSearchRequest = requestData
let api = "/api/bs/hrmorganization/orgchart/companyData" + qs.stringify(requestData, {addQueryPrefix: true})
fetch(api).then(res => res.json()).then(data => {
setData(data.data); setData(data.data);
}) });
} };
// top bar end
// top bar end
if (hasRight === false) {
//return message.error("对不起，您暂时没有权限", 2);
return ( return (
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
<img
style={{ display: 'block', margin: '0 auto' }}
src="./img/permission.png"
/>
<p style={{ textAlign: 'center' }}>对不起，您暂时没有权限!</p>
</div>
);
}
return (
hasRight && (
<div className={styles.contentWrapper}> <div className={styles.contentWrapper}>
<TopBar <TopBar
onExport={(type) => {handleExport(type)}} onExport={(type) => {
onSearch={(requestData) => {handleSearch(requestData)}} handleExport(type);
}}
onSearch={(requestData) => {
handleSearch(requestData);
}}
url="/api/bs/hrmorganization/orgchart/getCondition?type=company" url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
/> />
<ToolBar <ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)} onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} onLeftLayoutClick={(progressBtn) =>
handleLeftLayoutClick(progressBtn)
}
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
onZoomBehavior={(value) => handleZoomBehavior(value)} onZoomBehavior={(value) => handleZoomBehavior(value)}
/> />
<OrgChartComponent <OrgChartComponent
setChart={(chart) => orgChart = chart} setChart={(chart) => (orgChart = chart)}
setClick={click => (addNodeChildFunc = click)} setClick={(click) => (addNodeChildFunc = click)}
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
data={data} data={data}
buttonContent={ buttonContent={buttonContentRender}
buttonContentRender
}
nodeWidth={nodeWidthRender} nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender} nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender} nodeContent={nodeContentRender}
/> />
</div> </div>
); )
);
} }

74
src/pages/user.jsx
Unescape Escape View File

@ -15,6 +15,7 @@ export default function userPage() {
let orgChart = null; let orgChart = null;
let progressBtnRef = null; let progressBtnRef = null;
let topBarSearchRequest = null; let topBarSearchRequest = null;
const [hasRight, setHasRight] = useState('');
// 点击节点 // 点击节点
function onNodeClick(nodeId) { function onNodeClick(nodeId) {
@ -84,6 +85,7 @@ export default function userPage() {
moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD'),
).then((data) => { ).then((data) => {
setData(data.data); setData(data.data);
setHasRight(data.hasRight);
}); });
}, [true]); }, [true]);
@ -377,34 +379,50 @@ export default function userPage() {
} }
}; };
if (hasRight === false) {
return (
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
<img
style={{ display: 'block', margin: '0 auto' }}
src="./img/permission.png"
/>
<p style={{ textAlign: 'center' }}>对不起，您暂时没有权限!</p>
</div>
);
}
return ( return (
<div className={styles.contentWrapper}> hasRight && (
<TopBar <div className={styles.contentWrapper}>
onExport={(type) => { <TopBar
handleExport(type); onExport={(type) => {
}} handleExport(type);
onSearch={(requestData) => { }}
handleSearch(requestData); onSearch={(requestData) => {
}} handleSearch(requestData);
url="/api/bs/hrmorganization/orgchart/getCondition?type=user" }}
/> url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
<ToolBar />
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)} <ToolBar
onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} onLeftLayoutClick={(progressBtn) =>
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} handleLeftLayoutClick(progressBtn)
/> }
<OrgChartComponent onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
setChart={(chart) => (orgChart = chart)} onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
setClick={(click) => (addNodeChildFunc = click)} />
onNodeClick={onNodeClick} <OrgChartComponent
onButtonClick={onButtonClick} setChart={(chart) => (orgChart = chart)}
data={data} setClick={(click) => (addNodeChildFunc = click)}
buttonContent={buttonContentRender} onNodeClick={onNodeClick}
nodeWidth={nodeWidthRender} onButtonClick={onButtonClick}
nodeHeight={nodeHeightRender} data={data}
nodeContent={nodeContentRender} buttonContent={buttonContentRender}
/> nodeWidth={nodeWidthRender}
</div> nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender}
/>
</div>
)
); );
} }

Write Preview
Loading…
Cancel
Save