126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
import { $t } from '@easyflow/locales';
|
|
|
|
import { ElButton, ElProgress, ElTable, ElTableColumn } from 'element-plus';
|
|
|
|
import { formatFileSize } from '#/api/common/file';
|
|
import DragFileUpload from '#/components/upload/DragFileUpload.vue';
|
|
|
|
interface FileInfo {
|
|
uid: string;
|
|
fileName: string;
|
|
progressUpload: number;
|
|
fileSize: number;
|
|
status: string;
|
|
filePath: string;
|
|
}
|
|
const fileData = ref<FileInfo[]>([]);
|
|
const filesPath = ref([]);
|
|
const dragUploadRef = ref<InstanceType<typeof DragFileUpload>>();
|
|
defineExpose({
|
|
getFilesData() {
|
|
return fileData.value.filter((item) => item.filePath);
|
|
},
|
|
reset() {
|
|
fileData.value = [];
|
|
filesPath.value = [];
|
|
dragUploadRef.value?.clearFiles?.();
|
|
},
|
|
});
|
|
function handleSuccess(response: any) {
|
|
filesPath.value = response.data;
|
|
}
|
|
function handleChange(file: any) {
|
|
const existingFile = fileData.value.find((item) => item.uid === file.uid);
|
|
if (existingFile) {
|
|
fileData.value = fileData.value.map((item) => {
|
|
if (item.uid === file.uid) {
|
|
return {
|
|
...item,
|
|
fileSize: file.size,
|
|
progressUpload: file.percentage,
|
|
status: file.status,
|
|
filePath: file?.response?.data?.path,
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
} else {
|
|
fileData.value.push({
|
|
uid: file.uid,
|
|
fileName: file.name,
|
|
progressUpload: file.percentage,
|
|
fileSize: file.size,
|
|
status: file.status,
|
|
filePath: file?.response?.data?.path,
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleRemove(row: any) {
|
|
fileData.value = fileData.value.filter((item) => item.uid !== row.uid);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="import-file-container">
|
|
<DragFileUpload
|
|
ref="dragUploadRef"
|
|
@success="handleSuccess"
|
|
@on-change="handleChange"
|
|
/>
|
|
<div class="import-file-container__table">
|
|
<ElTable :data="fileData" style="width: 100%" size="large">
|
|
<ElTableColumn
|
|
prop="fileName"
|
|
:label="$t('documentCollection.importDoc.fileName')"
|
|
width="250"
|
|
/>
|
|
<ElTableColumn
|
|
prop="progressUpload"
|
|
:label="$t('documentCollection.importDoc.progressUpload')"
|
|
width="180"
|
|
>
|
|
<template #default="{ row }">
|
|
<ElProgress
|
|
:percentage="row.progressUpload"
|
|
v-if="row.status === 'success'"
|
|
status="success"
|
|
/>
|
|
<ElProgress v-else :percentage="row.progressUpload" />
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn
|
|
prop="fileSize"
|
|
:label="$t('documentCollection.importDoc.fileSize')"
|
|
>
|
|
<template #default="{ row }">
|
|
<span>{{ formatFileSize(row.fileSize) }}</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn :label="$t('common.handle')">
|
|
<template #default="{ row }">
|
|
<ElButton type="danger" size="small" @click="handleRemove(row)">
|
|
{{ $t('button.delete') }}
|
|
</ElButton>
|
|
</template>
|
|
</ElTableColumn>
|
|
</ElTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.import-file-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.import-file-container__table {
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|