admin/src/pages/guaranteeTask/Edit/BasicForm.jsx

import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button, Row, Col, Form, Input, InputNumber, DatePicker, notification } from 'antd';
import { addGuaranteeTask, updateGuaranteeTask } from '@/services/guaranteeTask';
import moment from 'moment';
const { TextArea } = Input;
const { RangePicker } = DatePicker;

export default (props) => {
  const { dataSource, setDataSource } = props;
  const id = dataSource ? dataSource.id : undefined;

  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [rangeDate, setRangeDate] = useState([]);
  const [loading, setLoading] = useState(false);

  const onChange = (dts) => {
    const [start, end] = dts;
    setRangeDate(dts);
    
    form.setFieldValue('startDate', start ? start.format('YYYY-MM-DD') : undefined);
    form.setFieldValue('endDate', end ? end.format('YYYY-MM-DD') : undefined);
  }

  const onFinish = values => {
    const notNull = Object.keys(values).map(k => values[k]).filter(Boolean);
    if (!notNull || notNull.length < 1) {
      notification.warn({ message: '未检索到填写内容' });
      return ;
    }

    const [start, end] = rangeDate;
    const startDate = start ? start.format('YYYY-MM-DD') : undefined;
    const endDate = end ? end.format('YYYY-MM-DD') : undefined;

    const func = id ? updateGuaranteeTask : addGuaranteeTask;

    setLoading(true);
    func({ ...values, startDate, endDate }, id).then(res => {
      setLoading(false);
      setDataSource(res);
      // notification.success({ message: '操作成功' })
    }).catch(() => {
      setLoading(false);
    });
  }

  useEffect(() => {
    if (dataSource) {
      form.setFieldsValue(dataSource);

      let rangeDt = [];

      if (dataSource.startDate) {
        rangeDt[0] = moment(dataSource.startDate);
      }

      if (dataSource.endDate) {
        rangeDt[1] = moment(dataSource.endDate);
      }

      setRangeDate(rangeDt);
    }
  }, [dataSource, form]);

  return (
    <Form layout="vertical" form={form} onFinish={onFinish}>
      <h3 style={{ marginBottom: '1.5em', fontWeight: 700 }}>人员安排</h3>
      <Row gutter={48}>
        <Col span={6}>
          <Form.Item label="受领人" name="receiver">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="受领人电话" name="receiverPhone">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="部队联系人" name="concatPerson">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="部队联系人电话" name="concatPhone">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={6}>
          <Form.Item label="制餐人" name="chef">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="制餐人电话" name="chefPhone">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="送餐人" name="deliveryMan">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="送餐人电话" name="deliveryPhone">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      
      <h3 style={{ margin: '1.5em 0', fontWeight: 700 }}>基本情况</h3>
      <Row gutter={48}>
        <Col span={6}>
          <Form.Item label="军代表" name="deputyMan">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="电话" name="deputyPhone">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="通报时间" name="gotDate">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={6}>
          <Form.Item label="保障序号" name="guaranteeNo">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="军运号" name="transportNo">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="车次" name="tripsNo">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={12}>
          <Form.Item label="保障日期">
            <RangePicker
              style={{ width: '100%' }}
              allowClear
              value={rangeDate}
              onChange={onChange}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="保障时间" name="timeRange">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={6}>
          <Form.Item label="保障人数" name="totalPersonNum">
            <InputNumber min={1} style={{ width: '100%' }}/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="其中回民" name="huiPersonNum">
            <InputNumber min={0} style={{ width: '100%' }}/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="其中病号" name="patientNum">
            <InputNumber min={0} style={{ width: '100%' }}/>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={12}>
          <Form.Item label="保障地点" name="address">
            <Input allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="伙食标准" name="standard">
            <Input allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={48}>
        <Col span={12}>
          <Form.Item label="备注" name="remark">
            <TextArea rows={4} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={48}>
        <Col offset={6} span={12}>
          <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
          <Button style={{ marginLeft: '48px' }} onClick={() => navigate(-1)}>返回</Button>
          <Button style={{ marginLeft: '48px' }} disabled={!id}>
            <a target="_blank" href={`${window.location.pathname}#/task/guaranteeTask/print?id=${id}`}>打印预览</a>
          </Button>
        </Col>
      </Row>

    </Form>
  )
}