yuang-framework-ui-pc/es/yu-framework-attachment-upload/index.js

yuang-framework-ui-pc Library

import { defineComponent, mergeModels, useModel, computed, ref, onMounted, watch, createBlock, openBlock } from "vue";
import { ElMessageBox } from "element-plus/es";
import { EleMessage } from "../utils/message";
import EleUploadList from "../ele-upload-list/index";
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
import * as imageConversion from "image-conversion";
import { deepClone } from "yuang-framework-ui-common/lib/utils/objectUtils";
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "YuFrameworkAttachmentUpload" },
  __name: "index",
  props: /* @__PURE__ */ mergeModels({
    param: { default: {} }
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const modelValue = useModel(__props, "modelValue");
    const componentParam = computed(() => ({
      modelValue: modelValue.value,
      // 类型，默认值：edit
      type: "edit",
      // 模式，默认值：file
      mode: "file",
      // 最大数量，默认值：5
      maxCount: 5,
      // 最大大小，默认值：5，单位：M
      maxSize: 5,
      // 是否压缩图片，默认值：false
      isCompressImage: false,
      ...props.param
    }));
    const fileList = ref([]);
    const listType = ref(componentParam.value.mode);
    const accept = ref("");
    if (componentParam.value.mode == "file") {
      accept.value = [".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".wps", ".dps", ".et", ".htm", ".html", ".js", ".css", ".svg", ".txt", ".sql", ".zip", ".rar", ".gz", ".bz2", ".mp3", ".mp4", ".mov", ".gif", ".jpg", ".jpeg", ".png", ".bmp"].join(",");
    } else if (componentParam.value.mode == "image") {
      accept.value = [".gif", ".jpg", ".jpeg", ".png", ".bmp"].join(",");
    }
    const isLoading = ref(false);
    const checkFile = (file) => {
      if (!file) {
        return;
      }
      if (componentParam.value.mode === "image" && !file.type.startsWith("image")) {
        EleMessage.error("只能选择图片");
        return;
      }
      if (file.size / 1024 / 1024 > componentParam.value.maxSize) {
        EleMessage.error(`图片大小不能超过${componentParam.value.maxSize}MB`);
        return;
      }
      return true;
    };
    let isExecuting = false;
    let pendingExecute = false;
    onMounted(() => {
      init();
    });
    const init = () => {
      console.log("modelValue.value", modelValue.value);
      console.log("componentParam.value", componentParam.value);
      if (!modelValue.value) {
        return;
      }
      if (isExecuting) {
        pendingExecute = true;
        return;
      }
      isExecuting = true;
      fileList.value = [];
      http.post(`/framework-api/core/framework-attachment/selectPage`, { codeForEqual: modelValue.value, pageSize: 100 }).then((res) => {
        let attachemtList = res.data.data.records;
        for (let i = 0; i < attachemtList.length; i++) {
          fileList.value.push({
            key: attachemtList[i].id,
            id: attachemtList[i].id,
            name: attachemtList[i].name,
            url: attachemtList[i].fullUrl,
            status: "done"
          });
        }
      }).finally(() => {
        isExecuting = false;
        if (pendingExecute) {
          pendingExecute = false;
          init();
        }
      });
    };
    const handleUpload = async (uploadItem, retry) => {
      if (!checkFile(uploadItem.file)) {
        return;
      }
      if (!retry) {
        fileList.value.push({ ...uploadItem });
      }
      const item = fileList.value.find((t) => t.key === uploadItem.key);
      console.log(JSON.parse(JSON.stringify(item)));
      if (!item) {
        return;
      }
      item.status = "uploading";
      item.progress = 0;
      let uploadFile = uploadItem.file;
      if (componentParam.value.mode === "image" && componentParam.value.isCompressImage && uploadFile) {
        let beforeCompressSize = uploadFile.size;
        try {
          const compressBlob = await imageConversion.compressAccurately(uploadFile, 512);
          uploadFile = new File([compressBlob], uploadFile.name, { type: uploadFile.type });
          console.log(`压缩前：${(beforeCompressSize / 1024).toFixed(2)}KB | 压缩后：${(uploadFile.size / 1024).toFixed(2)}KB`);
        } catch (error) {
          EleMessage.warning("图片压缩失败，将上传原图");
          console.error("图片压缩异常：", error);
        }
      }
      let formData = new FormData();
      formData.append("code", modelValue.value);
      formData.append("multipartFile", uploadFile, uploadFile.name);
      http({
        url: `/framework-api/core/framework-attachment/uploadAttachment`,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData
      }).then((res) => {
        EleMessage.success(res.data.message);
        item.progress = 100;
        item.status = "done";
        item.id = res.data.data.id;
        item.url = res.data.data.fullUrl;
        emitChange();
      }).catch((e) => {
        item.status = "exception";
        EleMessage.error(e.message);
      });
    };
    const handleEditUpload = async ({ item, newItem }) => {
      if (!checkFile(newItem.file)) {
        return;
      }
      console.log("item", item);
      console.log("newItem", newItem);
      newItem.status = "uploading";
      newItem.progress = 0;
      let uploadFile = newItem.file;
      if (componentParam.value.mode === "image" && componentParam.value.isCompressImage && uploadFile) {
        let beforeCompressSize = uploadFile.size;
        try {
          const compressBlob = await imageConversion.compressAccurately(uploadFile, 512);
          uploadFile = new File([compressBlob], uploadFile.name, { type: uploadFile.type });
          console.log(`压缩前：${(beforeCompressSize / 1024).toFixed(2)}KB | 压缩后：${(uploadFile.size / 1024).toFixed(2)}KB`);
        } catch (error) {
          EleMessage.warning("图片压缩失败，将上传原图");
          console.error("图片压缩异常：", error);
        }
      }
      let formData = new FormData();
      formData.append("id", item.id);
      formData.append("code", modelValue.value);
      formData.append("multipartFile", uploadFile, uploadFile.name);
      http({
        url: `/framework-api/core/framework-attachment/uploadAttachment`,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData
      }).then((res) => {
        EleMessage.success(res.data.message);
        const oldItem = fileList.value.find((t) => t.key === item.key);
        if (oldItem) {
          oldItem.url = void 0;
          oldItem.name = newItem.name;
          oldItem.file = newItem.file;
          oldItem.status = void 0;
          oldItem.progress = 0;
        }
        emitChange();
      }).catch((e) => {
        item.status = "exception";
        EleMessage.error(e.message);
      });
    };
    const emitChange = () => {
      if (!modelValue.value) {
        return;
      }
      http.post(`/framework-api/core/framework-attachment/selectPage`, { codeForEqual: modelValue.value, pageSize: 100 }).then((res) => {
        let attachemtList = res.data.data.records;
        emit("change", attachemtList);
      });
    };
    const handleRemove = (uploadItem) => {
      if (uploadItem.status == "exception") {
        fileList.value.splice(fileList.value.indexOf(uploadItem), 1);
        emitChange();
        return;
      }
      let id = uploadItem.id;
      ElMessageBox.confirm("确定要删除吗?", "系统提示", { type: "warning", draggable: true }).then(() => {
        http.get(`/framework-api/core/framework-attachment/deleteInfo`, { params: { id } }).then((res) => {
          EleMessage.success(res.data.message);
          fileList.value.splice(fileList.value.indexOf(uploadItem), 1);
          emitChange();
        });
      });
    };
    const handleRetryUpload = (uploadItem) => {
      handleUpload(uploadItem, true);
    };
    const getAttachmentList = () => {
      return deepClone(fileList.value);
    };
    watch(
      () => componentParam,
      () => {
        console.log("props.param发生改变", props.param);
        init();
      },
      { deep: true, immediate: true }
    );
    __expose({
      getAttachmentList
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(EleUploadList, {
        drag: true,
        tools: true,
        modelValue: fileList.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fileList.value = $event),
        limit: componentParam.value.maxCount,
        listType: listType.value,
        accept: accept.value,
        readonly: isLoading.value,
        disabled: componentParam.value.type != "edit",
        sortable: { forceFallback: true },
        onUpload: handleUpload,
        onRetry: handleRetryUpload,
        onRemove: handleRemove,
        onEditUpload: handleEditUpload
      }, null, 8, ["modelValue", "limit", "listType", "accept", "readonly", "disabled"]);
    };
  }
});
export {
  _sfc_main as default
};