diff --git a/public/img/department.png b/public/img/department.png
new file mode 100644
index 0000000..eb3c3d5
Binary files /dev/null and b/public/img/department.png differ
diff --git a/src/components/timeline/index.jsx b/src/components/timeline/index.jsx
index ae5fc01..d33bd0e 100644
--- a/src/components/timeline/index.jsx
+++ b/src/components/timeline/index.jsx
@@ -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,
diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx
index 5dba488..d295165 100644
--- a/src/components/topBar/index.jsx
+++ b/src/components/topBar/index.jsx
@@ -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 (
@@ -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 {
this.handleFormChange({
fisvitual: e.target.checked ? '1' : '0',
@@ -190,6 +229,15 @@ export class TopBar extends React.Component {
>
显示虚拟组织
+
+
+
显示层级:
@@ -207,16 +255,18 @@ export class TopBar extends React.Component {
-
+ {type == 'user' && (
+
+ )}
+
this.setState({ open: false })}
+ >
+
+ 提示:版本操作耗时较长,请谨慎操作(版本仅记录当前维度的数据)
+
+ 描述:
+
+
);
}
diff --git a/src/pages/company.jsx b/src/pages/company.jsx
index 4ef9853..ab93e05 100644
--- a/src/pages/company.jsx
+++ b/src/pages/company.jsx
@@ -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 `${d.data.fname}
`;
};
- // 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 && (
(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"
/>
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}
/>
(orgChart = chart)}
diff --git a/src/pages/user.jsx b/src/pages/user.jsx
index d8c25c0..513b7e9 100644
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@@ -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"/>
@@ -506,6 +504,7 @@ export default function userPage() {
hasRight && (
(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"
/>
handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
/>
+ {
+ timeLineSearch(timeline);
+ }}
+ url={'/api/bs/hrmorganization/orgchart/timelines?id=' + id}
+ />
(orgChart = chart)}
setClick={(click) => (addNodeChildFunc = click)}