-
})
-
${d.data.fname}
+
+
+
})
+
+
`;
@@ -194,7 +189,6 @@ export default function companyPage() {
return `
${d.data.fname}
`;
};
- // tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart &&
@@ -215,6 +209,56 @@ export default function companyPage() {
active = 'left';
};
+ const handleFullscreen = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ orgChart && orgChart.fullscreen('body');
+ };
+
+ const handleFit = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ orgChart && orgChart.fit();
+ };
+
+ const handleFolderAddNode = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ operateCom &&
+ operateCom.showOperate(topbar.state.requestData.root, '新增节点', 1);
+ };
+
+ const addFolderNode = (id) => {
+ orgChart &&
+ orgChart.addNode({
+ id: 'd_10091',
+ fname: '测试增加节点',
+ parentId: 's_10',
+ ftype: '2',
+ });
+ };
+
+ const handleDeleteNode = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ operateCom &&
+ operateCom.showOperate(topbar.state.requestData.root, '删除节点', 2);
+ };
+
+ const deleteNode = (id) => {
+ orgChart && orgChart.removeNode('d_10091');
+ };
+
+ const handleCompact = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ orgChart &&
+ orgChart
+ .compact(!!(compact++ % 2))
+ .render()
+ .fit();
+ };
+
+ const handleExpandAll = (progressBtn) => {
+ progressBtn.current.style.top = 50 + 'px';
+ orgChart && expandAll++ % 2 ? orgChart.collapseAll() : orgChart.expandAll();
+ };
+
const handleZoomIn = (progressBtn) => {
if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) - 10;
@@ -243,10 +287,6 @@ export default function companyPage() {
orgChart && orgChart.zoomBehavior(value - 50);
};
- // tool bar end
-
- // top bar start
-
function downloadPdf(chart) {
chart.exportImg({
save: false,
@@ -270,6 +310,10 @@ export default function companyPage() {
});
}
+ /**
+ * 导出
+ * @param {*} type
+ */
const handleExport = (type) => {
if (type == 'png') {
orgChart && orgChart.exportImg({ full: true });
@@ -278,7 +322,32 @@ export default function companyPage() {
}
};
- const handleSearch = (requestData) => {
+ /**
+ * 时间轴点击
+ * @param {*} timeline
+ */
+ const timeLineSearch = (timeline) => {
+ setTimelineId(timeline.id);
+ const fclass = topbar.state.requestData.fclass;
+ const resetParams = { root: undefined, level: '2', fisvitual: '0' };
+ topbar.handleFormChange({ ...resetParams });
+ topbar.getNodeTreeNode(
+ `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
+ false,
+ );
+ let requestData = { fclass: fclass, id: timeline.id, ...resetParams };
+ handleSearch(requestData, false);
+ };
+
+ /**
+ * 查询
+ * @param {*} requestData
+ */
+ const handleSearch = (requestData, cache = true) => {
+ setSpinning(true);
+ if (cache) {
+ requestData = { ...requestData, id: infoRef.current };
+ }
topBarSearchRequest = requestData;
let api =
'/api/bs/hrmorganization/orgchart/companyData' +
@@ -294,27 +363,26 @@ export default function companyPage() {
setData(data?.data);
}
}
+ setTimeout(function () {
+ setSpinning(false);
+ }, 200);
});
};
- const handleSynchronous = (requestData) => {
- setDisabled(true);
- let api = '/api/bs/hrmorganization/orgchart/synchronousData';
- fetch(api)
- .then((res) => res.json())
- .then((data) => {
- if (data.code == 200) {
- message.success('同步成功,请重新查询');
- } else {
- message.error('数据同步失败');
- }
- setDisabled(false);
- //this.handleSearch(requestData);
- });
+ /**
+ * 切换维度
+ * @param {*} requestData
+ */
+ const handleChange = (requestData) => {
+ setTimelineId(0);
+ timeLine.searchTimeLines(
+ `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
+ );
+ requestData = { ...requestData, id: 0 };
+ handleSearch(requestData, false);
};
useEffect(() => {
- console.log('data', data);
if (active == 'left') {
orgChart &&
orgChart
@@ -329,9 +397,8 @@ export default function companyPage() {
.render();
}
}, [data]);
- // top bar end
+
if (hasRight === false) {
- //return message.error("对不起，您暂时没有权限", 2);
return (
![]()
(topbar = r)}
onExport={(type) => {
handleExport(type);
}}
onSearch={(requestData) => {
handleSearch(requestData);
}}
- onSynchronous={(requestData) => {
- handleSynchronous(requestData);
+ changeFclass={(requestData) => {
+ handleChange(requestData);
}}
- disabled={disabled}
type="company"
- url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
+ url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company"
/>
handleTopLayoutClick(progressBtn)}
onLeftLayoutClick={(progressBtn) =>
handleLeftLayoutClick(progressBtn)
}
+ onFullscreen={(progressBtn) => handleFullscreen(progressBtn)}
+ onFit={(progressBtn) => handleFit(progressBtn)}
+ onFolderAddNode={(progressBtn) => handleFolderAddNode(progressBtn)}
+ onDeleteNode={(progressBtn) => handleDeleteNode(progressBtn)}
+ onCompact={(progressBtn) => handleCompact(progressBtn)}
+ onExpandAll={(progressBtn) => handleExpandAll(progressBtn)}
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
onZoomBehavior={(value) => handleZoomBehavior(value)}
/>
- (orgChart = chart)}
- setClick={(click) => (addNodeChildFunc = click)}
- onNodeClick={onNodeClick}
- data={data}
- onButtonClick={onButtonClick}
- buttonContent={buttonContentRender}
- nodeWidth={nodeWidthRender}
- nodeHeight={nodeHeightRender}
- nodeContent={nodeContentRender}
+ (timeLine = r)}
+ onClick={(timeline) => {
+ timeLineSearch(timeline);
+ }}
+ url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
+ />
+
+ (orgChart = chart)}
+ setClick={(click) => (addNodeChildFunc = click)}
+ onNodeClick={onNodeClick}
+ data={data}
+ onButtonClick={onButtonClick}
+ buttonContent={buttonContentRender}
+ nodeWidth={nodeWidthRender}
+ nodeHeight={nodeHeightRender}
+ nodeContent={nodeContentRender}
+ />
+
+ (drawerCom = r)} />
+ (operateCom = r)}
+ addFolderNode={addFolderNode}
+ deleteNode={deleteNode}
/>
)
diff --git a/src/pages/index.less b/src/pages/index.less
index 0186693..04f4d5d 100644
--- a/src/pages/index.less
+++ b/src/pages/index.less
@@ -3,9 +3,9 @@
}
.wrapper {
- background: #F7F9FD;
+ background: #f7f9fd;
}
.contentWrapper {
- background-color: #F7F9FD;
-}
\ No newline at end of file
+ background-color: #f7f9fd;
+}
diff --git a/src/pages/user.jsx b/src/pages/user.jsx
index eea1a5e..200e89d 100644
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@@ -4,6 +4,7 @@ import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar';
+import TimeLine from '../components/timeline';
import moment from 'moment';
import qs from 'qs';
import { message } from 'antd';
@@ -11,6 +12,8 @@ import jsPDF from 'jspdf';
let active = 'top';
export default function userPage() {
const [data, setData] = useState(null);
+ let topbar = null;
+ let timeLine = null;
const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
const [requestRes, setRequestRes] = useState({
date: moment(new Date()).format('YYYY-MM-DD'),
@@ -25,7 +28,7 @@ export default function userPage() {
let progressBtnRef = null;
const [hasRight, setHasRight] = useState('');
- const [disabled, setDisabled] = useState(false);
+ const [id, setId] = useState(0);
// 点击节点
function onNodeClick(nodeId) {
// alert('clicked ' + nodeId);
@@ -54,8 +57,7 @@ export default function userPage() {
qs.stringify(request, { addQueryPrefix: true });
} else {
api =
- '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
- moment(new Date()).format('YYYY-MM-DD') +
+ '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&fisvitual=0&root=0&level=3&id=0' +
'&ids=' +
idsStr;
}
@@ -72,13 +74,23 @@ export default function userPage() {
}
}
+ /**
+ * 时间轴点击
+ * @param {*} timeline
+ */
+ const timeLineSearch = (timeline) => {
+ setId(timeline.id);
+ let requestData = { ...topbar.state.requestData, id: timeline.id };
+ handleSearch(requestData, false);
+ };
+
// 获取部门图片
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`;
@@ -87,11 +99,10 @@ export default function userPage() {
// 获取数据
useEffect(() => {
document.cookie =
- 'Webstorm-3d4d3ad4=b8ca5bef-a131-4c2b-81da-6f8595481dc2; ecology_JSessionid=aaad2HRSW843U9BJFcUuy; JSESSIONID=aaad2HRSW843U9BJFcUuy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=47f1e1cc-51de-48b3-af04-3875b717805f';
+ 'ecology_JSessionid=aaauntrtgZdkuanT5w2Ly; JSESSIONID=aaauntrtgZdkuanT5w2Ly; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=c5235342-7633-4eec-a754-b36eefdf8c9e';
d3.json(
// "/user/data"
- '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
- moment(new Date()).format('YYYY-MM-DD'),
+ '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
@@ -161,10 +172,6 @@ export default function userPage() {
orgChart && orgChart.zoomOut();
};
- // tool bar end
-
- // top bar start
-
function downloadPdf(chart) {
chart.exportImg({
save: false,
@@ -196,7 +203,10 @@ export default function userPage() {
}
};
- const handleSearch = (requestData) => {
+ const handleSearch = (requestData, cache = true) => {
+ if (cache) {
+ requestData = { ...requestData, id: id };
+ }
setTpBarSearchRequest(requestData);
let api =
'/api/bs/hrmorganization/orgchart/userData' +
@@ -215,20 +225,15 @@ export default function userPage() {
});
};
- const handleSynchronous = (requestData) => {
- setDisabled(true);
- let api = '/api/bs/hrmorganization/orgchart/synchronousData';
- fetch(api)
- .then((res) => res.json())
- .then((data) => {
- if (data.code == 200) {
- message.success('同步成功,请重新查询');
- } else {
- message.error('数据同步失败');
- }
- setDisabled(false);
- //this.handleSearch(requestData);
- });
+ /**
+ * 切换维度
+ * @param {*} requestData
+ */
+ const handleChange = (requestData) => {
+ timeLine.searchTimeLines(
+ `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
+ );
+ handleSearch(requestData);
};
useEffect(() => {
@@ -309,7 +314,7 @@ export default function userPage() {
? d.data.fleaderimg
: d.data.ftype == 0 || d.data.ftype == 1
? './img/company.png'
- : './img/default_avator.png'
+ : './img/department.png'
}" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ }
+ >
+ {detailType == 'chart' ? (
+ data.length > 0 && (
+ 
