salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerFieldsItemPopver.js

100 lines
3.2 KiB
JavaScript

/*
* Author: 黎永顺
* name: 薪资账套-申报字段对应查询弹框
* Description:
* Date: 2023/8/16
*/
import React, { Component } from "react";
import { Button, Icon, Input, Popover } from "antd";
import { WeaLocaleProvider } from "ecCom";
import { commonBrowserData } from "../../../apis";
const { getLabel } = WeaLocaleProvider;
const InputGroup = Input.Group;
class LedgerFieldsItemPopver extends Component {
constructor(props) {
super(props);
this.state = {
dataList: [],
keywords: ""
};
this.handleDebounce = null;
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.record !== this.props.record && nextProps.record.visible) {
this.commonBrowserData(nextProps);
} else {
this.setState({ dataList: [] });
}
}
commonBrowserData = (props) => {
const { salarySobId } = props;
const { keywords } = this.state;
const payload = {
type: "salaryItemBrowser",
jsonParam: JSON.stringify({ salarySobId, key: keywords })
};
commonBrowserData(payload).then(({ status, data }) => {
if (status) {
const { list: dataList } = data;
this.setState({ dataList });
}
});
};
handleSearch = () => {
if (!this.handleDebounce) {
this.handleDebounce = _.debounce(() => {
this.commonBrowserData(this.props);
this.handleDebounce = null;
}, 500);
}
this.handleDebounce();
};
handleClickItem = (item) => {
this.setState({
keywords: item.name
}, () => this.props.onChange(item, this.props.record.id));
};
render() {
const { keywords, dataList } = this.state;
const { record, onChangeSwitch } = this.props;
const salaryItemName = record.salaryItem[0] ? record.salaryItem[0].name : "";
return (
<Popover content={
<ul className="income_result_wrapper">
{
!_.isEmpty(dataList) ?
_.map(dataList, it => (<li key={it.key} onClick={() => this.handleClickItem(it)}>{it.name}</li>)) :
<li className="emptyLi">
<Icon type="inbox"/>
<p className="empty-title">{getLabel(83553, "暂无数据")}</p>
</li>
}
</ul>
} trigger="click" placement="right" overlayClassName="income_pop_wrapper"
visible={record.visible}
onVisibleChange={(visible) => onChangeSwitch(visible, record.id)}
>
<InputGroup className="incomeSearchGroup">
<Input placeholder={getLabel(18214, "请选择")} value={keywords}
onFocus={() => onChangeSwitch(true, record.id)} style={{ width: "auto" }}
onChange={(e) => this.setState({ keywords: e.target.value }, () => this.handleSearch())}
/>
<Button icon="search"/>
</InputGroup>
{/*<WeaInputSearch*/}
{/* style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}*/}
{/* onFocusChange={(visible) => this.setState({ keywords: visible ? "" : salaryItemName }, () => onChangeSwitch(visible, record.id))}*/}
{/* value={keywords} onChange={(keywords) => this.setState({ keywords }, () => this.handleSearch())}*/}
{/*/>*/}
</Popover>
);
}
}
export default LedgerFieldsItemPopver;