Compare commits

..

21 Commits

Author SHA1 Message Date
liang.cheng 170dfe720a Merge pull request 'feature/cl' (#17) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/17
2024-12-10 14:32:45 +08:00
Chengliang 8e8569110e 多语言遗留问题修复 2024-11-06 16:40:58 +08:00
Chengliang dce9480ee9 组织架构图更新根节点 2024-08-20 15:20:34 +08:00
liang.cheng 2b8751d7dd Merge pull request '组织架构图增加版本删除功能' (#16) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/16
2024-08-02 16:51:01 +08:00
Chengliang c9005b9a08 组织架构图增加版本删除功能 2024-08-02 16:42:35 +08:00
liang.cheng 0bc78d717f Merge pull request 'feature/cl' (#15) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/15
2024-07-04 09:46:11 +08:00
Chengliang 8a59de812a 修复其它维度展示 2024-07-04 09:44:19 +08:00
Chengliang 6bf43c8150 修复异步传参问题 2024-07-03 16:07:24 +08:00
liang.cheng 0513ad1345 Merge pull request 'feature/cl' (#14) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/14
2024-06-21 17:04:49 +08:00
Chengliang d2e0da7297 多语言新功能完善 2024-06-21 17:02:21 +08:00
Chengliang 483c34fc05 新功能 2024-06-21 14:27:40 +08:00
Chengliang 55dbade138 组织架构图功能完善 2024-06-20 18:14:42 +08:00
Chengliang 69dc2b3815 多语言修改 2024-06-19 09:58:04 +08:00
Chengliang a99d911db1 表格样式处理 2024-06-17 14:26:43 +08:00
liang.cheng f825a33bb8 Merge pull request '多语言设置' (#11) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/11
2024-06-17 09:13:41 +08:00
liang.cheng 68402ffb6e Merge pull request '组织架构图多语言设置' (#10) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/10
2024-06-05 16:06:07 +08:00
liang.cheng 67cfb21f72 Merge pull request '修复已知问题' (#9) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/9
2024-05-08 16:51:53 +08:00
liang.cheng 2a5628765e Merge pull request 'feature/cl' (#8) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/8
2024-01-02 10:46:59 +08:00
liang.cheng 32e1b51632 Merge pull request 'feature/cl' (#7) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/7
2023-09-14 18:26:45 +08:00
liang.cheng 747a625c1c Merge pull request 'feature/cl' (#6) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/6
2023-08-02 17:18:51 +08:00
liang.cheng 038c6fef3c Merge pull request '组织快捷调整页面' (#5) from feature/cl into master
Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/5
2023-07-27 15:58:45 +08:00
8 changed files with 366 additions and 118 deletions

BIN
dist.zip Normal file

Binary file not shown.

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';
@ -32,7 +34,10 @@ export default class DrawerComponents extends React.Component {
dataSource: [], dataSource: [],
columns: [], columns: [],
spinning: true, spinning: true,
showJob: false, // showJob: false,
defaultTypeValue: ['isBelongTo'],
defaultStatusValue: [0, 1, 2, 3],
disabled: false,
}; };
} }
@ -70,8 +75,8 @@ export default class DrawerComponents extends React.Component {
} }
// //
getDeatilDatas(params, type = 'chart', showJob = '0') { getDeatilDatas(params, type = 'chart', showJob = '1') {
this.setState({ spinning: true }); this.setState({ spinning: true, data: [], dataSource: [] });
d3.json( d3.json(
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' + '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
qs.stringify({ detauleType: type, ...params, showJob }), qs.stringify({ detauleType: type, ...params, showJob }),
@ -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,20 +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 style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
<span>岗位: ${d.data.jobName}</span>
</div>
</div> </div>
</div> </div>
</div>`; </div>`;
@ -325,25 +329,78 @@ export default class DrawerComponents extends React.Component {
}; };
showDrawer = (params) => { showDrawer = (params) => {
// const { defaultStatusValue, defaultTypeValue } = this.state;
const showJob = '0'; params = {
this.getDeatilDatas(params, 'chart', showJob); ...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
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({
this.setState({ open: false, detailType: 'chart', showJob: false }); 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 = '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) => {
const { labelData } = this.props;
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) => {
const { labelData } = this.props;
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() {
@ -356,16 +413,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} />;
@ -373,7 +449,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={{
@ -381,6 +457,30 @@ export default class DrawerComponents extends React.Component {
}} }}
extra={ extra={
<Space> <Space>
{detailType == 'chart' && params && params.fclass == '0' && (
<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(
newParam,
detailType,
e.target.checked ? '1' : '0',
);
}}
>
{getLabel(547447, labelData)}
</Checkbox>
)}
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button type="primary">{getLabel(547314, labelData)}</Button> <Button type="primary">{getLabel(547314, labelData)}</Button>
</Dropdown> </Dropdown>
@ -390,45 +490,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>
); );
} }

View File

@ -7,10 +7,12 @@
* @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 from 'react'; import React from 'react';
import { Timeline, Drawer } from 'antd'; import { Timeline, Drawer, Popconfirm, message } from 'antd';
import styles from './index.less'; import styles from './index.less';
import leftTreeShow from './img/leftTree-show.png'; import leftTreeShow from './img/leftTree-show.png';
import leftHide from './img/leftTree-hide.png'; import leftHide from './img/leftTree-hide.png';
import { CloseCircleOutlined } from '@ant-design/icons';
import { getLabel } from '../../util/i18n.js';
export default class TimeLine extends React.Component { export default class TimeLine extends React.Component {
constructor(props) { constructor(props) {
@ -35,6 +37,21 @@ export default class TimeLine extends React.Component {
this.props.onClick(data); this.props.onClick(data);
} }
handleDelete(key) {
const { labelData } = this.props;
let api = `/api/bs/hrmorganization/orgchart/versionDelete?versionId=${key}`;
fetch(api)
.then((res) => res.json())
.then((data) => {
if (data.api_status) {
message.success(`${getLabel(547484, labelData)}`, 2, 3);
window.location.reload(true);
} else {
message.error(`${getLabel(547483, labelData)}`, 2, 3);
}
});
}
componentDidMount() { componentDidMount() {
this.searchTimeLines(this.props.url); this.searchTimeLines(this.props.url);
} }
@ -56,6 +73,8 @@ export default class TimeLine extends React.Component {
}; };
render() { render() {
const { labelData } = this.props;
let showStyle = {}; let showStyle = {};
let positionStyle = {}; let positionStyle = {};
if (this.state.open) { if (this.state.open) {
@ -89,14 +108,30 @@ export default class TimeLine extends React.Component {
return ( return (
<Timeline.Item <Timeline.Item
key={item.key} key={item.key}
onClick={this.handleLineClick.bind(this, item)}
className={styles.timeline} className={styles.timeline}
color={item.color} color={item.color}
style={{
color: item.color == 'blue' ? '#1890ff' : 'dimgray',
}}
> >
<div>{item.title}</div> <div
className={styles.title}
style={{
color: item.color == 'blue' ? '#1890ff' : 'dimgray',
}}
onClick={this.handleLineClick.bind(this, item)}
>
{item.title}
</div>
{item.key != 0 && (
<Popconfirm
title={`${getLabel(547491, labelData)}[${item.title}]?`}
onConfirm={this.handleDelete.bind(this, item.key)}
okText={getLabel(547319, labelData)}
cancelText={getLabel(547318, labelData)}
>
<div className={styles.delete}>
<CloseCircleOutlined />
</div>
</Popconfirm>
)}
<div className={styles.time}>{item.time}</div> <div className={styles.time}>{item.time}</div>
</Timeline.Item> </Timeline.Item>
); );

View File

@ -15,21 +15,25 @@
cursor: pointer; cursor: pointer;
} }
.timeline :hover { // .timeline .title:hover {
color: #1890ff; // color: #1890ff;
} // }
.time { .time {
color: dimgray; color: dimgray;
} }
.delete :hover {
color: red;
}
} }
.leftRightLayoutBtn { .leftRightLayoutBtn {
width: 18px; width: 18px;
height: 60px; height: 60px;
position: absolute; position: fixed;
top: 50%; top: 50%;
margin-top: -30px; // margin-top: -30px;
z-index: 101; z-index: 101;
cursor: pointer; cursor: pointer;
} }

View File

@ -22,7 +22,7 @@ const { TextArea } = Input;
import moment from 'moment'; import moment from 'moment';
import 'moment/locale/zh-cn'; import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN'; import locale from 'antd/lib/date-picker/locale/zh_CN';
import { HomeOutlined } from '@ant-design/icons'; import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
moment.locale('zh-cn'); moment.locale('zh-cn');
import { getLabel } from '../../util/i18n.js'; import { getLabel } from '../../util/i18n.js';
import { SmileOutlined } from '@ant-design/icons'; import { SmileOutlined } from '@ant-design/icons';
@ -45,6 +45,8 @@ export class TopBar extends React.Component {
open: false, open: false,
confirmLoading: false, confirmLoading: false,
description: '', description: '',
timelineId: '0',
treeKey: 1,
}; };
} }
@ -57,10 +59,29 @@ export class TopBar extends React.Component {
this.setState({ requestData }); this.setState({ requestData });
} }
handleTreeData(treeData = [], timelineId) {
this.setState({
rootTreeData: treeData,
timelineId: timelineId,
treeKey: this.state.treeKey + 1,
});
}
onChange = (e) => { onChange = (e) => {
this.setState({ description: e.target.value }); this.setState({ description: e.target.value });
}; };
generateKey = (
length = 5,
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
) => {
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
};
/** /**
* 弹窗确认 * 弹窗确认
*/ */
@ -117,6 +138,9 @@ export class TopBar extends React.Component {
} }
arr.map((item, index) => { arr.map((item, index) => {
item.icon = <HomeOutlined />; item.icon = <HomeOutlined />;
if (item.type == 2) {
item.icon = <FolderOutlined />;
}
}); });
this.setState({ this.setState({
rootTreeData: arr, rootTreeData: arr,
@ -135,11 +159,14 @@ export class TopBar extends React.Component {
const { id } = treeNode; const { id } = treeNode;
setTimeout(() => { setTimeout(() => {
const { fclass } = this.state.requestData; const { fclass } = this.state.requestData;
const { timelineId } = this.state;
let api = let api =
'/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' + '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
id + id +
'&fclass=' + '&fclass=' +
fclass; fclass +
'&id=' +
timelineId;
this.getNodeTreeNode(api); this.getNodeTreeNode(api);
resolve(undefined); resolve(undefined);
}, 500); }, 500);
@ -192,7 +219,8 @@ export class TopBar extends React.Component {
render() { render() {
const { disabled, type, labelData } = this.props; const { disabled, type, labelData } = this.props;
const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state; const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
this.state;
return ( return (
<div className={style.topbarWrapper}> <div className={style.topbarWrapper}>
@ -229,9 +257,11 @@ export class TopBar extends React.Component {
))} ))}
</Select> </Select>
</Col> </Col>
<Col span={6}>
<Col span={8}>
{getLabel(547294, labelData)} {getLabel(547294, labelData)}
<TreeSelect <TreeSelect
key={treeKey}
treeDataSimpleMode treeDataSimpleMode
allowClear allowClear
style={{ width: '65%' }} style={{ width: '65%' }}
@ -244,7 +274,7 @@ export class TopBar extends React.Component {
treeIcon treeIcon
/> />
</Col> </Col>
<Col span={6}> <Col span={5}>
<Checkbox <Checkbox
style={{ marginTop: '5px', marginLeft: 100 }} style={{ marginTop: '5px', marginLeft: 100 }}
checked={this.state.requestData.hidedept == '1'} checked={this.state.requestData.hidedept == '1'}
@ -266,7 +296,7 @@ export class TopBar extends React.Component {
/> />
</Tooltip> </Tooltip>
</Col> </Col>
<Col span={6}> <Col span={5}>
{getLabel(547299, labelData)} {getLabel(547299, labelData)}
<Select <Select
defaultValue="3" defaultValue="3"
@ -304,17 +334,40 @@ export class TopBar extends React.Component {
/> />
</Tooltip> </Tooltip>
</Col> </Col>
<Col span={16}>
{/* <Button <Col span={10}>
type="primary" {this.state.requestData.fclass == '0' && (
style={{ marginRight: '10px' }} <span>
disabled={disabled} <Button
onClick={() => { type="primary"
this.setState({ open: true }); style={{ marginRight: '10px' }}
}} disabled={disabled}
> onClick={() => {
{getLabel(547305, labelData)} this.setState({ open: true });
</Button> }}
>
{getLabel(547305, labelData)}
</Button>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
window.open('#/dragtree', 'blank');
}}
>
{getLabel(547310, labelData)}
</Button>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
window.open('#/statistics', 'blank');
}}
>
{getLabel(547313, labelData)}
</Button>
</span>
)}
<Button <Button
type="primary" type="primary"
@ -325,24 +378,7 @@ export class TopBar extends React.Component {
> >
{getLabel(547307, labelData)} {getLabel(547307, labelData)}
</Button> </Button>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
window.open('#/dragtree', 'blank');
}}
>
{getLabel(547310, labelData)}
</Button>
<Button
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
window.open('#/statistics', 'blank');
}}
>
{getLabel(547313, labelData)}
</Button>
<Dropdown overlay={this.menu}> <Dropdown overlay={this.menu}>
<Button type="primary">{getLabel(547314, labelData)}</Button> <Button type="primary">{getLabel(547314, labelData)}</Button>
</Dropdown> </Dropdown>

View File

@ -76,9 +76,10 @@ export default function companyPage() {
'/api/bs/hrmorganization/orgchart/asyncCompanyData' + '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true }); qs.stringify(request, { addQueryPrefix: true });
} else { } else {
let request = { ...topbar.state.requestData, ids: idsStr };
api = api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' + '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
idsStr; qs.stringify(request, { addQueryPrefix: true });
} }
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
@ -164,8 +165,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 +186,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 +208,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>
@ -346,6 +351,10 @@ export default function companyPage() {
*/ */
const handleExport = (type) => { const handleExport = (type) => {
if (type == 'png') { if (type == 'png') {
const hiddenElements = document.querySelectorAll('.tooltitle');
const hiddenElementsArray = Array.from(hiddenElements);
// DOM
hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
orgChart && orgChart.exportImg({ full: true }); orgChart && orgChart.exportImg({ full: true });
} else { } else {
orgChart && downloadPdf(orgChart); orgChart && downloadPdf(orgChart);
@ -366,6 +375,8 @@ export default function companyPage() {
hidedept: '0', hidedept: '0',
}; };
topbar.handleFormChange({ ...resetParams }); topbar.handleFormChange({ ...resetParams });
//
topbar.handleTreeData([], timeline.id);
topbar.getNodeTreeNode( topbar.getNodeTreeNode(
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`, `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
false, false,
@ -485,6 +496,7 @@ export default function companyPage() {
timeLineSearch(timeline); timeLineSearch(timeline);
}} }}
url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'} url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
labelData={labelData}
/> />
<Spin size="large" spinning={spinning}> <Spin size="large" spinning={spinning}>
<OrgChartComponent <OrgChartComponent

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;
}

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=aaaLiDqzA0rZHgPBdxGez; JSESSIONID=aaaLiDqzA0rZHgPBdxGez; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7b9b3b9b-a780-4d6a-b8d5-22d0f8aaf11a';
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) => {