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

组织架构图v3

This commit is contained in:
Chengliang 2023-07-14 14:46:14 +08:00
parent a0d095eec8
commit 5ee9c3c67c
5 changed files with 88 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

50
src/components/drawer/index.jsx
View File

@ -27,7 +27,7 @@ export default class DrawerComponents extends React.Component {
open: false, open: false,
data: [], data: [],
detailType: 'chart', detailType: 'chart',
rootId: '', params: {},
dataSource: [], dataSource: [],
columns: [], columns: [],
spinning: true, spinning: true,
@ -62,11 +62,11 @@ export default class DrawerComponents extends React.Component {
} }
//获取数据 //获取数据
getDeatilDatas(rootId, type = 'chart', showJob = '1') { getDeatilDatas(params, type = 'chart', showJob = '1') {
this.setState({ spinning: true }); this.setState({ spinning: true });
d3.json( d3.json(
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' + '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
qs.stringify({ detauleType: type, rootId: rootId, showJob }), qs.stringify({ detauleType: type, ...params, showJob }),
).then((data) => { ).then((data) => {
// //
if (type == 'chart') { if (type == 'chart') {
@ -298,9 +298,10 @@ export default class DrawerComponents extends React.Component {
} }
}; };
showDrawer = (rootId) => { showDrawer = (params) => {
this.getDeatilDatas(rootId); const showJob = params.fclass == '0' ? '1' : '0';
this.setState({ open: true, rootId: rootId }); this.getDeatilDatas(params, 'chart', showJob);
this.setState({ open: true, params: params });
}; };
onClose = () => { onClose = () => {
@ -308,17 +309,18 @@ export default class DrawerComponents extends React.Component {
}; };
changeDetail = () => { changeDetail = () => {
const { detailType, rootId } = this.state; const { detailType, params } = this.state;
let type = detailType == 'chart' ? 'table' : 'chart'; let type = detailType == 'chart' ? 'table' : 'chart';
const showJob = params.fclass == '0' ? '1' : '0';
this.setState({ this.setState({
detailType: type, detailType: type,
}); });
this.getDeatilDatas(rootId, type); this.getDeatilDatas(params, type, showJob);
}; };
render() { render() {
const { const {
rootId, params,
open, open,
data, data,
detailType, detailType,
@ -330,7 +332,7 @@ export default class DrawerComponents extends React.Component {
let arr = []; let arr = [];
if (detailType == 'chart') { if (detailType == 'chart') {
arr.push({ label: '导出图片', key: '1' }); arr.push({ label: '导出图片', key: '1' });
arr.push({ label: '导出PDF', key: '2' }); //arr.push({ label: '导出PDF', key: '2' });
} else { } else {
arr.push({ label: '导出表格', key: '3' }); arr.push({ label: '导出表格', key: '3' });
} }
@ -348,23 +350,25 @@ export default class DrawerComponents extends React.Component {
}} }}
extra={ extra={
<Space> <Space>
<Checkbox {detailType == 'chart' && params && params.fclass == '0' && (
style={{ marginTop: '5px', marginLeft: 100 }} <Checkbox
checked={showJob} style={{ marginTop: '5px', marginLeft: 100 }}
onChange={(e) => { checked={showJob}
this.setState({ onChange={(e) => {
showJob: e.target.checked, this.setState({
}); showJob: e.target.checked,
detailType == 'chart' && });
this.getDeatilDatas( this.getDeatilDatas(
rootId, params,
detailType, detailType,
e.target.checked ? '1' : '0', e.target.checked ? '1' : '0',
); );
}} }}
> >
是否显示岗位 是否显示岗位
</Checkbox> </Checkbox>
)}
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button type="primary">导出</Button> <Button type="primary">导出</Button>
</Dropdown> </Dropdown>

52
src/components/topBar/index.jsx
View File

@ -64,21 +64,29 @@ export class TopBar extends React.Component {
return message.error('请填写描述信息'); return message.error('请填写描述信息');
} }
this.setState({ confirmLoading: true }); this.setState({ confirmLoading: true });
setTimeout(() => { // setTimeout(() => {
this.setState({ open: false, confirmLoading: false, description: '' }); // this.setState({ open: false, confirmLoading: false, description: '' });
message.success('版本记录成功,请重新刷新页面'); // message.success('版本记录成功,请重新刷新页面');
}, 2000); // }, 2000);
// let api = '/api/bs/hrmorganization/orgchart/synchronousData?flcass='+requestData.fclass+ '&description=' +description; let api =
// fetch(api) '/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
// .then((res) => res.json()) requestData.fclass +
// .then((data) => { '&description=' +
// if (data.code == 200) { description;
// this.setState({ open: false, confirmLoading: false,description:'' }); fetch(api)
// message.success('版本记录成功,请重新刷新页面'); .then((res) => res.json())
// } else { .then((data) => {
// message.error('版本记录失败,请联系相关人员处理数据'); if (data.api_status) {
// } this.setState({
// }); open: false,
confirmLoading: false,
description: '',
});
message.success('版本记录成功,请重新刷新页面', 2, 3);
} else {
message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
}
});
}; };
handleExportMenuClick(e) { handleExportMenuClick(e) {
@ -166,10 +174,10 @@ export class TopBar extends React.Component {
label: '导出图片', label: '导出图片',
key: '1', key: '1',
}, },
{ // {
label: '导出PDF', // label: '导出PDF',
key: '2', // key: '2',
}, // },
]} ]}
/> />
); );
@ -191,7 +199,7 @@ export class TopBar extends React.Component {
const requestData = { const requestData = {
fclass: value, fclass: value,
root: undefined, root: undefined,
level: '3', level: '2',
fisvitual: '0', fisvitual: '0',
}; };
this.handleFormChange(requestData); this.handleFormChange(requestData);
@ -214,7 +222,7 @@ export class TopBar extends React.Component {
<TreeSelect <TreeSelect
treeDataSimpleMode treeDataSimpleMode
allowClear allowClear
style={{ width: '80%' }} style={{ width: '75%' }}
value={this.state.requestData.root} value={this.state.requestData.root}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择根节点" placeholder="请选择根节点"
@ -297,7 +305,7 @@ export class TopBar extends React.Component {
onCancel={() => this.setState({ open: false })} onCancel={() => this.setState({ open: false })}
> >
<p style={{ color: 'red' }}> <p style={{ color: 'red' }}>
提示:版本操作耗时较长，请谨慎操作（版本仅记录当前维度的数据） 提示:版本记录耗时较长，请谨慎操作（仅记录当前维度的数据版本）
</p> </p>
<p>主题:</p> <p>主题:</p>
<TextArea <TextArea

41
src/pages/company.jsx
View File

@ -1,5 +1,5 @@
import styles from './index.less'; import styles from './index.less';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } 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';
@ -15,24 +15,34 @@ let active = 'top';
let drawerCom = null; let drawerCom = null;
let timeLine = null; let timeLine = null;
let orgChart = null; let orgChart = null;
let topbar = null;
export default function companyPage() { export default function companyPage() {
let topbar = null;
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 topBarSearchRequest = null; let topBarSearchRequest = null;
const [hasRight, setHasRight] = useState(''); const [hasRight, setHasRight] = useState('');
const [id, setId] = useState(0); const [timelineId, setTimelineId] = useState(0);
const infoRef = useRef();
useEffect(() => {
infoRef.current = timelineId;
}, [timelineId]);
const [spinning, setSpinning] = useState(false); const [spinning, setSpinning] = useState(false);
// 点击节点 // 点击节点
function onNodeClick(node) { const onNodeClick = (node) => {
if (node.ftype == '2') { if (node.ftype == '2') {
drawerCom.showDrawer(node.id); const params = {
rootId: node.id,
fclass: topbar.state.requestData.fclass,
id: infoRef.current,
};
drawerCom.showDrawer(params);
} }
} };
// 扩展按钮点击 // 扩展按钮点击
const onButtonClick = (event, d) => { const onButtonClick = (event, d) => {
@ -86,7 +96,7 @@ export default function companyPage() {
// 获取数据 // 获取数据
useEffect(() => { useEffect(() => {
d3.json( d3.json(
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&root=0&level=3&id=0', '/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&root=0&level=2&id=0',
).then((data) => { ).then((data) => {
setData(data.data); setData(data.data);
setHasRight(data?.hasRight); setHasRight(data?.hasRight);
@ -263,8 +273,15 @@ export default function companyPage() {
* @param {*} timeline * @param {*} timeline
*/ */
const timeLineSearch = (timeline) => { const timeLineSearch = (timeline) => {
setId(timeline.id); setTimelineId(timeline.id);
let requestData = { ...topbar.state.requestData, id: 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); handleSearch(requestData, false);
}; };
@ -275,7 +292,7 @@ export default function companyPage() {
const handleSearch = (requestData, cache = true) => { const handleSearch = (requestData, cache = true) => {
setSpinning(true); setSpinning(true);
if (cache) { if (cache) {
requestData = { ...requestData, id: id }; requestData = { ...requestData, id: infoRef.current };
} }
topBarSearchRequest = requestData; topBarSearchRequest = requestData;
let api = let api =
@ -301,10 +318,12 @@ export default function companyPage() {
* @param {*} requestData * @param {*} requestData
*/ */
const handleChange = (requestData) => { const handleChange = (requestData) => {
setTimelineId(0);
timeLine.searchTimeLines( timeLine.searchTimeLines(
`/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`, `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
); );
handleSearch(requestData); requestData = { ...requestData, id: 0 };
handleSearch(requestData, false);
}; };
useEffect(() => { useEffect(() => {

2
src/pages/user.jsx
View File

@ -99,7 +99,7 @@ export default function userPage() {
// 获取数据 // 获取数据
useEffect(() => { useEffect(() => {
document.cookie = document.cookie =
'ecology_JSessionid=aaazPUne5WAU1eB9vTfKy; JSESSIONID=aaazPUne5WAU1eB9vTfKy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7f4710ea-50a3-4552-8193-57269840d388'; 'ecology_JSessionid=aaapuc_tMLwUT4NtMrnLy; JSESSIONID=aaapuc_tMLwUT4NtMrnLy; Systemlanguid=7; languageidweaver=7; loginuuids=1; __randcode__=7e56748f-fcc0-41fd-aac7-44d6bce54bad; loginidweaver=sysadmin';
d3.json( d3.json(
// "/user/data" // "/user/data"
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0', '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',