191 lines
7.7 KiB
Vue
191 lines
7.7 KiB
Vue
<template>
|
||
<div class="zfile-file-upload-body">
|
||
|
||
<el-upload drag :http-request="beforeUpload" ref="uploadRef" :show-file-list="false" multiple >
|
||
<img style="margin: auto;" src="@/assets/images/wendang.png" alt="">
|
||
<div class="el-upload__text text-gray-400">
|
||
<span >
|
||
拖拽文件到这里或<em> 点击上传</em>, 上传多个或单个
|
||
</span>
|
||
<!-- <span >
|
||
点击选择文件夹上传, 上传至 <em>{{ currentPath }}</em>
|
||
<br>
|
||
<span class="text-gray-400">（此处不支持拖拽文件夹，只支持点击选择文件夹）</span>
|
||
</span> -->
|
||
</div>
|
||
</el-upload>
|
||
<div class="mt-5 space-y-2.5">
|
||
<div class="flex flex-row w-full relative rounded-lg" v-for="item in uploadProgressInfoSorted"
|
||
:key="item.index">
|
||
|
||
<div class="mr-2 p-1.5">
|
||
<svg-icon class="text-5xl mt-1 py-1.5 sm:py-1"
|
||
:name="'file-type-' + common.getFileIconName(item)">
|
||
</svg-icon>
|
||
</div>
|
||
|
||
<div class="p-1.5 py-2.5 sm:py-3 w-full flex flex-col justify-between">
|
||
<div class="flex justify-between">
|
||
<div class="flex sm:space-x-5 flex-col sm:flex-row">
|
||
<div class="font-medium text-sm max-w-[80%] line-clamp-1">{{ item.name }}</div>
|
||
<div class="text-gray-400 text-xs leading-5 line-clamp-1 active:line-clamp-none">
|
||
<span class="mr-4 box animate__animated animate__fadeIn"> {{
|
||
common.fileSizeFormat(item.size) }} </span>
|
||
<span v-if="item.status === 'uploading' && !item.msg"
|
||
class="text-blue-500 box animate__animated animate__fadeIn">{{ item.speed }} /
|
||
秒</span>
|
||
<span v-if="item.status === 'uploading' && item.msg"
|
||
class="text-blue-500 box animate__animated animate__fadeIn">{{ item.msg
|
||
}}</span>
|
||
<img v-else-if="item.status === 'finished'" style="display: inline-block;" src="@/assets/images/shangging.png" alt="">
|
||
<!-- <svg-icon v-else-if="item.status === 'finished'" name="check"
|
||
class="inline text-green-500 box animate__animated animate__fadeIn" /> -->
|
||
<span v-else-if="item.status === 'waiting'"
|
||
class="text-yellow-500 box animate__animated animate__fadeIn">{{ item.msg
|
||
}}</span>
|
||
<span v-else-if="item.status === 'error'"
|
||
class="text-red-500 box animate__animated animate__fadeIn">{{ item.msg }}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div v-if="item.status === 'uploading'">
|
||
<span class="text-gray-500 text-xs mr-2">{{ common.fileSizeFormat(item.loaded) }} /
|
||
{{ common.fileSizeFormat(item.size) }}</span>
|
||
<img src="@/assets/images/qv.png" @click="cancelUpload(item)" alt="" class=" relative inline text-gray-500 mr-1 text-lg cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn">
|
||
<!-- <svg-icon name="tool-close2"
|
||
class="top-0.5 relative inline text-gray-500 mr-1 text-lg cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn" /> -->
|
||
</div>
|
||
<div v-else-if="item.status === 'finished'">
|
||
<img src="@/assets/images/delete.png" @click="removeUploadFileByIndex(item.index),delfile(item)" alt=""
|
||
class="inline text-red-400 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn">
|
||
<!-- <svg-icon @click="removeUploadFileByIndex(item.index)" name="delete"
|
||
class="inline text-red-400 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn" /> -->
|
||
</div>
|
||
<div v-else-if="item.status === 'error'">
|
||
<img src="@/assets/images/shua.png" @click="retryUpload(item)" class="inline text-red-500 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn" alt="">
|
||
<!-- <svg-icon @click="retryUpload(item)" name="refresh"
|
||
class="inline text-red-500 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn" /> -->
|
||
</div>
|
||
<div v-else-if="item.status === 'waiting'">
|
||
<img src="@/assets/images/delete.png" @click="removeUploadFileByIndex(item.index),delfile(item)" alt=""
|
||
class="inline text-red-400 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn">
|
||
<!-- <svg-icon @click="removeUploadFileByIndex(item.index)" name="delete"
|
||
class="inline text-red-400 mr-1 text-base cursor-pointer rounded-full hover:bg-gray-200 box animate__animated animate__fadeIn" /> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-progress v-if="item.status === 'finished'" :show-text="false"
|
||
:percentage="item.progress" status="success"></el-progress>
|
||
<el-progress v-else-if="item.status === 'uploading'" :show-text="false"
|
||
:percentage="item.progress"></el-progress>
|
||
<el-progress v-else-if="item.status === 'error'" :show-text="false" :percentage="100"
|
||
status="exception"></el-progress>
|
||
<el-progress v-else-if="item.status === 'waiting'" :show-text="false"
|
||
:percentage="0"></el-progress>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 文件拖拽提示框-->
|
||
<div ref="dropBoxRef" id="dropBox" class="drop-view" v-if="storageConfigStore.permission.upload"
|
||
v-show="dropState">
|
||
<div class="drop-sub">
|
||
<span>上传文件至 {{ currentPath }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import common from "@/components/file/common";
|
||
import { ref, onMounted,defineEmits } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { batchDeleteReq } from "@/api/file-operator";
|
||
let router = useRouter();
|
||
let route = useRoute();
|
||
|
||
import useFileSelect from "@/components/file/file/useFileSelect";
|
||
let { currentPath } = useFileSelect();
|
||
|
||
import useFileUpload from "@/components/file/file/useFileUpload";
|
||
const { visible, uploadMode, cancelUpload, beforeUpload, uploadProgressInfoSorted,
|
||
dropState, listenDropFile,
|
||
clearALlFinishedUploadFile, removeUploadFileByIndex, retryUpload } = useFileUpload();
|
||
|
||
import useStorageConfigStore from "@/components/file/stores/storage-config";
|
||
let storageConfigStore = useStorageConfigStore();
|
||
|
||
import useFileDataStore from "@/components/file/stores/file-data";
|
||
let fileDataStore = useFileDataStore();
|
||
|
||
// 如果有上传完成的文件，关闭对话框时调用 close 方法刷新文件列表
|
||
const emit = defineEmits([])
|
||
const closeDialog = () => {
|
||
let deleteCount = clearALlFinishedUploadFile();
|
||
if (deleteCount > 0) {
|
||
emit('close');
|
||
}
|
||
}
|
||
|
||
// 监听拖拽上传
|
||
const dropBoxRef = ref();
|
||
onMounted(() => {
|
||
listenDropFile();
|
||
})
|
||
function delfile(row){
|
||
// debugger
|
||
let fileArrOne = JSON.parse(localStorage.getItem('fileArr')) || [];
|
||
// 过滤掉不需要的条目
|
||
fileArrOne = fileArrOne.filter(item => item.name !== row.name);
|
||
if(fileArrOne.length > 0){
|
||
localStorage.setItem('fileArr', JSON.stringify(fileArrOne));
|
||
}else{
|
||
localStorage.setItem('fileArr', '');
|
||
}
|
||
// 回写 localStorage
|
||
|
||
const parmas= {
|
||
deleteItems: [
|
||
{
|
||
name: row.name,
|
||
password: "",
|
||
path: localStorage.getItem('filepath'),
|
||
type: "FILE"
|
||
}
|
||
],
|
||
storageKey: "minio"
|
||
}
|
||
batchDeleteReq(JSON.stringify(parmas)).then((res)=>{
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.zfile-file-upload-body {
|
||
width:100%;
|
||
:deep(.el-dialog__header) {
|
||
text-align: center;
|
||
}
|
||
|
||
:deep(.el-dialog__body) {
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
:deep(.el-upload-dragger) {
|
||
@apply border-dashed border-2;
|
||
}
|
||
|
||
.drop-view {
|
||
@apply fixed w-full h-full z-10 bg-opacity-20 bg-black left-0 bottom-0 flex justify-center items-center flex-row;
|
||
|
||
.drop-sub {
|
||
@apply flex justify-center items-center h-5/6 w-5/6 border-dashed border-2 border-gray-400 rounded-2xl text-gray-500 font-bold text-2xl;
|
||
}
|
||
}
|
||
}
|
||
</style> |