<script lang="ts" setup>
|
import type { fileItem } from './props';
|
|
import { computed, ref, unref, watch } from 'vue';
|
import { cloneDeep } from 'lodash-es';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { createImgPreview } from '@jnpf/ui';
|
import { downloadByUrl, toFileSize } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { CloseOutlined, DownloadOutlined, EyeOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
|
import { Form, message } from 'ant-design-vue';
|
|
import { getDownloadUrl, getPackDownloadUrl } from '#/api/core/common';
|
// 直接引模块文件而不是 index 桶文件：桶文件会带出 Editor.vue，
|
// 而 UploadFile 几乎每个表单都在用，没必要让编辑器进它的依赖图
|
import { getDocumentServerUrl } from '#/components/OnlyOfficeEditor/src/loadDocsApi';
|
import { $t } from '#/locales';
|
import { onlineUtils } from '#/utils/jnpf';
|
|
import Preview from './Preview.vue';
|
import { uploadFileProps } from './props';
|
import FileUploader from './SimpleUploader/FileUploader.vue';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfUploadFile' });
|
const props = defineProps(uploadFileProps);
|
const emit = defineEmits(['update:value', 'change']);
|
|
const userStore = useUserStore();
|
const globSetting = useGlobSetting();
|
const fileList = ref<fileItem[]>([]);
|
const apiUrl = ref(globSetting.apiURL);
|
const videoTypeList = new Set(['avi', 'avi', 'flv', 'flv', 'mkv', 'mov', 'mp3', 'mp4', 'mpeg', 'mpg', 'mpg', 'ram', 'rm', 'rm', 'rmvb', 'swf', 'wma', 'wmv']);
|
const imgTypeList = new Set(['bmp', 'gif', 'jpeg', 'jpg', 'png']);
|
const zipTypeList = new Set(['7z', 'arj', 'rar', 'z', 'zip']);
|
// 走 OnlyOffice 预览的 Office 格式，与后端 documentType 映射保持一致。
|
// 不含 pdf：平台自带的预览服务本来就能好好渲染 pdf，没必要为它改变现状。
|
const officeTypeList = new Set('csv doc docm docx dot dotx odp ods odt otp ots ott pot potx pps ppsx ppt pptm pptx rtf xls xlsm xlsx xlt xltx'.split(' '));
|
const filePreviewRef = ref<any>(null);
|
const fileUploaderRef = ref<any>(null);
|
const formItemContext = Form.useInjectFormItemContext();
|
|
const getBindValue = computed(() => ({ ...props, value: fileList.value }));
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
fileList.value = val && Array.isArray(val) ? cloneDeep(val) : [];
|
},
|
{
|
deep: true,
|
immediate: true,
|
},
|
);
|
|
defineExpose({ uploadFile });
|
|
function handleSimplePreview(file: fileItem) {
|
if (!props.simple) return;
|
handlePreview(file);
|
}
|
function handlePreview(file: fileItem) {
|
if (videoTypeList.has(file.fileExtension || '')) {
|
message.error($t('component.upload.videoNoPreview'));
|
return;
|
}
|
if (zipTypeList.has(file.fileExtension || '')) {
|
message.error($t('component.upload.zipNoPreview'));
|
return;
|
}
|
// 图片预览
|
if (imgTypeList.has(file.fileExtension || '')) {
|
const imageList = [getImgUrl(file.url)];
|
createImgPreview({ imageList });
|
return;
|
}
|
// Office 文档走 OnlyOffice 只读预览。没配 DS 地址时回落到平台自带的预览服务——
|
// 否则交付环境忘填 VITE_GLOB_ONLYOFFICE_URL 就会把原本能用的预览一起弄坏
|
if (officeTypeList.has(file.fileExtension || '') && getDocumentServerUrl()) {
|
onlineUtils.openOfficeDocument({ file, mode: 'view' });
|
return;
|
}
|
// 文件预览
|
filePreviewRef.value?.init(file);
|
}
|
function getImgUrl(url) {
|
const userInfo: any = userStore.getUserInfo || {};
|
const securityKey = userInfo?.securityKey || '';
|
if (!securityKey) return apiUrl.value + url;
|
const realUrl = `${apiUrl.value + url + (url.includes('?') ? '&' : '?')}s=${securityKey}`;
|
return realUrl;
|
}
|
function handleDownload(file: fileItem) {
|
if (!file.fileId) return;
|
getDownloadUrl(props.type, file.fileId).then((res) => {
|
downloadByUrl({ fileName: file.name, url: res.data.url });
|
});
|
}
|
// 批量下载
|
function handleDownloadAll() {
|
const data: any[] = [];
|
for (let i = 0; i < unref(fileList).length; i++) {
|
const item: any = unref(fileList)[i];
|
data.push({ fileId: item.fileId, fileName: item.name });
|
}
|
getPackDownloadUrl(props.type, data).then((res) => {
|
if (!res.data && !res.data.downloadVo) return;
|
downloadByUrl({ fileName: res.data.downloadName, url: res.data.downloadVo.url });
|
});
|
}
|
function handleRemove(index: number) {
|
fileList.value.splice(index, 1);
|
emit('update:value', unref(fileList));
|
emit('change', unref(fileList));
|
formItemContext.onFieldChange();
|
}
|
function uploadFile() {
|
const isTopLimit = props.limit ? fileList.value.length >= props.limit : false;
|
if (isTopLimit) {
|
message.error($t('component.upload.fileMaxNumber', [props.limit]));
|
return false;
|
}
|
fileUploaderRef.value?.openUploader();
|
}
|
function handleFileSuccess(data) {
|
const isTopLimit = props.limit ? fileList.value.length >= props.limit : false;
|
if (isTopLimit) {
|
message.error($t('component.upload.fileMaxNumber', [props.limit]));
|
return false;
|
}
|
fileList.value.push(data);
|
emit('update:value', unref(fileList));
|
emit('change', unref(fileList));
|
formItemContext.onFieldChange();
|
}
|
</script>
|
|
<template>
|
<div :class="$attrs.class" class="upload-file-container">
|
<div class="flex justify-between" v-if="showType !== 'dragger'">
|
<a-button :disabled="disabled" pre-icon="icon-ym icon-ym-btn-upload" @click="uploadFile" v-if="!detailed">{{ buttonText }}</a-button>
|
<p v-if="fileList.length > 0 && showAllDownload" class="link-text" @click="handleDownloadAll">
|
<DownloadOutlined />{{ $t('component.upload.downloadAll') }}
|
</p>
|
</div>
|
<div v-if="tipText && !detailed && showType !== 'dragger'" class="upload-file__tip">{{ tipText }}</div>
|
<FileUploader ref="fileUploaderRef" v-bind="getBindValue" @file-success="handleFileSuccess" v-show="!detailed" />
|
<div v-if="showUploadList" :class="{ 'upload-file-list__simple': simple }" class="upload-file-list">
|
<div v-for="(file, index) in fileList" :key="file.fileId" :class="{ 'upload-file-list__item_detail': detailed }" class="upload-file-list__item">
|
<a
|
:title="file.name + (file.fileSize && !simple ? toFileSize(file.fileSize) : '')"
|
class="upload-file-list__item-name"
|
@click="handleSimplePreview(file)">
|
<PaperClipOutlined v-if="showIcon" />
|
{{ file.name }}{{ file.fileSize && !simple ? ` ${toFileSize(file.fileSize)}` : '' }}
|
</a>
|
<span class="upload-file-list__item-actions">
|
<EyeOutlined v-if="showView" :title="$t('component.upload.view')" @click="handlePreview(file)" />
|
<DownloadOutlined v-if="showDownload" :title="$t('component.upload.download')" @click="handleDownload(file)" />
|
<CloseOutlined v-show="!disabled && !detailed" :title="$t('component.upload.del')" @click="handleRemove(index)" />
|
</span>
|
</div>
|
</div>
|
<Preview ref="filePreviewRef" :show-download="simple" :type="type" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.upload-file-container {
|
.link-text {
|
line-height: 32px;
|
|
.anticon {
|
margin-right: 2px;
|
}
|
}
|
|
.upload-file__tip {
|
margin-top: 5px;
|
font-size: 12px;
|
line-height: 1.2;
|
color: var(--text-color-secondary);
|
word-break: break-all;
|
}
|
|
.upload-file-list {
|
&.upload-file-list__simple {
|
.upload-file-list__item {
|
color: var(--primary-color);
|
|
&:first-child {
|
margin-top: 4px !important;
|
}
|
|
&:hover {
|
background-color: unset !important;
|
}
|
|
.upload-file-list__item-name {
|
padding-left: 0;
|
|
.anticon {
|
display: none;
|
}
|
}
|
|
.upload-file-list__item-actions {
|
display: none;
|
}
|
}
|
}
|
|
.upload-file-list__item {
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
margin-top: 5px;
|
font-size: 14px;
|
line-height: 26px;
|
color: var(--text-color-label);
|
border-radius: 4px;
|
|
a {
|
color: inherit;
|
}
|
|
&:first-child {
|
margin-top: 10px;
|
}
|
|
&:hover {
|
background-color: var(--selected-hover-bg);
|
|
.upload-file-list__item-name {
|
color: var(--primary-color);
|
}
|
}
|
|
.upload-file-list__item-name {
|
flex: 1;
|
min-width: 0;
|
padding-left: 4px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
|
.anticon {
|
height: 100%;
|
margin-right: 5px;
|
color: #909399;
|
}
|
}
|
|
.upload-file-list__item-actions {
|
display: flex;
|
flex-shrink: 0;
|
gap: 6px;
|
align-items: center;
|
padding: 0 5px;
|
|
.anticon {
|
display: inline-block;
|
color: var(--text-color-label);
|
cursor: pointer;
|
opacity: 0.75;
|
}
|
}
|
}
|
}
|
|
.list-enter-active,
|
.list-leave-active {
|
transition: all 1s ease;
|
}
|
|
.list-enter-from,
|
.list-leave-to {
|
opacity: 0;
|
transform: translateY(-30px);
|
}
|
}
|
</style>
|
