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>
<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>
<component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" />
<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>
<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>
</template>
<script setup lang="ts">
import { defineComponent, nextTick } from 'vue';
import { ref, defineProps, PropType, watch, onMounted, h } from 'vue';
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 FileTypes = [
{ 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: 'audio', attr: { src: props.fileData.url, controls: true, autoplay: false, muted: false, loop: false, volume: 0 } },
{ tag: _OtherFileComponent, attr: { style: { fontSize: '2rem' } } },
{ 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: 'audio', attr: { src: props.fileData.url, controls: true, autoplay: false, muted: false, loop: false, volume: 0 } },
{ tag: _OtherFileComponent, attr: { style: { fontSize: '2rem' } } },
];
const isShow = ref<boolean>(false);
const itemRef = ref<HTMLDivElement | null>(null);
const itemRef = ref<HTMLDivElement>();
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 });
const emit = defineEmits(['onDelFile']);
defineExpose({});
onMounted(() => { });
</script>
<style scoped>
.file-item {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
}
.file-item>* {
width: 100% !important;
width: 100% !important;
}
.file-name {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 4px 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
word-break: break-all;
white-space: normal;
color: white;
background-color: rgba(0, 0, 0, .5);
overflow: hidden;
text-overflow: ellipsis;
display: none;
position: absolute;
top: 0;
left: 0;
padding: 4px 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
word-break: break-all;
white-space: normal;
color: white;
background-color: rgba(0, 0, 0, .5);
overflow: hidden;
text-overflow: ellipsis;
}
.file-del {
display: none;
position: absolute;
left: 0;
bottom: 0;
justify-content: flex-end;
}
.show {
display: flex !important;
display: flex !important;
}
</style>

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

@@ -114,7 +114,7 @@
<div ref="listContainerRef" class="listContainer" v-else>
<div v-for="item, index in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="index"
@click="onItemClick($event)" :data-id="item[props.valueKey]">
<FileItem :fileData="item" />
<FileItem :fileData="item" :api="fileApi" @onDelFile="listRequest(); listRequestAll();" />
</div>
</div>
<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 fileApi = {
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/' }),
};
// 过滤表单