FEV2 / fw-cms

  import React, { useState } from 'react';
  import { InboxOutlined } from '@ant-design/icons';

  import { Button, Modal, Upload, message, Switch } from 'antd';

  import { useStore } from "@/pages/pms/storage/partShop";

  import {importStockFix, shopImport} from './api';
  import _ from 'lodash';
  import type { UploadFile, UploadProps } from 'antd/es/upload/interface';

  interface Props{
    stock?:boolean
  }

  const apiObj: {[key: number]: any} = {
    1: importStockFix,
    2: shopImport
  };

  const Dragger = Upload.Dragger;

  export default function UploadExcel(props: Props) {

    const { importVisible, setImportVisible, override, setOverride } = useStore();

    const [fileList, setFileList] = useState<UploadFile[]>([]);

    const [uploadResult, setUploadResult] = useState<any>();

    const [confirmLoading, setConfirmLoading] = useState(false);

    const {stock} = props;

  
    function beforeUpload(file: any) {

      setFileList([...fileList, file]);

      if (override == null) {
        message.error('请选择是否覆盖数据');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        message.error('文件不能超过20MB!');
        return false;
      }

      return false;

    }
  

    function submit() {
      if (override == null) {
        message.error('请选择是否覆盖数据');
        return;

      }

      setConfirmLoading(true);
      const type = stock ? 1 : 2;

      apiObj[type]({file: fileList[0], override}).then((res) => {

        setConfirmLoading(false);

        setUploadResult(res.data)

        message.success('导入成功');
      }).catch((e: any) => {
        setConfirmLoading(false);
        message.error(e.message);
      });

    }

    const uploadProps: UploadProps = {
      onRemove: (file) => {
        const index = fileList.indexOf(file);
        const newFileList = fileList.slice();
        newFileList.splice(index, 1);
        setFileList(newFileList);
      },
      beforeUpload,
      fileList,
    };
  

    return (
      <Modal
        visible={importVisible}
        maskClosable={false}

        title={uploadResult ? '导入结果' : stock ? '调运库存导入': '文件导入'}

        onCancel={() => { setImportVisible(false); setUploadResult(null); }}
        footer={
          <div>

            <Button
              loading={confirmLoading}
              onClick={() => {
                setImportVisible(false);
                setUploadResult(null);
              }}

            >
              取消
            </Button>

            <Button type="primary" onClick={_.throttle(submit, 3000)} disabled={!fileList.length} loading={confirmLoading}>确定</Button>

          </div>
        }
      >

        {!uploadResult ? (

          <div>
            <div style={{marginBottom: 20}}>
              <span style={{marginRight: 20, color: '#333', fontSize: 14}}>是否覆盖数据：</span>
              <Switch defaultChecked={override} onChange={(checked) => setOverride(checked)} />
            </div>

            {stock ? (

              <Dragger {...uploadProps}>

                <p className="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p className="ant-upload-text">将文件拖到此处上传</p>
              </Dragger>
            ) : (

              <Dragger {...uploadProps}>

                <p className="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p className="ant-upload-text">将文件拖到此处上传</p>
              </Dragger>
            )}

          </div>

        ) : (
          <div>
            <p>数据总条数：{uploadResult.totalCount}条</p>
            <p>成功条数：{uploadResult.successCount}条</p>
            <p>失败条数：{uploadResult.failedCount}条</p>
            {uploadResult.filePath ? (<a href={uploadResult.filePath} target="_blank" rel="noopener noreferrer">下载错误文件</a>):null}
          </div>
          )}
      </Modal>
    );
  }