From e3291fe22b99c548bb4a2bd86e7b21ad4696df72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= <a@a.com>
Date: Tue, 3 Dec 2024 14:28:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/fileItem.vue | 78 ++++++++++++--------
 web/src/components/fileSelector/index.vue    |  3 +-
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/web/src/components/fileSelector/fileItem.vue b/web/src/components/fileSelector/fileItem.vue
index 538b372..0609a6f 100644
--- a/web/src/components/fileSelector/fileItem.vue
+++ b/web/src/components/fileSelector/fileItem.vue
@@ -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>
\ No newline at end of file
diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index 6014735..31bf6c5 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -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/' }),
 };
 // 过滤表单