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

Labels Milestones

New Pull Request

feature/cl #14

Merged
liang.cheng merged 5 commits from feature/cl into master 10 months ago
Conversation 0 Commits 5 Files Changed 4
4 changed files with 211 additions and 61 deletions
Show Stats Download Patch File Download Diff File

210
src/components/drawer/index.jsx
Unescape Escape View File

@ -8,6 +8,8 @@ import {
Table, Table,
Spin, Spin,
Checkbox, Checkbox,
Row,
Col,
} from 'antd'; } from 'antd';
import { OrgChartComponent } from '@/components/orgChart'; import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3'; import * as d3 from 'd3';
@ -33,6 +35,9 @@ export default class DrawerComponents extends React.Component {
columns: [], columns: [],
spinning: true, spinning: true,
showJob: false, showJob: false,
defaultTypeValue: ['isBelongTo'],
defaultStatusValue: [0, 1, 2, 3],
disabled: false,
}; };
} }
@ -257,7 +262,7 @@ export default class DrawerComponents extends React.Component {
<div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> <div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
${d.data.fname} ${d.data.fname}
</div> </div>
<div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;"> <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
${getLabel(547190, labelData)}:${d.data.fleader} ${getLabel(547190, labelData)}:${d.data.fleader}
</div> </div>
<div style="display:flex" > <div style="display:flex" >
@ -304,17 +309,19 @@ export default class DrawerComponents extends React.Component {
: './img/default_avator.png' : './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" /> }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
</div> </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='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;">${ <div style="font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
d.data.fname ${d.data.fname}
}</div> <span style='color: red;'>(${d.data.accountType})</span>
</div>
</div> </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 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)}: ${ <span>${getLabel(547324, labelData)}: ${
d.data.companyWorkYear d.data.companyWorkYear
} ${getLabel(547526, labelData)}</span> } ${getLabel(547526, labelData)}</span>
</div> </div>
</div> </div>
</div> </div>
</div>`; </div>`;
@ -322,22 +329,76 @@ export default class DrawerComponents extends React.Component {
}; };
showDrawer = (params) => { showDrawer = (params) => {
const { defaultStatusValue, defaultTypeValue } = this.state;
params = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
this.getDeatilDatas(params, 'chart', '0'); this.getDeatilDatas(params, 'chart', '0');
this.setState({ open: true, params: params }); this.setState({ open: true, params: params });
}; };
onClose = () => { 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 = () => { 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'; let type = detailType == 'chart' ? 'table' : 'chart';
const showJob = this.state.showJob ? '1' : '0'; const showJob = this.state.showJob ? '1' : '0';
this.setState({ this.setState({
detailType: type, detailType: type,
}); });
this.getDeatilDatas(params, type, showJob); this.getDeatilDatas(newParam, type, showJob);
};
onStatusChange = (checkedValues) => {
if (checkedValues.length === 0) {
return message.error(`${getLabel(547728, labelData)}`, 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(`${getLabel(547729, labelData)}`, 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() { render() {
@ -350,16 +411,35 @@ export default class DrawerComponents extends React.Component {
columns, columns,
spinning, spinning,
showJob, showJob,
defaultStatusValue,
defaultTypeValue,
disabled,
} = this.state; } = this.state;
let arr = []; let arr = [];
const { labelData } = this.props; const { labelData } = this.props;
const optionsType = [
{ label: `${getLabel(547715, labelData)}`, value: 'isManager' },
{ label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' },
];
const optionsStatus = [
{ label: `${getLabel(547718, labelData)}`, value: 0 },
{ label: `${getLabel(547719, labelData)}`, value: 1 },
{ label: `${getLabel(547720, labelData)}`, value: 2 },
{ label: `${getLabel(547721, labelData)}`, value: 3 },
{ label: `${getLabel(547722, labelData)}`, value: 4 },
{ label: `${getLabel(547723, labelData)}`, value: 5 },
{ label: `${getLabel(547724, labelData)}`, value: 6 },
{ label: `${getLabel(547725, labelData)}`, value: 7 },
];
if (detailType == 'chart') { if (detailType == 'chart') {
arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' }); arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
//arr.push({ label: '导出PDF', key: '2' }); //arr.push({ label: '导出PDF', key: '2' });
} else { } else {
arr.push({ label: '导出表格', key: '3' }); arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
} }
const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />; const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
@ -367,7 +447,7 @@ export default class DrawerComponents extends React.Component {
return ( return (
<Drawer <Drawer
title={getLabel(547321, labelData)} title={getLabel(547321, labelData)}
width={1100} width={1200}
onClose={this.onClose} onClose={this.onClose}
open={open} open={open}
bodyStyle={{ bodyStyle={{
@ -379,13 +459,18 @@ export default class DrawerComponents extends React.Component {
<Checkbox <Checkbox
style={{ marginTop: '5px', marginLeft: 100 }} style={{ marginTop: '5px', marginLeft: 100 }}
checked={showJob} checked={showJob}
disabled={disabled}
onChange={(e) => { onChange={(e) => {
this.setState({ this.setState({
showJob: e.target.checked, showJob: e.target.checked,
}); });
const newParam = {
...params,
statusValue: defaultStatusValue.join(','),
typeValue: defaultTypeValue.join(','),
};
this.getDeatilDatas( this.getDeatilDatas(
params, newParam,
detailType, detailType,
e.target.checked ? '1' : '0', e.target.checked ? '1' : '0',
); );
@ -403,45 +488,68 @@ export default class DrawerComponents extends React.Component {
</Space> </Space>
} }
> >
{detailType == 'chart' ? ( <>
<div className="svg-container"> {detailType == 'chart' && (
<Spin <Row style={{ margin: '20px 20px 0px 20px' }}>
size="large" <Col span={2}>{getLabel(547714, labelData)}：</Col>
spinning={spinning} <Col span={22}>
tip={getLabel(547320, labelData)} <Checkbox.Group
className="loading-center" options={optionsType}
/> value={defaultTypeValue}
{data.length > 0 && ( onChange={this.onTypeChange}
<OrgChartComponent />
setChart={(chart) => (orgChart = chart)} </Col>
setClick={(click) => (addNodeChildFunc = click)} </Row>
onNodeClick={this.onNodeClick} )}
onButtonClick={this.onButtonClick} <Row style={{ margin: '10px 20px 10px 20px' }}>
data={data} <Col span={2}>{getLabel(547717, labelData)}：</Col>
buttonContent={this.buttonContentRender} <Col span={22}>
nodeWidth={this.nodeWidthRender} <Checkbox.Group
nodeHeight={this.nodeHeightRender} options={optionsStatus}
nodeContent={this.nodeContentRender} value={defaultStatusValue}
onChange={this.onStatusChange}
/> />
)} </Col>
</div> </Row>
) : ( {detailType == 'chart' ? (
<div style={{ padding: '0 20px' }}> <div className="svg-container">
<Table <Spin
dataSource={dataSource} size="large"
columns={columns} spinning={spinning}
scroll={{ y: 600 }} tip={getLabel(547320, labelData)}
loading={spinning} className="loading-center"
pagination={{ />
showSizeChanger: false, {data.length > 0 && (
showTotal: (total) => <OrgChartComponent
`${getLabel(547523, labelData)} ${ setChart={(chart) => (orgChart = chart)}
dataSource.length setClick={(click) => (addNodeChildFunc = click)}
} ${getLabel(547524, labelData)}`, onNodeClick={this.onNodeClick}
}} onButtonClick={this.onButtonClick}
/> data={data}
</div> buttonContent={this.buttonContentRender}
)} nodeWidth={this.nodeWidthRender}
nodeHeight={this.nodeHeightRender}
nodeContent={this.nodeContentRender}
/>
)}
</div>
) : (
<div style={{ padding: '0 20px' }}>
<Table
dataSource={dataSource}
columns={columns}
loading={spinning}
pagination={{
showSizeChanger: false,
showTotal: (total) =>
`${getLabel(547523, labelData)} ${
dataSource.length
} ${getLabel(547524, labelData)}`,
}}
/>
</div>
)}
</>
</Drawer> </Drawer>
); );
} }

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

@ -164,8 +164,8 @@ export default function companyPage() {
let fclass = topbar.state.requestData.fclass; let fclass = topbar.state.requestData.fclass;
let statisticsStyle = fclass == 0 ? 'block' : 'none'; let statisticsStyle = fclass == 0 ? 'block' : 'none';
if (d.data.ftype == 0) { if (d.data.ftype == 0) {
return `<div> return `<div style="text-align: center;">
<div style="display: inline-block; text-align: center; margin-left: 5px;"> <div style="display: inline-block; margin-left: 5px;">
<div style=" <div style="
font-size: 24px; font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@ -185,10 +185,11 @@ export default function companyPage() {
</div> </div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px; <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;"> font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div title=${ <div class="tooltip">
d.data.fname <div class="tooltitle"> ${d.data.fname} </div>
} style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis; <div class="tooltiptext">${d.data.fname}</div>
line-height: 18px;word-break: break-all;">${d.data.fname}</div> </div>
<div style="display: ${statisticsStyle}"> <div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> / <span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span> <span style="color:green">${d.data.onJobNum}</span>
@ -206,8 +207,11 @@ export default function companyPage() {
</div> </div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px; <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;"> 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; <div class="tooltip">
line-height: 18px;word-break: break-all;">${d.data.fname}</div> <div class="tooltitle"> ${d.data.fname} </div>
<div class="tooltiptext">${d.data.fname}</div>
</div>
<div style="display: ${statisticsStyle}"> <div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> / <span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span> <span style="color:green">${d.data.onJobNum}</span>

40
src/pages/index.less
Unescape Escape View File

@ -114,6 +114,44 @@
} }
.ant-drawer-body { .ant-drawer-body {
padding: 0px; padding: 0;
overflow: hidden; 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;
}

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

@ -99,7 +99,7 @@ export default function userPage() {
// 获取数据 // 获取数据
useEffect(() => { useEffect(() => {
document.cookie = document.cookie =
'ecology_JSessionid=aaaZqe3BtezwSd-qOVlaz; JSESSIONID=aaaZqe3BtezwSd-qOVlaz; Systemlanguid=8; languageidweaver=8; loginidweaver=sysadmin; loginuuids=1; __randcode__=b79816fa-7088-4433-a17f-162b62453f2f'; 'ecology_JSessionid=aaaIt6Y2NuzAQ98Ci0Jaz; Systemlanguid=7; JSESSIONID=aaaIt6Y2NuzAQ98Ci0Jaz; loginidweaver=sysadmin; loginuuids=1; languageidweaver=8; __randcode__=486bc6ba-9c04-47fc-a977-f7c55bab42e9';
d3.json( d3.json(
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0', '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
).then((data) => { ).then((data) => {

Write Preview
Loading…
Cancel
Save