1733 lines
61 KiB
JavaScript
1733 lines
61 KiB
JavaScript
import {
|
|
button_default
|
|
} from "./chunk-ZQ4HFSNQ.js";
|
|
import "./chunk-ULIXT2HE.js";
|
|
import {
|
|
getEventTargetNode,
|
|
getTpImg,
|
|
initTpImg,
|
|
toCssUnit
|
|
} from "./chunk-PBZHTG65.js";
|
|
import "./chunk-REHJGRQO.js";
|
|
import {
|
|
getSlotVNs
|
|
} from "./chunk-LXH6LNL6.js";
|
|
import {
|
|
defineVxeComponent,
|
|
dynamicApp,
|
|
errLog,
|
|
warnLog
|
|
} from "./chunk-ML6NAHIO.js";
|
|
import {
|
|
VxeUI,
|
|
createEvent,
|
|
getConfig,
|
|
getI18n,
|
|
getIcon,
|
|
globalEvents,
|
|
renderEmptyElement,
|
|
require_xe_utils,
|
|
useSize
|
|
} from "./chunk-YJNUXQVJ.js";
|
|
import "./chunk-VAL2CHZC.js";
|
|
import {
|
|
TransitionGroup,
|
|
computed,
|
|
h,
|
|
inject,
|
|
onMounted,
|
|
onUnmounted,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import "./chunk-OWZYVOTZ.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-V4OQ3NZ2.js";
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/upload/src/upload.js
|
|
var import_xe_utils2 = __toESM(require_xe_utils());
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/upload/src/util.js
|
|
var import_xe_utils = __toESM(require_xe_utils());
|
|
var fileForm = null;
|
|
var fileInput = null;
|
|
function parseFile(file) {
|
|
const name = file.name;
|
|
const tIndex = import_xe_utils.default.lastIndexOf(name, ".");
|
|
const type = name.substring(tIndex + 1, name.length).toLowerCase();
|
|
const filename = name.substring(0, tIndex);
|
|
return { filename, type };
|
|
}
|
|
var readLocalFile = (options) => {
|
|
const opts = Object.assign({}, options);
|
|
return new Promise((resolve, reject) => {
|
|
if (!fileInput) {
|
|
fileInput = document.createElement("input");
|
|
fileInput.name = "file";
|
|
fileInput.type = "file";
|
|
}
|
|
if (!fileForm) {
|
|
fileForm = document.createElement("form");
|
|
fileForm.style.display = "none";
|
|
fileForm.appendChild(fileInput);
|
|
document.body.appendChild(fileForm);
|
|
}
|
|
const types = opts.types || [];
|
|
const isAllType = !types.length || types.some((type) => type === "*");
|
|
fileInput.multiple = !!opts.multiple;
|
|
fileInput.accept = isAllType ? "" : `.${types.join(", .")}`;
|
|
fileInput.onchange = (evnt) => {
|
|
const eventTarget = evnt.target;
|
|
const files = Array.from(eventTarget.files || []);
|
|
const file = files[0];
|
|
let errType = "";
|
|
if (!isAllType) {
|
|
for (let fIndex = 0; fIndex < files.length; fIndex++) {
|
|
const { type } = parseFile(files[fIndex]);
|
|
if (!import_xe_utils.default.includes(types, type)) {
|
|
errType = type;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (!errType) {
|
|
resolve({ status: true, files, file });
|
|
} else {
|
|
if (opts.message !== false) {
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.message({
|
|
content: getI18n("vxe.error.notType", [errType]),
|
|
status: "error"
|
|
});
|
|
}
|
|
}
|
|
const params = { status: false, files, file };
|
|
reject(params);
|
|
}
|
|
};
|
|
fileForm.reset();
|
|
fileInput.click();
|
|
});
|
|
};
|
|
function getExportBlobByContent(content, options) {
|
|
return new Blob([content], { type: `text/${options.type};charset=utf-8;` });
|
|
}
|
|
var saveLocalFile = (options) => {
|
|
const opts = Object.assign({ type: "" }, options);
|
|
const { filename, type, content } = opts;
|
|
const name = type ? `${filename}.${type}` : `${filename}`;
|
|
if (window.Blob) {
|
|
const blob = content instanceof Blob ? content : getExportBlobByContent(import_xe_utils.default.toValueString(content), opts);
|
|
const winNavigator = window.navigator;
|
|
if (winNavigator.msSaveBlob) {
|
|
winNavigator.msSaveBlob(blob, name);
|
|
} else {
|
|
const url = URL.createObjectURL(blob);
|
|
const linkElem = document.createElement("a");
|
|
linkElem.target = "_blank";
|
|
linkElem.download = name;
|
|
linkElem.href = url;
|
|
document.body.appendChild(linkElem);
|
|
linkElem.click();
|
|
requestAnimationFrame(() => {
|
|
if (linkElem.parentNode) {
|
|
linkElem.parentNode.removeChild(linkElem);
|
|
}
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(new Error(getI18n("vxe.error.notExp")));
|
|
};
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/upload/src/upload.js
|
|
var upload_default = defineVxeComponent({
|
|
name: "VxeUpload",
|
|
props: {
|
|
modelValue: [Array, String, Object],
|
|
showList: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showList
|
|
},
|
|
moreConfig: Object,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
autoSubmit: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.autoSubmit
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: () => getConfig().upload.mode
|
|
},
|
|
imageTypes: {
|
|
type: Array,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.imageTypes, true)
|
|
},
|
|
imageConfig: {
|
|
type: Object,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.imageConfig, true)
|
|
},
|
|
/**
|
|
* 已废弃，被 image-config 替换
|
|
* @deprecated
|
|
*/
|
|
imageStyle: {
|
|
type: Object,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.imageStyle, true)
|
|
},
|
|
fileTypes: {
|
|
type: Array,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.fileTypes, true)
|
|
},
|
|
dragSort: Boolean,
|
|
dragToUpload: {
|
|
type: Boolean,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.dragToUpload, true)
|
|
},
|
|
pasteToUpload: {
|
|
type: Boolean,
|
|
default: () => import_xe_utils2.default.clone(getConfig().upload.pasteToUpload, true)
|
|
},
|
|
keyField: String,
|
|
singleMode: Boolean,
|
|
urlMode: Boolean,
|
|
urlArgs: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.urlArgs
|
|
},
|
|
multiple: Boolean,
|
|
limitSize: {
|
|
type: [String, Number],
|
|
default: () => getConfig().upload.limitSize
|
|
},
|
|
showLimitSize: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showLimitSize
|
|
},
|
|
limitSizeText: {
|
|
type: [String, Number, Function],
|
|
default: () => getConfig().upload.limitSizeText
|
|
},
|
|
limitCount: {
|
|
type: [String, Number],
|
|
default: () => getConfig().upload.limitCount
|
|
},
|
|
showLimitCount: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showLimitCount
|
|
},
|
|
limitCountText: {
|
|
type: [String, Number, Function],
|
|
default: () => getConfig().upload.limitCountText
|
|
},
|
|
nameField: {
|
|
type: String,
|
|
default: () => getConfig().upload.nameField
|
|
},
|
|
typeField: {
|
|
type: String,
|
|
default: () => getConfig().upload.typeField
|
|
},
|
|
urlField: {
|
|
type: String,
|
|
default: () => getConfig().upload.urlField
|
|
},
|
|
sizeField: {
|
|
type: String,
|
|
default: () => getConfig().upload.sizeField
|
|
},
|
|
showErrorStatus: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showErrorStatus
|
|
},
|
|
showProgress: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showProgress
|
|
},
|
|
progressText: {
|
|
type: [String, Number, Function],
|
|
default: () => getConfig().upload.progressText
|
|
},
|
|
showSubmitButton: Boolean,
|
|
autoHiddenButton: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.autoHiddenButton
|
|
},
|
|
showUploadButton: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showUploadButton
|
|
},
|
|
buttonText: {
|
|
type: [String, Number, Function],
|
|
default: () => getConfig().upload.buttonText
|
|
},
|
|
buttonIcon: {
|
|
type: String,
|
|
default: () => getConfig().upload.buttonIcon
|
|
},
|
|
showButtonText: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showButtonText
|
|
},
|
|
showButtonIcon: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showButtonIcon
|
|
},
|
|
showRemoveButton: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showRemoveButton
|
|
},
|
|
showDownloadButton: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showDownloadButton
|
|
},
|
|
showPreview: {
|
|
type: Boolean,
|
|
default: () => getConfig().upload.showPreview
|
|
},
|
|
showTip: {
|
|
type: Boolean,
|
|
default: () => null
|
|
},
|
|
maxSimultaneousUploads: {
|
|
type: Number,
|
|
default: () => getConfig().upload.maxSimultaneousUploads
|
|
},
|
|
tipText: [String, Number, Function],
|
|
hintText: String,
|
|
previewMethod: Function,
|
|
uploadMethod: Function,
|
|
beforeRemoveMethod: Function,
|
|
removeMethod: Function,
|
|
beforeDownloadMethod: Function,
|
|
downloadMethod: Function,
|
|
getUrlMethod: Function,
|
|
getThumbnailUrlMethod: Function,
|
|
size: {
|
|
type: String,
|
|
default: () => getConfig().upload.size || getConfig().size
|
|
}
|
|
},
|
|
emits: [
|
|
"update:modelValue",
|
|
"add",
|
|
"remove",
|
|
"remove-fail",
|
|
"download",
|
|
"download-fail",
|
|
"upload-success",
|
|
"upload-error",
|
|
"sort-dragend"
|
|
],
|
|
setup(props, context) {
|
|
const { emit, slots } = context;
|
|
const $xeForm = inject("$xeForm", null);
|
|
const formItemInfo = inject("xeFormItemInfo", null);
|
|
const $xeTable = inject("$xeTable", null);
|
|
const xID = import_xe_utils2.default.uniqueId();
|
|
const { computeSize } = useSize(props);
|
|
const refElem = ref();
|
|
const refPopupElem = ref();
|
|
const refDragLineElem = ref();
|
|
const refModalDragLineElem = ref();
|
|
const reactData = reactive({
|
|
isDragUploadStatus: false,
|
|
showMorePopup: false,
|
|
isActivated: false,
|
|
fileList: [],
|
|
fileCacheMaps: {},
|
|
isDragMove: false,
|
|
dragIndex: -1,
|
|
dragTipText: ""
|
|
});
|
|
const internalData = {
|
|
imagePreviewTypes: ["jpg", "jpeg", "png", "gif"],
|
|
prevDragIndex: -1
|
|
// prevDragPos: ''
|
|
};
|
|
const refMaps = {
|
|
refElem
|
|
};
|
|
const computeFormReadonly = computed(() => {
|
|
const { readonly } = props;
|
|
if (readonly === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.readonly;
|
|
}
|
|
return false;
|
|
}
|
|
return readonly;
|
|
});
|
|
const computeIsDisabled = computed(() => {
|
|
const { disabled } = props;
|
|
if (disabled === null) {
|
|
if ($xeForm) {
|
|
return $xeForm.props.disabled;
|
|
}
|
|
return false;
|
|
}
|
|
return disabled;
|
|
});
|
|
const computeKeyField = computed(() => {
|
|
return props.keyField || "_X_KEY";
|
|
});
|
|
const computeIsImage = computed(() => {
|
|
return props.mode === "image";
|
|
});
|
|
const computeNameProp = computed(() => {
|
|
return props.nameField || "name";
|
|
});
|
|
const computeTypeProp = computed(() => {
|
|
return props.typeField || "type";
|
|
});
|
|
const computeUrlProp = computed(() => {
|
|
return props.urlField || "url";
|
|
});
|
|
const computeSizeProp = computed(() => {
|
|
return props.sizeField || "size";
|
|
});
|
|
const computeLimitMaxSize = computed(() => {
|
|
return import_xe_utils2.default.toNumber(props.limitSize) * 1024 * 1024;
|
|
});
|
|
const computeLimitMaxCount = computed(() => {
|
|
return props.multiple ? import_xe_utils2.default.toNumber(props.limitCount) : 1;
|
|
});
|
|
const computeOverCount = computed(() => {
|
|
const { multiple } = props;
|
|
const { fileList } = reactData;
|
|
const limitMaxCount = computeLimitMaxCount.value;
|
|
if (multiple) {
|
|
if (limitMaxCount) {
|
|
return fileList.length >= limitMaxCount;
|
|
}
|
|
return true;
|
|
}
|
|
return fileList.length >= 1;
|
|
});
|
|
const computeLimitSizeUnit = computed(() => {
|
|
const limitSize = import_xe_utils2.default.toNumber(props.limitSize);
|
|
if (limitSize) {
|
|
if (limitSize > 1048576) {
|
|
return `${limitSize / 1048576}T`;
|
|
}
|
|
if (limitSize > 1024) {
|
|
return `${limitSize / 1024}G`;
|
|
}
|
|
return `${limitSize}M`;
|
|
}
|
|
return "";
|
|
});
|
|
const computedShowTipText = computed(() => {
|
|
const { showTip, tipText } = props;
|
|
if (import_xe_utils2.default.isBoolean(showTip)) {
|
|
return showTip;
|
|
}
|
|
const defShowTip = getConfig().upload.showTip;
|
|
if (import_xe_utils2.default.isBoolean(defShowTip)) {
|
|
return defShowTip;
|
|
}
|
|
if (tipText) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
const computedDefTipText = computed(() => {
|
|
const { limitSize, fileTypes, multiple, limitCount } = props;
|
|
const tipText = props.tipText || props.hintText;
|
|
const isImage = computeIsImage.value;
|
|
const limitSizeUnit = computeLimitSizeUnit.value;
|
|
if (import_xe_utils2.default.isString(tipText)) {
|
|
return tipText;
|
|
}
|
|
if (import_xe_utils2.default.isFunction(tipText)) {
|
|
return `${tipText({})}`;
|
|
}
|
|
const defTips = [];
|
|
if (isImage) {
|
|
if (multiple && limitCount) {
|
|
defTips.push(getI18n("vxe.upload.imgCountHint", [limitCount]));
|
|
}
|
|
if (limitSize && limitSizeUnit) {
|
|
defTips.push(getI18n("vxe.upload.imgSizeHint", [limitSizeUnit]));
|
|
}
|
|
} else {
|
|
if (fileTypes && fileTypes.length) {
|
|
defTips.push(getI18n("vxe.upload.fileTypeHint", [fileTypes.join("/")]));
|
|
}
|
|
if (limitSize && limitSizeUnit) {
|
|
defTips.push(getI18n("vxe.upload.fileSizeHint", [limitSizeUnit]));
|
|
}
|
|
if (multiple && limitCount) {
|
|
defTips.push(getI18n("vxe.upload.fileCountHint", [limitCount]));
|
|
}
|
|
}
|
|
return defTips.join(getI18n("vxe.base.comma"));
|
|
});
|
|
const computeImageOpts = computed(() => {
|
|
return Object.assign({}, props.imageConfig || props.imageStyle);
|
|
});
|
|
const computeImgStyle = computed(() => {
|
|
const imageOpts = computeImageOpts.value;
|
|
const { width, height } = imageOpts;
|
|
const stys = {};
|
|
if (width) {
|
|
stys.width = toCssUnit(width);
|
|
}
|
|
if (height) {
|
|
stys.height = toCssUnit(height);
|
|
}
|
|
return stys;
|
|
});
|
|
const computeMoreOpts = computed(() => {
|
|
return Object.assign({ showMoreButton: true }, props.moreConfig);
|
|
});
|
|
const computeMaps = {};
|
|
const $xeUpload = {
|
|
xID,
|
|
props,
|
|
context,
|
|
reactData,
|
|
internalData,
|
|
getRefMaps: () => refMaps,
|
|
getComputeMaps: () => computeMaps
|
|
};
|
|
const getUniqueKey = () => {
|
|
return import_xe_utils2.default.uniqueId();
|
|
};
|
|
const getFieldKey = (item) => {
|
|
const keyField = computeKeyField.value;
|
|
return item[keyField];
|
|
};
|
|
const updateFileList = () => {
|
|
const { modelValue, multiple } = props;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const keyField = computeKeyField.value;
|
|
const nameProp = computeNameProp.value;
|
|
const typeProp = computeTypeProp.value;
|
|
const urlProp = computeUrlProp.value;
|
|
const sizeProp = computeSizeProp.value;
|
|
const fileList = modelValue ? (modelValue ? import_xe_utils2.default.isArray(modelValue) ? modelValue : [modelValue] : []).map((item) => {
|
|
if (!item || import_xe_utils2.default.isString(item)) {
|
|
const url = `${item || ""}`;
|
|
const urlObj = import_xe_utils2.default.parseUrl(item);
|
|
const name2 = (urlObj ? urlObj.searchQuery[nameProp] : "") || parseFileName(url);
|
|
return {
|
|
[nameProp]: name2,
|
|
[typeProp]: (urlObj ? urlObj.searchQuery[typeProp] : "") || parseFileType(name2),
|
|
[urlProp]: url,
|
|
[sizeProp]: import_xe_utils2.default.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0,
|
|
[keyField]: getUniqueKey()
|
|
};
|
|
}
|
|
const name = item[nameProp] || "";
|
|
item[nameProp] = name;
|
|
item[typeProp] = item[typeProp] || parseFileType(name);
|
|
item[urlProp] = item[urlProp] || "";
|
|
item[sizeProp] = item[sizeProp] || 0;
|
|
item[keyField] = item[keyField] || getUniqueKey();
|
|
return item;
|
|
}) : [];
|
|
reactData.fileList = formReadonly || multiple ? fileList : fileList.slice(0, 1);
|
|
};
|
|
const parseFileName = (url) => {
|
|
return decodeURIComponent(`${url || ""}`).split("/").pop() || "";
|
|
};
|
|
const parseFileType = (name) => {
|
|
const index = name.lastIndexOf(".");
|
|
if (index > 0) {
|
|
return name.substring(index + 1).toLowerCase();
|
|
}
|
|
return "";
|
|
};
|
|
const dispatchEvent = (type, params, evnt) => {
|
|
emit(type, createEvent(evnt, { $upload: $xeUpload }, params));
|
|
};
|
|
const emitModel = (value) => {
|
|
emit("update:modelValue", value);
|
|
};
|
|
const handleChange = (value) => {
|
|
const { singleMode, urlArgs } = props;
|
|
const urlProp = computeUrlProp.value;
|
|
const nameProp = computeNameProp.value;
|
|
let restList = value ? value.slice(0) : [];
|
|
if (urlArgs) {
|
|
restList = restList.map((item) => {
|
|
const url = item[urlProp];
|
|
if (url) {
|
|
const urlObj = import_xe_utils2.default.parseUrl(url);
|
|
if (!urlObj.searchQuery[nameProp]) {
|
|
if (url.indexOf("blob:") === -1) {
|
|
return `${url}${url.indexOf("?") === -1 ? "?" : "&"}${nameProp}=${encodeURIComponent(item[nameProp] || "")}`;
|
|
}
|
|
}
|
|
}
|
|
return url;
|
|
});
|
|
}
|
|
emitModel(singleMode ? restList[0] || null : restList);
|
|
};
|
|
const getThumbnailFileUrl = (item) => {
|
|
const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().upload.getThumbnailUrlMethod;
|
|
if (getThumbnailUrlFn) {
|
|
return getThumbnailUrlFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
});
|
|
}
|
|
return getFileUrl(item);
|
|
};
|
|
const getFileUrl = (item) => {
|
|
const getUrlFn = props.getUrlMethod || getConfig().upload.getUrlMethod;
|
|
const urlProp = computeUrlProp.value;
|
|
return getUrlFn ? getUrlFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
}) : item[urlProp];
|
|
};
|
|
const handleDefaultFilePreview = (item) => {
|
|
const { imageTypes, showDownloadButton } = props;
|
|
const typeProp = computeTypeProp.value;
|
|
const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
|
|
const { imagePreviewTypes } = internalData;
|
|
if (imagePreviewTypes.concat(imageTypes || []).some((type) => `${type}`.toLowerCase() === `${item[typeProp]}`.toLowerCase())) {
|
|
if (VxeUI.previewImage) {
|
|
VxeUI.previewImage({
|
|
urlList: [getFileUrl(item)],
|
|
showDownloadButton,
|
|
beforeDownloadMethod: beforeDownloadFn ? () => {
|
|
return beforeDownloadFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
});
|
|
} : void 0
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const handlePreviewFileEvent = (evnt, item) => {
|
|
const previewFn = props.previewMethod || getConfig().upload.previewMethod;
|
|
if (props.showPreview) {
|
|
if (previewFn) {
|
|
previewFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
});
|
|
} else {
|
|
handleDefaultFilePreview(item);
|
|
}
|
|
}
|
|
};
|
|
const handlePreviewImageEvent = (evnt, item, index) => {
|
|
const { showDownloadButton } = props;
|
|
const { fileList } = reactData;
|
|
const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
|
|
if (props.showPreview) {
|
|
if (VxeUI.previewImage) {
|
|
VxeUI.previewImage({
|
|
urlList: fileList.map((item2) => getFileUrl(item2)),
|
|
activeIndex: index,
|
|
showDownloadButton,
|
|
beforeDownloadMethod: beforeDownloadFn ? ({ index: index2 }) => {
|
|
return beforeDownloadFn({
|
|
$upload: $xeUpload,
|
|
option: fileList[index2]
|
|
});
|
|
} : void 0
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const handleUploadResult = (item, file) => {
|
|
const { showErrorStatus } = props;
|
|
const fileKey = getFieldKey(item);
|
|
const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
|
|
if (uploadFn) {
|
|
return Promise.resolve(uploadFn({
|
|
$upload: $xeUpload,
|
|
file,
|
|
option: item,
|
|
updateProgress(percentNum) {
|
|
const { fileCacheMaps } = reactData;
|
|
const cacheItem = fileCacheMaps[getFieldKey(item)];
|
|
if (cacheItem) {
|
|
cacheItem.percent = Math.max(0, Math.min(99, import_xe_utils2.default.toNumber(percentNum)));
|
|
}
|
|
}
|
|
})).then((res) => {
|
|
const { fileCacheMaps } = reactData;
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
if (cacheItem) {
|
|
cacheItem.percent = 100;
|
|
cacheItem.status = "success";
|
|
}
|
|
Object.assign(item, res);
|
|
dispatchEvent("upload-success", { option: item, data: res }, null);
|
|
}).catch((res) => {
|
|
const { fileCacheMaps } = reactData;
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
if (cacheItem) {
|
|
cacheItem.status = "error";
|
|
}
|
|
if (showErrorStatus) {
|
|
Object.assign(item, res);
|
|
} else {
|
|
reactData.fileList = reactData.fileList.filter((obj) => getFieldKey(obj) !== fileKey);
|
|
}
|
|
dispatchEvent("upload-error", { option: item, data: res }, null);
|
|
}).finally(() => {
|
|
const { fileCacheMaps } = reactData;
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
if (cacheItem) {
|
|
cacheItem.loading = false;
|
|
}
|
|
});
|
|
} else {
|
|
const { fileCacheMaps } = reactData;
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
if (cacheItem) {
|
|
cacheItem.loading = false;
|
|
}
|
|
}
|
|
return Promise.resolve();
|
|
};
|
|
const handleReUpload = (item) => {
|
|
const { uploadMethod, urlMode } = props;
|
|
const { fileCacheMaps } = reactData;
|
|
const fileKey = getFieldKey(item);
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
const uploadFn = uploadMethod || getConfig().upload.uploadMethod;
|
|
if (uploadFn && cacheItem) {
|
|
const file = cacheItem.file;
|
|
cacheItem.loading = true;
|
|
cacheItem.status = "pending";
|
|
cacheItem.percent = 0;
|
|
handleUploadResult(item, file).then(() => {
|
|
if (urlMode) {
|
|
handleChange(reactData.fileList);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const handleUploadFile = (files, evnt) => {
|
|
const { multiple, urlMode, showLimitSize, limitSizeText, showLimitCount, limitCountText, autoSubmit } = props;
|
|
const { fileList } = reactData;
|
|
const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
|
|
const keyField = computeKeyField.value;
|
|
const nameProp = computeNameProp.value;
|
|
const typeProp = computeTypeProp.value;
|
|
const urlProp = computeUrlProp.value;
|
|
const sizeProp = computeSizeProp.value;
|
|
const limitMaxSize = computeLimitMaxSize.value;
|
|
const limitMaxCount = computeLimitMaxCount.value;
|
|
const limitSizeUnit = computeLimitSizeUnit.value;
|
|
let selectFiles = files;
|
|
if (multiple && limitMaxCount) {
|
|
if (showLimitCount && fileList.length >= limitMaxCount) {
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.notification({
|
|
title: getI18n("vxe.modal.errTitle"),
|
|
status: "error",
|
|
content: limitCountText ? `${import_xe_utils2.default.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}` : getI18n("vxe.upload.overCountErr", [limitMaxCount])
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
const overNum = selectFiles.length - (limitMaxCount - fileList.length);
|
|
if (showLimitCount && overNum > 0) {
|
|
const overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
|
|
if (limitCountText) {
|
|
VxeUI.modal.notification({
|
|
title: getI18n("vxe.modal.errTitle"),
|
|
status: "error",
|
|
content: `${import_xe_utils2.default.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}`
|
|
});
|
|
} else if (VxeUI.modal) {
|
|
VxeUI.modal.notification({
|
|
title: getI18n("vxe.modal.errTitle"),
|
|
status: "error",
|
|
width: null,
|
|
slots: {
|
|
default() {
|
|
return h("div", {
|
|
class: "vxe-upload--file-message-over-error"
|
|
}, [
|
|
h("div", {}, getI18n("vxe.upload.overCountExtraErr", [limitMaxCount, overNum])),
|
|
h("div", {
|
|
class: "vxe-upload--file-message-over-extra"
|
|
}, overExtraList.map((file, index) => {
|
|
return h("div", {
|
|
key: index,
|
|
class: "vxe-upload--file-message-over-extra-item"
|
|
}, file.name);
|
|
}))
|
|
]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
|
|
}
|
|
if (showLimitSize && limitMaxSize) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[0];
|
|
if (file.size > limitMaxSize) {
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.notification({
|
|
title: getI18n("vxe.modal.errTitle"),
|
|
status: "error",
|
|
content: limitSizeText ? `${import_xe_utils2.default.isFunction(limitSizeText) ? limitSizeText({ maxSize: limitMaxSize }) : limitSizeText}` : getI18n("vxe.upload.overSizeErr", [limitSizeUnit])
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
|
|
const newFileList = multiple ? fileList : [];
|
|
const uploadPromiseRests = [];
|
|
selectFiles.forEach((file) => {
|
|
const { name } = file;
|
|
const fileKey = getUniqueKey();
|
|
const fileObj = {
|
|
[nameProp]: name,
|
|
[typeProp]: parseFileType(name),
|
|
[sizeProp]: file.size,
|
|
[urlProp]: URL.createObjectURL(file),
|
|
[keyField]: fileKey
|
|
};
|
|
if (uploadFn) {
|
|
cacheMaps[fileKey] = {
|
|
file,
|
|
loading: !!autoSubmit,
|
|
status: "pending",
|
|
percent: 0
|
|
};
|
|
}
|
|
const item = reactive(fileObj);
|
|
if (uploadFn && autoSubmit) {
|
|
uploadPromiseRests.push(handleUploadResult(item, file));
|
|
}
|
|
newFileList.push(item);
|
|
});
|
|
reactData.fileList = newFileList;
|
|
reactData.fileCacheMaps = cacheMaps;
|
|
newFileList.forEach((item) => {
|
|
dispatchEvent("add", { option: item }, evnt);
|
|
});
|
|
Promise.all(urlMode ? uploadPromiseRests : []).then(() => {
|
|
handleChange(newFileList);
|
|
if ($xeForm && formItemInfo) {
|
|
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, newFileList);
|
|
}
|
|
});
|
|
};
|
|
const handleChoose = (evnt) => {
|
|
const { multiple, imageTypes, fileTypes } = props;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const isImage = computeIsImage.value;
|
|
if (isDisabled) {
|
|
return Promise.resolve({
|
|
status: false,
|
|
files: [],
|
|
file: null
|
|
});
|
|
}
|
|
return readLocalFile({
|
|
multiple,
|
|
types: isImage ? imageTypes : fileTypes
|
|
}).then((params) => {
|
|
handleUploadFile(params.files, evnt);
|
|
return params;
|
|
});
|
|
};
|
|
const clickEvent = (evnt) => {
|
|
handleChoose(evnt).catch(() => {
|
|
});
|
|
};
|
|
const handleRemoveEvent = (evnt, item, index) => {
|
|
const { fileList } = reactData;
|
|
fileList.splice(index, 1);
|
|
handleChange(fileList);
|
|
if ($xeForm && formItemInfo) {
|
|
$xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList);
|
|
}
|
|
dispatchEvent("remove", { option: item }, evnt);
|
|
};
|
|
const removeFileEvent = (evnt, item, index) => {
|
|
const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod;
|
|
const removeFn = props.removeMethod || getConfig().upload.removeMethod;
|
|
Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
}) : true).then((status) => {
|
|
if (status) {
|
|
if (removeFn) {
|
|
Promise.resolve(removeFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
})).then(() => {
|
|
handleRemoveEvent(evnt, item, index);
|
|
}).catch((e) => e);
|
|
} else {
|
|
handleRemoveEvent(evnt, item, index);
|
|
}
|
|
} else {
|
|
dispatchEvent("remove-fail", { option: item }, evnt);
|
|
}
|
|
});
|
|
};
|
|
const handleDownloadEvent = (evnt, item) => {
|
|
dispatchEvent("download", { option: item }, evnt);
|
|
};
|
|
const downloadFileEvent = (evnt, item) => {
|
|
const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
|
|
const downloadFn = props.downloadMethod || getConfig().upload.downloadMethod;
|
|
Promise.resolve(beforeDownloadFn ? beforeDownloadFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
}) : true).then((status) => {
|
|
if (status) {
|
|
if (downloadFn) {
|
|
Promise.resolve(downloadFn({
|
|
$upload: $xeUpload,
|
|
option: item
|
|
})).then(() => {
|
|
handleDownloadEvent(evnt, item);
|
|
}).catch((e) => e);
|
|
} else {
|
|
handleDownloadEvent(evnt, item);
|
|
}
|
|
} else {
|
|
dispatchEvent("download-fail", { option: item }, evnt);
|
|
}
|
|
});
|
|
};
|
|
const handleUploadDragleaveEvent = (evnt) => {
|
|
const targetElem = evnt.currentTarget;
|
|
const { clientX, clientY } = evnt;
|
|
if (targetElem) {
|
|
const { x: targetX, y: targetY, height: targetHeight, width: targetWidth } = targetElem.getBoundingClientRect();
|
|
if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
|
|
reactData.isDragUploadStatus = false;
|
|
}
|
|
}
|
|
};
|
|
const handleUploadDragoverEvent = (evnt) => {
|
|
const dataTransfer = evnt.dataTransfer;
|
|
if (dataTransfer) {
|
|
const { items } = dataTransfer;
|
|
if (items && items.length) {
|
|
evnt.preventDefault();
|
|
reactData.isDragUploadStatus = true;
|
|
}
|
|
}
|
|
};
|
|
const uploadTransferFileEvent = (evnt, files) => {
|
|
const { imageTypes, fileTypes } = props;
|
|
const { imagePreviewTypes } = internalData;
|
|
const isImage = computeIsImage.value;
|
|
if (isImage) {
|
|
const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
|
|
files = files.filter((file) => {
|
|
const fileType = `${file.type.split("/")[1] || ""}`.toLowerCase();
|
|
if (pasteImgTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
} else {
|
|
if (fileTypes && fileTypes.length) {
|
|
const errTypes = [];
|
|
files.forEach((file) => {
|
|
const fileType = parseFileType(file.name);
|
|
if (!fileTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
|
|
errTypes.push(fileType);
|
|
}
|
|
});
|
|
if (errTypes.length) {
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.message({
|
|
content: getI18n("vxe.error.notType", [errTypes.join(", ")]),
|
|
status: "error"
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
if (!files.length) {
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.notification({
|
|
title: getI18n("vxe.modal.errTitle"),
|
|
status: "error",
|
|
content: getI18n("vxe.upload.uploadTypeErr")
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
handleUploadFile(files, evnt);
|
|
};
|
|
const handleUploadDropEvent = (evnt) => {
|
|
const dataTransfer = evnt.dataTransfer;
|
|
if (dataTransfer) {
|
|
const { items } = dataTransfer;
|
|
if (items && items.length) {
|
|
evnt.preventDefault();
|
|
const files = handleTransferFiles(items);
|
|
if (files.length) {
|
|
uploadTransferFileEvent(evnt, files);
|
|
}
|
|
}
|
|
}
|
|
reactData.isDragUploadStatus = false;
|
|
};
|
|
const handleTransferFiles = (items) => {
|
|
const files = [];
|
|
import_xe_utils2.default.arrayEach(items, (item) => {
|
|
const file = item.getAsFile();
|
|
if (file) {
|
|
files.push(file);
|
|
}
|
|
});
|
|
return files;
|
|
};
|
|
const handleMoreEvent = () => {
|
|
const formReadonly = computeFormReadonly.value;
|
|
const isImage = computeIsImage.value;
|
|
if (VxeUI.modal) {
|
|
VxeUI.modal.open({
|
|
title: formReadonly ? getI18n("vxe.upload.morePopup.readTitle") : getI18n(`vxe.upload.morePopup.${isImage ? "imageTitle" : "fileTitle"}`),
|
|
width: 660,
|
|
height: 500,
|
|
escClosable: true,
|
|
showMaximize: true,
|
|
resize: true,
|
|
maskClosable: true,
|
|
slots: {
|
|
default() {
|
|
const { showErrorStatus, dragToUpload, dragSort } = props;
|
|
const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
|
|
const { fileList } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const ons = {};
|
|
if (dragToUpload && dragIndex === -1) {
|
|
ons.onDragover = handleUploadDragoverEvent;
|
|
ons.onDragleave = handleUploadDragleaveEvent;
|
|
ons.onDrop = handleUploadDropEvent;
|
|
}
|
|
return h("div", Object.assign({ ref: refPopupElem, class: ["vxe-upload--more-popup", {
|
|
"is--readonly": formReadonly,
|
|
"is--disabled": isDisabled,
|
|
"is--active": isActivated,
|
|
"show--error": showErrorStatus,
|
|
"is--drag": isDragUploadStatus
|
|
}] }, ons), [
|
|
isImage ? dragSort ? h(TransitionGroup, {
|
|
name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
|
|
tag: "div",
|
|
class: "vxe-upload--image-more-list"
|
|
}, {
|
|
default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
|
|
}) : h("div", {
|
|
class: "vxe-upload--image-more-list"
|
|
}, renderImageItemList(fileList, true).concat(renderImageAction(true))) : h("div", {
|
|
class: "vxe-upload--file-more-list"
|
|
}, [
|
|
renderFileAction(true),
|
|
dragSort ? h(TransitionGroup, {
|
|
name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
|
|
tag: "div",
|
|
class: "vxe-upload--file-list"
|
|
}, {
|
|
default: () => renderFileItemList(fileList, false)
|
|
}) : h("div", {
|
|
class: "vxe-upload--file-list"
|
|
}, renderFileItemList(fileList, true))
|
|
]),
|
|
dragSort ? h("div", {
|
|
ref: refModalDragLineElem,
|
|
class: "vxe-upload--drag-line"
|
|
}) : renderEmptyElement($xeUpload),
|
|
isDragUploadStatus ? h("div", {
|
|
class: "vxe-upload--drag-placeholder"
|
|
}, getI18n("vxe.upload.dragPlaceholder")) : renderEmptyElement($xeUpload)
|
|
]);
|
|
}
|
|
},
|
|
onShow() {
|
|
reactData.showMorePopup = true;
|
|
},
|
|
onHide() {
|
|
reactData.showMorePopup = false;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const showDropTip = (evnt, dragEl, dragPos) => {
|
|
const { showMorePopup } = reactData;
|
|
const el = refElem.value;
|
|
const popupEl = refPopupElem.value;
|
|
const wrapperEl = showMorePopup ? popupEl : el;
|
|
if (!wrapperEl) {
|
|
return;
|
|
}
|
|
const wrapperRect = wrapperEl.getBoundingClientRect();
|
|
const ddLineEl = refDragLineElem.value;
|
|
const mdLineEl = refModalDragLineElem.value;
|
|
const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
|
|
if (currDLineEl) {
|
|
const dragRect = dragEl.getBoundingClientRect();
|
|
currDLineEl.style.display = "block";
|
|
currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
|
|
currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
|
|
currDLineEl.style.height = `${dragRect.height}px`;
|
|
currDLineEl.style.width = `${dragRect.width - 1}px`;
|
|
currDLineEl.setAttribute("drag-pos", dragPos);
|
|
}
|
|
};
|
|
const hideDropTip = () => {
|
|
const ddLineEl = refDragLineElem.value;
|
|
const mdLineEl = refModalDragLineElem.value;
|
|
if (ddLineEl) {
|
|
ddLineEl.style.display = "";
|
|
}
|
|
if (mdLineEl) {
|
|
mdLineEl.style.display = "";
|
|
}
|
|
};
|
|
const handleDragSortDragstartEvent = (evnt) => {
|
|
evnt.stopPropagation();
|
|
if (evnt.dataTransfer) {
|
|
evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
|
|
}
|
|
const dragEl = evnt.currentTarget;
|
|
const parentEl = dragEl.parentElement;
|
|
const dragIndex = import_xe_utils2.default.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
|
|
reactData.isDragMove = true;
|
|
reactData.dragIndex = dragIndex;
|
|
setTimeout(() => {
|
|
reactData.isDragMove = false;
|
|
}, 500);
|
|
};
|
|
const handleDragSortDragoverEvent = (evnt) => {
|
|
evnt.stopPropagation();
|
|
evnt.preventDefault();
|
|
const { dragIndex } = reactData;
|
|
if (dragIndex === -1) {
|
|
return;
|
|
}
|
|
const isImage = computeIsImage.value;
|
|
const dragEl = evnt.currentTarget;
|
|
const parentEl = dragEl.parentElement;
|
|
const currIndex = import_xe_utils2.default.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
|
|
let dragPos = "";
|
|
if (isImage) {
|
|
const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
|
|
dragPos = offsetX < dragEl.clientWidth / 2 ? "left" : "right";
|
|
} else {
|
|
const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
|
|
dragPos = offsetY < dragEl.clientHeight / 2 ? "top" : "bottom";
|
|
}
|
|
if (dragIndex === currIndex) {
|
|
showDropTip(evnt, dragEl, dragPos);
|
|
return;
|
|
}
|
|
showDropTip(evnt, dragEl, dragPos);
|
|
internalData.prevDragIndex = currIndex;
|
|
internalData.prevDragPos = dragPos;
|
|
};
|
|
const handleDragSortDragendEvent = (evnt) => {
|
|
const { fileList, dragIndex } = reactData;
|
|
const { prevDragIndex, prevDragPos } = internalData;
|
|
const oldIndex = dragIndex;
|
|
const targetIndex = prevDragIndex;
|
|
const dragOffsetIndex = prevDragPos === "bottom" || prevDragPos === "right" ? 1 : 0;
|
|
const oldItem = fileList[oldIndex];
|
|
const newItem = fileList[targetIndex];
|
|
if (oldItem && newItem) {
|
|
fileList.splice(oldIndex, 1);
|
|
const ptfIndex = import_xe_utils2.default.findIndexOf(fileList, (item) => newItem === item);
|
|
const nIndex = ptfIndex + dragOffsetIndex;
|
|
fileList.splice(nIndex, 0, oldItem);
|
|
dispatchEvent("sort-dragend", {
|
|
oldItem,
|
|
newItem,
|
|
dragPos: prevDragPos,
|
|
offsetIndex: dragOffsetIndex,
|
|
_index: {
|
|
newIndex: nIndex,
|
|
oldIndex
|
|
}
|
|
}, evnt);
|
|
}
|
|
hideDropTip();
|
|
reactData.dragIndex = -1;
|
|
};
|
|
const handleItemMousedownEvent = (evnt) => {
|
|
if ($xeTable) {
|
|
evnt.stopPropagation();
|
|
}
|
|
reactData.isActivated = true;
|
|
};
|
|
const handleGlobalPasteEvent = (evnt) => {
|
|
const { pasteToUpload } = props;
|
|
const { isActivated } = reactData;
|
|
if (!isActivated || !pasteToUpload) {
|
|
return;
|
|
}
|
|
const clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
|
|
if (!clipboardData) {
|
|
return;
|
|
}
|
|
const { items } = clipboardData;
|
|
if (!items) {
|
|
return;
|
|
}
|
|
const files = handleTransferFiles(items);
|
|
if (files.length) {
|
|
evnt.preventDefault();
|
|
uploadTransferFileEvent(evnt, files);
|
|
}
|
|
};
|
|
const handleGlobalMousedownEvent = (evnt) => {
|
|
const el = refElem.value;
|
|
const popupEl = refPopupElem.value;
|
|
let isActivated = getEventTargetNode(evnt, el).flag;
|
|
if (!isActivated && popupEl) {
|
|
const parentEl = popupEl.parentElement || popupEl;
|
|
const modalEl = parentEl ? parentEl.parentElement : parentEl;
|
|
isActivated = getEventTargetNode(evnt, modalEl).flag;
|
|
}
|
|
reactData.isActivated = isActivated;
|
|
};
|
|
const handleGlobalBlurEvent = () => {
|
|
reactData.isActivated = false;
|
|
};
|
|
const uploadMethods = {
|
|
dispatchEvent,
|
|
choose() {
|
|
return handleChoose(null);
|
|
},
|
|
submit(isFull) {
|
|
const { maxSimultaneousUploads } = props;
|
|
const msNum = import_xe_utils2.default.toNumber(maxSimultaneousUploads || 1) || 1;
|
|
const { fileList, fileCacheMaps } = reactData;
|
|
const allPendingList = fileList.filter((item) => {
|
|
const fileKey = getFieldKey(item);
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
return cacheItem && (cacheItem.status === "pending" || isFull && cacheItem.status === "error");
|
|
});
|
|
const handleSubmit = (item) => {
|
|
const fileKey = getFieldKey(item);
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
if (cacheItem) {
|
|
const file = cacheItem.file;
|
|
if (file && (cacheItem.status === "pending" || isFull && cacheItem.status === "error")) {
|
|
cacheItem.loading = true;
|
|
cacheItem.percent = 0;
|
|
return handleUploadResult(item, file).then(handleNextSubmit);
|
|
}
|
|
}
|
|
return handleNextSubmit();
|
|
};
|
|
const handleNextSubmit = () => {
|
|
if (allPendingList.length) {
|
|
const item = allPendingList[0];
|
|
allPendingList.splice(0, 1);
|
|
return handleSubmit(item).then(handleNextSubmit);
|
|
}
|
|
return Promise.resolve();
|
|
};
|
|
return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
|
|
});
|
|
}
|
|
};
|
|
const uploadPrivateMethods = {};
|
|
Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
|
|
const renderFileItemList = (currList, isMoreView) => {
|
|
const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
|
|
const { fileCacheMaps } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const nameProp = computeNameProp.value;
|
|
const typeProp = computeTypeProp.value;
|
|
const cornerSlot = slots.corner;
|
|
const ons = {};
|
|
if (dragSort && currList.length > 1) {
|
|
ons.onDragstart = handleDragSortDragstartEvent;
|
|
ons.onDragover = handleDragSortDragoverEvent;
|
|
ons.onDragend = handleDragSortDragendEvent;
|
|
}
|
|
return currList.map((item, index) => {
|
|
const fileKey = getFieldKey(item);
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
let isLoading = false;
|
|
let isError = false;
|
|
let isPending = false;
|
|
const fileName = `${item[nameProp] || ""}`;
|
|
if (cacheItem) {
|
|
isLoading = cacheItem.loading;
|
|
isError = cacheItem.status === "error";
|
|
isPending = cacheItem.status === "pending";
|
|
}
|
|
return h("div", Object.assign({ key: dragSort ? fileKey : index, class: ["vxe-upload--file-item", {
|
|
"is--preview": showPreview,
|
|
"is--loading": isLoading,
|
|
"is--pending": isPending,
|
|
"is--error": isError
|
|
}], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
|
|
h("div", {
|
|
class: "vxe-upload--file-item-icon"
|
|
}, [
|
|
h("i", {
|
|
class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
|
|
})
|
|
]),
|
|
h("div", {
|
|
class: "vxe-upload--file-item-name",
|
|
title: fileName,
|
|
onClick(evnt) {
|
|
if (!isLoading && !isError) {
|
|
handlePreviewFileEvent(evnt, item);
|
|
}
|
|
}
|
|
}, fileName),
|
|
isLoading ? h("div", {
|
|
class: "vxe-upload--file-item-loading-icon"
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().UPLOAD_LOADING
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
showProgress && isLoading && cacheItem ? h("div", {
|
|
class: "vxe-upload--file-item-loading-text"
|
|
}, progressText ? import_xe_utils2.default.toFormatString(`${import_xe_utils2.default.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])) : renderEmptyElement($xeUpload),
|
|
!isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h("div", {
|
|
class: "vxe-upload--file-item-rebtn"
|
|
}, [
|
|
h(button_default, {
|
|
icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
|
|
mode: "text",
|
|
status: "primary",
|
|
content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
|
|
onClick() {
|
|
handleReUpload(item);
|
|
}
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
h("div", {
|
|
class: "vxe-upload--file-item-btn-wrapper"
|
|
}, [
|
|
cornerSlot ? h("div", {
|
|
class: "vxe-upload--file-item-corner"
|
|
}, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly }))) : renderEmptyElement($xeUpload),
|
|
showDownloadButton && !(isLoading || isPending) ? h("div", {
|
|
class: "vxe-upload--file-item-download-btn",
|
|
onClick(evnt) {
|
|
downloadFileEvent(evnt, item);
|
|
}
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().UPLOAD_FILE_DOWNLOAD
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h("div", {
|
|
class: "vxe-upload--file-item-remove-btn",
|
|
onClick(evnt) {
|
|
removeFileEvent(evnt, item, index);
|
|
}
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().UPLOAD_FILE_REMOVE
|
|
})
|
|
]) : renderEmptyElement($xeUpload)
|
|
])
|
|
]);
|
|
});
|
|
};
|
|
const renderFileAction = (isMoreView) => {
|
|
const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const showTipText = computedShowTipText.value;
|
|
const defTipText = computedDefTipText.value;
|
|
const overCount = computeOverCount.value;
|
|
const defaultSlot = slots.default;
|
|
const tipSlot = slots.tip || slots.hint;
|
|
if (formReadonly || !showUploadButton) {
|
|
return renderEmptyElement($xeUpload);
|
|
}
|
|
return h("div", {
|
|
class: "vxe-upload--file-action"
|
|
}, [
|
|
autoHiddenButton && overCount ? renderEmptyElement($xeUpload) : h("div", {
|
|
class: "vxe-upload--file-action-btn",
|
|
onClick: clickEvent
|
|
}, defaultSlot ? getSlotVNs(defaultSlot({ $upload: $xeUpload })) : [
|
|
h(button_default, {
|
|
class: "vxe-upload--file-action-button",
|
|
content: isMoreView || showButtonText ? buttonText ? `${import_xe_utils2.default.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.fileBtnText") : "",
|
|
icon: showButtonIcon ? buttonIcon || getIcon().UPLOAD_FILE_ADD : "",
|
|
disabled: isDisabled
|
|
})
|
|
]),
|
|
showTipText && (defTipText || tipSlot) ? h("div", {
|
|
class: "vxe-upload--file-action-tip"
|
|
}, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`) : renderEmptyElement($xeUpload)
|
|
]);
|
|
};
|
|
const renderAllMode = () => {
|
|
const { showList, moreConfig, dragSort } = props;
|
|
const { fileList, isDragMove } = reactData;
|
|
const moreOpts = computeMoreOpts.value;
|
|
const { maxCount, showMoreButton, layout } = moreOpts;
|
|
const isHorizontal = layout === "horizontal";
|
|
let currList = fileList;
|
|
let overMaxNum = 0;
|
|
if (maxCount && fileList.length > maxCount) {
|
|
overMaxNum = fileList.length - maxCount;
|
|
currList = fileList.slice(0, maxCount);
|
|
}
|
|
return h("div", {
|
|
key: "all",
|
|
class: "vxe-upload--file-wrapper"
|
|
}, showList ? [
|
|
showMoreButton && moreConfig && isHorizontal ? renderEmptyElement($xeUpload) : renderFileAction(true),
|
|
currList.length || showMoreButton && isHorizontal ? h("div", {
|
|
class: ["vxe-upload--file-list-wrapper", {
|
|
"is--horizontal": isHorizontal
|
|
}]
|
|
}, [
|
|
currList.length ? dragSort ? h(TransitionGroup, {
|
|
name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
|
|
tag: "div",
|
|
class: "vxe-upload--file-list"
|
|
}, {
|
|
default: () => renderFileItemList(currList, false)
|
|
}) : h("div", {
|
|
class: "vxe-upload--file-list"
|
|
}, renderFileItemList(currList, false)) : renderEmptyElement($xeUpload),
|
|
showMoreButton && overMaxNum ? h("div", {
|
|
class: "vxe-upload--file-over-more"
|
|
}, [
|
|
h(button_default, {
|
|
mode: "text",
|
|
content: getI18n("vxe.upload.moreBtnText", [fileList.length]),
|
|
status: "primary",
|
|
onClick: handleMoreEvent
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
showMoreButton && moreConfig && isHorizontal ? renderFileAction(false) : renderEmptyElement($xeUpload)
|
|
]) : renderEmptyElement($xeUpload)
|
|
] : [
|
|
renderFileAction(false)
|
|
]);
|
|
};
|
|
const renderImageItemList = (currList, isMoreView) => {
|
|
const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
|
|
const { fileCacheMaps } = reactData;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const imageOpts = computeImageOpts.value;
|
|
const imgStyle = computeImgStyle.value;
|
|
const cornerSlot = slots.corner;
|
|
const ons = {
|
|
onMousedown: handleItemMousedownEvent
|
|
};
|
|
if (dragSort && currList.length > 1) {
|
|
ons.onDragstart = handleDragSortDragstartEvent;
|
|
ons.onDragover = handleDragSortDragoverEvent;
|
|
ons.onDragend = handleDragSortDragendEvent;
|
|
}
|
|
return currList.map((item, index) => {
|
|
const fileKey = getFieldKey(item);
|
|
const cacheItem = fileCacheMaps[fileKey];
|
|
let isLoading = false;
|
|
let isError = false;
|
|
let isPending = false;
|
|
if (cacheItem) {
|
|
isLoading = cacheItem.loading;
|
|
isError = cacheItem.status === "error";
|
|
isPending = cacheItem.status === "pending";
|
|
}
|
|
return h("div", Object.assign({ key: dragSort ? fileKey : index, class: ["vxe-upload--image-item", {
|
|
"is--preview": showPreview,
|
|
"is--circle": imageOpts.circle,
|
|
"is--loading": isLoading,
|
|
"is--pending": isPending,
|
|
"is--error": isError
|
|
}], fileid: fileKey, draggable: dragSort ? true : null }, ons), [
|
|
h("div", {
|
|
class: "vxe-upload--image-item-box",
|
|
style: isMoreView ? null : imgStyle,
|
|
onClick(evnt) {
|
|
if (!isLoading && !isError) {
|
|
handlePreviewImageEvent(evnt, item, index);
|
|
}
|
|
}
|
|
}, [
|
|
isLoading && cacheItem ? h("div", {
|
|
class: "vxe-upload--image-item-loading"
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-upload--image-item-loading-icon"
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().UPLOAD_LOADING
|
|
})
|
|
]),
|
|
showProgress ? h("div", {
|
|
class: "vxe-upload--image-item-loading-text"
|
|
}, progressText ? import_xe_utils2.default.toFormatString(`${import_xe_utils2.default.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])) : renderEmptyElement($xeUpload)
|
|
]) : renderEmptyElement($xeUpload),
|
|
h("div", {
|
|
class: "vxe-upload--image-item-img-wrapper",
|
|
title: getI18n("vxe.upload.viewItemTitle")
|
|
}, [
|
|
h("img", {
|
|
class: "vxe-upload--image-item-img",
|
|
src: getThumbnailFileUrl(item)
|
|
})
|
|
]),
|
|
!isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h("div", {
|
|
class: "vxe-upload--image-item-rebtn"
|
|
}, [
|
|
h(button_default, {
|
|
icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
|
|
mode: "text",
|
|
status: "primary",
|
|
content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
|
|
onClick() {
|
|
handleReUpload(item);
|
|
}
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
h("div", {
|
|
class: "vxe-upload--image-item-btn-wrapper",
|
|
onClick(evnt) {
|
|
evnt.stopPropagation();
|
|
}
|
|
}, [
|
|
cornerSlot ? h("div", {
|
|
class: "vxe-upload--file-item-corner"
|
|
}, getSlotVNs(cornerSlot({ option: item, isMoreView, readonly: formReadonly }))) : renderEmptyElement($xeUpload),
|
|
showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h("div", {
|
|
class: "vxe-upload--image-item-remove-btn",
|
|
onClick(evnt) {
|
|
evnt.stopPropagation();
|
|
removeFileEvent(evnt, item, index);
|
|
}
|
|
}, [
|
|
h("i", {
|
|
class: getIcon().UPLOAD_IMAGE_REMOVE
|
|
})
|
|
]) : renderEmptyElement($xeUpload)
|
|
])
|
|
])
|
|
]);
|
|
});
|
|
};
|
|
const renderImageAction = (isMoreView) => {
|
|
const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const showTipText = computedShowTipText.value;
|
|
const defTipText = computedDefTipText.value;
|
|
const overCount = computeOverCount.value;
|
|
const imgStyle = computeImgStyle.value;
|
|
const defaultSlot = slots.default;
|
|
const tipSlot = slots.tip || slots.hint;
|
|
if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
|
|
return renderEmptyElement($xeUpload);
|
|
}
|
|
return h("div", {
|
|
key: "action",
|
|
class: "vxe-upload--image-action"
|
|
}, [
|
|
h("div", {
|
|
class: "vxe-upload--image-action-btn",
|
|
onClick: clickEvent
|
|
}, defaultSlot ? defaultSlot({ $upload: $xeUpload }) : [
|
|
h("div", {
|
|
class: "vxe-upload--image-action-box",
|
|
style: isMoreView ? null : imgStyle
|
|
}, [
|
|
showButtonIcon ? h("div", {
|
|
class: "vxe-upload--image-action-icon"
|
|
}, [
|
|
h("i", {
|
|
class: buttonIcon || getIcon().UPLOAD_IMAGE_ADD
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
isMoreView || showButtonText ? h("div", {
|
|
class: "vxe-upload--image-action-content"
|
|
}, buttonText ? `${import_xe_utils2.default.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.imgBtnText")) : renderEmptyElement($xeUpload),
|
|
showTipText && (defTipText || tipSlot) ? h("div", {
|
|
class: "vxe-upload--image-action-hint"
|
|
}, tipSlot ? getSlotVNs(tipSlot({ $upload: $xeUpload })) : `${defTipText}`) : renderEmptyElement($xeUpload)
|
|
])
|
|
])
|
|
]);
|
|
};
|
|
const renderImageMode = () => {
|
|
const { showList, dragSort } = props;
|
|
const { fileList, isDragMove } = reactData;
|
|
const moreOpts = computeMoreOpts.value;
|
|
const { maxCount, showMoreButton } = moreOpts;
|
|
let currList = fileList;
|
|
let overMaxNum = 0;
|
|
if (maxCount && fileList.length > maxCount) {
|
|
overMaxNum = fileList.length - maxCount;
|
|
currList = fileList.slice(0, maxCount);
|
|
}
|
|
return h("div", {
|
|
key: "image",
|
|
class: "vxe-upload--image-wrapper"
|
|
}, showList ? [
|
|
dragSort ? h(TransitionGroup, {
|
|
name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
|
|
tag: "div",
|
|
class: "vxe-upload--image-list"
|
|
}, {
|
|
default: () => renderImageItemList(currList, false).concat([
|
|
showMoreButton && overMaxNum ? h("div", {
|
|
key: "om",
|
|
class: "vxe-upload--image-over-more"
|
|
}, [
|
|
h(button_default, {
|
|
mode: "text",
|
|
content: getI18n("vxe.upload.moreBtnText", [fileList.length]),
|
|
status: "primary",
|
|
onClick: handleMoreEvent
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
renderImageAction(false)
|
|
])
|
|
}) : h("div", {
|
|
class: "vxe-upload--image-list"
|
|
}, renderImageItemList(currList, false).concat([
|
|
showMoreButton && overMaxNum ? h("div", {
|
|
class: "vxe-upload--image-over-more"
|
|
}, [
|
|
h(button_default, {
|
|
mode: "text",
|
|
content: getI18n("vxe.upload.moreBtnText", [fileList.length]),
|
|
status: "primary",
|
|
onClick: handleMoreEvent
|
|
})
|
|
]) : renderEmptyElement($xeUpload),
|
|
renderImageAction(false)
|
|
]))
|
|
] : [
|
|
h("div", {
|
|
class: "vxe-upload--image-list"
|
|
}, [
|
|
renderImageAction(false)
|
|
])
|
|
]);
|
|
};
|
|
const renderVN = () => {
|
|
const { showErrorStatus, dragToUpload, pasteToUpload, dragSort } = props;
|
|
const { isDragUploadStatus, showMorePopup, isActivated, dragIndex } = reactData;
|
|
const vSize = computeSize.value;
|
|
const isDisabled = computeIsDisabled.value;
|
|
const formReadonly = computeFormReadonly.value;
|
|
const isImage = computeIsImage.value;
|
|
const ons = {
|
|
onMousedown: handleItemMousedownEvent
|
|
};
|
|
if (dragToUpload && dragIndex === -1) {
|
|
ons.onDragover = handleUploadDragoverEvent;
|
|
ons.onDragleave = handleUploadDragleaveEvent;
|
|
ons.onDrop = handleUploadDropEvent;
|
|
}
|
|
return h("div", Object.assign({ ref: refElem, class: ["vxe-upload", {
|
|
[`size--${vSize}`]: vSize,
|
|
"is--active": isActivated,
|
|
"is--readonly": formReadonly,
|
|
"is--disabled": isDisabled,
|
|
"is--paste": pasteToUpload,
|
|
"show--error": showErrorStatus,
|
|
"is--drag": isDragUploadStatus
|
|
}] }, ons), [
|
|
isImage ? renderImageMode() : renderAllMode(),
|
|
dragSort ? h("div", {
|
|
ref: refDragLineElem,
|
|
class: "vxe-upload--drag-line"
|
|
}) : renderEmptyElement($xeUpload),
|
|
isDragUploadStatus && !showMorePopup ? h("div", {
|
|
class: "vxe-upload--drag-placeholder"
|
|
}, getI18n("vxe.upload.dragPlaceholder")) : renderEmptyElement($xeUpload)
|
|
]);
|
|
};
|
|
const listFlag = ref(0);
|
|
watch(() => props.modelValue ? props.modelValue.length : 0, () => {
|
|
listFlag.value++;
|
|
});
|
|
watch(() => props.modelValue, () => {
|
|
listFlag.value++;
|
|
});
|
|
watch(listFlag, () => {
|
|
updateFileList();
|
|
});
|
|
onMounted(() => {
|
|
if (props.multiple && props.singleMode) {
|
|
errLog("vxe.error.errConflicts", ["[upload] multiple", "single-mode"]);
|
|
}
|
|
if (props.imageStyle) {
|
|
warnLog("vxe.error.delProp", ["[upload] image-style", "image-config"]);
|
|
}
|
|
if (props.dragSort) {
|
|
initTpImg();
|
|
}
|
|
globalEvents.on($xeUpload, "paste", handleGlobalPasteEvent);
|
|
globalEvents.on($xeUpload, "mousedown", handleGlobalMousedownEvent);
|
|
globalEvents.on($xeUpload, "blur", handleGlobalBlurEvent);
|
|
});
|
|
onUnmounted(() => {
|
|
reactData.isDragUploadStatus = false;
|
|
globalEvents.off($xeUpload, "paste");
|
|
globalEvents.off($xeUpload, "mousedown");
|
|
globalEvents.off($xeUpload, "blur");
|
|
});
|
|
updateFileList();
|
|
$xeUpload.renderVN = renderVN;
|
|
return $xeUpload;
|
|
},
|
|
render() {
|
|
return this.renderVN();
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/upload/index.js
|
|
var VxeUpload = Object.assign({}, upload_default, {
|
|
install(app) {
|
|
app.component(upload_default.name, upload_default);
|
|
}
|
|
});
|
|
dynamicApp.use(VxeUpload);
|
|
VxeUI.component(upload_default);
|
|
VxeUI.saveFile = saveLocalFile;
|
|
VxeUI.readFile = readLocalFile;
|
|
var Upload = VxeUpload;
|
|
var upload_default2 = VxeUpload;
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/vxe-upload/index.js
|
|
var vxe_upload_default = upload_default2;
|
|
export {
|
|
Upload,
|
|
VxeUpload,
|
|
vxe_upload_default as default
|
|
};
|
|
//# sourceMappingURL=vxe-pc-ui_es_vxe-upload_index__js.js.map
|