费用表单组件 React

FeeForm.jsx

import React, { Component, Fragment } from 'react';
import './FeeForm.scss';
import { Viewport, PickerField, DatetimeField, InputField } from 'components';
import { moneyType as moneyTypeEnum } from 'src/enums';
import { utils, feedback } from 'src/lib';
import { Button } from 'saltui';
import { fee, dingtalk } from 'src/store';
import { observer } from 'mobx-react';
import { isObject } from 'lodash';

@observer
class FeeForm extends Component {
  constructor(props) {
    super(props);
    const { activeItem } = props.fee;

    const form =
      activeItem && Object.keys(activeItem).length > 0
        ? activeItem
        : {
            financeType: null,
            chargType: null,
            startTime: null,
            endTime: null,
            amount: null,
            memo: null,
            preOrLate: 'LATE',
          };
    this.state = {
      form,
    };
  }

  componentDidMount() {
    dingtalk.setTitle('费用表单');
  }

  validateForm(form) {
    const required = {
      financeType: '费用流向',
      chargType: '费用类型',
      startTime: '费用开始时间',
      endTime: '费用结束时间',
      amount: '金额',
    };
    for (let k in required) {
      if (required.hasOwnProperty(k) && !form[k]) {
        return new Error(`${required[k]}不能为空。`);
      }
    }

    const {
      fee: { list, activeItem },
    } = this.props;

    const isSelf = activeItem.chargType === form.chargType;
    if (!isSelf && list.some(item => item.chargType === form.chargType)) {
      // return new Error('费用类型不能重复。');
      feedback.warning('提示：费用类型重复。');
    }

    return null;
  }

  push(callback = utils.noop) {
    const { form } = this.state;
    const error = this.validateForm(form);
    if (error) {
      feedback.warning(error.message);
      return;
    }

    this.props.fee.push(form);
    callback();
  }

  update(callback = utils.noop) {
    const { form } = this.state;
    const error = this.validateForm(form);
    if (error) {
      feedback.warning(error.message);
      return;
    }
    this.props.fee.updateActiveItem(form);
    callback();
  }

  remove(callback = utils.noop) {
    this.props.fee.removeActiveItem();
    callback();
  }

  submit(func) {
    func.call(this, () => {
      this.props.history.go(-1);
    });
  }

  handlePick(type, val) {
    const { value } = val[0];
    this.setState({
      form: {
        ...this.state.form,
        [type]: value,
      },
    });
  }

  handleChange(type, val) {
    this.setState({
      form: {
        ...this.state.form,
        [type]: val,
      },
    });
  }

  renderForm() {
    const {
      financeType,
      chargType,
      startTime,
      endTime,
      amount,
      memo,
      preOrLate,
    } = this.state.form;

    // 费用流向
    const chargeTypeOptions = [
      {
        text: '收款',
        value: 'INC',
      },
      {
        text: '退款',
        value: 'PAY',
      },
      {
        text: '押金',
        value: 'DESP',
      },
    ];

    // 费用类型
    const moneyTypeOptions = utils.enum2Options(moneyTypeEnum);

    if (preOrLate === 'PRE') {
      return (
        <form className="_form">
          <PickerField
            label="费用流向"
            title="请选择费用流向"
            data={chargeTypeOptions}
            value={chargeTypeOptions.find(item => item.value === financeType)}
            readOnly
          />
          <PickerField
            label="费用类型"
            title="请选择费用类型"
            data={
              memo === '退回押金'
                ? [{ value: '押金', text: '押金' }]
                : moneyTypeOptions
            }
            value={
              memo === '退回押金'
                ? '押金'
                : moneyTypeOptions.find(item => item.value === chargType)
            }
            readOnly
          />
          <DatetimeField
            dateOnly
            label="费用开始时间"
            value={utils.dateStr(startTime)}
            readOnly
          />
          <DatetimeField
            dateOnly
            label="费用结束时间"
            value={utils.dateStr(endTime)}
            readOnly
          />
          <InputField label="金额(元)" value={amount.toFixed(2)} readOnly />

          <textarea
            className="_textarea"
            placeholder="备注信息(选填)"
            value={memo}
            readOnly
          />
        </form>
      );
    }

    return (
      <form className="_form">
        <PickerField
          label="费用流向"
          title="请选择费用流向"
          data={[
            {
              text: '收款',
              value: 'INC',
            },
            {
              text: '退款',
              value: 'PAY',
            },
          ]}
          defaultValue={financeType}
          onPick={this.handlePick.bind(this, 'financeType')}
        />
        <PickerField
          label="费用类型"
          title="请选择费用类型"
          data={moneyTypeOptions}
          defaultValue={chargType}
          onPick={this.handlePick.bind(this, 'chargType')}
        />
        <DatetimeField
          dateOnly
          label="费用开始时间"
          onChange={this.handleChange.bind(this, 'startTime')}
          defaultValue={startTime}
        />
        <DatetimeField
          dateOnly
          label="费用结束时间"
          onChange={this.handleChange.bind(this, 'endTime')}
          defaultValue={endTime}
        />
        <InputField
          label="金额(元)"
          pattern={/^\d+(\.\d{0,2})?$/}
          onChange={this.handleChange.bind(this, 'amount')}
          defaultValue={amount}
        />

        <textarea
          className="_textarea"
          placeholder="备注信息(选填)"
          onChange={e => {
            this.handleChange('memo', e.target.value);
          }}
          defaultValue={memo}
        />
      </form>
    );
  }

  renderAction() {
    const {
      fee: { activeItem },
    } = this.props;

    const isActiveItemValid =
      isObject(activeItem) && Object.keys(activeItem).length > 0;
    const isPre = this.state.form.preOrLate === 'PRE';
    if (isPre) {
      return null;
    }

    return (
      <Fragment>
        {isActiveItemValid && (
          <Button
            style={{ marginTop: '4em', background: '#FFF', color: '#333333' }}
            onClick={this.submit.bind(this, this.remove)}
          >
            删除账单
          </Button>
        )}
        <Button
          style={{ marginTop: '1em', background: '#FBB13F' }}
          onClick={this.submit.bind(
            this,
            isActiveItemValid ? this.update : this.push
          )}
        >
          完成
        </Button>
      </Fragment>
    );
  }

  render() {
    return (
      <Viewport title="费用表单" style={{ background: '#F5F5F5' }}>
        <div className="fee-form">
          {this.renderForm()}

          {this.renderAction()}
        </div>
      </Viewport>
    );
  }
}

export default props => <FeeForm {...props} fee={fee} />;