提交

src/views/databaseLibary/components/card.vue

@@ -12,7 +12,7 @@
         <div class="organization-list" v-loading="loading"  v-if="tableData.length > 0">
             <div class="organization-item" v-for="item in tableData">
                 <div class="fileContainer">
-                    <img :src="baseUrl + item.organPic" />
+                    <img style="cursor: pointer;" :src="baseUrl + item.organPic" @click.stop="handleCardPreview(baseUrl + item.organPic)"/>
                     <div class="optionBtns" v-hasPermi="['databaseLibary:orgUpdate']">
                         <el-button type="primary" class="editIconBtn" v-hasPermi="['databaseLibary:orgUpdate']"
                             @click="handleEdit(item.id)">
@@ -36,6 +36,11 @@
         </div>
 
         <el-empty :image-size="200" v-if="tableData.length == 0" />
+
+         <!-- 图片预览 -->
+        <el-dialog v-model="dialogVisible" title="图片预览" fullscreen>
+            <img :src="dialogImageUrl" style="width: 100%; height: 100%;" alt="Preview Image" />
+        </el-dialog>
     </div>
 </template>
 <script setup>
@@ -49,7 +54,9 @@ import { getBusEncyclopediaDatabasePage } from "@/api/databaseLibary"
 
 const router = useRouter()
 const { proxy } = getCurrentInstance()
-const baseUrl = import.meta.env.VITE_APP_BASE_API
+const baseUrl = import.meta.env.VITE_APP_BASE_API 
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
 const queryParams = ref({
     pageIndex: 1,
     pageSize: 15,
@@ -97,7 +104,10 @@ const handleOpenAddForm = () => {
 const handleEdit = (recordId) => {
     router.push('/databaseLibaryForm/' + recordId)
 }
-
+const handleCardPreview = (filePath) => {
+    dialogImageUrl.value = filePath
+    dialogVisible.value = true
+}
 // 暴露给父组件的参数和方法
 defineExpose({
     queryParams,