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

/*
 * 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>
    );
  }
}