feature:在选择图片时候增加删除按钮，可以在媒体库中直接删除图片。

flipped-aurora · Jun 2, 2024 · 2f67c23 · 2f67c23
1 parent e64be75
commit 2f67c23
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/web/package.json b/web/package.json
@@ -33,6 +33,7 @@
         "sortablejs": "^1.15.2",
         "spark-md5": "^3.0.2",
         "tailwindcss": "^3.3.3",
+        "vite-auto-import-svg": "^1.0.0",
         "vue": "^3.4.21",
         "vue-echarts": "^6.7.2",
         "vue-router": "^4.3.2",

diff --git a/web/src/components/selectImage/selectImage.vue b/web/src/components/selectImage/selectImage.vue
@@ -62,7 +62,7 @@
           :key="key"
           class="w-40"
         >
-          <div class="w-40 h-40 border rounded overflow-hidden border-dashed border-gray-300 cursor-pointer">
+          <div class="w-40 h-40 border rounded overflow-hidden border-dashed border-gray-300 cursor-pointer relative group">
             <el-image
               :key="key"
               :src="getUrl(item.url)"
@@ -98,6 +98,9 @@
                 </div>
               </template>
             </el-image>
+            <div class="absolute -right-1 top-1 w-8 h-8 group-hover:inline-block hidden" @click="deleteCheck(item)">
+              <el-icon :size="16"><CircleClose /></el-icon>
+            </div>
           </div>
           <div
             class="overflow-hidden text-nowrap overflow-ellipsis text-center w-full"
@@ -124,7 +127,7 @@
 
 import { getUrl, isVideoExt } from '@/utils/image'
 import { onMounted, ref } from 'vue'
-import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
+import { getFileList, editFileName,deleteFile } from '@/api/fileUploadAndDownload'
 import UploadImage from '@/components/upload/image.vue'
 import UploadCommon from '@/components/upload/common.vue'
 import WarningBar from '@/components/warningBar/warningBar.vue'
@@ -256,5 +259,27 @@ const getImageList = async() => {
   }
 }
 
+const deleteCheck = (item)=>{
+  ElMessageBox.confirm('是否删除该文件', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const res = await deleteFile(item)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!',
+      })
+      getImageList()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    })
+  })
+}
+
 </script>