From 27102f4aa86130dae8239347eac8af934642d530 Mon Sep 17 00:00:00 2001
From: fei <791364011@qq.com>
Date: 星期三, 21 一月 2026 23:22:40 +0800
Subject: [PATCH] 添加了附件预览功能
---
src/views/archiveManager/archiveMaterial/index.vue | 83 +++++++++++++++++++++++++++++++++++++++--
1 files changed, 79 insertions(+), 4 deletions(-)
diff --git a/src/views/archiveManager/archiveMaterial/index.vue b/src/views/archiveManager/archiveMaterial/index.vue
index 903b75d..432cd7d 100644
--- a/src/views/archiveManager/archiveMaterial/index.vue
+++ b/src/views/archiveManager/archiveMaterial/index.vue
@@ -253,7 +253,7 @@
plain
icon="el-icon-plus"
size="mini"
- @click="handleAdd"
+ @click.native.stop="handleAdd"
v-hasPermi="['system:materials:add']"
>鎼滅储</el-button>
</el-col>
@@ -338,10 +338,13 @@
plain
icon="el-icon-edit"
size="mini"
- @click="handleImport"
+
v-hasPermi="['system:materials:edit']"
+ @click.stop="openImageGallery"
>鏌ョ湅闄勪欢</el-button>
+
</el-col>
+
<el-col :span="1.2">
<el-button
v-if="sho"
@@ -349,7 +352,7 @@
plain
icon="el-icon-edit"
size="mini"
- @click="handleImport"
+ @click.stop="handleImport"
v-hasPermi="['system:materials:edit']"
>鍏ㄩ儴闄勪欢瀵煎叆</el-button>
宸茬粡涓婁紶浜� {{this.fileCut}} 寮犻檮浠讹紝杩樿涓婁紶 {{this.totalPageCount-this.fileCut}} 寮犻檮浠�
@@ -384,7 +387,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
-
+ <ImageGalleryDialog
+ title="鍥剧墖绠＄悊"
+ :opensd="showImageDialog"
+ :images="imageList"
+ @update:opensd="showImageDialog = $event"
+ @confirm="handleConfirm"
+ />
<el-table v-loading="loading" :data="materialsList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column v-if="sho" label="鎿嶄綔" align="center" width="160" class-name="small-padding ">
@@ -827,13 +836,63 @@
import { updateStatusById } from "@/api/system/records"
import {delArchiverecordstouserByReIdAndUid} from "@/api/system/archiverecordstouser"
+import ImageGalleryDialog from './ImageGalleryDialog';
export default {
name: "ArchiveMaterialManager",
+ components: {
+ // 3. 妫�鏌ョ粍浠舵敞鍐�
+ ImageGalleryDialog
+ },
data() {
return {
+ showImageDialog: false,
+ imageList: [
+ {
+ id: 1,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ },
+ {
+ id: 2,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ },
+ {
+ id: 3,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ },
+ {
+ id: 4,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ },
+ {
+ id: 5,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ },
+ {
+ id: 6,
+ url: 'https://example.com/image1.jpg',
+ name: '绀轰緥鍥剧墖1.jpg',
+ size: 102400,
+ isCover: true
+ }
+ ],
//闄勪欢鏁伴噺
fileCut: 0,
//鏄惁鏄剧ず鐩稿叧鍐呭
@@ -1080,6 +1139,22 @@
}
},
methods: {
+ // 鎵撳紑鍥剧墖绠＄悊瀵硅瘽妗�
+ openImageGallery(event) {
+ // 纭繚姣忔閮借兘瑙﹀彂
+ if (this.showImageDialog) {
+ // 濡傛灉宸茬粡鏄墦寮�鐘舵�侊紝鍏堝叧闂啀鎵撳紑
+ this.showImageDialog = false;
+ this.$nextTick(() => {
+ this.showImageDialog = true;
+ });
+ } else {
+ this.showImageDialog = true;
+ }
+ },
+ handleConfirm(data) {
+ console.log('纭鏁版嵁:', data);
+ },
handleTabKey (event) {
// 榛樿琛屼负
event.preventDefault()
--
Gitblit v1.9.1