FEV2 / fw-cms

  import React, { useEffect, useState } from "react";

  import { Modal, Form, InputNumber, message, Radio } from "antd";

  import * as API from "../api";
  import * as TYPE from "../entity";
  import LeaveDetail from "./LeaveDetail/index";

  
  interface Props {

    type: number;
    visiable: boolean;
    setVisiable: (value: any) => any;

    data: any;
  }
  
  const FormItem = Form.Item;
  
  const CreateModal = (props: Props) => {
    const { type, visiable, setVisiable, data } = props;
    const [form] = Form.useForm();
    const [year, setYear] = useState([]);
    const [yearData, setYearData] = useState<any>();
  
    useEffect(() => {
      if (visiable && type === 1) {

        API.fetchDetail(1).then((res: any) => {

          const data = res.data || {};
          setYear(data);
          setYearData(data.conditions);

        });
      }
    }, [visiable]);
  
    useEffect(() => {
      form.setFieldsValue({
        days: data.days,
        advanceDays: data.advanceDays,
        times: data.times,
        years: data.years,

        conditions: data.conditions,

        annualWay: data.annualWay,
        needAdvancePay: data.needAdvancePay,

      });
    }, [data]);
  
    function submit(item: any) {
      const params = {
        id: data.id,
        type,
        conditions: yearData,
        advanceDays: item.advanceDays,
        years: item.years,
        days: item.days,
        times: item.times,

        annualWay: item.annualWay,

        needAdvancePay: item.needAdvancePay,

      };

      if (type === 10) {
        setVisiable(false);
      } else {
        API.saveApi(params)
          .then((res) => {
            message.success("保存成功");
            setVisiable(false);
          })
          .catch((err) => {
            message.error("请填写参数", err);
          });
      }

    }
  
    const onAdd = () => {
      setVisiable(false);

    };

    return (
      <Modal
        title={`${TYPE.typeEnum[type]}设置`}
        visible={visiable}
        onOk={form.submit}
        onCancel={() => onAdd()}
        maskClosable={false}
        getContainer={false}
        width={1000}
      >
        <Form
          form={form}
          onFinish={submit}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 15 }}
        >
          <FormItem
            name="days"

            label="假期"

            rules={[{ required: !(type === 1 || type === 8 || type === 6) }]}

            hidden={type === 1 || type === 8 || type === 6 || type === 10}

          >

            <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />

          </FormItem>
          <FormItem

            name="annualWay"
            rules={[{ required: type === 1 }]}
            hidden={!(type === 1)}
            label="年假方式"
          >
            <Radio.Group>
              <Radio value={1}>自然年</Radio>
              <Radio value={2}>转正日期滚动12个月</Radio>
            </Radio.Group>
          </FormItem>
          <FormItem

            name="years"
            label="前置条件(入职需>)"
            rules={[{ required: type === 1 }]}
            hidden={!(type === 1)}
          >

            <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />

          </FormItem>
          <FormItem
            name="advanceDays"
            label="需提前请假"

            rules={[
              {
                required: !(
                  type === 3 ||
                  type === 8 ||
                  type === 5 ||
                  type === 10
                ),
              },
            ]}
            hidden={type === 3 || type === 8 || type === 5 || type === 10}

          >

            <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />

          </FormItem>
          <FormItem
            name="times"
            label="月请假次数"
            rules={[{ required: type === 6 || type === 8 }]}
            hidden={!(type === 6 || type === 8)}
          >

            <InputNumber min={1} style={{ width: 200 }} addonAfter="次" />

          </FormItem>
          <FormItem
            name="conditions"
            label="年假范围"

            rules={[{ required: type === 1 }]}
            hidden={!(type === 1)}

          >

            <LeaveDetail
              year={year}
              yearData={yearData}
              setYearData={setYearData}
            />

          </FormItem>

          <FormItem
            name="needAdvancePay"
            label="提前预缴产假保险费"
            rules={[{ required: type === 4 }]}
            hidden={type !== 4}
          >
            <Radio.Group>
              <Radio value>是</Radio>
              <Radio value={false}>否</Radio>
            </Radio.Group>
          </FormItem>

        </Form>

        {type === 10 && (
          <div style={{ textAlign: "center" }}>假期(需审批,不限天数)</div>
        )}

      </Modal>
    );
  };
  

  export default CreateModal;