miniapp/src/pages/org/issue/detail/components/Apply.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Cell, CellGroup, Field, Button, Popup } from '@antmjs/vantui';
import DatePicker from '@/components/DatePicker';
import { getDateStr } from '@/utils/date';
import { postTaIssueApply } from '@/services/taissueapply';
import { warn } from '@/utils/message';

const today = new Date();
export default (props) => {

  const { orgIssue, applyType, ...leftProps } = props;

  const [show, setShow] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [formData, setFormData] = React.useState({});
  const [showDatePicker, setShowDatePicker] = React.useState(false);

  const setFieldValue = (key, value) => {
    setFormData({
      ...formData,
      [key]: value,
    })
  }

  const onDateClick = () => {
    setShow(false);
    setShowDatePicker(true);
  }
  
  const onDateChange = (dt) => {
    const date = getDateStr(dt);
    setFieldValue('content', date);
    setShowDatePicker(false);
    setShow(true);
  }

  const onClick = () => {
    if (applyType == 'org-verify' || applyType == 'end') {
      onSubmit();
    } else {
      setShow(true);
    }
  }

  const onSubmit = () => {
    try {
      warn(!orgIssue || !orgIssue.issueId, '未找到问题单');
      if (applyType === 'delay') {
        warn(!formData.content, '请选择延期时间');
      }

      if (applyType == 'delay' || applyType == 'reject') {
        warn(!formData.remark, '请填写理由说明');
      }
    } catch (e) {
      return ;
    }

    const data = {
      applyType,
      issueId: orgIssue.issueId,
      ...formData
    }

    setSubmitting(true);
    postTaIssueApply(data).then(() => {
      Taro.navigateBack({delta: 1});
      setSubmitting(false);
    }).catch(() => {
      setSubmitting(false);
    })
  }
  
  return (
    <>
      <DatePicker
        type="date"
        minDate={today}
        show={showDatePicker}
        value={formData.content}
        onCancel={() => setShowDatePicker(false)}
        onChange={onDateChange}
      />
      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
        <CellGroup>
          {
            applyType == 'delay' && (
              <Cell
                isLink
                title="延期时间"
                value={formData.content}
                onClick={onDateClick}
              />
            )
          }
          <Cell title="理由说明" />
          <Field
            type="textarea"
            autosize={{ minHeight: '120px' }}
            value={formData.remark}
            onChange={e => setFieldValue('remark', e.detail)}
          />
          <View style={{display: 'flex'}}>
            <Button block plain type="default" onClick={() => setShow(false)}>取消</Button>
            <Button block plain type="primary" loading={submitting} onClick={onSubmit}>确定</Button>
          </View>
        </CellGroup>
      </Popup>
      <Button {...leftProps} onClick={onClick}>{props.children}</Button>
    </>
  )
}