salary-management-front/pc4mobx/hrmSalary/components/selectItemsModal/index.js

68 lines
2.0 KiB
JavaScript

/*
* Author: 黎永顺
* Description:
* Date: 2022-05-19 15:18:09
* LastEditTime: 2022-06-29 10:06:13
*/
import React from "react";
import { WeaCheckbox, WeaDialog, WeaInputSearch } from "ecCom";
import { Button } from "antd";
import "./index.less";
export default class SelectItemModal extends React.Component {
constructor(props) {
super(props);
this.state = {
searchValue: ""
};
}
componentWillReceiveProps(nextProps, nextContext) {
if (
nextProps.visible !== this.props.visible &&
!nextProps.visible
) this.setState({ searchValue: "" });
}
render() {
const { searchValue } = this.state;
const { title, onSearchItemSet, onShowOnlyChecked, children, ...extra } = this.props;
const btns = [<Button type="primary">保存</Button>];
const moreBtn = {
datas: [
{
key: "recovery",
content: "恢复默认设置",
icon: <i className="icon-coms-Flow-setting"/>,
onClick: key => alert(`点击事物处理函数接受的实参为 ${key}`)
},
{
key: "setting",
content: "设为默认设置",
icon: <i className="icon-coms-Flow-setting"/>,
onClick: key => alert(`点击事物处理函数接受的实参为 ${key}`)
}
]
};
const titleComp = <div className="setHeaderWrapper">
<span>{title}</span>
<WeaInputSearch value={searchValue} onChange={searchValue => this.setState({ searchValue })}
placeholder="请输入关键字" style={{ width: 200 }}
onSearch={onSearchItemSet}
/>
</div>;
const bottomLeft = <WeaCheckbox content="只显示已选中字段" onChange={onShowOnlyChecked}/>;
return (
<WeaDialog {...extra} hasScroll title={titleComp}
style={{ width: 592, height: 248 }}
buttons={btns} moreBtn={moreBtn}
initLoadCss className="setWrapper"
bottomLeft={bottomLeft}
>
{children}
</WeaDialog>
);
}
}