组织架构图v3

feature/v3
Chengliang 2 years ago
parent a0d095eec8
commit 5ee9c3c67c

Binary file not shown.

@ -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,6 +350,7 @@ export default class DrawerComponents extends React.Component {
}} }}
extra={ extra={
<Space> <Space>
{detailType == 'chart' && params && params.fclass == '0' && (
<Checkbox <Checkbox
style={{ marginTop: '5px', marginLeft: 100 }} style={{ marginTop: '5px', marginLeft: 100 }}
checked={showJob} checked={showJob}
@ -355,9 +358,9 @@ export default class DrawerComponents extends React.Component {
this.setState({ this.setState({
showJob: e.target.checked, showJob: e.target.checked,
}); });
detailType == 'chart' &&
this.getDeatilDatas( this.getDeatilDatas(
rootId, params,
detailType, detailType,
e.target.checked ? '1' : '0', e.target.checked ? '1' : '0',
); );
@ -365,6 +368,7 @@ export default class DrawerComponents extends React.Component {
> >
是否显示岗位 是否显示岗位
</Checkbox> </Checkbox>
)}
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button type="primary">导出</Button> <Button type="primary">导出</Button>
</Dropdown> </Dropdown>

@ -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: '' });
message.success('版本记录成功,请重新刷新页面');
}, 2000);
// let api = '/api/bs/hrmorganization/orgchart/synchronousData?flcass='+requestData.fclass+ '&description=' +description;
// fetch(api)
// .then((res) => res.json())
// .then((data) => {
// if (data.code == 200) {
// this.setState({ open: false, confirmLoading: false, description: '' }); // this.setState({ open: false, confirmLoading: false, description: '' });
// message.success(','); // message.success(',');
// } else { // }, 2000);
// message.error(','); let api =
// } '/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
// }); requestData.fclass +
'&description=' +
description;
fetch(api)
.then((res) => res.json())
.then((data) => {
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

@ -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(() => {

@ -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',

Loading…
Cancel
Save