diff --git a/public/img/permission.png b/public/img/permission.png new file mode 100644 index 0000000..dd2cbfa Binary files /dev/null and b/public/img/permission.png differ diff --git a/src/pages/company.jsx b/src/pages/company.jsx index 1a2d4e4..16ee418 100644 --- a/src/pages/company.jsx +++ b/src/pages/company.jsx @@ -1,131 +1,141 @@ import styles from './index.less'; -import React, { useEffect, useState } from "react"; -import {OrgChartComponent} from '@/components/orgChart' +import React, { useEffect, useState } from 'react'; +import { OrgChartComponent } from '@/components/orgChart'; import * as d3 from 'd3'; import { TopBar } from '../components/topBar'; import ToolBar from '../components/toolBar'; -import jsPDF from 'jspdf' +import jsPDF from 'jspdf'; import moment from 'moment'; import qs from 'qs'; - +import { message } from 'antd'; export default function companyPage() { - const [data, setData] = useState(null); - const [sliderProgress, setSliderProgress] = useState(50); - let addNodeChildFunc = null; - let orgChart = null; + const [data, setData] = useState(null); + const [sliderProgress, setSliderProgress] = useState(50); + let addNodeChildFunc = null; + let orgChart = null; - let topBarSearchRequest = null; - - // 点击节点 - function onNodeClick(nodeId) { - // alert('clicked ' + nodeId); - } + let topBarSearchRequest = null; + const [hasRight, setHasRight] = useState(''); + // 点击节点 + 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 + // 扩展按钮点击 + function onButtonClick(event, d) { + if (d.children) { + let idsList = []; + d.children.forEach((item) => { + if (item.data.hasChildren && !item._children) { + idsList.push(item.data.id); } - - 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 - return `./img/department/${index}.png` - } - - // 获取部门图片 - 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); }); - }, [true]); - // ButtonContent渲染 - const buttonContentRender = ({ node, state }) => { - if(node.children) { - return `
ˆ
`; + 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 { - return `
ˬ
` + 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); + }); + } + }); } + } - // 节点宽度渲染 - const nodeWidthRender = d => - { - if(d.data.ftype == 0) { - return 220; - } else if(d.data.ftype == 1) { - return 160; - } else if(d.data.ftype == 2) { - return 144; - } - return 200; + // 获取部门图片 + function getDepartmentImage() { + let index = Math.floor(Math.random() * 8) + 1; + return `./img/department/${index}.png`; + } + + // 获取部门图片 + 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 `
ˆ
`; + } else { + return `
ˬ
`; } + }; - 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 nodeWidthRender = (d) => { + if (d.data.ftype == 0) { + return 220; + } else if (d.data.ftype == 1) { + return 160; + } else if (d.data.ftype == 2) { + return 144; } + return 200; + }; + 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/'; - 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 `
+ if (d.data.ftype == 0) { + return `
@@ -148,9 +158,11 @@ export default function companyPage() { margin-top: 10px; ">COMPANY_GROUP
- ` - } else if(d.data.ftype == 1) { - return `
+
`; + } else if (d.data.ftype == 1) { + return `
@@ -164,10 +176,12 @@ export default function companyPage() { "> ${d.data.fname}
- ` - } else if(d.data.ftype == 2) { - return ` -
+
`; + } else if (d.data.ftype == 2) { + return ` +
${d.data.fname}
- ` + `; + } + return `
${d.data.fname}
`; + }; + + // tool bar start + const handleTopLayoutClick = (progressBtn) => { + progressBtn.current.style.top = 50 + 'px'; + orgChart && orgChart.layout('top').render(); + }; + + const handleLeftLayoutClick = (progressBtn) => { + progressBtn.current.style.top = 50 + 'px'; + orgChart && orgChart.layout('left').render(); + }; + + const handleZoomIn = (progressBtn) => { + if (progressBtn) { + let top = parseInt(progressBtn.current.style.top) - 10; + if (top <= 0) { + top = 30; } - return `
${d.data.fname}
` + progressBtn.current.style.top = top + 'px'; } + orgChart && orgChart.zoomIn(); + }; - - // tool bar start - const handleTopLayoutClick = (progressBtn) => { - progressBtn.current.style.top= 50 + "px"; - orgChart && orgChart.layout('top').render(); - } - - const handleLeftLayoutClick = (progressBtn) => { - progressBtn.current.style.top= 50 + "px"; - orgChart && orgChart.layout('left').render(); - } - - const handleZoomIn = (progressBtn) => { - if(progressBtn) { - let top = (parseInt(progressBtn.current.style.top) - 10) - if(top <= 0) { - top = 30; - } - progressBtn.current.style.top = top + "px"; + const handleZoomOut = (progressBtn) => { + if (progressBtn) { + let top = parseInt(progressBtn.current.style.top) + 10; + if (top >= 100) { + top = 70; } - orgChart && orgChart.zoomIn(); + progressBtn.current.style.top = top + 'px'; } - const handleZoomOut = (progressBtn) => { - if(progressBtn) { - let top = (parseInt(progressBtn.current.style.top) + 10) - if(top >= 100) { - top = 70; - } - progressBtn.current.style.top = top + "px"; - } - - orgChart && orgChart.zoomOut(); + orgChart && orgChart.zoomOut(); + }; + + const handleZoomBehavior = (value) => { + orgChart && orgChart.zoomBehavior(value - 50); + }; + + // tool bar end + + // top bar start + + function downloadPdf(chart) { + chart.exportImg({ + save: false, + onLoad: (base64) => { + var pdf = new jsPDF(); + var img = new Image(); + img.src = base64; + img.onload = function () { + pdf.addImage( + 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 handleZoomBehavior = (value) => { - orgChart && orgChart.zoomBehavior(value - 50); - } - - // tool bar end - - // top bar start - - function downloadPdf(chart) { - chart.exportImg({ - save: false, - onLoad: (base64) => { - var pdf = new jsPDF(); - var img = new Image(); - img.src = base64; - img.onload = function () { - pdf.addImage( - 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 handleSearch = (requestData) => { - topBarSearchRequest = requestData - let api = "/api/bs/hrmorganization/orgchart/companyData" + qs.stringify(requestData, {addQueryPrefix: true}) - fetch(api).then(res => res.json()).then(data => { + const handleSearch = (requestData) => { + 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); - }) - } - - // top bar end - + }); + }; + // top bar end + if (hasRight === false) { + //return message.error("对不起，您暂时没有权限", 2); return ( +
+ +

对不起，您暂时没有权限!

+
+ ); + } + + return ( + hasRight && (
- {handleExport(type)}} - onSearch={(requestData) => {handleSearch(requestData)}} + { + handleExport(type); + }} + onSearch={(requestData) => { + handleSearch(requestData); + }} url="/api/bs/hrmorganization/orgchart/getCondition?type=company" /> - handleTopLayoutClick(progressBtn)} - onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} + onLeftLayoutClick={(progressBtn) => + handleLeftLayoutClick(progressBtn) + } onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} onZoomBehavior={(value) => handleZoomBehavior(value)} /> orgChart = chart} - setClick={click => (addNodeChildFunc = click)} + setChart={(chart) => (orgChart = chart)} + setClick={(click) => (addNodeChildFunc = click)} onNodeClick={onNodeClick} data={data} - buttonContent={ - buttonContentRender - } + buttonContent={buttonContentRender} nodeWidth={nodeWidthRender} nodeHeight={nodeHeightRender} nodeContent={nodeContentRender} />
- ); + ) + ); } diff --git a/src/pages/user.jsx b/src/pages/user.jsx index 2542c1e..1dc6615 100644 --- a/src/pages/user.jsx +++ b/src/pages/user.jsx @@ -15,6 +15,7 @@ export default function userPage() { let orgChart = null; let progressBtnRef = null; let topBarSearchRequest = null; + const [hasRight, setHasRight] = useState(''); // 点击节点 function onNodeClick(nodeId) { @@ -84,6 +85,7 @@ export default function userPage() { moment(new Date()).format('YYYY-MM-DD'), ).then((data) => { setData(data.data); + setHasRight(data.hasRight); }); }, [true]); @@ -377,34 +379,50 @@ export default function userPage() { } }; + if (hasRight === false) { + return ( +
+ +

对不起，您暂时没有权限!

+
+ ); + } + return ( -
- { - handleExport(type); - }} - onSearch={(requestData) => { - handleSearch(requestData); - }} - url="/api/bs/hrmorganization/orgchart/getCondition?type=user" - /> - handleTopLayoutClick(progressBtn)} - onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} - onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} - onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} - /> - (orgChart = chart)} - setClick={(click) => (addNodeChildFunc = click)} - onNodeClick={onNodeClick} - onButtonClick={onButtonClick} - data={data} - buttonContent={buttonContentRender} - nodeWidth={nodeWidthRender} - nodeHeight={nodeHeightRender} - nodeContent={nodeContentRender} - /> -
+ hasRight && ( +
+ { + handleExport(type); + }} + onSearch={(requestData) => { + handleSearch(requestData); + }} + url="/api/bs/hrmorganization/orgchart/getCondition?type=user" + /> + handleTopLayoutClick(progressBtn)} + onLeftLayoutClick={(progressBtn) => + handleLeftLayoutClick(progressBtn) + } + onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} + onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} + /> + (orgChart = chart)} + setClick={(click) => (addNodeChildFunc = click)} + onNodeClick={onNodeClick} + onButtonClick={onButtonClick} + data={data} + buttonContent={buttonContentRender} + nodeWidth={nodeWidthRender} + nodeHeight={nodeHeightRender} + nodeContent={nodeContentRender} + /> +
+ ) ); }