salary-management-front/pc4mobx/hrmSalary/pages/calculate/baseFormModal.js

import React from "react";
import { Button, Col, message, Row } from "antd";
import { inject, observer } from "mobx-react";
import { WeaDatePicker, WeaDialog, WeaError, WeaInput, WeaSelect } from "ecCom";
import { notNull } from "../../util/validate";
import "./index.less";


@inject("calculateStore")
@observer
export default class baseFormModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      salaryMonthStr: "",
      inited: false,
      selectOptions: [],
      salarySob: "",
      description: ""
    };
  }

  componentWillMount() {
    const { calculateStore } = this.props;
    const { salaryacctGetForm } = calculateStore;
    salaryacctGetForm().then(data => {
      this.setState({
        inited: true,
        selectOptions: _.isEmpty(data.salarySobs) ? [{ key: "", showname: "" }] : [{
          key: "",
          showname: ""
        }, ..._.map(data.salarySobs, it => ({ key: String(it.id), showname: it.name }))]
      });
    });
  }

  handleSelectChange(value) {
    this.setState({
      salarySob: value
    });
  }

  // 保存回调
  handleSave() {
    if (!this.validate()) {
      return;
    }

    let params = {
      salaryMonthStr: this.state.salaryMonthStr,
      salarySobId: this.state.salarySob,
      description: this.state.description
    };
    const { calculateStore: { saveBasic } } = this.props;

    saveBasic(params).then((id) => {
      this.props.onCancel();
      this.props.onRefresh();
      window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail?id=" + id);
    });
  }

  validate() {
    if (!notNull(this.state.salaryMonthStr) && !notNull(this.state.salarySob)) {
      this.refs.weaError.showError();
      this.refs.weaError1.showError();
      return false;
    }
    if (!notNull(this.state.salaryMonthStr)) {
      this.refs.weaError.showError();
      return false;
    } else if (!notNull(this.state.salarySob)) {
      this.refs.weaError1.showError();
      return false;
    }
    return true;
  }

  render() {
    const { description } = this.state;
    return (
      <WeaDialog
        title="核算"
        initLoadCss
        className="dataList-wrapper"
        visible={this.props.visible}
        style={{ width: 600 }}
        onCancel={() => {
          this.props.onCancel();
        }}
        buttons={[<Button type="primary" onClick={() => {
          this.handleSave();
        }}>保存</Button>]}
      >
        <Row style={{ lineHeight: "40px" }}>
          <Col span={8}>薪酬所属月</Col>
          <Col span={16}>
            <WeaError
              style={{ width: "100%" }}
              tipPosition="bottom"
              ref="weaError"
              error="请选择薪酬所属月">
              <WeaDatePicker
                style={{ width: "100%" }}
                format="yyyy-MM"
                viewAttr={3}
                value={this.state.salaryMonthStr}
                onChange={value => {
                  if(value === '') this.refs.weaError.showError();
                  this.setState({
                    salaryMonthStr: value
                  });
                }}
              />
            </WeaError>
          </Col>
        </Row>

        <Row style={{ lineHeight: "40px" }} className="formItem">
          <Col span={8}>核算账套</Col>
          <Col span={16}>
            {
              this.state.inited &&
              <WeaError
                style={{ width: "100%" }}
                tipPosition="bottom"
                ref="weaError1"
                error="请选择账套">
                <WeaSelect
                  viewAttr={3}
                  options={this.state.selectOptions}
                  onChange={(value) => {
                    if(value === '') this.refs.weaError1.showError();
                    this.handleSelectChange(value)
                  }}
                  value={this.state.salarySob} style={{ width: "100%" }}/>
              </WeaError>
            }
          </Col>
        </Row>

        <Row style={{ lineHeight: "40px" }}>
          <Col span={8}>备注</Col>
          <Col span={16}>
            <WeaInput value={description} onChange={(value) => this.setState({ description: value })}/>
          </Col>
        </Row>
      </WeaDialog>
    );
  }
}