yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
209 lines (208 loc) • 7.02 kB
JavaScript
import { defineComponent, mergeModels, ref, useModel, onMounted, watch, resolveComponent, createBlock, openBlock } from "vue";
import { ElMessageBox } from "element-plus/es";
import { EleMessage } from "../utils/message";
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
import { getShortUuid } from "yuang-framework-ui-common/lib/utils/uuidUtils";
import { application } from "yuang-framework-ui-common/lib/config/applicationConfig";
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: "YuFrameworkAttachmentUpload" },
__name: "index",
props: /* @__PURE__ */ mergeModels({
modelValue: {},
param: { default: {
type: "edit",
mode: "file",
maxCount: 5,
maxSize: 5
} }
}, {
"modelValue": {},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const fileList = ref([]);
const listType = ref(props.param.mode);
const accept = 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 = ref(false);
const checkFile = (file) => {
if (!file) {
return;
}
if (props.param.mode === "image" && !file.type.startsWith("image")) {
EleMessage.error("只能选择图片");
return;
}
if (file.size / 1024 / 1024 > props.param.maxSize) {
EleMessage.error(`图片大小不能超过${props.param.maxSize}MB`);
return;
}
return true;
};
const model = useModel(__props, "modelValue");
model.value = model.value ?? getShortUuid();
let isExecuting = false;
let pendingExecute = false;
onMounted(() => {
init();
});
const init = () => {
if (isExecuting) {
pendingExecute = true;
return;
}
isExecuting = true;
fileList.value = [];
http.post(`${application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { codeForEqual: model.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 = (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 formData = new FormData();
formData.append("code", model.value);
formData.append("multipartFile", uploadItem.file, uploadItem.file.name);
http({
url: `${application.gatewayServerBaseUrl}/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 = ({ 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);
http({
url: `${application.gatewayServerBaseUrl}/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 = () => {
http.post(`${application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { codeForEqual: model.value, pageSize: 100 }).then((res) => {
let attachemtList = res.data.data.records;
emit("change", attachemtList);
});
};
const handleRemove = (uploadItem) => {
let id = uploadItem.id;
ElMessageBox.confirm("确定要删除吗?", "系统提示", { type: "warning", draggable: true }).then(() => {
http.get(`${application.gatewayServerBaseUrl}/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);
};
watch(
() => props.modelValue,
() => {
init();
}
);
watch(
() => props.param,
() => {
init();
},
{ deep: true }
);
return (_ctx, _cache) => {
const _component_ele_upload_list = resolveComponent("ele-upload-list");
return openBlock(), createBlock(_component_ele_upload_list, {
drag: true,
tools: true,
modelValue: fileList.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fileList.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"]);
};
}
});
export {
_sfc_main as default
};