|
|
|
@ -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,11 +35,22 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
columns: [],
|
|
|
|
columns: [],
|
|
|
|
spinning: true,
|
|
|
|
spinning: true,
|
|
|
|
showJob: false,
|
|
|
|
showJob: false,
|
|
|
|
|
|
|
|
nbOptions: [],
|
|
|
|
|
|
|
|
defaultNbValue: [],
|
|
|
|
|
|
|
|
wbOptions: [],
|
|
|
|
|
|
|
|
defaultWbValue: [],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {}
|
|
|
|
componentDidMount() {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshotValue) {
|
|
|
|
|
|
|
|
// 组件更新后的操作
|
|
|
|
|
|
|
|
// if (orgChart != null) {
|
|
|
|
|
|
|
|
// orgChart.getChartState().svgHeight = 3000;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 点击节点
|
|
|
|
// 点击节点
|
|
|
|
onNodeClick(node) {}
|
|
|
|
onNodeClick(node) {}
|
|
|
|
|
|
|
|
|
|
|
|
@ -62,18 +75,38 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
: `./img/user-card/user-card-blue.png`;
|
|
|
|
: `./img/user-card/user-card-blue.png`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查询条件
|
|
|
|
|
|
|
|
getDeatilCondition() {
|
|
|
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
|
|
|
d3.json('/api/bs/hrmorganization/orgchart/getDeptDetailCondition?').then(
|
|
|
|
|
|
|
|
(data) => {
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
nbOptions: data.nbCondition,
|
|
|
|
|
|
|
|
wbOptions: data.wbCondition,
|
|
|
|
|
|
|
|
defaultNbValue: data.nbValue,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//获取数据
|
|
|
|
//获取数据
|
|
|
|
getDeatilDatas(params, type = 'chart', showJob = '0') {
|
|
|
|
getDeatilDatas(params, type = 'chart', showJob = '0') {
|
|
|
|
this.setState({ spinning: true });
|
|
|
|
this.setState({ spinning: true, data: [] });
|
|
|
|
d3.json(
|
|
|
|
d3.json(
|
|
|
|
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
|
|
|
|
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
|
|
|
|
qs.stringify({ detauleType: type, ...params, showJob }),
|
|
|
|
qs.stringify({ detailType: type, ...params, showJob }),
|
|
|
|
).then((data) => {
|
|
|
|
).then((data) => {
|
|
|
|
//
|
|
|
|
//
|
|
|
|
if (type == 'chart') {
|
|
|
|
if (type == 'chart') {
|
|
|
|
this.setState({ data: data.data, spinning: false });
|
|
|
|
this.setState({ data: data.data, spinning: false });
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.setState({ dataSource: data.dataSource, columns: data.columns });
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
dataSource: data.dataSource,
|
|
|
|
|
|
|
|
columns: data.columns,
|
|
|
|
|
|
|
|
spinning: false,
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -304,22 +337,74 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
showDrawer = (params) => {
|
|
|
|
showDrawer = async (params) => {
|
|
|
|
this.getDeatilDatas(params, 'chart', '0');
|
|
|
|
|
|
|
|
this.setState({ open: true, params: params });
|
|
|
|
this.setState({ open: true, params: params });
|
|
|
|
|
|
|
|
await this.getDeatilCondition();
|
|
|
|
|
|
|
|
const { defaultNbValue } = this.state;
|
|
|
|
|
|
|
|
params = {
|
|
|
|
|
|
|
|
...params,
|
|
|
|
|
|
|
|
nbValue: defaultNbValue.join(','),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.getDeatilDatas(params, 'chart', '0');
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
onClose = () => {
|
|
|
|
onClose = () => {
|
|
|
|
this.setState({ open: false, detailType: 'chart', showJob: false });
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
open: false,
|
|
|
|
|
|
|
|
detailType: 'chart',
|
|
|
|
|
|
|
|
showJob: false,
|
|
|
|
|
|
|
|
data: [],
|
|
|
|
|
|
|
|
dataSource: [],
|
|
|
|
|
|
|
|
defaultNbValue: [],
|
|
|
|
|
|
|
|
defaultWbValue: [],
|
|
|
|
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
changeDetail = () => {
|
|
|
|
changeDetail = () => {
|
|
|
|
const { detailType, params } = this.state;
|
|
|
|
const {
|
|
|
|
|
|
|
|
defaultNbValue,
|
|
|
|
|
|
|
|
defaultWbValue,
|
|
|
|
|
|
|
|
detailType,
|
|
|
|
|
|
|
|
params,
|
|
|
|
|
|
|
|
data,
|
|
|
|
|
|
|
|
dataSource,
|
|
|
|
|
|
|
|
} = this.state;
|
|
|
|
let type = detailType == 'chart' ? 'table' : 'chart';
|
|
|
|
let type = detailType == 'chart' ? 'table' : 'chart';
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
detailType: type,
|
|
|
|
detailType: type,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.getDeatilDatas(params, type, '0');
|
|
|
|
const nParam = {
|
|
|
|
|
|
|
|
...params,
|
|
|
|
|
|
|
|
nbValue: defaultNbValue.join(','),
|
|
|
|
|
|
|
|
wbValue: defaultWbValue.join(','),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.getDeatilDatas(nParam, type, '0');
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onNbChange = (checkedValues) => {
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
defaultNbValue: checkedValues,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
const { defaultWbValue, params, detailType } = this.state;
|
|
|
|
|
|
|
|
const nParam = {
|
|
|
|
|
|
|
|
...params,
|
|
|
|
|
|
|
|
nbValue: checkedValues.join(','),
|
|
|
|
|
|
|
|
wbValue: defaultWbValue.join(','),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.getDeatilDatas(nParam, detailType, '0');
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onWbChange = (checkedValues) => {
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
defaultWbValue: checkedValues,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
const { defaultNbValue, params, detailType } = this.state;
|
|
|
|
|
|
|
|
const nParam = {
|
|
|
|
|
|
|
|
...params,
|
|
|
|
|
|
|
|
nbValue: defaultNbValue.join(','),
|
|
|
|
|
|
|
|
wbValue: checkedValues.join(','),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.getDeatilDatas(nParam, detailType, '0');
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
@ -332,8 +417,13 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
columns,
|
|
|
|
columns,
|
|
|
|
spinning,
|
|
|
|
spinning,
|
|
|
|
showJob,
|
|
|
|
showJob,
|
|
|
|
|
|
|
|
nbOptions,
|
|
|
|
|
|
|
|
defaultNbValue,
|
|
|
|
|
|
|
|
wbOptions,
|
|
|
|
|
|
|
|
defaultWbValue,
|
|
|
|
} = this.state;
|
|
|
|
} = this.state;
|
|
|
|
let arr = [];
|
|
|
|
let arr = [];
|
|
|
|
|
|
|
|
|
|
|
|
if (detailType == 'chart') {
|
|
|
|
if (detailType == 'chart') {
|
|
|
|
arr.push({ label: '导出图片', key: '1' });
|
|
|
|
arr.push({ label: '导出图片', key: '1' });
|
|
|
|
//arr.push({ label: '导出PDF', key: '2' });
|
|
|
|
//arr.push({ label: '导出PDF', key: '2' });
|
|
|
|
@ -358,9 +448,6 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
width={1200}
|
|
|
|
width={1200}
|
|
|
|
onClose={this.onClose}
|
|
|
|
onClose={this.onClose}
|
|
|
|
open={open}
|
|
|
|
open={open}
|
|
|
|
bodyStyle={{
|
|
|
|
|
|
|
|
paddingBottom: 80,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
extra={
|
|
|
|
extra={
|
|
|
|
<Space>
|
|
|
|
<Space>
|
|
|
|
<Dropdown overlay={menu}>
|
|
|
|
<Dropdown overlay={menu}>
|
|
|
|
@ -372,40 +459,71 @@ export default class DrawerComponents extends React.Component {
|
|
|
|
</Space>
|
|
|
|
</Space>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{detailType == 'chart' ? (
|
|
|
|
<>
|
|
|
|
data.length > 0 && (
|
|
|
|
<Row style={{ margin: '20px 20px' }}>
|
|
|
|
<Spin size="large" spinning={spinning}>
|
|
|
|
<Col span={2}>内部职工：</Col>{' '}
|
|
|
|
<OrgChartComponent
|
|
|
|
<Col span={22}>
|
|
|
|
setChart={(chart) => (orgChart = chart)}
|
|
|
|
{' '}
|
|
|
|
setClick={(click) => (addNodeChildFunc = click)}
|
|
|
|
<Checkbox.Group
|
|
|
|
onNodeClick={this.onNodeClick}
|
|
|
|
options={nbOptions}
|
|
|
|
onButtonClick={this.onButtonClick}
|
|
|
|
value={defaultNbValue}
|
|
|
|
data={data}
|
|
|
|
onChange={this.onNbChange}
|
|
|
|
buttonContent={this.buttonContentRender}
|
|
|
|
|
|
|
|
nodeWidth={this.nodeWidthRender}
|
|
|
|
|
|
|
|
nodeHeight={this.nodeHeightRender}
|
|
|
|
|
|
|
|
nodeContent={this.nodeContentRender}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</Spin>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
</Row>
|
|
|
|
) : (
|
|
|
|
<Row style={{ margin: '0px 20px' }}>
|
|
|
|
<div style={{ padding: '0 20px' }}>
|
|
|
|
<Col span={2}>外部人员：</Col>
|
|
|
|
<Table
|
|
|
|
<Col span={22}>
|
|
|
|
dataSource={dataSource}
|
|
|
|
{' '}
|
|
|
|
columns={columns}
|
|
|
|
<Checkbox.Group
|
|
|
|
scroll={{ y: 500 }}
|
|
|
|
options={wbOptions}
|
|
|
|
pagination={{
|
|
|
|
value={defaultWbValue}
|
|
|
|
locale: {
|
|
|
|
onChange={this.onWbChange}
|
|
|
|
// 翻页文本替换
|
|
|
|
/>
|
|
|
|
items_per_page: '条/页',
|
|
|
|
</Col>
|
|
|
|
jump_to: '跳至',
|
|
|
|
</Row>
|
|
|
|
page: '页',
|
|
|
|
{detailType == 'chart' ? (
|
|
|
|
},
|
|
|
|
<div className="svg-container">
|
|
|
|
showTotal: (total) => `共 ${dataSource.length} 条`,
|
|
|
|
<Spin
|
|
|
|
}}
|
|
|
|
size="large"
|
|
|
|
/>
|
|
|
|
spinning={spinning}
|
|
|
|
</div>
|
|
|
|
tip="正在读取数据...."
|
|
|
|
)}
|
|
|
|
className="loading-center"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
{data.length > 0 && (
|
|
|
|
|
|
|
|
<OrgChartComponent
|
|
|
|
|
|
|
|
setChart={(chart) => (orgChart = chart)}
|
|
|
|
|
|
|
|
setClick={(click) => (addNodeChildFunc = click)}
|
|
|
|
|
|
|
|
onNodeClick={this.onNodeClick}
|
|
|
|
|
|
|
|
onButtonClick={this.onButtonClick}
|
|
|
|
|
|
|
|
data={data}
|
|
|
|
|
|
|
|
buttonContent={this.buttonContentRender}
|
|
|
|
|
|
|
|
nodeWidth={this.nodeWidthRender}
|
|
|
|
|
|
|
|
nodeHeight={this.nodeHeightRender}
|
|
|
|
|
|
|
|
nodeContent={this.nodeContentRender}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<div style={{ padding: '0 20px' }}>
|
|
|
|
|
|
|
|
<Table
|
|
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
|
|
scroll={{ y: 500 }}
|
|
|
|
|
|
|
|
loading={spinning}
|
|
|
|
|
|
|
|
pagination={{
|
|
|
|
|
|
|
|
locale: {
|
|
|
|
|
|
|
|
// 翻页文本替换
|
|
|
|
|
|
|
|
items_per_page: '条/页',
|
|
|
|
|
|
|
|
jump_to: '跳至',
|
|
|
|
|
|
|
|
page: '页',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
showTotal: (total) => `共 ${dataSource.length} 条`,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</>
|
|
|
|
</Drawer>
|
|
|
|
</Drawer>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
