138 lines
4.3 KiB
JavaScript
138 lines
4.3 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 薪资账套-申报字段对应查询弹框
|
|
* Description:
|
|
* Date: 2023/8/16
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { Icon, Popover } from "antd";
|
|
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
|
|
import { commonBrowserData } from "../../../apis";
|
|
import LedgerSalaryItemSelectDialog from "./ledgerSalaryItemSelectDialog";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
|
|
class LedgerFieldsItemPopver extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
dataList: [],
|
|
keywords: "",
|
|
salaryItemSelectDialog: {
|
|
visible: false, salarySobId: ""
|
|
}
|
|
};
|
|
this.handleDebounce = null;
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.record !== this.props.record && nextProps.record.visible) {
|
|
this.commonBrowserData(nextProps);
|
|
} else {
|
|
const { record } = nextProps;
|
|
const salaryItemName = record.salaryItem[0] ? record.salaryItem[0].name : "";
|
|
this.setState({ dataList: [], keywords: salaryItemName });
|
|
}
|
|
}
|
|
|
|
handleFocusChange = (visible) => {
|
|
const { keywords } = this.state;
|
|
const { record, onChangeSwitch } = this.props;
|
|
visible && onChangeSwitch(visible, record.id);
|
|
if (visible && keywords) {
|
|
this.setState({ keywords: "" });
|
|
}
|
|
};
|
|
handleChange = (keywords) => {
|
|
this.setState({ keywords }, () => this.handleSearch());
|
|
!keywords && this.props.onChange([], this.props.record.id);
|
|
};
|
|
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, salaryItemSelectDialog } = this.state;
|
|
const { record, onChangeSwitch, salarySobId } = this.props;
|
|
return (
|
|
<React.Fragment>
|
|
<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)}
|
|
>
|
|
<WeaInputSearch
|
|
style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}
|
|
onFocusChange={this.handleFocusChange}
|
|
value={keywords} onSearchChange={this.handleChange}
|
|
onSearch={() => this.setState({
|
|
salaryItemSelectDialog: {
|
|
...salaryItemSelectDialog,
|
|
visible: true,
|
|
salarySobId
|
|
}
|
|
})}
|
|
/>
|
|
</Popover>
|
|
<LedgerSalaryItemSelectDialog
|
|
{...salaryItemSelectDialog}
|
|
handleClickItem={this.handleClickItem}
|
|
handleClearSalaryItem={() => {
|
|
this.setState({
|
|
salaryItemSelectDialog: {
|
|
...salaryItemSelectDialog,
|
|
visible: false,
|
|
salarySobId: ""
|
|
}
|
|
}, () => this.props.onChange([], this.props.record.id));
|
|
}}
|
|
onCancel={() => this.setState({
|
|
salaryItemSelectDialog: {
|
|
...salaryItemSelectDialog,
|
|
visible: false,
|
|
salarySobId: ""
|
|
}
|
|
})}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default LedgerFieldsItemPopver;
|