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

import React from "react";
import { Button, Col, Row } from "antd";
import {
  WeaBrowser,
  WeaCheckbox,
  WeaDialog,
  WeaError,
  WeaHelpfulTip,
  WeaLocaleProvider,
  WeaSelect,
  WeaTextarea
} from "ecCom";
import { SQLHelpTip } from "../../components/PersonalScopeModal";
import "../ledger/index.less";

const { getLabel } = WeaLocaleProvider;
export default class AddTaxAgentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "EMPLOYEE",
      checkboxValue: "",
      checkAll: "0",
      ids: "",
      idsName: ""
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      if (!_.isEmpty(nextProps.scopeRecord)) {
        const { employeeStatus } = nextProps;
        const checked = _.map(employeeStatus, it => it.id);
        const bool = _.every(checked, it => nextProps.scopeRecord.status.indexOf(it) !== -1);
        this.setState({
          selectedKey: nextProps.scopeRecord.targetType,
          checkboxValue: nextProps.scopeRecord.status,
          checkAll: bool ? "1" : "0",
          ids: nextProps.scopeRecord.targetType === "SQL" ? nextProps.scopeRecord.target : String(nextProps.scopeRecord.targetId),
          idsName: nextProps.scopeRecord.targetName
        });
      } else {
        this.handleReset();
      }
    }
  }

  onCheckboxChange = (checkboxValue) => {
    const { employeeStatus } = this.props;
    const checked = _.map(employeeStatus, it => it.id);
    this.setState({ checkboxValue }, () => {
      const { checkboxValue } = this.state;
      const bool = _.every(checked, it => checkboxValue.indexOf(it) !== -1);
      if (bool) {
        this.setState({
          checkAll: "1"
        });
      } else {
        this.setState({
          checkAll: "0"
        });
      }
    });
  };

  // 保存
  handleSave = () => {
    const { onTaxAgentSave, scopeRecord } = this.props;
    const { checkboxValue, ids, selectedKey } = this.state;
    const payload = {
      employeeStatus: checkboxValue.split(","),
      targetParams: selectedKey !== "SQL" ? _.map(ids.split(","), (it) => ({
        targetType: selectedKey, target: "",
        targetId: it
      })) : [{ targetType: selectedKey, targetId: "0", target: ids }]
    };
    if (_.isEmpty(ids) && _.isEmpty(checkboxValue)) {
      this.refs.weaError.showError();
      this.refs.weaError1.showError();
      return;
    }
    if (_.isEmpty(ids)) {
      this.refs.weaError.showError();
      return;
    }
    if (_.isEmpty(checkboxValue)) {
      this.refs.weaError1.showError();
      return;
    }
    onTaxAgentSave && onTaxAgentSave({ ...payload, id: scopeRecord.id });
  };

  // 重置
  handleReset = () => {
    this.setState({
      selectedKey: !_.isEmpty(this.props.scopeRecord) ? this.props.scopeRecord.targetType : "EMPLOYEE",
      checkboxValue: "",
      checkAll: "0",
      ids: "",
      idsName: ""
    });
  };

  render() {
    const { employeeStatus, targetTypeList, visible, onCancel, loading, scopeRecord } = this.props;
    return (
      <WeaDialog
        visible={visible}
        onCancel={() => {
          this.handleReset();
          onCancel();
        }}
        style={{ width: 600 }}
        initLoadCss
        className="associatesWrapper"
        title="关联人员"
        buttons={[
          <Button type="primary" laoding={loading} onClick={this.handleSave}>
            保存
          </Button>,
          <Button type="default" onClick={this.handleReset}>
            重置
          </Button>
        ]}>
        <div style={{ padding: "20px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>对象类型</Col>
            <Col span={16}>
              <div style={{ display: "inline-block", marginRight: 12 }}>
                <WeaSelect
                  style={{ height: "30px" }} disabled={!_.isEmpty(scopeRecord)}
                  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", lineHeight: 0 }}>
                {this.state.selectedKey === "EMPLOYEE" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择人员">
                    <WeaBrowser
                      type={17}
                      viewAttr={3}
                      value={this.state.ids}
                      replaceDatas={[{ id: this.state.ids, name: this.state.idsName }]}
                      title={"人员选择"}
                      isSingle={!_.isEmpty(scopeRecord)}
                      inputStyle={{ width: 200 }}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids, idsName: names });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "DEPT" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择部门">
                    <WeaBrowser
                      type={57}
                      viewAttr={3}
                      title="部门选择"
                      isSingle={!_.isEmpty(scopeRecord)}
                      inputStyle={{ width: 200 }}
                      value={this.state.ids}
                      replaceDatas={[{ id: this.state.ids, name: this.state.idsName }]}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids, idsName: names });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "SUBCOMPANY" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择分部">
                    <WeaBrowser
                      type={164}
                      viewAttr={3}
                      title={"分部选择"}
                      isSingle={!_.isEmpty(scopeRecord)}
                      inputStyle={{ width: 200 }}
                      value={this.state.ids}
                      replaceDatas={[{ id: this.state.ids, name: this.state.idsName }]}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids, idsName: names });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "POSITION" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择岗位">
                    <WeaBrowser
                      type={278}
                      viewAttr={3}
                      title={"岗位选择"}
                      isSingle={!_.isEmpty(scopeRecord)}
                      value={this.state.ids}
                      replaceDatas={[{ id: this.state.ids, name: this.state.idsName }]}
                      inputStyle={{ width: 200 }}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids, idsName: names });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "SQL" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error={getLabel(111, "请输入SQL")}>
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <WeaTextarea minRows={2} viewAttr={3} style={{ width: 270 }} value={this.state.ids}
                                   onChange={ids => this.setState({ ids })}/>
                      <WeaHelpfulTip style={{ marginLeft: 10 }} width={280} placement="topLeft" title={<SQLHelpTip/>}/>
                    </div>
                  </WeaError>
                )}
              </div>
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>选择员工状态</Col>
            <Col span={16}>
              <WeaError
                tipPosition="bottom"
                style={{ width: "100%" }}
                ref="weaError1"
                error="请选择员工状态">
                <WeaCheckbox value={this.state.checkAll} content="全选" onChange={(checkAll) => {
                  if (checkAll === "1") {
                    const checked = _.map(employeeStatus, it => it.id);
                    this.setState({
                      checkAll: "1",
                      checkboxValue: checked.join(",")
                    });
                  } else {
                    this.setState({
                      checkAll: "0",
                      checkboxValue: ""
                    });
                  }
                }}/>
                <WeaSelect
                  viewAttr={3}
                  detailtype={2}
                  options={_.map(employeeStatus, (it) => ({
                    showname: it.name,
                    key: it.id
                  }))}
                  value={this.state.checkboxValue}
                  onChange={(value) => this.onCheckboxChange(value)}
                />
              </WeaError>
            </Col>
          </Row>
        </div>
      </WeaDialog>
    );
  }
}