qiushouGoodsHouTai/src/components/Z_upFileOtherList/index.tsx

import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { Button, Popconfirm } from "antd";
import { forwardRef, useImperativeHandle } from "react";
import { MessageFu } from "@/utils/message";
import { API_upFile } from "@/store/action/layout";
import { fileDomInitialFu } from "@/utils/domShow";
import {
  EyeOutlined,
  CloseOutlined,
  DownloadOutlined,
} from "@ant-design/icons";
import filesLookFu from "@/utils/filesLook";
import { baseURL } from "@/utils/http";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

export type FileListType = {
  id: number;
  name: string;
  filePath: string;
};

type Props = {
  max: number; //最多上传多少个文件
  isLook: boolean; //是不是查看
  size: number; //上传文件大小（M）
  dirCode: string; //文件的code码
  myUrl: string;
  fromData?: any;
  ref: any; //当前自己的ref，给父组件调用
  oldFileList: FileListType[]; //就附件数组，用来回显数据
};

function Z_upFileOtherList(
  { max, isLook, size, dirCode, myUrl, fromData, oldFileList }: Props,
  ref: any
) {
  // isFileDonw 全局的是否允许下载
  const isFileDonw = useSelector(
    (state: RootState) => state.A0Layout.isFileDonw
  );

  useEffect(() => {
    if (oldFileList && oldFileList.length) setFileList(oldFileList);
  }, [oldFileList]);

  // 附件数组
  const [fileList, setFileList] = useState<FileListType[]>([]);

  const myInput = useRef<HTMLInputElement>(null);

  // 上传 附件 函数
  const handeUpPhoto = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files) {
        // 拿到files信息
        const filesInfo = e.target.files[0];

        // 校验大小
        if (filesInfo.size > size * 1024 * 1024) {
          e.target.value = "";
          return MessageFu.warning(`最大支持${size}M!`);
        }
        // 创建FormData对象
        const fd = new FormData();
        // 把files添加进FormData对象（‘photo’为后端需要的字段）
        fd.append("type", "doc");
        fd.append("dirCode", dirCode);
        fd.append("file", filesInfo);

        if (fromData) {
          for (const k in fromData) {
            if (fromData[k]) fd.append(k, fromData[k]);
          }
        }

        e.target.value = "";

        try {
          const res = await API_upFile(fd, myUrl);
          if (res.code === 0) {
            MessageFu.success("上传成功!");
            setFileList([...fileList, res.data]);
          }
          fileDomInitialFu();
        } catch (error) {
          fileDomInitialFu();
        }
      }
    },
    [dirCode, fileList, fromData, myUrl, size]
  );

  // 给父组件返回 fileIds
  const fileIdsRefFu = useCallback(() => {
    return fileList.map((v) => v.id).join(",");
  }, [fileList]);

  // 可以让父组件调用子组件的方法
  useImperativeHandle(ref, () => ({
    fileIdsRefFu,
  }));

  return (
    <div className={styles.Z_upFileOtherList}>
      <input
        id="upInput"
        type="file"
        ref={myInput}
        onChange={(e) => handeUpPhoto(e)}
      />

      {fileList.length < max && !isLook ? (
        <Button onClick={() => myInput.current?.click()}>上传</Button>
      ) : null}

      <div className="ZOlistBox mySorrl">
        {fileList.map((v) => (
          <div key={v.id} className="ZOlistRow">
            <div className="ZOlistRowll" title={v.name}>
              {v.name}
            </div>
            <div className="ZOlistRowrr">
              {filesLookFu(v.name) ? (
                <span>
                  <EyeOutlined
                    rev={undefined}
                    onClick={() => filesLookFu(v.name, v.filePath)}
                  />
                </span>
              ) : null}

              {isFileDonw ? (
                <a
                  href={baseURL + v.filePath}
                  download={v.name}
                  target="_blank"
                  rel="noreferrer"
                >
                  <DownloadOutlined rev={undefined} />
                </a>
              ) : null}

              {isLook ? null : (
                <Popconfirm
                  title="删除后无法恢复，是否删除?"
                  okText="删除"
                  cancelText="取消"
                  onConfirm={() =>
                    setFileList(fileList.filter((c) => c.id !== v.id))
                  }
                >
                  <span>
                    <CloseOutlined rev={undefined} />
                  </span>
                </Popconfirm>
              )}
            </div>
          </div>
        ))}
      </div>

      <div className="ZOtit">格式要求：最大支持500M，最多{max}个。</div>
    </div>
  );
}

export default forwardRef(Z_upFileOtherList);