EditLeave.tsx

import React, {useEffect} from 'react';
import { useRequest, useParams } from 'umi';
import {Card, Button, Form, message} from 'antd'
import classNames from "classnames";
import utilsStyles from '@/utils/utils.less';
import moment from 'moment'
import LeaveForm from './components/LeaveForm'
import {fetchLeaveSave, fetchLeaveInfo} from '@/services/staff'
import StaffFlow from '../components/StaffFlow'
import style from "../index.less";

const EditLeave: React.FC = () => {
  const {id} = useParams<any>()
  const [form] = Form.useForm();

  const type = id ? 'edit' : 'add'

  const leaveAction = useRequest(fetchLeaveSave, {
    manual: true,
    onSuccess: () => {
      message.success(id ? '修改成功' : '添加成功', 1, () => {
        closeCurrentPage('/ops/staff/leave')
      })
    }
  })
  const leaveInfo = useRequest(() => fetchLeaveInfo(id), {
    manual: true,
    onSuccess: res => {
      res.startDate = moment(res.startDate);
      res.endDate = moment(res.endDate)
      res.enclosurs = res?.enclosurs?.map((item: any, index: number) => ({
        name: item.enclosurName, status: 'done', url: item.enclosurUrl
      })) || []
      console.log('res', res)
      form.setFieldsValue(res)
    }
  })
  /**
   * @表单提交
   */

  const handleSubmit = (leaveState: number) => {
    form.validateFields().then(values => {
      if (values.auditRuleId){
        const enclosurs = values?.enclosurs?.map((item: any) => ({
          enclosurUrl: item?.response?.data?.url || item?.url,
          enclosurName: item.name,
        }))
        const payload = {...values, enclosurs, id, leaveState}
        payload.startDate = moment(payload.startDate).startOf('day').valueOf()
        payload.endDate = moment(payload.endDate).endOf('day').valueOf()
        leaveAction.run(payload)
      } else {
        message.error('请选择审核规则')
      }
    }).catch(() => {});
  };

  useEffect(() => {
    if (id) leaveInfo.run()
  }, [id])

  return (
    <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
      <div className={style.wrap_page}>
        <div>
          <Form style={{flex: 1}} form={form} >
            <LeaveForm type={type} form={form} disabled={false}/>
            <Card style={{marginTop: 10}}>
              <StaffFlow
                type="leave"
                auditRuleId={leaveInfo?.data?.auditRuleId}
                creations={{
                  userUrl: leaveInfo?.data?.avatarUrl,
                  creationName: leaveInfo?.data?.creationName
                }}
              />
              <div className="pos_end">
                <Button
                  loading={leaveAction.loading || false}
                  onClick={ () =>handleSubmit(0)}
                  style={{marginRight: 31}}
                >保存</Button>
                <Button
                  loading={leaveAction.loading || false}
                  type='primary'
                  onClick={ () =>handleSubmit(1)}
                >发起审批</Button>
              </div>
            </Card>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default EditLeave