|
|
|
|
@ -9,6 +9,7 @@ import {
|
|
|
|
|
Col,
|
|
|
|
|
Dropdown,
|
|
|
|
|
Menu,
|
|
|
|
|
TreeSelect,
|
|
|
|
|
} from 'antd';
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
@ -21,26 +22,33 @@ export class TopBar extends React.Component {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
fclasslist: [],
|
|
|
|
|
companylist: [],
|
|
|
|
|
rootTreeData: [], //根节点异步树
|
|
|
|
|
treeExpandedKeys: [],
|
|
|
|
|
requestData: {
|
|
|
|
|
date: moment(new Date()).format('YYYY-MM-DD'),
|
|
|
|
|
fclass: '0',
|
|
|
|
|
root: '0',
|
|
|
|
|
root: undefined,
|
|
|
|
|
level: '3',
|
|
|
|
|
fisvitual: '0',
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 表单值改变
|
|
|
|
|
* @param {*} payload
|
|
|
|
|
*/
|
|
|
|
|
handleFormChange(payload) {
|
|
|
|
|
let requestData = { ...this.state.requestData, ...payload };
|
|
|
|
|
this.setState({ requestData });
|
|
|
|
|
}
|
|
|
|
|
//日期可选择未来
|
|
|
|
|
// disabledDate (current) {
|
|
|
|
|
// // return current && current >moment().subtract(1, "days");
|
|
|
|
|
// return current && current > moment().endOf("day");
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 组织维度改变
|
|
|
|
|
*/
|
|
|
|
|
changeFclass() {
|
|
|
|
|
debugger;
|
|
|
|
|
this.getSeatchCondition(this.props.url);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleExportMenuClick(e) {
|
|
|
|
|
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
|
|
|
|
|
@ -50,16 +58,70 @@ export class TopBar extends React.Component {
|
|
|
|
|
this.props.onExport('png');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 根节点树数据
|
|
|
|
|
* @param {} parentId
|
|
|
|
|
* @returns
|
|
|
|
|
*/
|
|
|
|
|
getNodeTreeNode = (parentId) => {
|
|
|
|
|
const { fclass } = this.state.requestData;
|
|
|
|
|
let api =
|
|
|
|
|
'/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
|
|
|
|
|
parentId +
|
|
|
|
|
'&fclass=' +
|
|
|
|
|
fclass;
|
|
|
|
|
fetch(api)
|
|
|
|
|
.then((res) => res.json())
|
|
|
|
|
.then((data) => {
|
|
|
|
|
if (data.api_status) {
|
|
|
|
|
let arr = [...this.state.rootTreeData, ...data.companyTree];
|
|
|
|
|
this.setState({
|
|
|
|
|
rootTreeData: arr,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 根节点树异步加载
|
|
|
|
|
* @param {} parentId
|
|
|
|
|
* @returns
|
|
|
|
|
*/
|
|
|
|
|
onRootLoadData = (treeNode) =>
|
|
|
|
|
new Promise((resolve) => {
|
|
|
|
|
const { id } = treeNode.props;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getNodeTreeNode(id);
|
|
|
|
|
resolve(undefined);
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onRootChange = (value) => {
|
|
|
|
|
debugger;
|
|
|
|
|
let requestData = { ...this.state.requestData, root: value };
|
|
|
|
|
this.setState({ requestData });
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onTreeExpand = (expandedKeys) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
treeExpandedKeys: expandedKeys,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
fetch(this.props.url)
|
|
|
|
|
this.getSeatchCondition(this.props.url);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getSeatchCondition = (url) => {
|
|
|
|
|
fetch(url)
|
|
|
|
|
.then((res) => res.json())
|
|
|
|
|
.then((data) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
fclasslist: data.fclasslist,
|
|
|
|
|
companylist: data.companylist,
|
|
|
|
|
rootTreeData: data.companyTree,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
menu = (
|
|
|
|
|
<Menu
|
|
|
|
|
@ -79,69 +141,61 @@ export class TopBar extends React.Component {
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { disabled } = this.props;
|
|
|
|
|
debugger;
|
|
|
|
|
const { rootTreeData } = this.state;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={style.topbarWrapper}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
数据日期：
|
|
|
|
|
<DatePicker
|
|
|
|
|
placeholder="请选择日期"
|
|
|
|
|
style={{ width: 130 }}
|
|
|
|
|
locale={locale}
|
|
|
|
|
allowClear={false}
|
|
|
|
|
// disabledDate={this.disabledDate}
|
|
|
|
|
defaultValue={moment(new Date())}
|
|
|
|
|
value={
|
|
|
|
|
this.state.requestData.date && this.state.requestData.date != ''
|
|
|
|
|
? moment(this.state.requestData.date)
|
|
|
|
|
: ''
|
|
|
|
|
}
|
|
|
|
|
onChange={(value) =>
|
|
|
|
|
this.handleFormChange({
|
|
|
|
|
date: value && value != '' ? value.format('YYYY-MM-DD') : '',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
维度：
|
|
|
|
|
<Select
|
|
|
|
|
defaultValue="0"
|
|
|
|
|
style={{ width: 120 }}
|
|
|
|
|
style={{ width: 140 }}
|
|
|
|
|
value={this.state.requestData.fclass}
|
|
|
|
|
onChange={(value) => this.handleFormChange({ fclass: value })}
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
this.handleFormChange({ fclass: value });
|
|
|
|
|
this.props.onSearch(this.state.requestData);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{this.state.fclasslist.map((item) => (
|
|
|
|
|
<Option value={item.id}>{item.companyname}</Option>
|
|
|
|
|
<Option key={item.key} value={item.id}>
|
|
|
|
|
{item.companyname}
|
|
|
|
|
</Option>
|
|
|
|
|
))}
|
|
|
|
|
</Select>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
根节点：
|
|
|
|
|
<Select
|
|
|
|
|
showSearch
|
|
|
|
|
filterOption={(input, option) =>
|
|
|
|
|
(option?.children).includes(input)
|
|
|
|
|
}
|
|
|
|
|
defaultValue="0"
|
|
|
|
|
style={{ width: 120 }}
|
|
|
|
|
<TreeSelect
|
|
|
|
|
treeDataSimpleMode
|
|
|
|
|
allowClear
|
|
|
|
|
style={{ width: '80%' }}
|
|
|
|
|
value={this.state.requestData.root}
|
|
|
|
|
onChange={(value) => this.handleFormChange({ root: value })}
|
|
|
|
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
|
|
|
|
placeholder="请选择根节点"
|
|
|
|
|
onChange={this.onRootChange}
|
|
|
|
|
loadData={this.onRootLoadData}
|
|
|
|
|
treeData={rootTreeData}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<Checkbox
|
|
|
|
|
style={{ marginTop: '5px', marginLeft: 100 }}
|
|
|
|
|
onChange={(e) =>
|
|
|
|
|
this.handleFormChange({
|
|
|
|
|
fisvitual: e.target.checked ? '1' : '0',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{this.state.companylist.map((item) => (
|
|
|
|
|
<Option value={item.id}>{item.fname}</Option>
|
|
|
|
|
))}
|
|
|
|
|
</Select>
|
|
|
|
|
显示虚拟组织
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
显示层级：
|
|
|
|
|
<Select
|
|
|
|
|
defaultValue="3"
|
|
|
|
|
style={{ width: 120 }}
|
|
|
|
|
style={{ width: 140 }}
|
|
|
|
|
value={this.state.requestData.level}
|
|
|
|
|
onChange={(value) => this.handleFormChange({ level: value })}
|
|
|
|
|
>
|
|
|
|
|
@ -152,19 +206,7 @@ export class TopBar extends React.Component {
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{ marginTop: '15px' }}>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<Checkbox
|
|
|
|
|
style={{ marginTop: '5px' }}
|
|
|
|
|
onChange={(e) =>
|
|
|
|
|
this.handleFormChange({
|
|
|
|
|
fisvitual: e.target.checked ? '1' : '0',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
显示虚拟组织
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
style={{ marginRight: '10px' }}
|
|
|
|
|
@ -173,7 +215,7 @@ export class TopBar extends React.Component {
|
|
|
|
|
this.props.onSynchronous(this.state.requestData);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
同步数据
|
|
|
|
|
版本记录
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
type="primary"
|
|
|
|
|
@ -184,7 +226,7 @@ export class TopBar extends React.Component {
|
|
|
|
|
>
|
|
|
|
|
查询
|
|
|
|
|
</Button>
|
|
|
|
|
<Dropdown menu={this.menu}>
|
|
|
|
|
<Dropdown overlay={this.menu}>
|
|
|
|
|
<Button>导出</Button>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
</Col>
|
|
|
|
|
|
