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

组织架构图功能完善

This commit is contained in:
Chengliang 2024-06-20 18:14:42 +08:00
parent 69dc2b3815
commit 55dbade138
3 changed files with 206 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/drawer/index.jsx
View File

@ -8,6 +8,8 @@ import {
Table,
Spin,
Checkbox,
Row,
Col,
} from 'antd';
import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
@ -33,6 +35,9 @@ export default class DrawerComponents extends React.Component {
columns: [],
spinning: true,
showJob: false,
defaultTypeValue: ['isBelongTo'],
defaultStatusValue: [0, 1, 2, 3],
disabled: false,
};
}
@ -304,17 +309,19 @@ export default class DrawerComponents extends React.Component {
: './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
</div>
<div style="display: inline-block; margin-left: 6px;width: 55%;height:100%">
<div style="display: inline-block;width: 55%;height:100%">
<div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:2px'>
<div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
d.data.fname
}</div>
<div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
${d.data.fname}
<span style='color: red;'>(${d.data.accountType})</span>
</div>
<div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
</div>
<div style="font-size: 13px;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
<span>${getLabel(547324, labelData)}: ${
d.data.companyWorkYear
} ${getLabel(547526, labelData)}</span>
</div>
</div>
</div>
</div>`;
@ -322,22 +329,76 @@ export default class DrawerComponents extends React.Component {
};
showDrawer = (params) => {
const { defaultStatusValue, defaultTypeValue } = this.state;
params = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
this.getDeatilDatas(params, 'chart', '0');
this.setState({ open: true, params: params });
};
onClose = () => {
this.setState({ open: false, detailType: 'chart', showJob: false });
this.setState({
open: false,
detailType: 'chart',
showJob: false,
defaultStatusValue: [0, 1, 2, 3],
defaultTypeValue: ['isBelongTo'],
disabled: false,
});
};
changeDetail = () => {
const { detailType, params } = this.state;
const { detailType, params, defaultTypeValue, defaultStatusValue } =
this.state;
const newParam = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
let type = detailType == 'chart' ? 'table' : 'chart';
const showJob = this.state.showJob ? '1' : '0';
this.setState({
detailType: type,
});
this.getDeatilDatas(params, type, showJob);
this.getDeatilDatas(newParam, type, showJob);
};
onStatusChange = (checkedValues) => {
if (checkedValues.length === 0) {
return message.error('至少选择一种人员性质', 2);
}
this.setState({
defaultStatusValue: checkedValues,
});
const { defaultTypeValue, params, detailType } = this.state;
const showJob = this.state.showJob ? '1' : '0';
const nParam = {
...params,
statusValue: checkedValues.join(','),
typeValue: defaultTypeValue.join(','),
};
this.getDeatilDatas(nParam, detailType, showJob);
};
onTypeChange = (checkedValues) => {
if (this.state.showJob) {
return message.error('已勾选岗位模式显示', 2);
}
this.setState({
defaultTypeValue: checkedValues,
disabled: checkedValues.includes('isManager') ? true : false,
});
const { defaultStatusValue, params, detailType } = this.state;
const showJob = this.state.showJob ? '1' : '0';
const nParam = {
...params,
statusValue: defaultStatusValue.join(','),
typeValue: checkedValues.join(','),
};
this.getDeatilDatas(nParam, detailType, showJob);
};
render() {
@ -350,11 +411,30 @@ export default class DrawerComponents extends React.Component {
columns,
spinning,
showJob,
defaultStatusValue,
defaultTypeValue,
disabled,
} = this.state;
let arr = [];
const { labelData } = this.props;
const optionsType = [
{ label: '显示人员上下级', value: 'isManager' },
{ label: '显示次账号', value: 'isBelongTo' },
];
const optionsStatus = [
{ label: '试用', value: 0 },
{ label: '正式', value: 1 },
{ label: '临时', value: 2 },
{ label: '试用延期', value: 3 },
{ label: '解聘', value: 4 },
{ label: '离职', value: 5 },
{ label: '退休', value: 6 },
{ label: '无效', value: 7 },
];
if (detailType == 'chart') {
arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
//arr.push({ label: '导出PDF', key: '2' });
@ -367,7 +447,7 @@ export default class DrawerComponents extends React.Component {
return (
<Drawer
title={getLabel(547321, labelData)}
width={1100}
width={1200}
onClose={this.onClose}
open={open}
bodyStyle={{
@ -379,13 +459,18 @@ export default class DrawerComponents extends React.Component {
<Checkbox
style={{ marginTop: '5px', marginLeft: 100 }}
checked={showJob}
disabled={disabled}
onChange={(e) => {
this.setState({
showJob: e.target.checked,
});
const newParam = {
...params,
statusValue: defaultStatusValue.join(','),
typeValue: defaultTypeValue.join(','),
};
this.getDeatilDatas(
params,
newParam,
detailType,
e.target.checked ? '1' : '0',
);
@ -403,6 +488,29 @@ export default class DrawerComponents extends React.Component {
</Space>
}
>
<>
{detailType == 'chart' && (
<Row style={{ margin: '20px 20px 0px 20px' }}>
<Col span={2}>显示模式：</Col>
<Col span={22}>
<Checkbox.Group
options={optionsType}
value={defaultTypeValue}
onChange={this.onTypeChange}
/>
</Col>
</Row>
)}
<Row style={{ margin: '10px 20px 10px 20px' }}>
<Col span={2}>人员性质：</Col>
<Col span={22}>
<Checkbox.Group
options={optionsStatus}
value={defaultStatusValue}
onChange={this.onStatusChange}
/>
</Col>
</Row>
{detailType == 'chart' ? (
<div className="svg-container">
<Spin
@ -441,6 +549,7 @@ export default class DrawerComponents extends React.Component {
/>
</div>
)}
</>
</Drawer>
);
}

16
src/pages/company.jsx
View File

@ -185,10 +185,11 @@ export default function companyPage() {
</div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div title=${
d.data.fname
} style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
<div class="tooltip">
<div class="tooltitle"> ${d.data.fname} </div>
<div class="tooltiptext">${d.data.fname}</div>
</div>
<div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span>
@ -206,8 +207,11 @@ export default function companyPage() {
</div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
<div class="tooltip">
<div class="tooltitle"> ${d.data.fname} </div>
<div class="tooltiptext">${d.data.fname}</div>
</div>
<div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span>

40
src/pages/index.less
View File

@ -114,6 +114,44 @@
}
.ant-drawer-body {
padding: 0px;
padding: 0;
overflow: hidden;
}
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
width: 110px;
margin: 0 auto;
line-height: 18px;
word-break: break-all;
}
.tooltip .tooltitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 144px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 39%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}