126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { FileType } from 'ant-design-vue/lib/upload/interface';
|
|
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
|
import useI18n from '@/hooks/useI18n';
|
|
const { t } = useI18n();
|
|
const emit = defineEmits(['upload', 'close', 'update:visible']);
|
|
const props = defineProps({
|
|
/**窗口标题 */
|
|
title: {
|
|
type: String,
|
|
default: '标题',
|
|
},
|
|
/**是否上传中 */
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
/**是否弹出显示，必传 */
|
|
visible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
/**允许上传的文件拓展类型，默认任意，可指定['.xls', '.xlsx'] */
|
|
ext: {
|
|
type: Array<string>,
|
|
default: [],
|
|
},
|
|
/**上传文件大小（单位MB），默认不限制，可指定10 */
|
|
size: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
/**弹框关闭事件 */
|
|
function fnModalClose() {
|
|
if (props.loading) return;
|
|
emit('close');
|
|
}
|
|
|
|
/**上传前检查或转换压缩 */
|
|
function fnBeforeUpload(file: FileType) {
|
|
if (props.loading) return false;
|
|
// 检查文件大小
|
|
if (props.size > 0) {
|
|
const fileSize = file.size;
|
|
const isLtM = fileSize / 1024 / 1024 < props.size;
|
|
if (!isLtM) {
|
|
message.error(
|
|
`${t('components.UploadModal.allowFilter')} ${props.size}MB`,
|
|
3
|
|
);
|
|
return false;
|
|
}
|
|
}
|
|
// 检查后缀
|
|
if (props.ext.length > 0) {
|
|
const fileName = file.name;
|
|
const isAllowType = props.ext.some(v => fileName.endsWith(v));
|
|
if (!isAllowType) {
|
|
message.error(
|
|
`${t('components.UploadModal.onlyAllow')} ${props.ext.join('、')}`,
|
|
3
|
|
);
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
/**上传请求发出 */
|
|
function fnUpload(up: UploadRequestOption) {
|
|
emit('upload', up.file);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ProModal
|
|
:drag="true"
|
|
:destroyOnClose="true"
|
|
:title="props.title"
|
|
:visible="props.visible"
|
|
:keyboard="false"
|
|
:mask-closable="false"
|
|
:confirm-loading="props.loading"
|
|
:footer="false"
|
|
@cancel="fnModalClose"
|
|
>
|
|
<a-space :size="8" direction="vertical" style="width: 100%">
|
|
<a-upload-dragger
|
|
:disabled="props.loading"
|
|
:accept="props.ext.join(',')"
|
|
name="file"
|
|
:max-count="1"
|
|
:show-upload-list="false"
|
|
:before-upload="fnBeforeUpload"
|
|
:custom-request="fnUpload"
|
|
>
|
|
<p class="ant-upload-drag-icon">
|
|
<inbox-outlined></inbox-outlined>
|
|
</p>
|
|
<p class="ant-upload-text">
|
|
{{ t('components.UploadModal.uploadTip') }}
|
|
</p>
|
|
<p class="ant-upload-hint">
|
|
<template v-if="props.size > 0">
|
|
<div>
|
|
{{ t('components.UploadModal.allowSize') }} {{ props.size }} MB
|
|
</div>
|
|
</template>
|
|
<template v-if="props.ext.length > 0">
|
|
<div>
|
|
{{ t('components.UploadModal.allowFormat') }}
|
|
{{ props.ext.join('、') }}
|
|
</div>
|
|
</template>
|
|
</p>
|
|
</a-upload-dragger>
|
|
<slot></slot>
|
|
</a-space>
|
|
</ProModal>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|