|
|
|
@ -1,25 +1,31 @@
|
|
|
|
import { Tree, message, Modal, Popconfirm, Spin } from 'antd';
|
|
|
|
import { Tree, message, Modal, Popconfirm, Spin, Layout, Drawer } from 'antd';
|
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
|
|
import * as d3 from 'd3';
|
|
|
|
import * as d3 from 'd3';
|
|
|
|
import qs from 'qs';
|
|
|
|
import qs from 'qs';
|
|
|
|
import MergeDialog from '../components/dialog/mergeDialog';
|
|
|
|
import MergeDialog from '../components/dialog/mergeDialog';
|
|
|
|
import CopyDialog from '../components/dialog/copyDialog';
|
|
|
|
import CopyDialog from '../components/dialog/copyDialog';
|
|
|
|
|
|
|
|
import inset from '../../public/img/back/inset.png';
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
HomeOutlined,
|
|
|
|
HomeOutlined,
|
|
|
|
FolderOutlined,
|
|
|
|
FolderOutlined,
|
|
|
|
ClusterOutlined,
|
|
|
|
ClusterOutlined,
|
|
|
|
ApartmentOutlined,
|
|
|
|
ApartmentOutlined,
|
|
|
|
|
|
|
|
QuestionCircleOutlined,
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
|
|
|
|
const { Header, Footer, Sider, Content } = Layout;
|
|
|
|
import './index.less';
|
|
|
|
import './index.less';
|
|
|
|
|
|
|
|
|
|
|
|
const DragTree = () => {
|
|
|
|
const DragTree = () => {
|
|
|
|
const [gData, setGData] = useState([]);
|
|
|
|
const [gData, setGData] = useState([]);
|
|
|
|
const [expandedKeys, setExpandedKeys] = useState([undefined]);
|
|
|
|
const [expandedKeys, setExpandedKeys] = useState([undefined]);
|
|
|
|
const childRef = useRef(null);
|
|
|
|
const childRef = useRef(null);
|
|
|
|
const [tip, setTip] = useState('正在加载...');
|
|
|
|
const copyChildRef = useRef(null);
|
|
|
|
|
|
|
|
const [tip, setTip] = useState('正在加载,请稍候...');
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [showCanceled, setShowCanceled] = useState(0);
|
|
|
|
const [showCanceled, setShowCanceled] = useState(0);
|
|
|
|
|
|
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
|
|
|
|
|
|
const [iframe, setIframe] = useState('');
|
|
|
|
|
|
|
|
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const [mergeId, setMergeId] = useState(null);
|
|
|
|
const [mergeId, setMergeId] = useState(null);
|
|
|
|
@ -30,10 +36,10 @@ const DragTree = () => {
|
|
|
|
getMoveTree(0);
|
|
|
|
getMoveTree(0);
|
|
|
|
}, [true]);
|
|
|
|
}, [true]);
|
|
|
|
|
|
|
|
|
|
|
|
const getMoveTree = (showCanceled) => {
|
|
|
|
const getMoveTree = (showCanceled, expandedKeys = '') => {
|
|
|
|
setLoading(true);
|
|
|
|
setLoading(true);
|
|
|
|
d3.json(
|
|
|
|
d3.json(
|
|
|
|
`/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}`,
|
|
|
|
`/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}&expandedKeys=${expandedKeys}`,
|
|
|
|
).then((data) => {
|
|
|
|
).then((data) => {
|
|
|
|
setGData(data.movingTree);
|
|
|
|
setGData(data.movingTree);
|
|
|
|
setExpandedKeys(data.expandedKeys);
|
|
|
|
setExpandedKeys(data.expandedKeys);
|
|
|
|
@ -59,79 +65,95 @@ const DragTree = () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onDrop = (info) => {
|
|
|
|
const onDrop = (info) => {
|
|
|
|
setLoading(true);
|
|
|
|
|
|
|
|
setTip('正在转移，请稍候...');
|
|
|
|
|
|
|
|
const dropKey = info.node.key;
|
|
|
|
const dropKey = info.node.key;
|
|
|
|
const dragKey = info.dragNode.key;
|
|
|
|
const dragKey = info.dragNode.key;
|
|
|
|
const dropPos = info.node.pos.split('-');
|
|
|
|
const dropPos = info.node.pos.split('-');
|
|
|
|
const dropPosition =
|
|
|
|
const dropPosition =
|
|
|
|
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
|
|
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
|
|
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
|
|
|
|
|
|
|
|
method: 'POST',
|
|
|
|
if (dropPosition == -1) {
|
|
|
|
headers: {
|
|
|
|
return message.error('不支持该操作！！！', 2);
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
let pos = dropPosition == 0 ? '内部' : '下方';
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
|
|
sourcekey: dragKey,
|
|
|
|
let title = `确定将【${info.dragNode.title}】移到 【${info.node.title}】${pos}`;
|
|
|
|
targetkey: dropKey,
|
|
|
|
Modal.confirm({
|
|
|
|
dropPosition: dropPosition,
|
|
|
|
title: '转移操作',
|
|
|
|
}),
|
|
|
|
content: title,
|
|
|
|
})
|
|
|
|
okText: '确认',
|
|
|
|
.then((response) => response.json())
|
|
|
|
cancelText: '取消',
|
|
|
|
.then((res) => {
|
|
|
|
onOk() {
|
|
|
|
if (res.code == 200) {
|
|
|
|
setLoading(true);
|
|
|
|
const data = [...gData];
|
|
|
|
setTip('正在转移，请稍候...');
|
|
|
|
// Find dragObject
|
|
|
|
|
|
|
|
let dragObj;
|
|
|
|
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
|
|
|
|
loop(data, dragKey, (item, index, arr) => {
|
|
|
|
method: 'POST',
|
|
|
|
arr.splice(index, 1);
|
|
|
|
headers: {
|
|
|
|
dragObj = item;
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
});
|
|
|
|
},
|
|
|
|
if (!info.dropToGap) {
|
|
|
|
body: JSON.stringify({
|
|
|
|
// Drop on the content
|
|
|
|
sourcekey: dragKey,
|
|
|
|
loop(data, dropKey, (item) => {
|
|
|
|
targetkey: dropKey,
|
|
|
|
item.children = item.children || [];
|
|
|
|
dropPosition: dropPosition,
|
|
|
|
// where to insert 示例添加到头部，可以是随意位置
|
|
|
|
}),
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
})
|
|
|
|
});
|
|
|
|
.then((response) => response.json())
|
|
|
|
} else if (
|
|
|
|
.then((res) => {
|
|
|
|
(info.node.props.children || []).length > 0 &&
|
|
|
|
if (res.code == 200) {
|
|
|
|
// Has children
|
|
|
|
const data = [...gData];
|
|
|
|
info.node.props.expanded &&
|
|
|
|
// Find dragObject
|
|
|
|
// Is expanded
|
|
|
|
let dragObj;
|
|
|
|
dropPosition === 1 // On the bottom gap
|
|
|
|
loop(data, dragKey, (item, index, arr) => {
|
|
|
|
) {
|
|
|
|
arr.splice(index, 1);
|
|
|
|
loop(data, dropKey, (item) => {
|
|
|
|
dragObj = item;
|
|
|
|
item.children = item.children || [];
|
|
|
|
});
|
|
|
|
// where to insert 示例添加到头部，可以是随意位置
|
|
|
|
if (!info.dropToGap) {
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
// Drop on the content
|
|
|
|
// in previous version, we use item.children.push(dragObj) to insert the
|
|
|
|
loop(data, dropKey, (item) => {
|
|
|
|
// item to the tail of the children
|
|
|
|
item.children = item.children || [];
|
|
|
|
});
|
|
|
|
// where to insert 示例添加到头部，可以是随意位置
|
|
|
|
} else {
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
let ar = [];
|
|
|
|
});
|
|
|
|
let i;
|
|
|
|
} else if (
|
|
|
|
loop(data, dropKey, (_item, index, arr) => {
|
|
|
|
(info.node.props.children || []).length > 0 &&
|
|
|
|
ar = arr;
|
|
|
|
// Has children
|
|
|
|
i = index;
|
|
|
|
info.node.props.expanded &&
|
|
|
|
});
|
|
|
|
// Is expanded
|
|
|
|
if (dropPosition === -1) {
|
|
|
|
dropPosition === 1 // On the bottom gap
|
|
|
|
ar.splice(i, 0, dragObj);
|
|
|
|
) {
|
|
|
|
|
|
|
|
loop(data, dropKey, (item) => {
|
|
|
|
|
|
|
|
item.children = item.children || [];
|
|
|
|
|
|
|
|
// where to insert 示例添加到头部，可以是随意位置
|
|
|
|
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
|
|
|
|
// in previous version, we use item.children.push(dragObj) to insert the
|
|
|
|
|
|
|
|
// item to the tail of the children
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
let ar = [];
|
|
|
|
|
|
|
|
let i;
|
|
|
|
|
|
|
|
loop(data, dropKey, (_item, index, arr) => {
|
|
|
|
|
|
|
|
ar = arr;
|
|
|
|
|
|
|
|
i = index;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
if (dropPosition === -1) {
|
|
|
|
|
|
|
|
ar.splice(i, 0, dragObj);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
ar.splice(i + 1, 0, dragObj);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setGData(data);
|
|
|
|
|
|
|
|
message.success('转移成功', 2);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ar.splice(i + 1, 0, dragObj);
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setLoading(false);
|
|
|
|
setGData(data);
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
.catch((error) => {
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
message.error('接口异常,请联系管理员');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
setLoading(false);
|
|
|
|
},
|
|
|
|
})
|
|
|
|
onCancel() {},
|
|
|
|
.catch((error) => {
|
|
|
|
});
|
|
|
|
message.error('接口异常,请联系管理员');
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {}, 1000);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
@ -145,7 +167,7 @@ const DragTree = () => {
|
|
|
|
headers: {
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
body: JSON.stringify({ ids: nodeData.id }),
|
|
|
|
body: JSON.stringify({ ids: nodeData.id.substring(1) }),
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((res) => {
|
|
|
|
.then((res) => {
|
|
|
|
@ -172,6 +194,7 @@ const DragTree = () => {
|
|
|
|
* @param {*} nodeData
|
|
|
|
* @param {*} nodeData
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
const onCancel = (nodeData) => {
|
|
|
|
const onCancel = (nodeData) => {
|
|
|
|
|
|
|
|
setShowCanceled(0);
|
|
|
|
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
|
|
|
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
|
|
|
fetch(`/api/bs/hrmorganization/${extend}/updateForbiddenTagById`, {
|
|
|
|
fetch(`/api/bs/hrmorganization/${extend}/updateForbiddenTagById`, {
|
|
|
|
method: 'POST',
|
|
|
|
method: 'POST',
|
|
|
|
@ -179,7 +202,7 @@ const DragTree = () => {
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
body: JSON.stringify({
|
|
|
|
body: JSON.stringify({
|
|
|
|
id: nodeData.id,
|
|
|
|
id: nodeData.id.substring(1),
|
|
|
|
canceled: nodeData.canceled != '0',
|
|
|
|
canceled: nodeData.canceled != '0',
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
})
|
|
|
|
})
|
|
|
|
@ -187,11 +210,18 @@ const DragTree = () => {
|
|
|
|
.then((res) => {
|
|
|
|
.then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
const data = [...gData];
|
|
|
|
const data = [...gData];
|
|
|
|
loop(data, nodeData.key, (item, index, arr) => {
|
|
|
|
if (nodeData.canceled != '0') {
|
|
|
|
arr.splice(index, 1);
|
|
|
|
message.success('恢复成功', 2);
|
|
|
|
});
|
|
|
|
loop(data, nodeData.key, (item, index, arr) => {
|
|
|
|
|
|
|
|
arr[index].canceled = '0';
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
loop(data, nodeData.key, (item, index, arr) => {
|
|
|
|
|
|
|
|
arr.splice(index, 1);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
message.success('封存成功', 2);
|
|
|
|
|
|
|
|
}
|
|
|
|
setGData(data);
|
|
|
|
setGData(data);
|
|
|
|
message.success('封存成功', 2);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -229,6 +259,7 @@ const DragTree = () => {
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((res) => {
|
|
|
|
.then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
getMoveTree(0, values.department);
|
|
|
|
message.success('合并成功', 2);
|
|
|
|
message.success('合并成功', 2);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
@ -245,22 +276,31 @@ const DragTree = () => {
|
|
|
|
* @param {*} nodeData
|
|
|
|
* @param {*} nodeData
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
const onCopy = (nodeData) => {
|
|
|
|
const onCopy = (nodeData) => {
|
|
|
|
|
|
|
|
if (copyChildRef.current) {
|
|
|
|
|
|
|
|
copyChildRef.current.getTreeData();
|
|
|
|
|
|
|
|
}
|
|
|
|
setCopyOpen(true);
|
|
|
|
setCopyOpen(true);
|
|
|
|
setCopyId(nodeData.id);
|
|
|
|
setCopyId(nodeData.id);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onCopyCreate = (values) => {
|
|
|
|
const onCopyCreate = (values) => {
|
|
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
|
|
company: values.company,
|
|
|
|
|
|
|
|
copySubDept: values.copySubDept ? '1' : '0',
|
|
|
|
|
|
|
|
ids: copyId.substring(1),
|
|
|
|
|
|
|
|
};
|
|
|
|
fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
|
|
|
|
fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
|
|
|
|
method: 'POST',
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
body: JSON.stringify({ ...values, ids: copyId }),
|
|
|
|
body: JSON.stringify(params),
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((res) => {
|
|
|
|
.then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
setCopyOpen(false);
|
|
|
|
setCopyOpen(false);
|
|
|
|
|
|
|
|
getMoveTree(0, values.company);
|
|
|
|
message.success('复制成功', 2);
|
|
|
|
message.success('复制成功', 2);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
message.warning(res.msg, 2);
|
|
|
|
@ -282,7 +322,6 @@ const DragTree = () => {
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
{nodeData.type == 0 ? (
|
|
|
|
{nodeData.type == 0 ? (
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
{' '}
|
|
|
|
|
|
|
|
<ClusterOutlined />
|
|
|
|
<ClusterOutlined />
|
|
|
|
<span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
|
|
|
|
<span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
@ -290,22 +329,33 @@ const DragTree = () => {
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
{icon}
|
|
|
|
{icon}
|
|
|
|
<span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
|
|
|
|
<span style={{ marginLeft: '5px' }}>
|
|
|
|
|
|
|
|
{nodeData.title}
|
|
|
|
|
|
|
|
{nodeData.canceled == '1' ? (
|
|
|
|
|
|
|
|
<span style={{ color: 'red', marginLeft: '5px' }}>
|
|
|
|
|
|
|
|
(已封存)
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
''
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<div id="drag-button-ops">
|
|
|
|
<div id="drag-button-ops">
|
|
|
|
<span
|
|
|
|
<span
|
|
|
|
className="drag-button"
|
|
|
|
className="drag-button"
|
|
|
|
onClick={() =>
|
|
|
|
onClick={() => {
|
|
|
|
window.open(
|
|
|
|
setDrawerOpen(true);
|
|
|
|
`/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id}`,
|
|
|
|
setIframe(
|
|
|
|
'_blank',
|
|
|
|
`/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
|
|
|
|
)
|
|
|
|
1,
|
|
|
|
}
|
|
|
|
)}`,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
查看
|
|
|
|
查看
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<Popconfirm
|
|
|
|
<Popconfirm
|
|
|
|
title={`确认要删除 [${nodeData.title}] 吗?`}
|
|
|
|
title={`确认要删除[${nodeData.title}] 吗?`}
|
|
|
|
onConfirm={() => onDelete(nodeData)}
|
|
|
|
onConfirm={() => onDelete(nodeData)}
|
|
|
|
okText="确认"
|
|
|
|
okText="确认"
|
|
|
|
cancelText="取消"
|
|
|
|
cancelText="取消"
|
|
|
|
@ -343,43 +393,87 @@ const DragTree = () => {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onExpand = (info) => {
|
|
|
|
|
|
|
|
setExpandedKeys(info);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="drag-wrapper">
|
|
|
|
<ApartmentOutlined
|
|
|
|
<Spin tip={tip} spinning={loading}>
|
|
|
|
style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
|
|
|
|
<div className="drag-layout">
|
|
|
|
onClick={() => {
|
|
|
|
<div className="drag-header">
|
|
|
|
const value = showCanceled == 0 ? 1 : 0;
|
|
|
|
<img src={inset} />
|
|
|
|
setShowCanceled(value);
|
|
|
|
<div>组织快速调整</div>
|
|
|
|
getMoveTree(value);
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="drag-content">
|
|
|
|
|
|
|
|
<ApartmentOutlined
|
|
|
|
|
|
|
|
className="drag-showcanceled"
|
|
|
|
|
|
|
|
style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
|
|
|
|
|
|
|
|
onClick={() => {
|
|
|
|
|
|
|
|
const value = showCanceled == 0 ? 1 : 0;
|
|
|
|
|
|
|
|
setTip('正在加载,请稍候...');
|
|
|
|
|
|
|
|
setShowCanceled(value);
|
|
|
|
|
|
|
|
getMoveTree(value);
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Tree
|
|
|
|
|
|
|
|
className="draggable-tree"
|
|
|
|
|
|
|
|
//defaultExpandedKeys={expandedKeys}
|
|
|
|
|
|
|
|
expandedKeys={expandedKeys}
|
|
|
|
|
|
|
|
onExpand={onExpand}
|
|
|
|
|
|
|
|
draggable
|
|
|
|
|
|
|
|
icon={false}
|
|
|
|
|
|
|
|
blockNode
|
|
|
|
|
|
|
|
onDragEnter={onDragEnter}
|
|
|
|
|
|
|
|
onDrop={onDrop}
|
|
|
|
|
|
|
|
treeData={gData}
|
|
|
|
|
|
|
|
titleRender={onTitleRender}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<Drawer
|
|
|
|
|
|
|
|
width="60%"
|
|
|
|
|
|
|
|
placement="right"
|
|
|
|
|
|
|
|
closable={false}
|
|
|
|
|
|
|
|
onClose={() => setDrawerOpen(false)}
|
|
|
|
|
|
|
|
open={drawerOpen}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<iframe src={iframe} width="100%" height="100%" />
|
|
|
|
|
|
|
|
</Drawer>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="drag-footer">
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<QuestionCircleOutlined />
|
|
|
|
|
|
|
|
小提示
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<div className="tips">
|
|
|
|
|
|
|
|
<div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
|
|
|
|
|
|
|
|
<div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>4.顶部小图标点击可显示已封存的组织架构。</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</Spin>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<MergeDialog
|
|
|
|
|
|
|
|
ref={childRef}
|
|
|
|
|
|
|
|
open={open}
|
|
|
|
|
|
|
|
onCreate={onMergeCreate}
|
|
|
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
|
|
|
setOpen(false);
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<Spin tip={tip} spinning={loading}>
|
|
|
|
<CopyDialog
|
|
|
|
<Tree
|
|
|
|
ref={copyChildRef}
|
|
|
|
className="draggable-tree"
|
|
|
|
open={copyopen}
|
|
|
|
defaultExpandedKeys={expandedKeys}
|
|
|
|
|
|
|
|
draggable
|
|
|
|
|
|
|
|
icon={false}
|
|
|
|
|
|
|
|
blockNode
|
|
|
|
|
|
|
|
onDragEnter={onDragEnter}
|
|
|
|
|
|
|
|
onDrop={onDrop}
|
|
|
|
|
|
|
|
treeData={gData}
|
|
|
|
|
|
|
|
titleRender={onTitleRender}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<MergeDialog
|
|
|
|
|
|
|
|
ref={childRef}
|
|
|
|
|
|
|
|
open={open}
|
|
|
|
|
|
|
|
onCreate={onMergeCreate}
|
|
|
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
|
|
|
setOpen(false);
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
{/* <CopyDialog open={copyopen}
|
|
|
|
|
|
|
|
onCreate={onCopyCreate}
|
|
|
|
onCreate={onCopyCreate}
|
|
|
|
onCancel={() => {
|
|
|
|
onCancel={() => {
|
|
|
|
setCopyOpen(false);
|
|
|
|
setCopyOpen(false);
|
|
|
|
}}/> */}
|
|
|
|
}}
|
|
|
|
</Spin>
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export default DragTree;
|
|
|
|
export default DragTree;
|
|
|
|
|
