EnginenoUpload.tsx 3.42 KB
import React, { useState, useEffect } from "react";
import { RightOutlined, UploadOutlined } from "@ant-design/icons";
import { Button, Modal, Upload, message, Select, Form } from "antd";
import { bankList } from "../entity";
import { importEnginenoApi } from '../api';
import { useStore } from "../index";

const Option = Select.Option;
interface Props {
  visible: boolean;
  onCancel: () => any;
}
const invoiceFilePath = {
  1: "invoice/bill-chang-an-template.xlsx",
  2: "invoice/bill-ceb-template.xls",
  3: "invoice/bill-spde-template.xls",
};

export default function Collateral({ visible, onCancel }: Props) {
  const { setBreadcrumbs, breadcrumbs, setCollateralItem, setUploadCollateralModal, uploadCollateralModal } = useStore();
  const [form] = Form.useForm();
  const [saveLoading, setSaveLoading] = useState(false);
  const [bankType, setBankType] = useState<string>();

  useEffect(() => {
    if (visible) {
      if (uploadCollateralModal) {
        form.setFieldsValue({
          ...uploadCollateralModal,
        });
      }
    }
  }, [visible]);

  function beforeUpload(file: any) {
    const isLt2M = file.size / 1024 / 1024 < 20;
    if (!isLt2M) {
      message.error("文件不能超过20MB!");
    }
    return isLt2M;
  }
  function handleChange(e: any) {
    if (Array.isArray(e)) {
      return e.slice(-1);
    }
    if (!e.file.status) return [];
    if (e.file.status == "error") {
      message.error("文件上传出错,请重新上传");
      return "";
    }
    return e && e.fileList.slice(-1);
  }
  const uploadProps = {
    accept: ".xlsx,.xls",
    name: "file",
    multiple: false,
    action: `api/file/upload`,
    beforeUpload: (info: any) => beforeUpload(info),
  };
  function saveBill(fieldsValue: any) {
    setSaveLoading(true);
    const pa = {
      fid: fieldsValue.fid[0].response.data,
      // invoiceType: fieldsValue.invoiceType,
    };

    // 点击确定按钮,发送请求
    importEnginenoApi(pa)
      .then((res) => {
        message.success("操作成功");
        setSaveLoading(false);
        onCancel(); //添加押品数据modal不可见
        // setCollateralItem(res.data);
        // setBreadcrumbs([...breadcrumbs, { name: "确认押品清单", key: "comfirmCollateral" }]);
        // setUploadCollateralModal(fieldsValue);
      })
      .catch((e) => {
        setSaveLoading(false);
        message.error(e.message);
      });
  }
  return (
    <Modal
      visible={visible}
      maskClosable={false}
      title="发动机号导入"
      onCancel={() => onCancel()}
      confirmLoading={saveLoading}
      onOk={form.submit}
      afterClose={() => {
        form.resetFields();
        // setBankType(undefined);
      }}
    >
      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} onFinish={saveBill}>
        <Form.Item
          label="数据文档"
          name="fid"
          extra={
            <a href="api/fvm/ticket/engineNoTemplateExport" rel="noopener noreferrer">
              下载模板
              <RightOutlined />
            </a>
          }
          rules={[{ required: true, message: "请上传发动机号数据文档" }]}
          valuePropName="fileList"
          getValueFromEvent={handleChange}
        >
          <Upload {...uploadProps}>
            <Button icon={<UploadOutlined />} style={{ width: 300 }}>
              上传发动机号数据文档
            </Button>
          </Upload>
        </Form.Item>
      </Form>
    </Modal>
  );
}