salary-management-front/pc4mobx/hrmSalary/pages/taxAgent/addTaxAgentModal.js

import React from "react";
import { Modal, Button, Row, Col, Radio, Checkbox } from "antd";
import { WeaSelect, WeaBrowser } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";

const CheckboxGroup = Checkbox.Group;

export default class AddTaxAgentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "EMPLOYEE",
      checkboxValue: [],
      ids: "",
    };
  }

  onCheckboxChange = (checkboxValue) => {
    this.setState({ checkboxValue });
  };

  // 保存
  handleSave = () => {
    const { onTaxAgentSave } = this.props;
    const { checkboxValue, ids, selectedKey } = this.state;
    const payload = {
      employeeStatus: checkboxValue,
      targetParams: _.map(ids.split(","), (it) => ({
        targetType: selectedKey,
        targetId: it,
      })),
    };
    onTaxAgentSave && onTaxAgentSave(payload);
  };

  // 重置
  handleReset = () => {
    this.setState({
      selectedKey: "EMPLOYEE",
      checkboxValue: [],
      ids: "",
    });
  };

  render() {
    const { employeeStatus, targetTypeList, visible, onCancel, loading } =
      this.props;
    return (
      <Modal
        visible={visible}
        onCancel={onCancel}
        width={600}
        title="关联人员"
        footer={
          <div style={{ display: "inlne-block" }}>
            <Button type="primary" laoding={loading} onClick={this.handleSave}>
              保存
            </Button>
            <Button type="default" onClick={this.handleReset}>
              重置
            </Button>
          </div>
        }>
        <div style={{ padding: "20px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>
              对象类型
              <RequiredLabelTip />
            </Col>
            <Col span={16}>
              <div style={{ display: "inline-block", verticalAlign: "top" }}>
                <WeaSelect
                  style={{ height: "30px", marginRight: "10px" }}
                  options={_.map(targetTypeList, (it) => ({
                    ...it,
                    key: it.id,
                    showname: it.name,
                    selected: false,
                  }))}
                  value={this.state.selectedKey}
                  onChange={(value) => {
                    this.setState({ selectedKey: value, ids: "" });
                  }}
                />
              </div>
              <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                {this.state.selectedKey == "EMPLOYEE" && (
                  <WeaBrowser
                    type={17}
                    title={"人员选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "DEPT" && (
                  <WeaBrowser
                    type={57}
                    title={"部门选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "SUBCOMPANY" && (
                  <WeaBrowser
                    type={164}
                    title={"分部选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "POSITION" && (
                  <WeaBrowser
                    type={278}
                    title={"岗位选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
              </div>
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>
              选择员工状态
              <RequiredLabelTip />
            </Col>
            <Col span={16}>
              <CheckboxGroup
                options={_.map(employeeStatus, (it) => ({
                  label: it.name,
                  value: it.id,
                }))}
                value={this.state.checkboxValue}
                onChange={(e) => this.onCheckboxChange(e)}
              />
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}