yuang-framework-ui-pc/lib/yu-framework-attachment-upload/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const es = require("element-plus/es");
const message = require("../utils/message");
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
const uuidUtils = require("yuang-framework-ui-common/lib/utils/uuidUtils");
const applicationConfig = require("yuang-framework-ui-common/lib/config/applicationConfig");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "YuFrameworkAttachmentUpload" },
  __name: "index",
  props: /* @__PURE__ */ vue.mergeModels({
    modelValue: {},
    param: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    props.param.mode = props.param.mode ?? "file";
    props.param.maxCount = props.param.maxCount ?? 5;
    props.param.maxSize = props.param.maxSize ?? 5;
    const images = vue.ref([]);
    const listType = vue.ref(props.param.mode);
    const accept = vue.ref("");
    if (props.param.mode == "file") {
      accept.value = ".txt,.xlsx";
    } else if (props.param.mode == "image") {
      accept.value = ".png,.jpg,.jpeg,.gif,.svg";
    }
    const isLoading = vue.ref(false);
    const checkFile = (file) => {
      if (!file) {
        return;
      }
      if (props.param.mode === "image" && !file.type.startsWith("image")) {
        message.EleMessage.error("只能选择图片");
        return;
      }
      if (file.size / 1024 / 1024 > props.param.maxSize) {
        message.EleMessage.error(`图片大小不能超过${props.param.maxSize}MB`);
        return;
      }
      return true;
    };
    const model = vue.useModel(__props, "modelValue");
    model.value = model.value ?? uuidUtils.getShortUuid();
    vue.onMounted(() => {
      init();
    });
    const init = () => {
      images.value = [];
      httpConfig.http.post(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { code: model.value, pageSize: 100 }).then((res) => {
        let attachemtList = res.data.data.records;
        for (let i = 0; i < attachemtList.length; i++) {
          images.value.push({
            key: attachemtList[i].id,
            id: attachemtList[i].id,
            name: attachemtList[i].name,
            url: attachemtList[i].fullUrl,
            status: "done"
          });
        }
      });
    };
    const handleUpload = (uploadItem, retry) => {
      if (!checkFile(uploadItem.file)) {
        return;
      }
      if (!retry) {
        images.value.push({ ...uploadItem });
      }
      const item = images.value.find((t) => t.key === uploadItem.key);
      console.log(JSON.parse(JSON.stringify(item)));
      if (!item) {
        return;
      }
      item.status = "uploading";
      item.progress = 0;
      let formData = new FormData();
      formData.append("code", model.value);
      formData.append("multipartFile", uploadItem.file, uploadItem.file.name);
      httpConfig.http({
        url: `${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/uploadAttachment`,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData
      }).then((res) => {
        message.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";
        message.EleMessage.error(e.message);
      });
    };
    const handleEditUpload = ({ item, newItem }) => {
      if (!checkFile(newItem.file)) {
        return;
      }
      console.log("item", item);
      console.log("newItem", newItem);
      newItem.status = "uploading";
      newItem.progress = 0;
      let formData = new FormData();
      formData.append("id", item.id);
      formData.append("code", model.value);
      formData.append("multipartFile", newItem.file, newItem.file.name);
      httpConfig.http({
        url: `${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/uploadAttachment`,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData
      }).then((res) => {
        message.EleMessage.success(res.data.message);
        const oldItem = images.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";
        message.EleMessage.error(e.message);
      });
    };
    const emitChange = () => {
      httpConfig.http.post(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { code: model.value, pageSize: 100 }).then((res) => {
        let attachemtList = res.data.data.records;
        emit("change", attachemtList);
      });
    };
    const handleRemove = (uploadItem) => {
      let id = uploadItem.id;
      es.ElMessageBox.confirm("确定要删除吗?", "系统提示", { type: "warning", draggable: true }).then(() => {
        httpConfig.http.get(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/deleteInfo`, { params: { id } }).then((res) => {
          message.EleMessage.success(res.data.message);
          images.value.splice(images.value.indexOf(uploadItem), 1);
          emitChange();
        });
      });
    };
    const handleRetryUpload = (uploadItem) => {
      handleUpload(uploadItem, true);
    };
    return (_ctx, _cache) => {
      const _component_ele_upload_list = vue.resolveComponent("ele-upload-list");
      return vue.openBlock(), vue.createElementBlock("div", null, [
        vue.createVNode(_component_ele_upload_list, {
          drag: true,
          tools: true,
          modelValue: images.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => images.value = $event),
          limit: _ctx.param.maxCount,
          listType: listType.value,
          accept: accept.value,
          readonly: isLoading.value,
          disabled: _ctx.param.type != "edit",
          sortable: { forceFallback: true },
          onUpload: handleUpload,
          onRetry: handleRetryUpload,
          onRemove: handleRemove,
          onEditUpload: handleEditUpload
        }, null, 8, ["modelValue", "limit", "listType", "accept", "readonly", "disabled"])
      ]);
    };
  }
});
module.exports = _sfc_main;