admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件选择器删除功能

Browse Source
This commit is contained in:
阿辉
2024-12-03 14:28:47 +08:00
parent ec137c9f84
commit e3291fe22b
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/components/fileSelector/fileItem.vue
View File

@@ -1,61 +1,77 @@
<template> <template>
<div ref="itemRef" class="file-item" :title="data.name" @mouseenter="isShow = true" @mouseleave="isShow = false"> <div ref="itemRef" class="file-item" :title="data.name" @mouseenter="isShow = true" @mouseleave="isShow = false">
<div class="file-name" :class="{ show: isShow }">{{ data.name }}</div> <div class="file-name" :class="{ show: isShow }">{{ data.name }}</div>
<component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" /> <component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" />
<div class="file-del" :class="{ show: isShow }">
<el-icon :size="24" color="white" @click.stop="delFileHandle">
<CircleClose style="mix-blend-mode: difference;" />
</el-icon>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, nextTick } from 'vue'; import { defineComponent, nextTick } from 'vue';
import { ref, defineProps, PropType, watch, onMounted, h } from 'vue'; import { ref, defineProps, PropType, watch, onMounted, h } from 'vue';
const props = defineProps({ const props = defineProps({
fileData: { type: Object as PropType<any>, required: true }, fileData: { type: Object as PropType<any>, required: true },
api: { type: Object as PropType<any>, required: true },
}); });
const _OtherFileComponent = defineComponent({ template: '<el-icon><Files /></el-icon>' }); const _OtherFileComponent = defineComponent({ template: '<el-icon><Files /></el-icon>' });
const FileTypes = [ const FileTypes = [
{ tag: 'img', attr: { src: props.fileData.url, draggable: false } }, { tag: 'img', attr: { src: props.fileData.url, draggable: false } },
{ tag: 'video', attr: { src: props.fileData.url, controls: false, autoplay: true, muted: true, loop: true } }, { tag: 'video', attr: { src: props.fileData.url, controls: false, autoplay: true, muted: true, loop: true } },
{ tag: 'audio', attr: { src: props.fileData.url, controls: true, autoplay: false, muted: false, loop: false, volume: 0 } }, { tag: 'audio', attr: { src: props.fileData.url, controls: true, autoplay: false, muted: false, loop: false, volume: 0 } },
{ tag: _OtherFileComponent, attr: { style: { fontSize: '2rem' } } }, { tag: _OtherFileComponent, attr: { style: { fontSize: '2rem' } } },
]; ];
const isShow = ref<boolean>(false); const isShow = ref<boolean>(false);
const itemRef = ref<HTMLDivElement | null>(null); const itemRef = ref<HTMLDivElement>();
const data = ref<any>(null); const data = ref<any>(null);
const delFileHandle = () => props.api.DelObj(props.fileData.id).then(() => emit('onDelFile'));
watch(props.fileData, (nVal) => data.value = nVal, { immediate: true, deep: true }); watch(props.fileData, (nVal) => data.value = nVal, { immediate: true, deep: true });
const emit = defineEmits(['onDelFile']);
defineExpose({}); defineExpose({});
onMounted(() => { }); onMounted(() => { });
</script> </script>
<style scoped> <style scoped>
.file-item { .file-item {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
} }
.file-item>* { .file-item>* {
width: 100% !important; width: 100% !important;
} }
.file-name { .file-name {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
padding: 4px 12px; padding: 4px 12px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
word-break: break-all; word-break: break-all;
white-space: normal; white-space: normal;
color: white; color: white;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.file-del {
display: none;
position: absolute;
left: 0;
bottom: 0;
justify-content: flex-end;
} }
.show { .show {
display: flex !important; display: flex !important;
} }
</style> </style>

3
web/src/components/fileSelector/index.vue
View File

@@ -114,7 +114,7 @@
<div ref="listContainerRef" class="listContainer" v-else> <div ref="listContainerRef" class="listContainer" v-else>
<div v-for="item, index in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="index" <div v-for="item, index in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="index"
@click="onItemClick($event)" :data-id="item[props.valueKey]"> @click="onItemClick($event)" :data-id="item[props.valueKey]">
<FileItem :fileData="item" /> <FileItem :fileData="item" :api="fileApi" @onDelFile="listRequest(); listRequestAll();" />
</div> </div>
</div> </div>
<div class="listPaginator"> <div class="listPaginator">
@@ -185,6 +185,7 @@ const tabsActived = ref<number>([3, 2, 1, 0][((props.tabsShow & (props.tabsShow
const fileApiPrefix = '/api/system/file/'; const fileApiPrefix = '/api/system/file/';
const fileApi = { const fileApi = {
GetList: (query: UserPageQuery) => request({ url: fileApiPrefix, method: 'get', params: query }), GetList: (query: UserPageQuery) => request({ url: fileApiPrefix, method: 'get', params: query }),
DelObj: (id: DelReq) => request({ url: fileApiPrefix + id + '/', method: 'delete', data: { id } }),
GetAll: () => request({ url: fileApiPrefix + 'get_all/' }), GetAll: () => request({ url: fileApiPrefix + 'get_all/' }),
}; };
// 过滤表单 // 过滤表单