yanzhen-design-vue/lib/components/upload/src/use-upload.cjs

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const iconsVue = require("@ant-design/icons-vue");
const core = require("@vueuse/core");
const utils = require("@yanzhen-libs/utils");
const utilsVue = require("@yanzhen-libs/utils-vue");
const antDesignVue = require("ant-design-vue");
const utils$1 = require("ant-design-vue/es/upload/utils");
const lodashEs = require("lodash-es");
require("./hooks/index.cjs");
const useFileListConfig = require("./hooks/use-file-list-config.cjs");
const useUploadApis = require("./hooks/use-upload-apis.cjs");
const upload = require("./upload.cjs");
const useUploadPreview = require("./use-upload-preview.cjs");
const useUploadRules = require("./hooks/use-upload-rules.cjs");
function useUpload(props, emit) {
  const _ref = vue.ref(null);
  const attrs = vue.useAttrs();
  const slots = vue.useSlots();
  const [DefineUploadIconRender, ReusableUploadIconRender] = core.createReusableTemplate();
  const [DefineUploadPreview, ReusableUploadPreview] = core.createReusableTemplate();
  const isEditTable = vue.computed(
    () => lodashEs.isString(props.nativeTag) && props.nativeTag.startsWith("edit-table")
  );
  const { customUploadRequest } = useUploadApis.provideUploadApi(props);
  const { fileListRef, isImageType } = useFileListConfig.useFileListConfig(props, emit);
  const {
    imagePreviewRef,
    filePreviewRef,
    handleOpenPreview,
    ctx: previewCtx
  } = useUploadPreview.useUploadPreview(props, emit);
  const description = vue.computed(() => {
    if (utils.isEmptyValue(props.uploadDesc)) return;
    return `${props.uploadDesc || ""}文件类型:${props.accept || ""}`;
  });
  const progressProps = vue.computed(() => {
    return utils.mergeWith(
      {
        strokeColor: { "0%": "#108ee9", "100%": "#87d068" }
      },
      props.progress ?? {}
    );
  });
  const {
    acceptRef,
    maxCountRef,
    maxCountRemainderRef,
    maxSizeRef,
    validate: handleValidate
  } = useUploadRules.useUploadRules(fileListRef, props);
  const imageUploadErrCollect = vue.ref([]);
  const imageUploadTotalCount = vue.ref(0);
  const imageUploadHasError = vue.ref(false);
  const curBeforeImageUploads = vue.ref(0);
  const currentImageUploads = vue.ref(0);
  console.log(
    "图片最大数量",
    props,
    maxSizeRef,
    vue.unref(imageUploadErrCollect),
    vue.unref(maxCountRef),
    vue.unref(maxCountRemainderRef)
  );
  const multipleRef = vue.computed(() => {
    const maxCount = vue.unref(maxCountRef);
    const maxCountRemainder = vue.unref(maxCountRemainderRef);
    switch (true) {
      case (maxCount === 1 || maxCountRemainder <= 1):
        return false;
      default:
        return props.multiple;
    }
  });
  const handleBeforeUpload = async (file, fileList) => {
    if (vue.unref(isImageType)) curBeforeImageUploads.value++;
    if (lodashEs.isFunction(props.beforeUpload)) {
      const flag2 = await props.beforeUpload(file, fileList);
      return flag2 || antDesignVue.Upload.LIST_IGNORE;
    }
    let flag = true;
    if (vue.unref(isImageType)) imageUploadTotalCount.value = fileList.length;
    const valid = handleValidate({
      file,
      selectFileList: fileList,
      fileList: vue.unref(fileListRef).concat(fileList),
      isImageType: vue.unref(isImageType)
    });
    if (valid) {
      if (vue.unref(isImageType)) {
        imageUploadErrCollect.value.push(valid[0]);
        imageUploadHasError.value = true;
      } else antDesignVue.message.error(valid[0].message);
      flag = false;
    }
    if (vue.unref(isImageType)) {
      curBeforeImageUploads.value--;
      console.log("上传的图片-都不满足", curBeforeImageUploads.value);
      if (curBeforeImageUploads.value === 0) {
        handleImageUploadComplete(true);
      }
    }
    console.log(
      "1、BeforeUpload-图片校验",
      file,
      fileList,
      valid,
      fileList.length,
      imageUploadErrCollect
    );
    return flag || antDesignVue.Upload.LIST_IGNORE;
  };
  const handleCustomRequest = async (options) => {
    if (vue.unref(isImageType)) currentImageUploads.value++;
    const { file, onError, onProgress, onSuccess } = options;
    if (lodashEs.isFunction(props.customRequest)) {
      return props.customRequest(options);
    }
    if (typeof file === "string") {
      onSuccess == null ? void 0 : onSuccess(file);
      return;
    }
    const valid = handleValidate({ file });
    console.log("2、CustomRequest-上传图片", currentImageUploads.value, options, file, valid);
    if (valid) {
      antDesignVue.message.error(valid == null ? void 0 : valid[0].message);
      onError == null ? void 0 : onError(new Error(valid == null ? void 0 : valid[0].message));
      return;
    }
    const progress = {
      percent: 0
    };
    onProgress == null ? void 0 : onProgress(progress);
    const timer = setInterval(() => {
      if (progress.percent < 80) {
        progress.percent = progress.percent + 5;
        onProgress == null ? void 0 : onProgress(progress);
      } else {
        clearInterval(timer);
      }
    }, 500);
    try {
      const result = await customUploadRequest({
        ...options,
        data: { uploadType: props.uploadType, ...options.data ?? {} }
      });
      if ((result == null ? void 0 : result.code) !== 0) {
        onProgress == null ? void 0 : onProgress({
          percent: 80
        });
        onError == null ? void 0 : onError(new Error(result == null ? void 0 : result.message));
        imageUploadHasError.value = true;
      } else {
        onProgress == null ? void 0 : onProgress({
          percent: 100
        });
        onSuccess == null ? void 0 : onSuccess(result.data);
      }
    } catch (e) {
      onProgress == null ? void 0 : onProgress({
        percent: 80
      });
      onError == null ? void 0 : onError(e);
      imageUploadHasError.value = true;
    } finally {
      if (vue.unref(isImageType)) {
        currentImageUploads.value--;
        console.log("最后一次", currentImageUploads.value);
        if (currentImageUploads.value === 0) {
          handleImageUploadComplete();
        }
      }
      clearInterval(timer);
    }
  };
  const handleImageUploadComplete = (beforeUploadFlag = false) => {
    console.log("汇总提示！！！-end", imageUploadHasError.value, imageUploadErrCollect.value);
    if (imageUploadHasError.value) {
      const imageUploadErrCollectValue = vue.unref(imageUploadErrCollect);
      const imageUploadErrCollectLen = imageUploadErrCollectValue.length;
      if (beforeUploadFlag && imageUploadErrCollectLen !== vue.unref(imageUploadTotalCount)) return;
      const maxSizeErrData = imageUploadErrCollectValue.filter(
        (el) => typeof el.type === "object" && el.type !== null && "useDocMsg" in el.type
      );
      const otherErrData = imageUploadErrCollectValue.filter((el) => typeof el.type === "string");
      const uniqueErrorTypes = Array.from(new Set(otherErrData.map((el) => el.type)));
      const uniqueErrData = uniqueErrorTypes.map(
        (type) => {
          var _a;
          return (_a = otherErrData.find((el) => el.type === type)) == null ? void 0 : _a.message;
        }
      );
      const maxSizeErrDataLen = maxSizeErrData.length;
      if (maxSizeErrDataLen) {
        const firstError = maxSizeErrData[0];
        let maxSizeErrMsg = firstError.message;
        if (typeof firstError.type === "object" && firstError.type !== null) {
          const { useDocMsg, maxSize } = firstError.type;
          if (useDocMsg)
            maxSizeErrMsg = `有${maxSizeErrDataLen}张图片大小超过${maxSize}兆，无法上传成功，请重新选择图片上传`;
        }
        uniqueErrData.push(maxSizeErrMsg);
      }
      uniqueErrData.length && uniqueErrData.forEach((msg) => {
        antDesignVue.message.error(msg);
      });
      imageUploadErrCollect.value = [];
      imageUploadHasError.value = false;
    }
  };
  const config = vue.computed(() => lodashEs.pick(props, ...Object.keys(upload.AntUpload.props)));
  const proxyProps = utilsVue.useProxyProps(config, upload.AntUpload.emits, {
    emit,
    exclude: [
      "value",
      "fileList",
      "onUpdate:fileList",
      "multiple",
      "accept",
      "progress",
      "onPreview"
    ],
    filter: true
  });
  const propsRef = vue.computed(() => {
    return vue.mergeProps(vue.unref(attrs), vue.unref(proxyProps));
  });
  function UploadIconRender({ file, listType }) {
    var _a;
    const isLoading = file.status === "uploading";
    const isImageUrl = props.isImageUrl ?? utils$1.isImageUrl;
    const uploading = (_a = props.locale) == null ? void 0 : _a.uploading;
    const fileIcon = isImageUrl && isImageUrl(file) ? vue.h(iconsVue.PictureTwoTone) : vue.h(iconsVue.FileTwoTone);
    switch (true) {
      case listType === "picture":
        return isLoading ? vue.h(iconsVue.LoadingOutlined) : fileIcon;
      case listType === "picture-card":
        return isLoading && !!uploading ? uploading : fileIcon;
      default:
        return isLoading ? vue.h(iconsVue.LoadingOutlined) : vue.h(iconsVue.PaperClipOutlined);
    }
  }
  const ctx = {
    ...previewCtx,
    _ref
  };
  const exposeCtx = vue.reactive(ctx);
  return {
    ...ctx,
    slots,
    isEditTable,
    isImageType,
    multipleRef,
    fileListRef,
    acceptRef,
    progressProps,
    propsRef,
    description,
    maxCountRef,
    handleCustomRequest,
    handleBeforeUpload,
    UploadIconRender,
    DefineUploadIconRender,
    ReusableUploadIconRender,
    DefineUploadPreview,
    ReusableUploadPreview,
    // Preview
    imagePreviewRef,
    filePreviewRef,
    handleOpenPreview,
    // expose
    ctx,
    exposeCtx
  };
}
exports.useUpload = useUpload;