scalable-network-storage-fr.../src/components/view-download-record/index.vue
2023-12-08 13:34:39 +08:00

153 lines
4.9 KiB
Vue

<script setup>
import Util from "../../Util/index.js";
import {computed, ref, watch} from "vue";
import minimizeStr from '../../components/minimize-str/index.vue'
let props = defineProps(['isViewDownloadRecord', 'shareFiles', 'viewType', 'currentFile', 'currentSite'])
let emits = defineEmits(['close'])
let isViewDownloadRecord = computed(() => {
return props.isViewDownloadRecord
})
let computedDownloadRecord = computed(() => {
let downloadRecord = []
if(props.viewType === 'single')
downloadRecord.push(...props.currentFile.downloadRecords)
else
props.shareFiles.forEach((file) => {
if(file.downloadRecords !== undefined)
file.downloadRecords.forEach((record) => {
downloadRecord.push({name:file.name, path:file.filePath, username:file.username, ...record})
})
})
return downloadRecord
})
let filterResult = ref([])
let filterCondition = [
{label:'筛选时间', value:'time'},
{label:'筛选ip', value:'ip'},
{label:'筛选ua', value:'ua'},
]
let filterParam = ref('')
let filterBy = ref('ip')
watch(props.viewType, () => {
if(props.viewType === 'all') {
if (filterCondition.length === 3)
filterCondition.push({label: '筛选分享人', value: 'sharer'})
} else if(filterCondition.length === 4)
filterCondition.pop()
})
watch(filterParam, () => {
filterResult.value.splice(0)
switch (filterBy.value){
case 'time':
if(filterParam.value[0] !== undefined)
computedDownloadRecord.value.forEach((record) => {
if(filterParam.value[0].getTime() <= record.time && filterParam.value[1].getTime() >= record.time)
filterResult.value.push(record)
})
break
case 'ip':
if(filterParam.value.trim() !== ''){
computedDownloadRecord.value.forEach((record) => {
if(record.ip.includes(filterParam.value))
filterResult.value.push(record)
})
}
break
case 'ua':
if(filterParam.value.trim() !== ''){
computedDownloadRecord.value.forEach((record) => {
if(record.ua.includes(filterParam.value))
filterResult.value.push(record)
})
}
break
case 'sharer':
if(filterParam.value.trim() !== ''){
computedDownloadRecord.value.forEach((record) => {
if(record.username.includes(filterParam.value))
filterResult.value.push(record)
})
}
}
})
function handleSelectChange(){
filterParam.value = ""
}
function close(){
filterBy.value = 'ip'
filterParam.value = ""
emits('close')
}
</script>
<template>
<el-dialog title="查看下载记录" v-model="isViewDownloadRecord" :width="viewType==='single'?null:'1250px'" @close="close" top="0">
<el-row>
<el-col :span="10" v-if="viewType === 'single'">
当前文件:{{currentFile.name}}
</el-col>
<el-col :span="10" v-if="viewType === 'all'">
当前节点:{{currentSite.hostname}}
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-select placeholder="筛选" v-model="filterBy" @change="handleSelectChange">
<el-option v-for="condition in filterCondition" :label="condition.label" :value="condition.value"/>
</el-select>
<div v-show="filterBy === 'time'" style="display: inline">
<el-date-picker type="datetimerange" v-model="filterParam"/>
</div>
<el-input style="width: 300px" v-show="filterBy !== 'time'" v-model="filterParam">
</el-input>
</el-col>
</el-row>
<el-table :data="filterParam.length>1?filterResult:computedDownloadRecord" empty-text="没有记录">
<el-table-column label="文件" v-if="viewType === 'all'" width="400px">
<template #default="scoped">
<minimize-str :str="scoped.row.path" length="75"/>
</template>
</el-table-column>
<el-table-column label="分享人" v-if="viewType === 'all'" width="100px">
<template #default="scoped">
<minimize-str :str="scoped.row.username" length="10"/>
</template>
</el-table-column>
<el-table-column label="下载时间" width="200px">
<template #default="scoped">
{{Util.formatDate(scoped.row.time)}}
</template>
</el-table-column>
<el-table-column label="下载ip" width="200px">
<template #default="scoped">
{{scoped.row.ip}}
</template>
</el-table-column>
<el-table-column label="下载ua" width="300px">
<template #default="scoped">
<el-popover width="300px">
<template #reference>
{{scoped.row.ua.length>75?scoped.row.ua.substring(0, 75) + '......':scoped.row.ua}}
</template>
<template #default>
{{scoped.row.ua}}
</template>
</el-popover>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template>
<style scoped>
</style>