imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: File download done.

Browse Source
This commit is contained in:
chiayin
2024-01-15 17:18:45 +08:00
parent c64d243de2
commit 9753ed535d
3 changed files with 150 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/Files/index.vue
View File

@@ -31,8 +31,8 @@
<li v-show="isActive !== null" class="animate-fadein">
<ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
</ul>
</li>
<li class="cursor-pointer" @click="switchListOrGrid = false">
@@ -55,8 +55,8 @@
<template #body="slotProps">
<ul class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700">
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, 'list-hover')">delete</span></li>
</ul>
</template>
</Column>
@@ -107,7 +107,7 @@
import IconVector from '@/components/icons/IconVector.vue';
import IconList from '@/components/icons/IconList.vue';
import IconGrid from '@/components/icons/IconGrid.vue';
import { renameModal } from '@/module/alertModal.js';
import { renameModal, deleteFileModal } from '@/module/alertModal.js';
export default {
data() {
@@ -119,6 +119,7 @@
selectedFile: null, // 右鍵選單 item
selectedType: null,
selectedId: null,
selecteName: null,
items: [
{
label: 'Rename',
@@ -128,6 +129,7 @@
{
label: 'Download',
icon: 'download',
command: this.download,
},
{
separator: true // 分隔符號
@@ -135,7 +137,7 @@
{
label: 'Delete',
icon: 'delete',
command: this.deleteFile,
},
],
}
@@ -242,6 +244,7 @@
onRightClick(event, file) {
this.selectedType = file.type;
this.selectedId = file.id;
this.selecteName = file.name;
this.$refs.fileRightMenu.show(event)
},
/**
@@ -251,6 +254,7 @@
onRightClickTable(event) {
this.selectedType = event.data.type;
this.selectedId = event.data.id;
this.selecteName = event.data.name;
this.$refs.fileRightMenu.show(event.originalEvent)
},
/**
@@ -261,6 +265,7 @@
onGridCardClick(file, index) {
this.selectedType = file.type;
this.selectedId = file.id;
this.selecteName = file.name;
this.isActive = index;
},
/**
@@ -276,6 +281,42 @@
}
renameModal(this.store.rename, this.selectedType, this.selectedId);
},
/**
* Delete file
* @param {string} type
* @param {number} id
* @param {string} source hover icon
*/
deleteFile(type, id, source) {
// 先取得 id 打 Delete Daile API
if(type && id && source === 'list-hover') {
this.selectedType = type;
this.selectedId = id;
}
console.log(this.selectedId);
// let srt = '';
// data.forEach(i => {
// let content = `<li>[${type}] ${fileName}<li>`;
// srt += content;
// });
// console.log('srt:', srt);
// deleteFileModal(id, srt);
deleteFileModal();
},
/**
* Download file as CSV
* @param {string} type
* @param {number} id
* @param {string} source hover icon
*/
download(type, id, source, name) {
if(type && id && source === 'list-hover' && name) {
this.selectedType = type;
this.selectedId = id;
this.selecteName = name;
}
this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selecteName);
}
},
mounted() {
this.isLoading = true;