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

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

Browse Source
feature/fj
pettzzz 3 years ago
parent 5c507d2548
commit 28042e2a3f
6 changed files with 2208 additions and 1670 deletions
Show Stats Download Patch File Download Diff File

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

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

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

@ -1,78 +1,104 @@
import React from 'react' import React from 'react';
import add from './img/add.png' import add from './img/add.png';
import decrease from './img/decrease.png' import decrease from './img/decrease.png';
import styles from './index.less'; import styles from './index.less';
import top from './img/top.png'; import top from './img/top.png';
import left from './img/left.png'; import left from './img/left.png';
import topActive from './img/top_active.png' import topActive from './img/top_active.png';
import leftActive from './img/left_active.png' import leftActive from './img/left_active.png';
export default class ToolBar extends React.Component { export default class ToolBar extends React.Component {
progressBtn = React.createRef() progressBtn = React.createRef();
start = false; start = false;
clientY = 0 clientY = 0;
originalY = 0 originalY = 0;
top = 50 top = 50;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
toolActive: "top" toolActive: 'top',
} };
} }
handleMouseDown(e) { handleMouseDown(e) {
this.clientY = e.clientY this.clientY = e.clientY;
this.originalY = e.clientY this.originalY = e.clientY;
this.top = parseInt(this.progressBtn.current.style.top) this.top = parseInt(this.progressBtn.current.style.top);
this.start = true; this.start = true;
} }
handleMouseMove(e) { handleMouseMove(e) {
if(this.start && e.clientY - this.clientY > 10) { if (this.start && e.clientY - this.clientY > 10) {
this.props.onZoomOut() this.props.onZoomOut();
this.clientY = e.clientY this.clientY = e.clientY;
} else if(this.start && e.clientY - this.clientY < - 10) { } else if (this.start && e.clientY - this.clientY < -10) {
this.props.onZoomIn() this.props.onZoomIn();
this.clientY = e.clientY 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";
}
} }
if (this.start) {
handleMouseUp(e) { let offset = e.clientY - this.originalY;
this.start = false; if (this.top + offset < 0) {
console.log("this.start:", this.start) offset = 0 - this.top;
}
if (this.top + offset > 100) {
offset = 100 - this.top;
}
this.progressBtn.current.style.top = this.top + offset + 'px';
} }
}
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)}}/>
<img className={styles.toolBarItem} src={this.state.toolActive == 'top'? topActive : top} onClick={() => {this.setState({toolActive: "top"}); this.props.onTopLayoutClick(this.progressBtn)}}/> handleMouseUp(e) {
<img className={styles.toolBarItem} src={this.state.toolActive == 'left'? leftActive : left} onClick={() => {this.setState({toolActive: "left"}); this.props.onLeftLayoutClick(this.progressBtn)}}/> this.start = false;
</div> 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, 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
Unescape Escape View File

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

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

File diff suppressed because it is too large Load Diff

86
src/pages/company.jsx
Unescape Escape View File

@ -9,6 +9,7 @@ import moment from 'moment';
import qs from 'qs'; import qs from 'qs';
import { message } from 'antd'; import { message } from 'antd';
let active = 'top';
export default function companyPage() { export default function companyPage() {
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [sliderProgress, setSliderProgress] = useState(50); const [sliderProgress, setSliderProgress] = useState(50);
@ -70,13 +71,15 @@ export default function companyPage() {
// 获取部门图片 // 获取部门图片
function getDepartmentImage() { function getDepartmentImage() {
let index = Math.floor(Math.random() * 8) + 1; 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() { function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1; 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渲染 // ButtonContent渲染
const buttonContentRender = ({ node, state }) => { const buttonContentRender = ({ node, state }) => {
if (node.children) { 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 { } 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; letter-spacing: 1px;
margin-top: 10px; margin-top: 10px;
">${d.data.fname}</div> ">${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>
</div>`; </div>`;
} else if (d.data.ftype == 1) { } else if (d.data.ftype == 1) {
return `<div onclick="window.open('${subcompanyUrl}', '_blank')"> 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()}" /> <img src="${getSubcompanyImage()}" />
</div> </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-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400; font-weight: 400;
@ -175,8 +170,10 @@ export default function companyPage() {
</div>`; </div>`;
} else if (d.data.ftype == 2) { } else if (d.data.ftype == 2) {
return ` return `
<div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${departmentUrl}')"> <div style="width: 100%; height: 100%; background-size: 100% 100%;" onclick="window.open('${departmentUrl}')">
<div style="padding-left: 8px; padding-top: 23px;"> <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()}"/> <img src="${getDepartmentImage()}"/>
<span style=" <span style="
margin-left: 3px; margin-left: 3px;
@ -195,21 +192,32 @@ export default function companyPage() {
// tool bar start // tool bar start
const handleTopLayoutClick = (progressBtn) => { const handleTopLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px'; 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) => { const handleLeftLayoutClick = (progressBtn) => {
progressBtn.current.style.top = 50 + 'px'; 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) => { const handleZoomIn = (progressBtn) => {
if (progressBtn) { if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) - 10; let top = parseInt(progressBtn.current.style.top) - 10;
if (top <= 0) { if (top >= 0) {
top = 30; progressBtn.current.style.top = top + 'px';
} else {
return;
} }
progressBtn.current.style.top = top + 'px';
} }
orgChart && orgChart.zoomIn(); orgChart && orgChart.zoomIn();
}; };
@ -217,12 +225,12 @@ export default function companyPage() {
const handleZoomOut = (progressBtn) => { const handleZoomOut = (progressBtn) => {
if (progressBtn) { if (progressBtn) {
let top = parseInt(progressBtn.current.style.top) + 10; let top = parseInt(progressBtn.current.style.top) + 10;
if (top >= 100) { if (top <= 100) {
top = 70; progressBtn.current.style.top = top + 'px';
} else {
return;
} }
progressBtn.current.style.top = top + 'px';
} }
orgChart && orgChart.zoomOut(); orgChart && orgChart.zoomOut();
}; };
@ -237,6 +245,7 @@ export default function companyPage() {
function downloadPdf(chart) { function downloadPdf(chart) {
chart.exportImg({ chart.exportImg({
save: false, save: false,
full: true,
onLoad: (base64) => { onLoad: (base64) => {
var pdf = new jsPDF(); var pdf = new jsPDF();
var img = new Image(); var img = new Image();
@ -272,10 +281,32 @@ export default function companyPage() {
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .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 // top bar end
if (hasRight === false) { if (hasRight === false) {
//return message.error("对不起，您暂时没有权限", 2); //return message.error("对不起，您暂时没有权限", 2);
@ -316,6 +347,7 @@ export default function companyPage() {
setClick={(click) => (addNodeChildFunc = click)} setClick={(click) => (addNodeChildFunc = click)}
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
data={data} data={data}
onButtonClick={onButtonClick}
buttonContent={buttonContentRender} buttonContent={buttonContentRender}
nodeWidth={nodeWidthRender} nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender} nodeHeight={nodeHeightRender}

231
src/pages/user.jsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save