From 4c9fdc87987140e8b2c3f0dfc2f6608cdb6be774 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 21 十月 2026 17:39:24 +0800
Subject: [PATCH] 青岛维护
---
src/views/business/appear/caseDetail.vue | 212 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 129 insertions(+), 83 deletions(-)
diff --git a/src/views/business/appear/caseDetail.vue b/src/views/business/appear/caseDetail.vue
index c13f35b..a792150 100644
--- a/src/views/business/appear/caseDetail.vue
+++ b/src/views/business/appear/caseDetail.vue
@@ -200,91 +200,98 @@
<span class="section-title">闄勪欢淇℃伅</span>
</div>
<div class="detail-attachments">
- <div class="attachment-grid">
- <div
- v-for="file in caseData.annexfilesList"
- :key="file.id || file.fileName"
- class="attachment-card"
- >
- <template v-if="isImageFile(file.fileName || file.path)">
- <!-- 鍥剧墖浣跨敤 el-image 棰勮 -->
- <el-image
- class="image-attachment"
- :src="getFileUrl(file)"
- :preview-src-list="getImagePreviewList(file)"
- fit="cover"
- :style="{ width: '120px', height: '120px' }"
- lazy
- >
- <div slot="error" class="image-error">
- <i class="el-icon-picture-outline"></i>
- <span>鍔犺浇澶辫触</span>
- </div>
- <div slot="placeholder" class="image-loading">
- <i class="el-icon-loading"></i>
- </div>
- </el-image>
- <div class="image-info">
- <div class="file-name" :title="file.fileName">
- {{ file.fileName }}
- </div>
- <div class="file-actions">
- <el-button
- type="text"
- size="mini"
- @click="handleDownload(file)"
- icon="el-icon-download"
- title="涓嬭浇"
- />
- <el-button
- type="text"
- size="mini"
- @click="handlePreview(file)"
- icon="el-icon-view"
- title="棰勮"
- />
- </div>
- </div>
- </template>
-
- <template v-else>
- <!-- 闈炲浘鐗囨枃浠朵娇鐢ㄥ崱鐗囨牱寮� -->
- <el-card shadow="hover" class="file-card">
- <div class="file-content">
- <i :class="getFileIcon(file.fileName)" class="file-icon"></i>
- <div class="file-info">
- <div class="file-name" :title="file.fileName">
- {{ file.fileName }}
- </div>
- <div class="file-meta">
- <span class="file-type">{{
- getFileTypeText(file.fileName)
- }}</span>
- <span v-if="file.createTime" class="file-time">
- {{ formatDateTime(file.createTime) }}
- </span>
- </div>
+ <div
+ v-for="group in attachmentGroups"
+ :key="group.label"
+ class="attachment-group"
+ >
+ <div class="attachment-group-title">{{ group.label }}</div>
+ <div class="attachment-grid">
+ <div
+ v-for="file in group.files"
+ :key="file.id || file.fileName"
+ class="attachment-card"
+ >
+ <template v-if="isImageFile(file.fileName || file.path)">
+ <!-- 鍥剧墖浣跨敤 el-image 棰勮 -->
+ <el-image
+ class="image-attachment"
+ :src="getFileUrl(file)"
+ :preview-src-list="getImagePreviewList(file)"
+ fit="cover"
+ :style="{ width: '120px', height: '120px' }"
+ lazy
+ >
+ <div slot="error" class="image-error">
+ <i class="el-icon-picture-outline"></i>
+ <span>鍔犺浇澶辫触</span>
+ </div>
+ <div slot="placeholder" class="image-loading">
+ <i class="el-icon-loading"></i>
+ </div>
+ </el-image>
+ <div class="image-info">
+ <div class="file-name" :title="file.fileName">
+ {{ file.fileName }}
+ </div>
+ <div class="file-actions">
+ <el-button
+ type="text"
+ size="mini"
+ @click="handleDownload(file)"
+ icon="el-icon-download"
+ title="涓嬭浇"
+ />
+ <el-button
+ type="text"
+ size="mini"
+ @click="handlePreview(file)"
+ icon="el-icon-view"
+ title="棰勮"
+ />
</div>
</div>
- <div class="file-actions">
- <el-button
- type="text"
- size="mini"
- @click="handleDownload(file)"
- >
- 涓嬭浇
- </el-button>
- <el-button
- v-if="canPreview(file.fileName)"
- type="text"
- size="mini"
- @click="handlePreview(file)"
- >
- 棰勮
- </el-button>
- </div>
- </el-card>
- </template>
+ </template>
+
+ <template v-else>
+ <!-- 闈炲浘鐗囨枃浠朵娇鐢ㄥ崱鐗囨牱寮� -->
+ <el-card shadow="hover" class="file-card">
+ <div class="file-content">
+ <i :class="getFileIcon(file.fileName)" class="file-icon"></i>
+ <div class="file-info">
+ <div class="file-name" :title="file.fileName">
+ {{ file.fileName }}
+ </div>
+ <div class="file-meta">
+ <span class="file-type">{{
+ getFileTypeText(file.fileName)
+ }}</span>
+ <span v-if="file.createTime" class="file-time">
+ {{ formatDateTime(file.createTime) }}
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="file-actions">
+ <el-button
+ type="text"
+ size="mini"
+ @click="handleDownload(file)"
+ >
+ 涓嬭浇
+ </el-button>
+ <el-button
+ v-if="canPreview(file.fileName)"
+ type="text"
+ size="mini"
+ @click="handlePreview(file)"
+ >
+ 棰勮
+ </el-button>
+ </div>
+ </el-card>
+ </template>
+ </div>
</div>
</div>
</div>
@@ -492,6 +499,32 @@
.filter(file => this.isImageFile(file.fileName || file.path))
.map(file => this.getFileUrl(file))
.filter(url => url);
+ },
+ // 鎸夊垎绫诲垎缁勯檮浠讹紙鎹愮尞鑰呯櫥璁伴樁娈碉細鐧昏琛ㄩ檮浠�/璇佷欢鐓�/鐤剧梾璇婃柇娌荤枟锛�
+ attachmentGroups() {
+ const list = this.caseData.annexfilesList;
+ if (!Array.isArray(list) || list.length === 0) return [];
+ const categories = [
+ { value: "鐧昏琛ㄩ檮浠�", label: "浜轰綋鍣ㄥ畼娼滃湪鎹愮尞鑰呯櫥璁拌〃闄勪欢" },
+ { value: "璇佷欢鐓�", label: "璇佷欢鐓�" },
+ { value: "鐤剧梾璇婃柇娌荤枟", label: "鐤剧梾璇婃柇娌荤枟" }
+ ];
+ const groups = categories
+ .map(cat => ({
+ label: cat.label,
+ files: list.filter(f => (f.fileType || "").trim() === cat.value)
+ }))
+ .filter(group => group.files.length > 0);
+ // 鏈垎绫婚檮浠跺厹搴曪紝閬垮厤涓㈠け鏃ф暟鎹�
+ const classifiedValues = categories.map(c => c.value);
+ const unclassified = list.filter(f => {
+ const t = (f.fileType || "").trim();
+ return !t || !classifiedValues.includes(t);
+ });
+ if (unclassified.length > 0) {
+ groups.push({ label: "鏈垎绫�", files: unclassified });
+ }
+ return groups;
}
},
created() {
@@ -855,6 +888,19 @@
padding: 10px 0;
}
+.attachment-group {
+ margin-bottom: 20px;
+}
+
+.attachment-group-title {
+ font-size: 14px;
+ font-weight: bold;
+ color: #409eff;
+ margin-bottom: 12px;
+ padding-left: 10px;
+ border-left: 3px solid #409eff;
+}
+
.attachment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
--
Gitblit v1.9.3