salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemSelectDialo...

121 lines
4.1 KiB
JavaScript

/*
* Author: 黎永顺
* name: 个税对应字段-薪资项目选择弹框
* Description:
* Date: 2023/8/17
*/
import React, { Component } from "react";
import { WeaDialog, WeaInputSearch, WeaLocaleProvider } from "ecCom";
import { Button, Col, Row, Table } from "antd";
import { commonBrowserData } from "../../../apis";
const { getLabel } = WeaLocaleProvider;
class LedgerSalaryItemSelectDialog extends Component {
constructor(props) {
super(props);
this.state = {
pageInfo: { current: 1, pageSize: 20, total: 0 },
loading: false, columns: [], dataSource: [],
keywords: ""
};
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.visible !== this.props.visible && nextProps.visible) this.commonBrowserData(nextProps);
}
commonBrowserData = (props) => {
const { salarySobId } = props;
const { keywords, pageInfo } = this.state;
const payload = {
type: "salaryItemBrowser",
jsonParam: JSON.stringify({ salarySobId, key: keywords }),
...pageInfo
};
this.setState({ loading: true });
commonBrowserData(payload).then(({ status, data }) => {
this.setState({ loading: false });
if (status) {
const { list: dataSource, columns, pageNum: current, pageSize, total } = data;
this.setState({
dataSource, columns,
pageInfo: { ...pageInfo, current, pageSize, total }
});
}
}).catch(() => this.setState({ loading: false }));
};
handleRowClick = (record) => {
this.props.onCancel();
this.props.handleClickItem(record);
};
render() {
const { loading, columns, dataSource, pageInfo, keywords } = this.state;
const pagination = {
...pageInfo,
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
this.setState({
pageInfo: { ...pageInfo, current, pageSize }
}, () => this.commonBrowserData(this.props));
},
onChange: current => {
this.setState({
pageInfo: { ...pageInfo, current }
}, () => this.commonBrowserData(this.props));
}
};
return (
<WeaDialog
{...this.props} hasScroll className="incomeDialog" initLoadCss ref={dom => this.incomeRef = dom}
buttons={[
<Button type="primary" onClick={this.props.handleClearSalaryItem}>{getLabel(111, "清除")}</Button>
]}
title={(<Row className="incomeDialogTitle" type="flex">
<Col span={12} className="incomeDialogTitle-left">
<span className="title">{getLabel(543598, "请选择薪资项目")}</span>
</Col>
<Col span={12} className="incomeDialogTitle-right">
<Button type="ghost" icon="reload" title={getLabel(111, "刷新")} onClick={() => {
this.setState({
keywords: "",
pageInfo: { ...pageInfo, current: 1 }
}, () => this.commonBrowserData(this.props));
}}/>
</Col>
</Row>)}
style={{
width: 850,
height: 606.6,
minHeight: 200,
minWidth: 380,
maxHeight: "90%",
maxWidth: "90%",
overflow: "hidden",
transform: "translate(0px, 0px)"
}}
>
<div className="incomeDialogContent">
<WeaInputSearch
style={{ width: "100%", margin: "6px 0" }} placeholder={getLabel(500351, "请输入关键字")}
value={keywords} onChange={val => this.setState({ keywords: val })}
onSearch={() => this.commonBrowserData(this.props)}
/>
<Table
showHeader={false} dataSource={dataSource}
loading={loading} pagination={pagination}
columns={columns} onRowClick={this.handleRowClick}
scroll={{ y: this.incomeRef ? this.incomeRef.state.height - 106 : 600 }}
/>
</div>
</WeaDialog>
);
}
}
export default LedgerSalaryItemSelectDialog;