salary-management-front/pc4mobx/hrmSalary/pages/reportView/components/leftTab.js

84 lines
2.3 KiB
JavaScript

/*
* Author: 黎永顺
* name: 报表查看-左侧tab标题
* Description:
* Date: 2023/4/20
*/
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
import { reportStatisticsReportList } from "../../../apis/statistics";
import { Menu } from "antd";
import { getQueryString } from "../../../util/url";
import "../index.less";
const { getLabel } = WeaLocaleProvider;
class LeftTab extends Component {
constructor(props) {
super(props);
this.state = {
reportName: "",
selectedKeys: getQueryString("id").split(","),
reportList: []
};
}
componentDidMount() {
this.reportStatisticsReportList();
}
reportStatisticsReportList = () => {
const { reportName, selectedKeys } = this.state;
const { onChangeTab } = this.props;
reportStatisticsReportList({ reportName }).then(({ status, data: reportList }) => {
if (status) this.setState({ reportList }, () => {
onChangeTab(_.find(this.state.reportList, it => it.id === selectedKeys[0]));
});
});
};
updateReportList = (report) => {
const { reportList } = this.state;
this.setState({
reportList: _.reduce(reportList, (pre, cur) => {
if (report.id === cur.id) {
return [...pre, report];
}
return [...pre, cur];
}, [])
});
};
render() {
const { reportName, selectedKeys, reportList } = this.state;
const { onChangeTab } = this.props;
return (
<div className="leftTabWrapper">
<div className="searchArea">
<WeaInputSearch
value={reportName} onChange={reportName => this.setState({ reportName })}
placeholder={getLabel(111, "请输入报表名称")} onSearch={this.reportStatisticsReportList}
/>
</div>
<Menu
mode="inline" selectedKeys={selectedKeys}
onClick={({ key }) => {
this.setState({ selectedKeys: key.split(",") }, () => {
onChangeTab(_.find(reportList, it => it.id === key));
});
}}
>
{
_.map(reportList, item => {
const { reportName, id } = item;
return <Menu.Item key={id}>{reportName}</Menu.Item>;
})
}
</Menu>
</div>
);
}
}
export default LeftTab;