|
|
@@ -14,6 +14,7 @@ import type {
|
|
|
import type { Component, Ref } from 'vue';
|
|
|
|
|
|
import type { BaseFormComponentType } from '@vben/common-ui';
|
|
|
+import type { Sortable } from '@vben/hooks';
|
|
|
import type { Recordable } from '@vben/types';
|
|
|
|
|
|
import {
|
|
|
@@ -21,6 +22,9 @@ import {
|
|
|
defineAsyncComponent,
|
|
|
defineComponent,
|
|
|
h,
|
|
|
+ nextTick,
|
|
|
+ onMounted,
|
|
|
+ onUnmounted,
|
|
|
ref,
|
|
|
render,
|
|
|
unref,
|
|
|
@@ -33,6 +37,7 @@ import {
|
|
|
IconPicker,
|
|
|
VCropper,
|
|
|
} from '@vben/common-ui';
|
|
|
+import { useSortable } from '@vben/hooks';
|
|
|
import { IconifyIcon } from '@vben/icons';
|
|
|
import { $t } from '@vben/locales';
|
|
|
import { isEmpty } from '@vben/utils';
|
|
|
@@ -126,260 +131,261 @@ const withDefaultPlaceholder = <T extends Component>(
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const withPreviewUpload = () => {
|
|
|
- // 检查是否为图片文件的辅助函数
|
|
|
- const isImageFile = (file: UploadFile): boolean => {
|
|
|
- const imageExtensions = new Set([
|
|
|
- 'bmp',
|
|
|
- 'gif',
|
|
|
- 'jpeg',
|
|
|
- 'jpg',
|
|
|
- 'png',
|
|
|
- 'svg',
|
|
|
- 'webp',
|
|
|
- ]);
|
|
|
- if (file.url) {
|
|
|
- try {
|
|
|
- const pathname = new URL(file.url, 'http://localhost').pathname;
|
|
|
- const ext = pathname.split('.').pop()?.toLowerCase();
|
|
|
- return ext ? imageExtensions.has(ext) : false;
|
|
|
- } catch {
|
|
|
- const ext = file.url?.split('.').pop()?.toLowerCase();
|
|
|
- return ext ? imageExtensions.has(ext) : false;
|
|
|
- }
|
|
|
- }
|
|
|
- if (!file.type) {
|
|
|
- const ext = file.name?.split('.').pop()?.toLowerCase();
|
|
|
- return ext ? imageExtensions.has(ext) : false;
|
|
|
+const IMAGE_EXTENSIONS = new Set([
|
|
|
+ 'bmp',
|
|
|
+ 'gif',
|
|
|
+ 'jpeg',
|
|
|
+ 'jpg',
|
|
|
+ 'png',
|
|
|
+ 'svg',
|
|
|
+ 'webp',
|
|
|
+]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 检查是否为图片文件
|
|
|
+ */
|
|
|
+function isImageFile(file: UploadFile): boolean {
|
|
|
+ if (file.url) {
|
|
|
+ try {
|
|
|
+ const pathname = new URL(file.url, 'http://localhost').pathname;
|
|
|
+ const ext = pathname.split('.').pop()?.toLowerCase();
|
|
|
+ return ext ? IMAGE_EXTENSIONS.has(ext) : false;
|
|
|
+ } catch {
|
|
|
+ const ext = file.url?.split('.').pop()?.toLowerCase();
|
|
|
+ return ext ? IMAGE_EXTENSIONS.has(ext) : false;
|
|
|
}
|
|
|
- return file.type.startsWith('image/');
|
|
|
+ }
|
|
|
+ if (!file.type) {
|
|
|
+ const ext = file.name?.split('.').pop()?.toLowerCase();
|
|
|
+ return ext ? IMAGE_EXTENSIONS.has(ext) : false;
|
|
|
+ }
|
|
|
+ return file.type.startsWith('image/');
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 创建默认的上传按钮插槽
|
|
|
+ */
|
|
|
+function createDefaultUploadSlots(listType: string, placeholder: string) {
|
|
|
+ if (listType === 'picture-card') {
|
|
|
+ return { default: () => placeholder };
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ default: () =>
|
|
|
+ h(
|
|
|
+ Button,
|
|
|
+ {
|
|
|
+ icon: h(IconifyIcon, {
|
|
|
+ icon: 'ant-design:upload-outlined',
|
|
|
+ class: 'mb-1 size-4',
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ () => placeholder,
|
|
|
+ ),
|
|
|
};
|
|
|
- // 创建默认的上传按钮插槽
|
|
|
- const createDefaultSlotsWithUpload = (
|
|
|
- listType: string,
|
|
|
- placeholder: string,
|
|
|
- ) => {
|
|
|
- switch (listType) {
|
|
|
- case 'picture-card': {
|
|
|
- return {
|
|
|
- default: () => placeholder,
|
|
|
- };
|
|
|
- }
|
|
|
- default: {
|
|
|
- return {
|
|
|
- default: () =>
|
|
|
- h(
|
|
|
- Button,
|
|
|
- {
|
|
|
- icon: h(IconifyIcon, {
|
|
|
- icon: 'ant-design:upload-outlined',
|
|
|
- class: 'mb-1 size-4',
|
|
|
- }),
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取文件的 Base64
|
|
|
+ */
|
|
|
+function getBase64(file: File): Promise<string> {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.addEventListener('load', () => resolve(reader.result as string));
|
|
|
+ reader.addEventListener('error', reject);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 预览图片
|
|
|
+ */
|
|
|
+async function previewImage(
|
|
|
+ file: UploadFile,
|
|
|
+ visible: Ref<boolean>,
|
|
|
+ fileList: Ref<UploadProps['fileList']>,
|
|
|
+) {
|
|
|
+ // 非图片文件直接打开链接
|
|
|
+ if (!isImageFile(file)) {
|
|
|
+ const url = file.url || file.preview;
|
|
|
+ if (url) {
|
|
|
+ window.open(url, '_blank');
|
|
|
+ } else {
|
|
|
+ message.error($t('ui.formRules.previewWarning'));
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const [ImageComponent, PreviewGroupComponent] = await Promise.all([
|
|
|
+ Image,
|
|
|
+ PreviewGroup,
|
|
|
+ ]);
|
|
|
+
|
|
|
+ // 过滤图片文件并生成预览
|
|
|
+ const imageFiles = (unref(fileList) || []).filter((f) => isImageFile(f));
|
|
|
+
|
|
|
+ for (const imgFile of imageFiles) {
|
|
|
+ if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
|
|
|
+ imgFile.preview = await getBase64(imgFile.originFileObj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const container = document.createElement('div');
|
|
|
+ document.body.append(container);
|
|
|
+ let isUnmounted = false;
|
|
|
+
|
|
|
+ const currentIndex = imageFiles.findIndex((f) => f.uid === file.uid);
|
|
|
+
|
|
|
+ const PreviewWrapper = {
|
|
|
+ setup() {
|
|
|
+ return () => {
|
|
|
+ if (isUnmounted) return null;
|
|
|
+ return h(
|
|
|
+ PreviewGroupComponent,
|
|
|
+ {
|
|
|
+ class: 'hidden',
|
|
|
+ preview: {
|
|
|
+ visible: visible.value,
|
|
|
+ current: currentIndex,
|
|
|
+ onVisibleChange: (value: boolean) => {
|
|
|
+ visible.value = value;
|
|
|
+ if (!value) {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!isUnmounted && container) {
|
|
|
+ isUnmounted = true;
|
|
|
+ render(null, container);
|
|
|
+ container.remove();
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
},
|
|
|
- () => placeholder,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ () =>
|
|
|
+ imageFiles.map((imgFile) =>
|
|
|
+ h(ImageComponent, {
|
|
|
+ key: imgFile.uid,
|
|
|
+ src: imgFile.url || imgFile.preview,
|
|
|
+ }),
|
|
|
),
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
+ );
|
|
|
+ };
|
|
|
+ },
|
|
|
};
|
|
|
- // 构建预览图片组
|
|
|
- const previewImage = async (
|
|
|
- file: UploadFile,
|
|
|
- visible: Ref<boolean>,
|
|
|
- fileList: Ref<UploadProps['fileList']>,
|
|
|
- ) => {
|
|
|
- // 如果当前文件不是图片，直接打开
|
|
|
- if (!isImageFile(file)) {
|
|
|
- if (file.url) {
|
|
|
- window.open(file.url, '_blank');
|
|
|
- } else if (file.preview) {
|
|
|
- window.open(file.preview, '_blank');
|
|
|
- } else {
|
|
|
- message.error($t('ui.formRules.previewWarning'));
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
|
|
|
- // 对于图片文件，继续使用预览组
|
|
|
- const [ImageComponent, PreviewGroupComponent] = await Promise.all([
|
|
|
- Image,
|
|
|
- PreviewGroup,
|
|
|
- ]);
|
|
|
-
|
|
|
- const getBase64 = (file: File) => {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const reader = new FileReader();
|
|
|
- reader.readAsDataURL(file);
|
|
|
- reader.addEventListener('load', () => resolve(reader.result));
|
|
|
- reader.addEventListener('error', (error) => reject(error));
|
|
|
- });
|
|
|
- };
|
|
|
- // 从fileList中过滤出所有图片文件
|
|
|
- const imageFiles = (unref(fileList) || []).filter((element) =>
|
|
|
- isImageFile(element),
|
|
|
- );
|
|
|
-
|
|
|
- // 为所有没有预览地址的图片生成预览
|
|
|
- for (const imgFile of imageFiles) {
|
|
|
- if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
|
|
|
- imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
|
|
|
- }
|
|
|
- }
|
|
|
- const container: HTMLElement | null = document.createElement('div');
|
|
|
+ render(h(PreviewWrapper), container);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 图片裁剪操作
|
|
|
+ */
|
|
|
+function cropImage(file: File, aspectRatio: string | undefined) {
|
|
|
+ return new Promise<Blob | string | undefined>((resolve, reject) => {
|
|
|
+ const container = document.createElement('div');
|
|
|
document.body.append(container);
|
|
|
|
|
|
- // 用于追踪组件是否已卸载
|
|
|
let isUnmounted = false;
|
|
|
+ let objectUrl: null | string = null;
|
|
|
+
|
|
|
+ const open = ref<boolean>(true);
|
|
|
+ const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
|
|
|
+
|
|
|
+ const closeModal = () => {
|
|
|
+ open.value = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!isUnmounted && container) {
|
|
|
+ if (objectUrl) {
|
|
|
+ URL.revokeObjectURL(objectUrl);
|
|
|
+ }
|
|
|
+ isUnmounted = true;
|
|
|
+ render(null, container);
|
|
|
+ container.remove();
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ };
|
|
|
|
|
|
- const PreviewWrapper = {
|
|
|
+ const CropperWrapper = {
|
|
|
setup() {
|
|
|
return () => {
|
|
|
if (isUnmounted) return null;
|
|
|
+ if (!objectUrl) {
|
|
|
+ objectUrl = URL.createObjectURL(file);
|
|
|
+ }
|
|
|
return h(
|
|
|
- PreviewGroupComponent,
|
|
|
+ Modal,
|
|
|
{
|
|
|
- class: 'hidden',
|
|
|
- preview: {
|
|
|
- visible: visible.value,
|
|
|
- // 设置初始显示的图片索引
|
|
|
- current: imageFiles.findIndex((f) => f.uid === file.uid),
|
|
|
- onVisibleChange: (value: boolean) => {
|
|
|
- visible.value = value;
|
|
|
- if (!value) {
|
|
|
- // 延迟清理，确保动画完成
|
|
|
- setTimeout(() => {
|
|
|
- if (!isUnmounted && container) {
|
|
|
- isUnmounted = true;
|
|
|
- render(null, container);
|
|
|
- container.remove();
|
|
|
- }
|
|
|
- }, 300);
|
|
|
+ open: open.value,
|
|
|
+ title: h('div', {}, [
|
|
|
+ $t('ui.crop.title'),
|
|
|
+ h(
|
|
|
+ 'span',
|
|
|
+ {
|
|
|
+ class: `${aspectRatio ? '' : 'hidden'} ml-2 text-sm text-gray-400 font-normal`,
|
|
|
+ },
|
|
|
+ $t('ui.crop.titleTip', [aspectRatio]),
|
|
|
+ ),
|
|
|
+ ]),
|
|
|
+ centered: true,
|
|
|
+ width: 548,
|
|
|
+ keyboard: false,
|
|
|
+ maskClosable: false,
|
|
|
+ closable: false,
|
|
|
+ cancelText: $t('common.cancel'),
|
|
|
+ okText: $t('ui.crop.confirm'),
|
|
|
+ destroyOnClose: true,
|
|
|
+ onOk: async () => {
|
|
|
+ const cropper = cropperRef.value;
|
|
|
+ if (!cropper) {
|
|
|
+ reject(new Error('Cropper not found'));
|
|
|
+ closeModal();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const dataUrl = await cropper.getCropImage();
|
|
|
+ if (dataUrl) {
|
|
|
+ resolve(dataUrl);
|
|
|
+ } else {
|
|
|
+ reject(new Error($t('ui.crop.errorTip')));
|
|
|
}
|
|
|
- },
|
|
|
+ } catch {
|
|
|
+ reject(new Error($t('ui.crop.errorTip')));
|
|
|
+ } finally {
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ resolve('');
|
|
|
+ closeModal();
|
|
|
},
|
|
|
},
|
|
|
() =>
|
|
|
- // 渲染所有图片文件
|
|
|
- imageFiles.map((imgFile) =>
|
|
|
- h(ImageComponent, {
|
|
|
- key: imgFile.uid,
|
|
|
- src: imgFile.url || imgFile.preview,
|
|
|
- }),
|
|
|
- ),
|
|
|
+ h(VCropper, {
|
|
|
+ ref: (ref: any) => (cropperRef.value = ref),
|
|
|
+ img: objectUrl as string,
|
|
|
+ aspectRatio,
|
|
|
+ }),
|
|
|
);
|
|
|
};
|
|
|
},
|
|
|
};
|
|
|
|
|
|
- render(h(PreviewWrapper), container);
|
|
|
- };
|
|
|
-
|
|
|
- // 图片裁剪操作
|
|
|
- const cropImage = (file: File, aspectRatio: string | undefined) => {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const container: HTMLElement | null = document.createElement('div');
|
|
|
- document.body.append(container);
|
|
|
-
|
|
|
- // 用于追踪组件是否已卸载
|
|
|
- let isUnmounted = false;
|
|
|
- let objectUrl: null | string = null;
|
|
|
-
|
|
|
- const open = ref<boolean>(true);
|
|
|
- const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
|
|
|
-
|
|
|
- const closeModal = () => {
|
|
|
- open.value = false;
|
|
|
- // 延迟清理，确保动画完成
|
|
|
- setTimeout(() => {
|
|
|
- if (!isUnmounted && container) {
|
|
|
- if (objectUrl) {
|
|
|
- URL.revokeObjectURL(objectUrl);
|
|
|
- }
|
|
|
- isUnmounted = true;
|
|
|
- render(null, container);
|
|
|
- container.remove();
|
|
|
- }
|
|
|
- }, 300);
|
|
|
- };
|
|
|
-
|
|
|
- const CropperWrapper = {
|
|
|
- setup() {
|
|
|
- return () => {
|
|
|
- if (isUnmounted) return null;
|
|
|
- if (!objectUrl) {
|
|
|
- objectUrl = URL.createObjectURL(file);
|
|
|
- }
|
|
|
- return h(
|
|
|
- Modal,
|
|
|
- {
|
|
|
- open: open.value,
|
|
|
- title: h('div', {}, [
|
|
|
- $t('ui.crop.title'),
|
|
|
- h(
|
|
|
- 'span',
|
|
|
- {
|
|
|
- class: `${aspectRatio ? '' : 'hidden'} ml-2 text-sm text-gray-400 font-normal`,
|
|
|
- },
|
|
|
- $t('ui.crop.titleTip', [aspectRatio]),
|
|
|
- ),
|
|
|
- ]),
|
|
|
- centered: true,
|
|
|
- width: 548,
|
|
|
- keyboard: false,
|
|
|
- maskClosable: false,
|
|
|
- closable: false,
|
|
|
- cancelText: $t('common.cancel'),
|
|
|
- okText: $t('ui.crop.confirm'),
|
|
|
- destroyOnClose: true,
|
|
|
- onOk: async () => {
|
|
|
- const cropper = cropperRef.value;
|
|
|
- if (!cropper) {
|
|
|
- reject(new Error('Cropper not found'));
|
|
|
- closeModal();
|
|
|
- return;
|
|
|
- }
|
|
|
- try {
|
|
|
- const dataUrl = await cropper.getCropImage();
|
|
|
- resolve(dataUrl);
|
|
|
- } catch {
|
|
|
- reject(new Error($t('ui.crop.errorTip')));
|
|
|
- } finally {
|
|
|
- closeModal();
|
|
|
- }
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- resolve('');
|
|
|
- closeModal();
|
|
|
- },
|
|
|
- },
|
|
|
- () =>
|
|
|
- h(VCropper, {
|
|
|
- ref: (ref: any) => (cropperRef.value = ref),
|
|
|
- img: objectUrl as string,
|
|
|
- aspectRatio,
|
|
|
- }),
|
|
|
- );
|
|
|
- };
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- render(h(CropperWrapper), container);
|
|
|
- });
|
|
|
- };
|
|
|
+ render(h(CropperWrapper), container);
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
+/**
|
|
|
+ * 带预览功能的上传组件
|
|
|
+ */
|
|
|
+const withPreviewUpload = () => {
|
|
|
return defineComponent({
|
|
|
name: Upload.name,
|
|
|
emits: ['update:modelValue'],
|
|
|
- setup: (
|
|
|
+ setup(
|
|
|
props: any,
|
|
|
{ attrs, slots, emit }: { attrs: any; emit: any; slots: any },
|
|
|
- ) => {
|
|
|
+ ) {
|
|
|
const previewVisible = ref<boolean>(false);
|
|
|
-
|
|
|
- const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
|
|
|
-
|
|
|
+ const placeholder = attrs?.placeholder || $t('ui.placeholder.upload');
|
|
|
const listType = attrs?.listType || attrs?.['list-type'] || 'text';
|
|
|
-
|
|
|
const fileList = ref<UploadProps['fileList']>(
|
|
|
attrs?.fileList || attrs?.['file-list'] || [],
|
|
|
);
|
|
|
@@ -393,12 +399,14 @@ const withPreviewUpload = () => {
|
|
|
file: UploadFile,
|
|
|
originFileList: Array<File>,
|
|
|
) => {
|
|
|
+ // 文件大小限制
|
|
|
if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) {
|
|
|
message.error($t('ui.formRules.sizeLimit', [maxSize.value]));
|
|
|
file.status = 'removed';
|
|
|
return false;
|
|
|
}
|
|
|
- // 多选或者非图片不唤起裁剪框
|
|
|
+
|
|
|
+ // 图片裁剪处理
|
|
|
if (
|
|
|
attrs.crop &&
|
|
|
!attrs.multiple &&
|
|
|
@@ -406,14 +414,11 @@ const withPreviewUpload = () => {
|
|
|
isImageFile(file)
|
|
|
) {
|
|
|
file.status = 'removed';
|
|
|
- // antd Upload组件问题 file参数获取的是UploadFile类型对象无法取到File类型 所以通过originFileList[0]获取
|
|
|
const blob = await cropImage(originFileList[0], aspectRatio.value);
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- if (!blob) {
|
|
|
- return reject(new Error($t('ui.crop.errorTip')));
|
|
|
- }
|
|
|
- resolve(blob);
|
|
|
- });
|
|
|
+ if (!blob) {
|
|
|
+ throw new Error($t('ui.crop.errorTip'));
|
|
|
+ }
|
|
|
+ return blob;
|
|
|
}
|
|
|
|
|
|
return attrs.beforeUpload?.(file) ?? true;
|
|
|
@@ -421,12 +426,9 @@ const withPreviewUpload = () => {
|
|
|
|
|
|
const handleChange = (event: UploadChangeParam) => {
|
|
|
try {
|
|
|
- // 行内写法 handleChange: (event) => {}
|
|
|
attrs.handleChange?.(event);
|
|
|
- // template写法 @handle-change="(event) => {}"
|
|
|
attrs.onHandleChange?.(event);
|
|
|
} catch (error) {
|
|
|
- // Avoid breaking internal v-model sync on user handler errors
|
|
|
console.error(error);
|
|
|
}
|
|
|
fileList.value = event.fileList.filter(
|
|
|
@@ -443,21 +445,88 @@ const withPreviewUpload = () => {
|
|
|
await previewImage(file, previewVisible, fileList);
|
|
|
};
|
|
|
|
|
|
- const renderUploadButton = (): any => {
|
|
|
- const isDisabled = attrs.disabled;
|
|
|
-
|
|
|
- // 如果禁用，不渲染上传按钮
|
|
|
- if (isDisabled) {
|
|
|
- return null;
|
|
|
- }
|
|
|
-
|
|
|
- // 否则渲染默认上传按钮
|
|
|
+ const renderUploadButton = () => {
|
|
|
+ if (attrs.disabled) return null;
|
|
|
return isEmpty(slots)
|
|
|
- ? createDefaultSlotsWithUpload(listType, placeholder)
|
|
|
+ ? createDefaultUploadSlots(listType, placeholder)
|
|
|
: slots;
|
|
|
};
|
|
|
|
|
|
- // 可以监听到表单API设置的值
|
|
|
+ // 拖拽排序
|
|
|
+ const draggable = computed(
|
|
|
+ () => (attrs.draggable ?? false) && !attrs.disabled,
|
|
|
+ );
|
|
|
+ const uploadId = `upload-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
|
|
|
+ const sortableInstance = ref<null | Sortable>(null);
|
|
|
+
|
|
|
+ const styleId = `upload-drag-style-${uploadId}`;
|
|
|
+
|
|
|
+ function injectDragStyle() {
|
|
|
+ if (!document.querySelector(`[id="${styleId}"]`)) {
|
|
|
+ const style = document.createElement('style');
|
|
|
+ style.id = styleId;
|
|
|
+ style.textContent = `
|
|
|
+ [data-upload-id="${uploadId}"] .ant-upload-list-item { cursor: move; }
|
|
|
+ [data-upload-id="${uploadId}"] .ant-upload-list-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
|
|
|
+ `;
|
|
|
+ document.head.append(style);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeDragStyle() {
|
|
|
+ document.querySelector(`[id="${styleId}"]`)?.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function initSortable(retryCount = 0) {
|
|
|
+ if (!draggable.value) return;
|
|
|
+
|
|
|
+ injectDragStyle();
|
|
|
+ await nextTick();
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 100));
|
|
|
+
|
|
|
+ const container = document.querySelector(
|
|
|
+ `[data-upload-id="${uploadId}"] .ant-upload-list`,
|
|
|
+ ) as HTMLElement;
|
|
|
+
|
|
|
+ if (!container) {
|
|
|
+ if (retryCount < 5) {
|
|
|
+ setTimeout(() => initSortable(retryCount + 1), 200);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const { initializeSortable } = useSortable(container, {
|
|
|
+ animation: 300,
|
|
|
+ delay: 400,
|
|
|
+ delayOnTouchOnly: true,
|
|
|
+ filter:
|
|
|
+ '.ant-upload-select, .ant-upload-list-item-error, .ant-upload-list-item-uploading',
|
|
|
+ onEnd: (evt) => {
|
|
|
+ const { oldIndex, newIndex } = evt;
|
|
|
+ if (
|
|
|
+ oldIndex === undefined ||
|
|
|
+ newIndex === undefined ||
|
|
|
+ oldIndex === newIndex
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const list = [...(fileList.value || [])];
|
|
|
+ const [movedItem] = list.splice(oldIndex, 1);
|
|
|
+ if (movedItem) {
|
|
|
+ list.splice(newIndex, 0, movedItem);
|
|
|
+ fileList.value = list;
|
|
|
+ }
|
|
|
+
|
|
|
+ attrs.onDragSort?.(oldIndex, newIndex);
|
|
|
+ emit('update:modelValue', fileList.value);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ sortableInstance.value = await initializeSortable();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听表单值变化
|
|
|
watch(
|
|
|
() => attrs.modelValue,
|
|
|
(res) => {
|
|
|
@@ -465,18 +534,28 @@ const withPreviewUpload = () => {
|
|
|
},
|
|
|
);
|
|
|
|
|
|
+ onMounted(initSortable);
|
|
|
+ onUnmounted(() => {
|
|
|
+ sortableInstance.value?.destroy();
|
|
|
+ removeDragStyle();
|
|
|
+ });
|
|
|
+
|
|
|
return () =>
|
|
|
h(
|
|
|
- Upload,
|
|
|
- {
|
|
|
- ...props,
|
|
|
- ...attrs,
|
|
|
- fileList: fileList.value,
|
|
|
- beforeUpload: handleBeforeUpload,
|
|
|
- onChange: handleChange,
|
|
|
- onPreview: handlePreview,
|
|
|
- },
|
|
|
- renderUploadButton(),
|
|
|
+ 'div',
|
|
|
+ { 'data-upload-id': uploadId, class: 'w-full' },
|
|
|
+ h(
|
|
|
+ Upload,
|
|
|
+ {
|
|
|
+ ...props,
|
|
|
+ ...attrs,
|
|
|
+ fileList: fileList.value,
|
|
|
+ beforeUpload: handleBeforeUpload,
|
|
|
+ onChange: handleChange,
|
|
|
+ onPreview: handlePreview,
|
|
|
+ },
|
|
|
+ renderUploadButton() as any,
|
|
|
+ ),
|
|
|
);
|
|
|
},
|
|
|
});
|
Jin Mao