FEV2 / fw-cms

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

  import { Select, message, Form, Divider, Button, InputNumber } from "antd";

  import { useStore } from "../index";
  import { saveCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";

  import EditTagList from "./EditTagList";

  import { invoiceRequirements, payWay, RequirementsTypeEnum } from "@/pages/finance/CompanyRelationCreate/entity";

  
  const { Option } = Select;
  
  interface Props {
    onPrevious?: () => void;
  }
  
  function SelectModal({ onPrevious }: Props) {
    const [form] = Form.useForm();
    const {

      // visible,
      // selected,
      // setVisible,

      companyParams,

      // comBussinessList,
      // comBussinessLoading,

      setDisabled,

      selectData,
      setSelectData,
    } = useStore();
    const [submitLoading, setSubmitLoading] = useState(false);
  
    useEffect(() => {
      const formDate = transFormData(selectData);
      form.setFieldsValue({ ...formDate });
    }, [selectData]);
  
    function transFormData(originData: TradeCompany.ComList[]) {
      let res = {};
      const comp = originData.map((it) => it.compName);
      res.comp = comp;
      return res;
    }
  

    function onCancel() {

      setSelectData([]);

      history.back();

    }
  
    // 保存

    function _onOk(formData: any) {
      const pa = transformDTO(formData);
      setSubmitLoading(true);
      saveCompanyRelationApi(pa)
        .then((res) => {
          message.success("保存成功");

          setSubmitLoading(false);
          setDisabled(true);
          onCancel();
        })
        .catch((e) => {
          setSubmitLoading(false);
          message.error(e.message);
        });
    }
  
    function transformDTO(formData: any) {

      const { beforeReimburse, comp = [] } = formData;

      const compList = selectData.filter((item) => comp.find((y) => y === item.compName));
      const relationCompanyList = compList.map((item) => ({

        ...formData,
        comp: undefined,

        compId: item.id,
        beforeReimburse: beforeReimburse === RequirementsTypeEnum["支付前"],

      }));
      const pa = {
        ...companyParams,
        relationCompanyList,
      };
      return pa;

    }

    return (
      <>
        <Form
          form={form}
          labelCol={{
            xs: { span: 24 },
            sm: { span: 8 },
            md: { span: 6 },
          }}
          wrapperCol={{
            xs: { span: 24 },
            sm: { span: 10 },
            md: { span: 15 },
          }}
          onFinish={_onOk}
        >
          <Form.Item label="往来单位" name="comp">
            <EditTagList />
          </Form.Item>
          <Form.Item label="发票要求" name="beforeReimburse" rules={[{ required: true, message: "请选择发票要求" }]}>
            <Select placeholder="请选择发票要求">
              {invoiceRequirements.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.label}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label="发票金额要求比例"
            name="billAmountRatio"

            rules={[
              { required: true, message: "请输入发票金额要求比例" },
              { pattern: /^(100)$|^((\d|[1-9]\d)(\.\d{1,2})?)$/, message: "请输入0-100之间的数字(保留两位小数)" },
            ]}

          >
            <InputNumber
              min={0}
              max={100}
              style={{ width: "100%" }}
              formatter={(value) => `${value}%`}
              parser={(value) => value!.replace("%", "")}
            />
          </Form.Item>
          <Form.Item label="支持结算方式" name="settleMethods" rules={[{ required: true, message: "请选择结算方式" }]}>

            <Select placeholder="请选择结算方式" mode="multiple">

              {payWay.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.label}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="对账周期" name="accountCheckPeriod" rules={[{ required: true, message: "请输入对账周期" }]}>
            <InputNumber
              addonBefore="每月"
              placeholder="请输入"
              min={1}
              precision={0}
              max={31}
              addonAfter="日"
              style={{ width: "100%" }}
            />
          </Form.Item>
        </Form>
        <div style={{ width: "100%", textAlign: "center", marginTop: 30 }}>
          <Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>
            返回列表
          </Button>
          <Divider type="vertical" />
          <Button
            type="primary"
            style={{ marginBottom: 10 }}
            onClick={() => {
              const comp = form.getFieldValue("comp");
              const _selectData = selectData.filter((item) => comp.find((it) => it === item.compName));
  
              setSelectData(_selectData);
              onPrevious && onPrevious();
            }}
          >
            返回上一步
          </Button>
          <Divider type="vertical" />

          <Button type="primary" style={{ marginBottom: 10 }} onClick={() => form.submit()} loading={submitLoading}>

            保存
          </Button>
        </div>
      </>
    );
  }
  
  export default memo(SelectModal);