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

feat: 组织架构图组织透视问题单修改

This commit is contained in:
pettzzz 2022-10-18 14:22:21 +08:00
parent 5c507d2548
commit 28042e2a3f
6 changed files with 2210 additions and 1672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/orgChart/index.jsx
View File

@ -6,15 +6,27 @@
* @FilePath: /org-chart-frant/src/components/orgChart/index.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useLayoutEffect, useRef, useEffect } from 'react';
import { OrgChart } from 'd3-org-chart';
import React, { useLayoutEffect, useRef, useEffect, memo } from 'react';
import { OrgChart } from '../../d3-org-chart.js';
import * as d3 from 'd3';
import { message } from 'antd';
import moment from 'moment';
export const OrgChartComponent = (props, ref) => {
export const OrgChartComponent = memo((props, ref) => {
const d3Container = useRef(null);
const chartBackup = useRef(null);
let chart = null;
const { data = [{}] } = props;
const {
requestRes = {
date: moment(new Date()).format('YYYY-MM-DD'),
fclass: '0',
root: '0',
level: '3',
fisvitual: '0',
},
} = props;
const { level = '3' } = requestRes;
function addNode(node) {
chart.addNode(node);
}
@ -23,9 +35,9 @@ export const OrgChartComponent = (props, ref) => {
// We need to manipulate DOM
useLayoutEffect(() => {
if (props.data && d3Container.current) {
if (d3Container.current) {
if (!chart) {
chart = new OrgChart({ expandLevel: 3 });
chart = new OrgChart({ expandLevel: +level == 1 ? 0 : +level });
window.chart = chart;
}
props.setChart(chart);
@ -34,7 +46,7 @@ export const OrgChartComponent = (props, ref) => {
chart
.container(d3Container.current)
.data(props.data)
.data(data)
.nodeWidth(props.nodeWidth)
.nodeHeight(props.nodeHeight)
.layout('top')
@ -52,13 +64,13 @@ export const OrgChartComponent = (props, ref) => {
.buttonContent(props.buttonContent)
.nodeContent(props.nodeContent)
.render();
chart
.setCentered(chart.getChartState().root.id)
.expandExpandNodes()
.render();
chartBackup.current = chart;
chart.onButtonClick = (event, d) => {
buttonClick.bind(chart)(event, d);
buttonClick.bind(chartBackup.current)(event, d);
props.onButtonClick && props.onButtonClick(event, d);
};
} catch (err) {
@ -66,11 +78,11 @@ export const OrgChartComponent = (props, ref) => {
message.warning(err);
}
}
}, [props.data, d3Container.current]);
}, [data]);
return (
<div>
<div ref={d3Container} />
</div>
);
};
});

162
src/components/toolBar/index.jsx
View File

@ -1,78 +1,104 @@
import React from 'react'
import add from './img/add.png'
import decrease from './img/decrease.png'
import React from 'react';
import add from './img/add.png';
import decrease from './img/decrease.png';
import styles from './index.less';
import top from './img/top.png';
import left from './img/left.png';
import topActive from './img/top_active.png'
import leftActive from './img/left_active.png'
import topActive from './img/top_active.png';
import leftActive from './img/left_active.png';
export default class ToolBar extends React.Component {
progressBtn = React.createRef()
start = false;
clientY = 0
originalY = 0
top = 50
constructor(props) {
super(props);
this.state = {
toolActive: "top"
}
}
progressBtn = React.createRef();
start = false;
clientY = 0;
originalY = 0;
top = 50;
constructor(props) {
super(props);
this.state = {
toolActive: 'top',
};
}
handleMouseDown(e) {
this.clientY = e.clientY
this.originalY = e.clientY
this.top = parseInt(this.progressBtn.current.style.top)
this.start = true;
}
handleMouseDown(e) {
this.clientY = e.clientY;
this.originalY = e.clientY;
this.top = parseInt(this.progressBtn.current.style.top);
this.start = true;
}
handleMouseMove(e) {
if(this.start && e.clientY - this.clientY > 10) {
this.props.onZoomOut()
this.clientY = e.clientY
} else if(this.start && e.clientY - this.clientY < - 10) {
this.props.onZoomIn()
this.clientY = e.clientY
}
if(this.start) {
let offset = e.clientY - this.originalY
console.log("offset:", offset);
if((this.top + offset) < 0) {
offset = 0 - this.top
}
if((this.top + offset) > 100) {
offset = 100 - this.top
}
console.log("(this.top + offset)：", (this.top + offset))
this.progressBtn.current.style.top = (this.top + offset) + "px";
}
handleMouseMove(e) {
if (this.start && e.clientY - this.clientY > 10) {
this.props.onZoomOut();
this.clientY = e.clientY;
} else if (this.start && e.clientY - this.clientY < -10) {
this.props.onZoomIn();
this.clientY = e.clientY;
}
if (this.start) {
let offset = e.clientY - this.originalY;
if (this.top + offset < 0) {
offset = 0 - this.top;
}
if (this.top + offset > 100) {
offset = 100 - this.top;
}
this.progressBtn.current.style.top = this.top + offset + 'px';
}
}
handleMouseUp(e) {
this.start = false;
console.log("this.start:", this.start)
}
render() {
return (
<div className={styles.toolbarWrapper}>
<img src={add} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomIn(this.progressBtn)}}/>
<div className={styles.progressWrapper}>
<div className={styles.progressBtn} style={{top: 50}} ref={this.progressBtn}
onMouseDown={(e) => {this.handleMouseDown(e)}}
onMouseMove={(e) => {this.handleMouseMove(e)}}
onMouseUp={(e) => {this.handleMouseUp(e)}}
onMouseLeave={(e) => {this.handleMouseUp(e)}}
></div>
<div className={styles.progressLine}></div>
</div>
<img src={decrease} style={{cursor: 'pointer'}} onClick={() => {this.props.onZoomOut(this.progressBtn)}}/>
handleMouseUp(e) {
this.start = false;
console.log('this.start:', this.start);
}
<img className={styles.toolBarItem} src={this.state.toolActive == 'top'? topActive : top} onClick={() => {this.setState({toolActive: "top"}); this.props.onTopLayoutClick(this.progressBtn)}}/>
<img className={styles.toolBarItem} src={this.state.toolActive == 'left'? leftActive : left} onClick={() => {this.setState({toolActive: "left"}); this.props.onLeftLayoutClick(this.progressBtn)}}/>
</div>
)
}
}
render() {
return (
<div className={styles.toolbarWrapper}>
<img
src={add}
style={{ cursor: 'pointer' }}
onClick={() => {
this.props.onZoomIn(this.progressBtn);
}}
/>
<div className={styles.progressWrapper}>
<div
className={styles.progressBtn}
style={{ top: 50, cursor: 'no-drop' }}
ref={this.progressBtn}
// onMouseDown={(e) => {this.handleMouseDown(e)}}
// onMouseMove={(e) => {this.handleMouseMove(e)}}
// onMouseUp={(e) => {this.handleMouseUp(e)}}
// onMouseLeave={(e) => {this.handleMouseUp(e)}}
></div>
<div className={styles.progressLine}></div>
</div>
<img
src={decrease}
style={{ cursor: 'pointer' }}
onClick={() => {
this.props.onZoomOut(this.progressBtn);
}}
/>
<img
className={styles.toolBarItem}
src={this.state.toolActive == 'top' ? topActive : top}
onClick={() => {
this.setState({ toolActive: 'top' });
this.props.onTopLayoutClick(this.progressBtn);
}}
/>
<img
className={styles.toolBarItem}
src={this.state.toolActive == 'left' ? leftActive : left}
onClick={() => {
this.setState({ toolActive: 'left' });
this.props.onLeftLayoutClick(this.progressBtn);
}}
/>
</div>
);
}
}

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

@ -36,6 +36,11 @@ export class TopBar extends React.Component {
let requestData = { ...this.state.requestData, ...payload };
this.setState({ requestData });
}
//日期可选择未来
// disabledDate (current) {
// // return current && current >moment().subtract(1, "days");
// return current && current > moment().endOf("day");
// }
handleExportMenuClick(e) {
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
@ -80,8 +85,10 @@ export class TopBar extends React.Component {
数据日期：
<DatePicker
placeholder="请选择日期"
style={{ width: 120 }}
style={{ width: 130 }}
locale={locale}
allowClear={false}
// disabledDate={this.disabledDate}
defaultValue={moment(new Date())}
value={
this.state.requestData.date && this.state.requestData.date != ''
@ -157,9 +164,7 @@ export class TopBar extends React.Component {
查询
</Button>
<Dropdown overlay={this.menu}>
<Button onClick={this.handleExportButtonClick.bind(this)}>
导出
</Button>
<Button>导出</Button>
</Dropdown>
</Col>
</Row>

3356
src/d3-org-chart.js vendored
View File

File diff suppressed because it is too large Load Diff

86
src/pages/company.jsx
View File

@ -9,6 +9,7 @@ import moment from 'moment';
import qs from 'qs';
import { message } from 'antd';
let active = 'top';
export default function companyPage() {
const [data, setData] = useState(null);
const [sliderProgress, setSliderProgress] = useState(50);
@ -70,13 +71,15 @@ export default function companyPage() {
// 获取部门图片
function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1;
return `./img/department/${index}.png`;
// return `./img/department/${index}.png`;
return `./img/department/1.png`;
}
// 获取部门图片
function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1;
return `./img/subcompany/${index}.png`;
// return `./img/subcompany/${index}.png`;
return `./img/subcompany/2.png`;
}
// 获取数据
@ -94,9 +97,9 @@ export default function companyPage() {
// ButtonContent渲染
const buttonContentRender = ({ node, state }) => {
if (node.children) {
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`;
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`;
} else {
return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div> </div>`;
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;transform:rotate(180deg)">ˆ</div> </div>`;
}
};
@ -147,22 +150,14 @@ export default function companyPage() {
letter-spacing: 1px;
margin-top: 10px;
">${d.data.fname}</div>
<div style="
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #D0D0D0;
line-height: 19px;
margin-top: 10px;
">COMPANY_GROUP</div>
</div>
</div>`;
} else if (d.data.ftype == 1) {
return `<div onclick="window.open('${subcompanyUrl}', '_blank')">
<div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;">
<div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;display:flex;justify-content:center;align-items:center">
<img src="${getSubcompanyImage()}" />
</div>
<div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
<div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
@ -175,8 +170,10 @@ export default function companyPage() {
</div>`;
} else if (d.data.ftype == 2) {
return `
<div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${departmentUrl}')">
<div style="padding-left: 8px; padding-top: 23px;">
<div style="width: 100%; height: 100%; background-size: 100% 100%;" onclick="window.open('${departmentUrl}')">
<div style='position:absolute'>
<img src='./img/company_job_label.png'/></div>
<div style="padding-left: 8px; padding-top: 23px;display:flex;align-items:center">
<img src="${getDepartmentImage()}"/>
<span style="
margin-left: 3px;
@ -195,21 +192,32 @@ export default function companyPage() {
// tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart && orgChart.layout('top').render();
orgChart &&
orgChart
.layout('top')
.setCentered(orgChart.getChartState().root.id)
.render();
active = 'top';
};
const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart && orgChart.layout('left').render();
orgChart &&
orgChart
.layout('left')
.setCentered(orgChart.getChartState().root.id)
.render();
active = 'left';
};
const handleZoomIn = (progressBtn) => {
if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) - 10;
if (top <= 0) {
top = 30;
if (top >= 0) {
progressBtn.current.style.top = top + 'px';
} else {
return;
}
progressBtn.current.style.top = top + 'px';
}
orgChart && orgChart.zoomIn();
};
@ -217,12 +225,12 @@ export default function companyPage() {
const handleZoomOut = (progressBtn) => {
if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) + 10;
if (top >= 100) {
top = 70;
if (top <= 100) {
progressBtn.current.style.top = top + 'px';
} else {
return;
}
progressBtn.current.style.top = top + 'px';
}
orgChart && orgChart.zoomOut();
};
@ -237,6 +245,7 @@ export default function companyPage() {
function downloadPdf(chart) {
chart.exportImg({
save: false,
full: true,
onLoad: (base64) => {
var pdf = new jsPDF();
var img = new Image();
@ -272,10 +281,32 @@ export default function companyPage() {
fetch(api)
.then((res) => res.json())
.then((data) => {
setData(data.data);
if (data.data) {
if (!data.data.length) {
setData([{}]);
message.warning('暂无数据');
} else {
setData(data?.data);
}
}
});
};
useEffect(() => {
console.log('data', data);
if (active == 'left') {
orgChart &&
orgChart
.setCentered(orgChart.getChartState().root?.id)
.layout('left')
.render();
} else {
orgChart &&
orgChart
.setCentered(orgChart.getChartState().root?.id)
.layout('top')
.render();
}
}, [data]);
// top bar end
if (hasRight === false) {
//return message.error("对不起，您暂时没有权限", 2);
@ -316,6 +347,7 @@ export default function companyPage() {
setClick={(click) => (addNodeChildFunc = click)}
onNodeClick={onNodeClick}
data={data}
onButtonClick={onButtonClick}
buttonContent={buttonContentRender}
nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender}

231
src/pages/user.jsx
View File

@ -7,9 +7,17 @@ import ToolBar from '../components/toolBar';
import moment from 'moment';
import qs from 'qs';
import { message } from 'antd';
import jsPDF from 'jspdf';
let active = 'top';
export default function userPage() {
const [data, setData] = useState(null);
const [requestRes, setRequestRes] = useState({
date: moment(new Date()).format('YYYY-MM-DD'),
fclass: '0',
root: '0',
level: '3',
fisvitual: '0',
});
const [progressTop, setProgressTop] = useState(50);
let addNodeChildFunc = null;
let orgChart = null;
@ -79,13 +87,15 @@ export default function userPage() {
// 获取数据
useEffect(() => {
document.cookie =
'ecology_JSessionid=aaa1QNMWge48Bh-3oq6oy; JSESSIONID=aaa1QNMWge48Bh-3oq6oy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=0bef9a3b-51e8-452a-8558-5080bdee23ba';
d3.json(
// "/user/data"
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'),
).then((data) => {
setData(data.data);
setHasRight(data.hasRight);
setHasRight(data?.hasRight);
});
}, [true]);
@ -110,21 +120,32 @@ export default function userPage() {
// tool bar start
const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart && orgChart.layout('top').render();
orgChart &&
orgChart
.setCentered(orgChart.getChartState().root.id)
.layout('top')
.render();
active = 'top';
};
const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px';
orgChart && orgChart.layout('left').render();
orgChart &&
orgChart
.layout('left')
.setCentered(orgChart.getChartState().root.id)
.render();
active = 'left';
};
const handleZoomIn = (progressBtn) => {
if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) - 10;
if (top <= 0) {
top = 30;
if (top >= 0) {
progressBtn.current.style.top = top + 'px';
} else {
return;
}
progressBtn.current.style.top = top + 'px';
}
orgChart && orgChart.zoomIn();
};
@ -132,10 +153,11 @@ export default function userPage() {
const handleZoomOut = (progressBtn) => {
if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) + 10;
if (top >= 100) {
top = 70;
if (top <= 100) {
progressBtn.current.style.top = top + 'px';
} else {
return;
}
progressBtn.current.style.top = top + 'px';
}
orgChart && orgChart.zoomOut();
};
@ -147,6 +169,7 @@ export default function userPage() {
function downloadPdf(chart) {
chart.exportImg({
save: false,
full: true,
onLoad: (base64) => {
var pdf = new jsPDF();
var img = new Image();
@ -182,14 +205,31 @@ export default function userPage() {
fetch(api)
.then((res) => res.json())
.then((data) => {
if (data.data && data.data.length > 0) {
setData(data.data);
} else {
message.warning('暂无数据');
if (data.data) {
if (!data.data.length) {
setData([{}]);
message.warning('暂无数据');
} else {
setData(data?.data);
}
}
});
};
useEffect(() => {
if (active == 'left') {
orgChart &&
orgChart
.setCentered(orgChart.getChartState().root.id)
.layout('left')
.render();
} else {
orgChart &&
orgChart
.setCentered(orgChart.getChartState().root.id)
.layout('top')
.render();
}
}, [data]);
// top bar end
const nodeContentRender = (d, i, arr, state) => {
@ -204,9 +244,16 @@ export default function userPage() {
let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`;
// 人员地址
let userUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fleader}`;
// 通讯录
let addressBookUrl = '/spa/hrm/index_mobx.html#/main/hrm/addressBook';
// 岗位人员地址
let postUserUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fobjid}`;
//集团通讯录
let addressBookGroupUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?virtualtype=${d.data.fecid}`;
// 分部通讯录
let addressBookUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?subcompanyid1=${d.data.fecid}`;
// 部门通讯录
let addressBookDepartmentUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?departmentid=${d.data.fecid}`;
// 岗位通讯录
let addressBookPostUrl = `/spa/hrm/index_mobx.html#/main/hrm/addressBook/?departmentid=${d.data.fobjparentId}`;
if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
return `<div>
@ -218,7 +265,7 @@ export default function userPage() {
top: -8px;
background: #F7F9FD;
z-index: 100;
padding: 0px 10px;
padding: 0px 10px;
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
@ -236,36 +283,58 @@ export default function userPage() {
<img src="./img/user-card/line1.png" />
<img src="./img/user-card/line2.png" />
</span>
<div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${userUrl}', '_blank')">
<div onclick="window.open('${userUrl}', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
<img src="${
d.data.fleaderimg
? d.data.fleaderimg
: './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
<div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
<div style='position:absolute;z-index:-1;top:0'>
<img src='./img/user-card/user-card.png'></div>
<div style="display: inline-block; background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
<img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
<img src="${
d.data.fleaderimg
? d.data.fleaderimg
: d.data.ftype == 0
? './img/company.png'
: './img/default_avator.png'
}" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px"/>
</div>
<div style="display: inline-block; margin-left: 6px;">
<div style="display: inline-block; margin-left: 6px;width:60%" >
<div onclick="${
d.data.fleadername ? `window.open('${userUrl}', '_blank')` : ''
}">
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
margin-bottom: 9px;
">${d.data.fleadername}</div>
font-size: 13px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
margin-bottom: 9px;"
>${d.data.fleadername}</div>
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
margin-bottom: 19px;
">${d.data.fname} / ${d.data.fleaderjob}</div>
<div style="display: flex;" onclick="window.open('${addressBookUrl}', '_blank')">
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;"
title="${d.data.fname}${
d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
}">${d.data.fname}${
d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
}</div>
</div>
<div style="display: flex;" >
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${
d.data.fplan
}</div>
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${
d.data.fonjob
}</div>
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;" onclick="event.stopPropagation();window.open('${
d.data.ftype == 0
? addressBookGroupUrl
: d.data.ftype == 1
? addressBookUrl
: d.data.ftype == 2
? addressBookDepartmentUrl
: ''
}', '_blank')">在岗: ${d.data.fonjob}</div>
</div>
</div>
</div>
@ -281,19 +350,20 @@ export default function userPage() {
top: -8px;
background: #F7F9FD;
z-index: 100;
padding: 0px 10px;
padding: 0px 10px;
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #000000;
" onclick="window.open('${
jobtitleUrl + d.data.fnumber
}', '_blank')">${d.data.fname}</span>
" onclick="window.open('${jobtitleUrl}', '_blank')">${d.data.fname}</span>
<span style="margin-left: 70px;">
<img src="./img/user-card/line1.png" />
<img src="./img/user-card/line2.png" />
</span>
<div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
<div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
<div style='position:absolute;z-index:-1;top:16px'>
<img src='./img/user-card/user-card.png'>
</div>
<img src="./img/user-card/jobicon.png" style="margin-left: 20px; vertical-align: top;"/>
<div style="display: inline-block; margin-left: 15px;">
<div style="
@ -302,17 +372,15 @@ export default function userPage() {
font-weight: bold;
color: #333333;
margin-bottom: 23px;
" onclick="window.open('${
jobtitleUrl + d.data.fnumber
}', '_blank')">${d.data.fname}</div>
" onclick="window.open('${jobtitleUrl}', '_blank')">${d.data.fname}</div>
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
" onclick="window.open('${addressBookUrl}', '_blank')">
" >
<span>编制：${d.data.fplan}</span>
<span style="margin-left: 10px;">在岗：${d.data.fonjob}</span>
<span style="margin-left: 10px;" onclick="window.open('${addressBookPostUrl}', '_blank')">在岗：${d.data.fonjob}</span>
</div>
</div>
</div>
@ -320,27 +388,54 @@ export default function userPage() {
</div>`;
} else if (d.data.ftype == 4) {
return `<div>
<div style="position: relative;" onclick="window.open('${userUrl}', '_blank')">
<div style="position: relative;" >
<img src="./img/user-card/card-label-start.png" />
<span >
<img src="./img/user-card/line1.png" />
<img src="./img/user-card/line2.png" />
</span>
<div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
<div style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
<img src="${
d.data.fleaderimg
? d.data.fleaderimg
: './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
<div style="height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
<div style='position:absolute;z-index:-1;top:16px'>
<img src='./img/user-card/user-card.png'>
</div>
<div style="display: inline-block; margin-left: 6px;">
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
color: #333333;
margin-bottom: 9px;
">${d.data.fname}</div>
<div style="display: inline-block; background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
<img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
<img src="${
d.data.fleaderimg
? d.data.fleaderimg
: './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
</div>
<div style="display: inline-block; margin-left: 6px;width:60%;height:100%" onclick="window.open('${postUserUrl}', '_blank')">
<div style='display:flex;align-items:center;margin-bottom:19px;margin-top:15px'>
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
color: #333333;"
>${d.data.fname}</div>
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999;
white-space:nowrap;
overflow:hidden;
flex:1;
font-size:12px;
transform:scale(0.8);
margin-left:-5px;
text-overflow:ellipsis;"
title="${d.data.fleaderlv ? d.data.fleaderlv : ''}/${
d.data.fleaderst ? d.data.fleaderst : ''
}">${
d.data.fleaderlv
? d.data.fleaderst
? `(${d.data.fleaderlv}/`
: `(${d.data.fleaderlv})`
: ''
}${d.data.fleaderst ? `${d.data.fleaderst})` : ''}</div>
</div>
<div style="
font-size: 13px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
@ -389,15 +484,14 @@ export default function userPage() {
handleExport(type);
}}
onSearch={(requestData) => {
setRequestRes(requestData);
handleSearch(requestData);
}}
url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
/>
<ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
onLeftLayoutClick={(progressBtn) =>
handleLeftLayoutClick(progressBtn)
}
onTopLayoutClick={handleTopLayoutClick}
onLeftLayoutClick={handleLeftLayoutClick}
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
/>
@ -411,6 +505,7 @@ export default function userPage() {
nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender}
requestRes={requestRes}
/>
</div>
)