组织架构图优化

feature/drag
Chengliang 2 years ago
parent 622ebcbcd7
commit 63d0f86805

@ -2,7 +2,7 @@
* @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2022-12-16 11:24:29
* @LastEditTime: 2023-07-24 09:57:14
* @FilePath: /org-chart-frant/.umirc.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -26,7 +26,8 @@ export default defineConfig({
proxy: {
'/api': {
// 标识需要进行转换的请求的url
target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
//target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
target: 'http://221.226.25.34:11080/api',
changeOrigin: true, // 允许域名进行转换
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
},

@ -0,0 +1,134 @@
import React from 'react';
import { TreeSelect, Modal, message } from 'antd';
export default class OperateDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
treeData: [],
open: false,
confirmLoading: false,
title: '',
operateType: '',
root: '',
type: 1,
};
}
componentDidMount() {}
handleOk = () => {
const { type } = this.state;
if (type === 1) {
this.props.addFolderNode();
} else {
this.props.deleteNode();
}
setTimeout(() => {
this.setState({ open: false });
message.success('操作成功');
}, 200);
// if (description.length == 0) {
// return message.error('');
// }
// this.setState({ confirmLoading: true });
// 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);
// }
// });
};
/**
* 根节点树数据
* @param {} parentId
* @returns
*/
getNodeTreeNode = (parentId) => {
this.setState({ confirmLoading: true });
fetch(`/api/bs/hrmorganization/orgchart/getSubCompanyTree`)
.then((res) => res.json())
.then((data) => {
if (data.api_status) {
let arr = [];
arr = [...this.state.treeData, ...data.companyTree];
this.setState({
treeData: arr,
confirmLoading: false,
});
}
});
};
/**
* 根节点树异步加载
* @param {} parentId
* @returns
*/
onRootLoadData = (treeNode) =>
new Promise((resolve) => {
const { id } = treeNode.props;
setTimeout(() => {
let api = `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`;
this.getNodeTreeNode(api);
resolve(undefined);
}, 500);
});
showOperate = (id, title, type) => {
this.setState({
open: true,
confirmLoading: true,
title: title,
type: type,
});
this.getNodeTreeNode(id);
};
onRootChange = (value) => {
this.setState({ root: value });
};
render() {
const { treeData, open, confirmLoading, title } = this.state;
return (
<>
<Modal
title={title}
cancelText="取消"
okText="确定"
open={open}
onOk={this.handleOk}
confirmLoading={confirmLoading}
onCancel={() => this.setState({ open: false })}
>
<TreeSelect
treeDataSimpleMode
allowClear
style={{ width: '100%' }}
value={this.state.root}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择要删除的节点"
onChange={this.onRootChange}
loadData={this.onRootLoadData}
treeData={treeData}
/>
</Modal>
</>
);
}
}

@ -239,7 +239,7 @@ export default class DrawerComponents extends React.Component {
<img src="./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"/>
</div>
<div style="display: inline-block; margin-left: 6px;width: 55%">
<div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
<div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
${d.data.fname}
</div>
<div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 B

@ -10,6 +10,8 @@ import fullscreen from './img/fullscreen.png';
import fit from './img/fit.png';
import compact from './img/compact.png';
import expandAll from './img/expandAll.png';
import deleteNode from './img/folder-remove.png';
import folderAdd from './img/folder-add.png';
export default class ToolBar extends React.Component {
progressBtn = React.createRef();
@ -101,6 +103,20 @@ export default class ToolBar extends React.Component {
this.props.onLeftLayoutClick(this.progressBtn);
}}
/>
{/* <img
className={styles.toolBarItem}
src={folderAdd}
onClick={() => {
this.props.onFolderAddNode(this.progressBtn);
}}
/>
<img
className={styles.toolBarItem}
src={deleteNode}
onClick={() => {
this.props.onDeleteNode(this.progressBtn);
}}
/> */}
<img
className={styles.toolBarItem}
src={fullscreen}

@ -6,6 +6,7 @@ import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar';
import TimeLine from '../components/timeline';
import DrawerComponents from '../components/drawer';
import OperateDialog from '../components/dialog';
import jsPDF from 'jspdf';
import moment from 'moment';
import qs from 'qs';
@ -13,6 +14,7 @@ import { message, Spin } from 'antd';
let active = 'top';
let drawerCom = null;
let operateCom = null;
let timeLine = null;
let orgChart = null;
let topbar = null;
@ -217,6 +219,32 @@ export default function companyPage() {
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 &&
@ -406,6 +434,8 @@ export default function companyPage() {
}
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)}
@ -432,8 +462,12 @@ export default function companyPage() {
nodeContent={nodeContentRender}
/>
</Spin>
<DrawerComponents ref={(r) => (drawerCom = r)} />
<OperateDialog
ref={(r) => (operateCom = r)}
addFolderNode={addFolderNode}
deleteNode={deleteNode}
/>
</div>
)
);

@ -99,7 +99,7 @@ export default function userPage() {
//
useEffect(() => {
document.cookie =
'ecology_JSessionid=aaapuc_tMLwUT4NtMrnLy; JSESSIONID=aaapuc_tMLwUT4NtMrnLy; Systemlanguid=7; languageidweaver=7; loginuuids=1; __randcode__=7e56748f-fcc0-41fd-aac7-44d6bce54bad; loginidweaver=sysadmin';
'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&fisvitual=0&root=0&level=3&id=0',

Loading…
Cancel
Save