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

组织架构图改造

This commit is contained in:
Chengliang 2023-06-28 17:38:16 +08:00
parent 337a2101cd
commit dc2e54528a
5 changed files with 153 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/department.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

24
src/components/timeline/index.jsx
View File

@ -2,7 +2,7 @@
* @Author: Chengliang 1546584672@qq.com
* @Date: 2023-06-25 16:33:21
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2023-06-27 10:51:02
* @LastEditTime: 2023-06-28 16:02:39
* @FilePath: /org-chart-frant/src/components/timeline/index.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -41,17 +41,17 @@ export default class TimeLine extends React.Component {
// });
// });
const datas = [
{ key: 0, title: '当前版本', color: 'blue', time: '2022-01-09' },
{ key: 1, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 2, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 3, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 4, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 5, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 6, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 7, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 8, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 9, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 10, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 0, id: 0, title: '当前版本', color: 'blue', time: '' },
{ key: 1, id: 1, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 2, id: 2, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 3, id: 3, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 4, id: 4, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 5, id: 5, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 6, id: 6, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 7, id: 7, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 8, id: 8, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 9, id: 9, title: '测试', color: 'grey', time: '2022-01-09' },
{ key: 10, id: 10, title: '测试', color: 'grey', time: '2022-01-09' },
];
this.setState({
timelineList: datas,

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

@ -1,4 +1,5 @@
import React from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import style from './index.less';
import {
DatePicker,
@ -10,8 +11,13 @@ import {
Dropdown,
Menu,
TreeSelect,
Tooltip,
Modal,
Input,
message,
} from 'antd';
const { Option } = Select;
const { TextArea } = Input;
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
@ -30,6 +36,9 @@ export class TopBar extends React.Component {
level: '3',
fisvitual: '0',
},
open: false,
confirmLoading: false,
description: '',
};
}
@ -42,13 +51,35 @@ export class TopBar extends React.Component {
this.setState({ requestData });
}
onChange = (e) => {
this.setState({ description: e.target.value });
};
/**
* 组织维度改变
* 弹窗确认
*/
changeFclass() {
debugger;
this.getSeatchCondition(this.props.url);
handleOk = () => {
const { description, requestData } = this.state;
if (description.length == 0) {
return message.error('请填写描述信息');
}
this.setState({ confirmLoading: true });
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:'' });
// message.success('版本记录成功,请重新刷新页面');
// } else {
// message.error('版本记录失败,请联系相关人员处理数据');
// }
// });
};
handleExportMenuClick(e) {
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
@ -93,11 +124,10 @@ export class TopBar extends React.Component {
setTimeout(() => {
this.getNodeTreeNode(id);
resolve(undefined);
}, 1000);
}, 500);
});
onRootChange = (value) => {
debugger;
let requestData = { ...this.state.requestData, root: value };
this.setState({ requestData });
};
@ -140,9 +170,8 @@ export class TopBar extends React.Component {
);
render() {
const { disabled } = this.props;
debugger;
const { rootTreeData } = this.state;
const { disabled, type } = this.props;
const { rootTreeData, open, confirmLoading } = this.state;
return (
<div className={style.topbarWrapper}>
@ -154,8 +183,17 @@ export class TopBar extends React.Component {
style={{ width: 140 }}
value={this.state.requestData.fclass}
onChange={(value) => {
this.handleFormChange({ fclass: value });
this.props.onSearch(this.state.requestData);
const requestData = {
fclass: value,
root: undefined,
level: '3',
fisvitual: '0',
};
this.handleFormChange(requestData);
this.getSeatchCondition(
`/api/bs/hrmorganization/orgchart/getCondition?fclass=${value}&type=${this.props.type}`,
);
this.props.onSearch(requestData);
}}
>
{this.state.fclasslist.map((item) => (
@ -182,6 +220,7 @@ export class TopBar extends React.Component {
<Col span={6}>
<Checkbox
style={{ marginTop: '5px', marginLeft: 100 }}
checked={this.state.requestData.fisvitual == '1'}
onChange={(e) =>
this.handleFormChange({
fisvitual: e.target.checked ? '1' : '0',
@ -190,6 +229,15 @@ export class TopBar extends React.Component {
>
显示虚拟组织
</Checkbox>
<Tooltip
title="提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
color="#FF7F00"
placement="rightTop"
>
<QuestionCircleOutlined
style={{ color: '#FF7F00', cursor: 'pointer', fontSize: 16 }}
/>
</Tooltip>
</Col>
<Col span={6}>
显示层级：
@ -207,16 +255,18 @@ export class TopBar extends React.Component {
</Row>
<Row style={{ marginTop: '15px' }}>
<Col span={8}>
{type == 'user' && (
<Button
type="primary"
style={{ marginRight: '10px' }}
disabled={disabled}
onClick={() => {
this.props.onSynchronous(this.state.requestData);
this.setState({ open: true });
}}
>
版本记录
</Button>
)}
<Button
type="primary"
style={{ marginRight: '10px' }}
@ -227,10 +277,31 @@ export class TopBar extends React.Component {
查询
</Button>
<Dropdown overlay={this.menu}>
<Button>导出</Button>
<Button type="primary">导出</Button>
</Dropdown>
</Col>
</Row>
<Modal
title="版本记录"
cancelText="取消"
okText="确定"
open={open}
onOk={this.handleOk}
confirmLoading={confirmLoading}
onCancel={() => this.setState({ open: false })}
>
<p style={{ color: 'red' }}>
提示:版本操作耗时较长，请谨慎操作（版本仅记录当前维度的数据）
</p>
<p>描述:</p>
<TextArea
showCount
maxLength={10}
style={{ height: 120, resize: 'none' }}
onChange={this.onChange}
placeholder="please enter"
/>
</Modal>
</div>
);
}

56
src/pages/company.jsx
View File

@ -12,6 +12,7 @@ import { message } from 'antd';
let active = 'top';
export default function companyPage() {
let topbar = null;
const [data, setData] = useState(null);
const [sliderProgress, setSliderProgress] = useState(50);
let addNodeChildFunc = null;
@ -19,7 +20,7 @@ export default function companyPage() {
let topBarSearchRequest = null;
const [hasRight, setHasRight] = useState('');
const [disabled, setDisabled] = useState(false);
const [id, setId] = useState(0);
// 点击节点
function onNodeClick(nodeId) {
@ -49,9 +50,7 @@ export default function companyPage() {
qs.stringify(request, { addQueryPrefix: true });
} else {
api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') +
'&ids=' +
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
idsStr;
}
@ -82,9 +81,7 @@ export default function companyPage() {
// 获取数据
useEffect(() => {
d3.json(
// "/company/data"
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'),
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&root=0&level=3&id=0',
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
@ -183,7 +180,6 @@ export default function companyPage() {
return `<div>${d.data.fname}</div>`;
};
// tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart &&
@ -232,10 +228,6 @@ export default function companyPage() {
orgChart && orgChart.zoomBehavior(value - 50);
};
// tool bar end
// top bar start
function downloadPdf(chart) {
chart.exportImg({
save: false,
@ -275,13 +267,20 @@ export default function companyPage() {
* 时间轴点击
* @param {*} timeline
*/
const timeLineSearch = (timeline) => {};
const timeLineSearch = (timeline) => {
setId(timeline.id);
let requestData = { ...topbar.state.requestData, id: timeline.id };
handleSearch(requestData, false);
};
/**
* 查询
* @param {*} requestData
*/
const handleSearch = (requestData) => {
const handleSearch = (requestData, cache = true) => {
if (cache) {
requestData = { ...requestData, id: id };
}
topBarSearchRequest = requestData;
let api =
'/api/bs/hrmorganization/orgchart/companyData' +
@ -300,26 +299,6 @@ export default function companyPage() {
});
};
/**
* 同步数据
* @param {*} requestData
*/
const handleSynchronous = (requestData) => {
setDisabled(true);
let api = '/api/bs/hrmorganization/orgchart/synchronousData';
fetch(api)
.then((res) => res.json())
.then((data) => {
if (data.code == 200) {
message.success('同步成功,请重新查询');
} else {
message.error('数据同步失败');
}
setDisabled(false);
//this.handleSearch(requestData);
});
};
useEffect(() => {
if (active == 'left') {
orgChart &&
@ -352,18 +331,15 @@ export default function companyPage() {
hasRight && (
<div className={styles.contentWrapper}>
<TopBar
ref={(r) => (topbar = r)}
onExport={(type) => {
handleExport(type);
}}
onSearch={(requestData) => {
handleSearch(requestData);
}}
onSynchronous={(requestData) => {
handleSynchronous(requestData);
}}
disabled={disabled}
type="company"
url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company"
/>
<ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
@ -378,7 +354,7 @@ export default function companyPage() {
onClick={(timeline) => {
timeLineSearch(timeline);
}}
url="/api/bs/hrmorganization/orgchart/timelines?type=company"
url={'/api/bs/hrmorganization/orgchart/timelines?id=' + id}
/>
<OrgChartComponent
setChart={(chart) => (orgChart = chart)}

61
src/pages/user.jsx
View File

@ -4,6 +4,8 @@ import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar';
import TimeLine from '../components/timeline';
import moment from 'moment';
import qs from 'qs';
import { message } from 'antd';
@ -11,6 +13,7 @@ import jsPDF from 'jspdf';
let active = 'top';
export default function userPage() {
const [data, setData] = useState(null);
let topbar = null;
const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
const [requestRes, setRequestRes] = useState({
date: moment(new Date()).format('YYYY-MM-DD'),
@ -25,7 +28,7 @@ export default function userPage() {
let progressBtnRef = null;
const [hasRight, setHasRight] = useState('');
const [disabled, setDisabled] = useState(false);
const [id, setId] = useState(0);
// 点击节点
function onNodeClick(nodeId) {
// alert('clicked ' + nodeId);
@ -54,8 +57,7 @@ export default function userPage() {
qs.stringify(request, { addQueryPrefix: true });
} else {
api =
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') +
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&fisvitual=0&root=0&level=3&id=0' +
'&ids=' +
idsStr;
}
@ -72,13 +74,23 @@ export default function userPage() {
}
}
/**
* 时间轴点击
* @param {*} timeline
*/
const timeLineSearch = (timeline) => {
setId(timeline.id);
let requestData = { ...topbar.state.requestData, id: timeline.id };
handleSearch(requestData, false);
};
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1;
return `./img/department/${index}.png`;
}
// 获取部门图片
// 获取分部图片
function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1;
return `./img/subcompany/${index}.png`;
@ -87,11 +99,10 @@ export default function userPage() {
// 获取数据
useEffect(() => {
document.cookie =
'ecology_JSessionid=aaabAoBxcpmhQ5GSTpXJy; JSESSIONID=aaabAoBxcpmhQ5GSTpXJy; Systemlanguid=7; languageidweaver=7; loginuuids=1; __randcode__=1e1d21ef-3a75-4eaa-b3b3-277fa0ca0ef3; loginidweaver=sysadmin';
'ecology_JSessionid=aaaMxyh0rOLot5nEk86Jy; JSESSIONID=aaaMxyh0rOLot5nEk86Jy; __randcode__=39ee6033-5f6f-4e53-ad53-5a3de97645eb; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1';
d3.json(
// "/user/data"
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'),
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
@ -196,7 +207,10 @@ export default function userPage() {
}
};
const handleSearch = (requestData) => {
const handleSearch = (requestData, cache = true) => {
if (cache) {
requestData = { ...requestData, id: id };
}
setTpBarSearchRequest(requestData);
let api =
'/api/bs/hrmorganization/orgchart/userData' +
@ -215,22 +229,6 @@ export default function userPage() {
});
};
const handleSynchronous = (requestData) => {
setDisabled(true);
let api = '/api/bs/hrmorganization/orgchart/synchronousData';
fetch(api)
.then((res) => res.json())
.then((data) => {
if (data.code == 200) {
message.success('同步成功,请重新查询');
} else {
message.error('数据同步失败');
}
setDisabled(false);
//this.handleSearch(requestData);
});
};
useEffect(() => {
if (active == 'left') {
orgChart &&
@ -309,7 +307,7 @@ export default function userPage() {
? d.data.fleaderimg
: d.data.ftype == 0 || d.data.ftype == 1
? './img/company.png'
: './img/default_avator.png'
: './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%" >
@ -506,6 +504,7 @@ export default function userPage() {
hasRight && (
<div className={styles.contentWrapper}>
<TopBar
ref={(r) => (topbar = r)}
onExport={(type) => {
handleExport(type);
}}
@ -513,12 +512,8 @@ export default function userPage() {
setRequestRes(requestData);
handleSearch(requestData);
}}
onSynchronous={(requestData) => {
handleSynchronous(requestData);
}}
disabled={disabled}
type="user"
url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=user"
/>
<ToolBar
onTopLayoutClick={handleTopLayoutClick}
@ -526,6 +521,12 @@ export default function userPage() {
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
/>
<TimeLine
onClick={(timeline) => {
timeLineSearch(timeline);
}}
url={'/api/bs/hrmorganization/orgchart/timelines?id=' + id}
/>
<OrgChartComponent
setChart={(chart) => (orgChart = chart)}
setClick={(click) => (addNodeChildFunc = click)}