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

修改

Browse Source
pull/7/head
Chengliang 2 years ago
parent 12482afb8f
commit 5b9788cfc8
4 changed files with 215 additions and 114 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

9
src/components/topBar/index.jsx
Unescape Escape View File

@ -290,6 +290,15 @@ export class TopBar extends React.Component {
>
查询
</Button>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
window.open('#/dragtree', 'blank');
}}
>
组织调整
</Button>
<Dropdown overlay={this.menu}>
<Button type="primary">导出</Button>
</Dropdown>

280
src/pages/dragTree.jsx
Unescape Escape View File

@ -1,4 +1,4 @@
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 * as d3 from 'd3';
import qs from 'qs';
@ -10,7 +10,9 @@ import {
FolderOutlined,
ClusterOutlined,
ApartmentOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
import './index.less';
const DragTree = () => {
@ -21,6 +23,8 @@ const DragTree = () => {
const [tip, setTip] = useState('正在加载,请稍候...');
const [loading, setLoading] = useState(false);
const [showCanceled, setShowCanceled] = useState(0);
const [drawerOpen, setDrawerOpen] = useState(false);
const [iframe, setIframe] = useState('');
const [open, setOpen] = useState(false);
const [mergeId, setMergeId] = useState(null);
@ -60,80 +64,95 @@ const DragTree = () => {
};
const onDrop = (info) => {
setLoading(true);
setTip('正在转移，请稍候...');
const dropKey = info.node.key;
const dragKey = info.dragNode.key;
const dropPos = info.node.pos.split('-');
const dropPosition =
info.dropPosition - Number(dropPos[dropPos.length - 1]);
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
sourcekey: dragKey,
targetkey: dropKey,
dropPosition: dropPosition,
}),
})
.then((response) => response.json())
.then((res) => {
if (res.code == 200) {
const data = [...gData];
// Find dragObject
let dragObj;
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
if (!info.dropToGap) {
// Drop on the content
loop(data, dropKey, (item) => {
item.children = item.children || [];
// where to insert 示例添加到头部，可以是随意位置
item.children.unshift(dragObj);
});
} else if (
(info.node.props.children || []).length > 0 &&
// Has children
info.node.props.expanded &&
// Is expanded
dropPosition === 1 // On the bottom gap
) {
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);
if (dropPosition == -1) {
return message.error('不支持该操作！！！', 2);
}
let pos = dropPosition == 0 ? '内部' : '下方';
let title = `确定将【${info.dragNode.title}】移到 【${info.node.title}】${pos}`;
Modal.confirm({
title: '转移操作',
content: title,
okText: '确认',
cancelText: '取消',
onOk() {
setLoading(true);
setTip('正在转移，请稍候...');
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
sourcekey: dragKey,
targetkey: dropKey,
dropPosition: dropPosition,
}),
})
.then((response) => response.json())
.then((res) => {
if (res.code == 200) {
const data = [...gData];
// Find dragObject
let dragObj;
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
if (!info.dropToGap) {
// Drop on the content
loop(data, dropKey, (item) => {
item.children = item.children || [];
// where to insert 示例添加到头部，可以是随意位置
item.children.unshift(dragObj);
});
} else if (
(info.node.props.children || []).length > 0 &&
// Has children
info.node.props.expanded &&
// Is expanded
dropPosition === 1 // On the bottom gap
) {
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 {
ar.splice(i + 1, 0, dragObj);
message.warning(res.msg, 2);
}
}
setGData(data);
message.success('转移成功', 2);
} else {
message.warning(res.msg, 2);
}
setLoading(false);
})
.catch((error) => {
message.error('接口异常,请联系管理员');
});
setTimeout(function () {}, 1000);
setLoading(false);
})
.catch((error) => {
message.error('接口异常,请联系管理员');
});
},
onCancel() {},
});
};
/**
@ -256,12 +275,17 @@ const DragTree = () => {
};
const onCopyCreate = (values) => {
let params = {
company: values.company,
copySubDept: values.copySubDept ? '1' : '0',
ids: copyId.substring(1),
};
fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ ...values, ids: copyId.substring(1) }),
body: JSON.stringify(params),
})
.then((response) => response.json())
.then((res) => {
@ -310,19 +334,19 @@ const DragTree = () => {
<div id="drag-button-ops">
<span
className="drag-button"
onClick={() =>
window.open(
onClick={() => {
setDrawerOpen(true);
setIframe(
`/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
1,
)}`,
'_blank',
)
}
);
}}
>
查看
</span>
<Popconfirm
title={`确认要删除 [${nodeData.title}] 吗?`}
title={`确认要删除[${nodeData.title}] 吗?`}
onConfirm={() => onDelete(nodeData)}
okText="确认"
cancelText="取消"
@ -366,46 +390,76 @@ const DragTree = () => {
return (
<>
<ApartmentOutlined
style={{ color: showCanceled == 0 ? '#1890ff' : '#eb2f96' }}
onClick={() => {
const value = showCanceled == 0 ? 1 : 0;
setTip('正在加载,请稍候...');
setShowCanceled(value);
getMoveTree(value);
<Layout className="drag-layout">
<Header className="drag-header">组织快速调整</Header>
<Spin tip={tip} spinning={loading}>
<Layout>
<Sider theme="light" width="60%">
<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}
/>
</Sider>
<Content className="drag-content">
<Drawer
width="60%"
placement="right"
onClose={() => setDrawerOpen(false)}
open={drawerOpen}
>
<iframe src={iframe} width="100%" height="100%" />
</Drawer>
</Content>
</Layout>
</Spin>
<Footer className="drag-footer">
<p>小提示</p>
<div className="tips">
<div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
<div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
<div>
3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
</div>
<div>4.右上角小图标点击可显示已封存的组织架构</div>
</div>
</Footer>
</Layout>
<MergeDialog
ref={childRef}
open={open}
onCreate={onMergeCreate}
onCancel={() => {
setOpen(false);
}}
/>
<CopyDialog
ref={copyChildRef}
open={copyopen}
onCreate={onCopyCreate}
onCancel={() => {
setCopyOpen(false);
}}
/>
<Spin tip={tip} spinning={loading}>
<Tree
className="draggable-tree"
//defaultExpandedKeys={expandedKeys}
expandedKeys={expandedKeys}
onExpand={onExpand}
draggable
icon={false}
blockNode
onDragEnter={onDragEnter}
onDrop={onDrop}
treeData={gData}
titleRender={onTitleRender}
/>
<MergeDialog
ref={childRef}
open={open}
onCreate={onMergeCreate}
onCancel={() => {
setOpen(false);
}}
/>
<CopyDialog
ref={copyChildRef}
open={copyopen}
onCreate={onCopyCreate}
onCancel={() => {
setCopyOpen(false);
}}
/>
</Spin>
</>
);
};

40
src/pages/index.less
Unescape Escape View File

@ -24,7 +24,6 @@
#drag-button-ops {
display: none;
width: 500px;
height: 16px;
font-size: 12px;
line-height: 16px;
@ -40,3 +39,42 @@
color: #22c8fb;
}
}
.drag-layout {
.drag-header {
background: #ffffff;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-weight: 800;
}
.drag-footer {
background: #ffffff;
p {
background-color: #22c8fb;
}
.tips {
div {
font-size: 14px;
letter-spacing: 0.5px;
height: 25px;
line-height: 25px;
font-weight: 600;
}
}
}
}
.drag-showcanceled {
font-size: 18px;
margin-left: 32px;
}
.drag-content {
background: #ffffff;
}
.ant-drawer-body {
padding: 0px;
overflow: hidden;
}

Write Preview
Loading…
Cancel
Save