FEV2 / fw-cms

  import React, { useEffect, useState } from 'react';
  import { InboxOutlined } from '@ant-design/icons';
  import { Button, Modal, Upload, message } from 'antd';

  import ConfirmDetailModal from '@/pages/pms/partPlan/PlanShipping/components/ConfirmDetailModal';

  import usePagination from '@/hooks/usePagination';
  import { getStoragePage } from '@/pages/pms/storage/StorageManage/api';
  import { getPageListApi, Item } from '@/pages/pms/partPlan/PlanSupplier/api';
  import SelectRow from '@/pages/pms/comonents/SelectRow';

  import useInitail from "@/hooks/useInitail";

  import { getShopApi } from '@/pages/pms/storage/partShop/api';

  
  const Dragger = Upload.Dragger;
  
  interface Props {

    getList: () => any

    importVisible: boolean

    brands: any[]

    setImportVisible: (v: boolean) => any

  }
  

  export default function UploadExcel({ getList, importVisible, setImportVisible, brands }: Props) {
    const [delay, setDelay] = useState(true);

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

    const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, {pageSize: 1000});

    const { list: suppliers, setParams, innerParams } = usePagination<Item>(getPageListApi, { pageSize: 500, supplierType: 10 }, {delay});

    const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
    const [param, setParam] = useState({ brandId: null, storageId: null, supplierId: null, settleShopId: null});

    const [visibleDetail, setVisibleDetail] = useState(false);

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

      if (!importVisible) {

        setUploadResult(null);

        setParam({ brandId: null, storageId: null, supplierId: null, settleShopId: null });
        setFileList([]);

      }

    }, [importVisible]);

    useEffect(() => {
      if (!visibleDetail) {
        setImportVisible(false);
      }
    }, [visibleDetail]);
  

    function beforeUpload(file: any) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        message.error('文件不能超过20MB!');
      }
      return isLt2M;
    }
  
    function handleChange(info: any) {
      const { file: { status, response }, fileList } = info;
      if (status !== 'uploading' && response) {
        const { success, result, data } = response;
        if (status === 'done' && success) {
          message.success(`${info.file.name} 上传成功`);
          // 调用上传接口
          setUploadResult(data);

          getList();

        } else if (response && !success) {
          message.error(`${info.file.name} 上传失败: ${result}`);
        }
      }
      setFileList(fileList.splice(-1));
    }
    const uploadProps = {
      accept: '.xls, .xlsx',
      name: 'file',
      fileList,
      multiple: false,

      data: param,

      action: `/api/pms/app/part/shipping/save`,
      onChange: (file: any) => handleChange(file),
      beforeUpload: (info: any) => beforeUpload(info)
    };
    return (
      <Modal

        visible={importVisible}

        maskClosable={false}
        title={uploadResult ? '导入结果' : '文件导入'}

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

        footer={

          <Button onClick={() => { setImportVisible(false); setUploadResult(null); }}>取消</Button>

        }
      >

        <div style={{ display: 'flex', flexDirection: 'column'}}>
          <SelectRow
            title="品牌"
            value={param.brandId}
            data={brands}
            id="id"
            name="name"
            onChange={brandId => {
              setParam({...param, brandId});
              setParams({ ...innerParams, brandId, current: 1 }, true);
              setDelay(false);
            }}
          />
          <SelectRow
            title="供应商"
            value={param.supplierId}
            data={suppliers}
            id="supplierId"
            name="supplierName"
            onChange={supplierId => setParam({ ...param, supplierId })}
          />
          <SelectRow
            title="库房"
            value={param.storageId}
            data={storages}
            id="id"
            name="storageName"
            onChange={storageId => setParam({ ...param, storageId })}
          />

          <SelectRow

            title="结算门店"
            value={param.settleShopId}
            data={shops}

            id="id"
            name="name"

            onChange={settleShopId => setParam({ ...param, settleShopId })}

          />

        </div>
        {!uploadResult ? !!param.brandId && !!param.storageId && !!param.supplierId && (

          <div>
            <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>失败条数：<span style={{ color: 'red' }}>{uploadResult.failedCount}</span>条</p>
            {uploadResult.filePath ? (<a href={uploadResult.filePath} target="_blank" rel="noopener noreferrer">下载错误文件</a>) : null}

            {!!uploadResult.data && !!uploadResult.successCount && (
              <div style={{marginTop: 10}}>
                <p>供应商：{uploadResult.data?.supplierName || '--'}</p>
                <p>发运单号：{uploadResult.data?.shippingNo || '--'}</p>
                <p>发运品种：{uploadResult.data?.cnt || 0}种</p>
                <p>本次导入金额：{uploadResult.data?.importAmount || 0}元</p>
                <a onClick={() => { setVisibleDetail(true); }}>去确认</a>
              </div>
            )}

          </div>
        )}

        <ConfirmDetailModal
          visible={visibleDetail}
          item={uploadResult?.data || {}}

          confirm

          onCancel={() => setVisibleDetail(false)}

          fetchList={() => { setUploadResult(null); getList(); }}
        />

      </Modal>
    );
  }