From 0c03027d7f238bf5beb98e85463f53f0bd92bbaa Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 20 四月 2026 17:56:01 +0800
Subject: [PATCH] 青岛维护
---
src/views/business/appear/caseDetail.vue | 914 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 534 insertions(+), 380 deletions(-)
diff --git a/src/views/business/appear/caseDetail.vue b/src/views/business/appear/caseDetail.vue
index 2c9d4b5..362085c 100644
--- a/src/views/business/appear/caseDetail.vue
+++ b/src/views/business/appear/caseDetail.vue
@@ -13,10 +13,7 @@
caseData.name || "-"
}}</el-descriptions-item>
<el-descriptions-item label="鎬у埆">
- <dict-tag
- :options="dict.type.sys_user_sex"
- :value="caseData.sex ? parseInt(caseData.sex) : ''"
- />
+ <dict-tag :options="dict.type.sys_user_sex" :value="caseData.sex" />
</el-descriptions-item>
<el-descriptions-item label="骞撮緞">
{{ caseData.age || "-"
@@ -130,6 +127,12 @@
<el-descriptions-item label="閮ㄩ棬鍚嶇О">{{
caseData.deptName || "-"
}}</el-descriptions-item>
+ <el-descriptions-item label="閮ㄩ棬缂栧彿">{{
+ caseData.deptNo || "-"
+ }}</el-descriptions-item>
+ <el-descriptions-item label="涓婃姤鍖婚櫌">{{
+ caseData.toHospital || "-"
+ }}</el-descriptions-item>
</el-descriptions>
</el-card>
@@ -160,7 +163,7 @@
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="鎶ュ憡鏃堕棿">{{
- formatDateTime(caseData.reporttime)
+ formatDateTime(caseData.createTime)
}}</el-descriptions-item>
<el-descriptions-item label="鏄惁缁堟妗堜緥">
{{ caseData.terminationCase === "1" ? "宸茬粓姝�" : "杩涜涓�" }}
@@ -169,46 +172,112 @@
</el-card>
<!-- 闄勪欢淇℃伅妯″潡 -->
- <el-card class="detail-section" v-if="attachmentList.length > 0">
+ <el-card
+ class="detail-section"
+ v-if="caseData.annexfilesList && caseData.annexfilesList.length > 0"
+ >
<div slot="header" class="section-header">
<span class="section-title">闄勪欢淇℃伅</span>
</div>
- <el-table :data="attachmentList" style="width: 100%">
- <el-table-column label="鏂囦欢鍚�" width="300">
- <template slot-scope="scope">
- <i class="el-icon-document" style="margin-right: 8px;"></i>
- <span>{{ scope.row.fileName }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鏂囦欢绫诲瀷" width="120">
- <template slot-scope="scope">
- <el-tag size="small">{{ scope.row.fileType }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="澶у皬" width="100">
- <template slot-scope="scope">
- <span>{{ formatFileSize(scope.row.fileSize) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="涓婁紶鏃堕棿" width="180">
- <template slot-scope="scope">
- <span>{{ scope.row.uploadTime }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔">
- <template slot-scope="scope">
- <el-button size="mini" @click="handlePreview(scope.row)"
- >棰勮</el-button
- >
- <el-button
- size="mini"
- type="success"
- @click="handleDownload(scope.row)"
- >涓嬭浇</el-button
- >
- </template>
- </el-table-column>
- </el-table>
+ <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>
+ </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>
+ </el-card>
+
+ <!-- 澶囨敞淇℃伅 -->
+ <el-card class="detail-section" v-if="caseData.remark">
+ <div slot="header" class="section-header">
+ <span class="section-title">澶囨敞淇℃伅</span>
+ </div>
+ <div class="remark-content">
+ {{ caseData.remark }}
+ </div>
</el-card>
<!-- 瀹℃壒淇℃伅妯″潡锛堢姸鎬佷负宸插悓鎰忔垨宸查┏鍥炴椂鏄剧ず锛� -->
@@ -225,133 +294,108 @@
{{ caseData.reportStatus === "3" ? "宸插悓鎰�" : "宸查┏鍥�" }}
</el-tag>
</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒鏃堕棿">{{
- formatDateTime(caseData.updateTime)
- }}</el-descriptions-item>
<el-descriptions-item label="瀹℃壒浜�">{{
caseData.updateBy || "-"
+ }}</el-descriptions-item>
+ <el-descriptions-item label="瀹℃壒鏃堕棿">{{
+ formatDateTime(caseData.updateTime)
}}</el-descriptions-item>
<el-descriptions-item label="瀹℃壒鎰忚">{{
caseData.remark || "鏃�"
}}</el-descriptions-item>
</el-descriptions>
</el-card>
-
- <!-- PDF棰勮寮圭獥 -->
- <el-dialog
- :title="previewTitle"
- :append-to-body="true"
- :visible.sync="pdfPreviewVisible"
- width="90%"
- top="5vh"
- :close-on-click-modal="true"
- class="pdf-preview-dialog"
- @close="handlePdfDialogClose"
+ <el-card
+ class="detail-section"
+ v-if="
+ caseData.isTransport == '2' &&
+ caseData.serviceTransport &&
+ caseData.serviceTransport.length > 0
+ "
>
- <div class="pdf-preview-container" v-loading="pdfLoading">
- <!-- PDF鎺у埗宸ュ叿鏍� -->
- <div class="pdf-toolbar">
- <el-button-group>
- <el-button
- size="mini"
- @click="changePage(currentPage - 1)"
- :disabled="currentPage <= 1"
- icon="el-icon-arrow-left"
- >
- 涓婁竴椤�
- </el-button>
- <el-button size="mini" disabled>
- 绗� {{ currentPage }} 椤� / 鍏� {{ pageCount }} 椤�
- </el-button>
- <el-button
- size="mini"
- @click="changePage(currentPage + 1)"
- :disabled="currentPage >= pageCount"
- icon="el-icon-arrow-right"
- >
- 涓嬩竴椤�
- </el-button>
- </el-button-group>
-
- <el-button-group class="zoom-controls">
- <el-button size="mini" @click="zoomOut" :disabled="scale <= 50">
- <i class="el-icon-zoom-out"></i> 缂╁皬
- </el-button>
- <el-button size="mini" disabled> {{ scale }}% </el-button>
- <el-button size="mini" @click="zoomIn" :disabled="scale >= 200">
- <i class="el-icon-zoom-in"></i> 鏀惧ぇ
- </el-button>
- <el-button size="mini" @click="resetZoom">
- <i class="el-icon-refresh-left"></i> 閲嶇疆
- </el-button>
- </el-button-group>
-
- <el-button
- size="mini"
- type="success"
- @click="downloadPdf(currentFile)"
- icon="el-icon-download"
- >
- 涓嬭浇
- </el-button>
- </div>
-
- <!-- PDF娓叉煋鍖哄煙 -->
- <div class="pdf-viewport">
- <pdf
- ref="pdf"
- :src="pdfUrl"
- :page="currentPage"
- :rotate="pageRotate"
- @num-pages="pageCount = $event"
- @page-loaded="currentPage = $event"
- @loaded="loadPdfHandler"
- @error="pdfErrorHandler"
- :style="{
- width: scale + '%',
- transform: 'scale(' + scale / 100 + ')',
- transformOrigin: '0 0'
- }"
- ></pdf>
- </div>
+ <div slot="header" class="section-header">
+ <span class="section-title">杞繍淇℃伅</span>
+ <el-button
+ v-if="caseData.reportStatus === '3'"
+ type="primary"
+ size="small"
+ icon="el-icon-truck"
+ @click="handleViewTransport"
+ >
+ 鏌ョ湅杞繍璇︽儏
+ </el-button>
</div>
- </el-dialog>
- <!-- 鍥剧墖棰勮寮圭獥 -->
- <el-dialog
- :append-to-body="true"
- :title="previewTitle"
- :visible.sync="imagePreviewVisible"
- width="60%"
- top="10vh"
- :close-on-click-modal="true"
+ <el-descriptions :column="2" border>
+ <el-descriptions-item
+ v-for="transport in caseData.serviceTransport"
+ :key="transport.id"
+ >
+ <!-- 杞繍鍗曞垪琛� -->
+ <div class="transport-info">
+ <div class="transport-item">
+ <strong>杞繍鍗曞彿:</strong> {{ transport.reportId || "-" }}
+ </div>
+ <div class="transport-item">
+ <strong>鎮ｈ�呭鍚�:</strong> {{ transport.patName || "-" }}
+ </div>
+ <div class="transport-item">
+ <strong>鍑哄彂鍦扮偣:</strong>
+ {{ transport.transportStartPlace || "-" }}
+ </div>
+ <div class="transport-item">
+ <strong>鍑哄彂鏃堕棿:</strong>
+ {{ formatDateTime(transport.transportStartTime) }}
+ </div>
+ <div class="transport-item">
+ <strong>杞繍鐘舵��:</strong>
+ <el-tag :type="getTransportStatusTag(transport)" size="small">
+ {{ getTransportStatusText(transport) }}
+ </el-tag>
+ </div>
+ <div class="transport-item">
+ <strong>璐熻矗鍗忚皟鍛�:</strong> {{ transport.contactPerson || "-" }}
+ </div>
+ <div class="transport-item" v-if="transport.remark">
+ <strong>澶囨敞:</strong> {{ transport.remark }}
+ </div>
+ </div>
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 鏃犺浆杩愪俊鎭絾闇�瑕佽浆杩愮殑鎻愮ず -->
+ <el-card
+ class="detail-section"
+ v-else-if="caseData.isTransport === '2' && caseData.reportStatus === '3'"
>
- <div class="image-preview-container">
- <img :src="previewUrl" alt="棰勮鍥剧墖" class="preview-image" />
+ <div slot="header" class="section-header">
+ <span class="section-title">杞繍淇℃伅</span>
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-truck"
+ @click="handleCreateTransport"
+ >
+ 鍒涘缓杞繍鍗�
+ </el-button>
</div>
- </el-dialog>
- <!-- 涓嶆敮鎸侀瑙堢殑鏂囦欢绫诲瀷 -->
- <el-dialog
- :title="previewTitle"
- :visible.sync="unsupportedPreviewVisible"
- width="400px"
- :close-on-click-modal="true"
- >
- <div class="unsupported-preview">
- <el-alert
- title="璇ユ枃浠舵牸寮忎笉鏀寔鍦ㄧ嚎棰勮锛岃涓嬭浇鍚庢煡鐪�"
- type="warning"
- show-icon
- :closable="false"
- />
- <div style="text-align: center; margin-top: 20px;">
- <el-button type="primary" @click="handleDownload(currentFile)">
- <i class="el-icon-download"></i> 涓嬭浇鏂囦欢
- </el-button>
- </div>
- </div>
- </el-dialog>
+ <el-alert
+ title="璇ユ渚嬮渶瑕佽浆杩愶紝浣嗗皻鏈垱寤鸿浆杩愬崟"
+ type="warning"
+ description="璇风偣鍑讳笂鏂规寜閽垱寤鸿浆杩愬崟"
+ show-icon
+ :closable="false"
+ />
+ </el-card>
+ <!-- 鏂囦欢棰勮寮圭獥 -->
+ <FilePreviewDialog
+ :visible="previewVisible"
+ :file="currentPreviewFile"
+ @close="previewVisible = false"
+ @download="handleDownload"
+ />
<div class="detail-footer" v-if="showtitle">
<el-button @click="handleClose">鍏抽棴</el-button>
@@ -361,11 +405,13 @@
<script>
import pdf from "vue-pdf";
+import FilePreviewDialog from "@/components/FilePreviewDialog";
export default {
name: "CaseDetail",
components: {
- pdf
+ pdf,
+ FilePreviewDialog
},
props: {
caseData: {
@@ -378,52 +424,29 @@
}
},
dicts: ["sys_user_sex", "sys_BloodType"],
- filters: {
- statusFilter(status) {
- const statusMap = {
- "0": "warning",
- "1": "success",
- "2": "danger"
- };
- return statusMap[status];
- },
- statusTextFilter(status) {
- const statusMap = {
- "0": "寰呭鎵�",
- "1": "宸查�氳繃",
- "2": "宸查┏鍥�"
- };
- return statusMap[status];
- }
- },
data() {
return {
- // 棰勮鐩稿叧鏁版嵁锛堜繚鎸佸師鏈変唬鐮侊級
- pdfPreviewVisible: false,
- imagePreviewVisible: false,
- unsupportedPreviewVisible: false,
- pdfLoading: false,
- pdfUrl: "",
- currentPage: 1,
- pageCount: 0,
- scale: 100,
- pageRotate: 0,
- previewTitle: "",
- previewUrl: "",
- currentFile: null,
+ // 棰勮鐩稿叧
+ previewVisible: false,
+ currentPreviewFile: null,
- // 闄勪欢鍒楄〃
- attachmentList: []
+ // 鍥剧墖棰勮鐩稿叧
+ imagePreviewUrls: []
};
},
- watch: {
- caseData: {
- immediate: true,
- handler(newVal) {
- if (newVal && newVal.annexfilesList) {
- this.loadAttachments(newVal.annexfilesList);
- }
+ computed: {
+ // 鏀堕泦鎵�鏈夊浘鐗嘦RL鐢ㄤ簬棰勮
+ allImageUrls() {
+ if (
+ !this.caseData.annexfilesList ||
+ !Array.isArray(this.caseData.annexfilesList)
+ ) {
+ return [];
}
+ return this.caseData.annexfilesList
+ .filter(file => this.isImageFile(file.fileName || file.path))
+ .map(file => this.getFileUrl(file))
+ .filter(url => url);
}
},
methods: {
@@ -431,37 +454,10 @@
this.$emit("close");
},
- // 鍔犺浇闄勪欢
- loadAttachments(annexfilesList) {
- if (!annexfilesList || !Array.isArray(annexfilesList)) {
- this.attachmentList = [];
- return;
- }
-
- this.attachmentList = annexfilesList.map((file, index) => ({
- id: index + 1,
- fileName: file.fileName || `闄勪欢${index + 1}`,
- fileType: this.getFileExtension(file.fileUrl || ""),
- fileSize: file.fileSize || 0,
- uploadTime: file.uploadTime || this.formatDateTime(new Date()),
- fileUrl: file.fileUrl || ""
- }));
- },
-
- // 鑾峰彇鏂囦欢鎵╁睍鍚�
- getFileExtension(filename) {
- return (
- filename
- .split(".")
- .pop()
- ?.toLowerCase() || "unknown"
- );
- },
-
// 鏍煎紡鍖栨棩鏈熸椂闂�
- formatDateTime(dateString) {
- if (!dateString) return "-";
- return dateString.replace("T", " ").substring(0, 19);
+ formatDateTime(dateTime) {
+ if (!dateTime) return "-";
+ return dateTime.replace("T", " ").substring(0, 19);
},
// 鏍煎紡鍖栨棩鏈�
@@ -469,7 +465,75 @@
if (!dateString) return "-";
return dateString.split("T")[0];
},
+ getTransportStatusTag(transport) {
+ if (!transport.transitStatus) return "info";
+ switch (transport.transitStatus.toString()) {
+ case "1":
+ return "warning"; // 寰呰浆杩�
+ case "2":
+ return "primary"; // 杞繍涓�
+ case "3":
+ return "success"; // 杞繍瀹屾垚
+ case "4":
+ return "danger"; // 杞繍鍙栨秷
+ case "5":
+ return "info"; // 鏆傚瓨
+ default:
+ return "info";
+ }
+ },
+ /** 鑾峰彇杞繍鐘舵�佹枃鏈� */
+ getTransportStatusText(transport) {
+ if (!transport.transitStatus) return "鏈煡";
+ switch (transport.transitStatus.toString()) {
+ case "1":
+ return "寰呰浆杩�";
+ case "2":
+ return "杞繍涓�";
+ case "3":
+ return "杞繍瀹屾垚";
+ case "4":
+ return "杞繍鍙栨秷";
+ case "5":
+ return "鏆傚瓨";
+ default:
+ return "鏈煡";
+ }
+ },
+
+ /** 鏌ョ湅杞繍璇︽儏 */
+ handleViewTransport() {
+ if (
+ this.caseData.serviceTransport &&
+ this.caseData.serviceTransport.length > 0
+ ) {
+ const transport = this.caseData.serviceTransport[0];
+ this.$router.push({
+ path: "/business/transport/detail",
+ query: {
+ id: transport.id,
+ caseNo: this.caseData.caseNo
+ }
+ });
+ }
+ },
+
+ /** 鍒涘缓杞繍鍗� */
+ handleCreateTransport() {
+ this.$router.push({
+ path: "/business/transport/create",
+ query: {
+ caseId: this.caseData.id,
+ caseNo: this.caseData.caseNo,
+ patName: this.caseData.name,
+ age: this.caseData.age,
+ sex: this.caseData.sex,
+ diagnosisname: this.caseData.diagnosisname,
+ treatmentHospitalName: this.caseData.treatmenthospitalname
+ }
+ });
+ },
// 鑾峰彇瀹屾暣鎴风睄鍦板潃
getFullRegisterAddress() {
const {
@@ -550,113 +614,127 @@
return typeMap[type] || type || "-";
},
- // 鏂囦欢棰勮鐩稿叧鏂规硶锛堜繚鎸佸師鏈変唬鐮侊級
+ // 鏂囦欢澶勭悊鐩稿叧鏂规硶
+ isImageFile(fileName) {
+ if (!fileName) return false;
+ const imageExtensions = [
+ "jpg",
+ "jpeg",
+ "png",
+ "gif",
+ "bmp",
+ "webp",
+ "svg"
+ ];
+ const extension = fileName
+ .split(".")
+ .pop()
+ .toLowerCase();
+ return imageExtensions.includes(extension);
+ },
+
+ getFileUrl(file) {
+ return file.path || file.fileUrl || "";
+ },
+
+ getImagePreviewList(file) {
+ // 杩斿洖鎵�鏈夊浘鐗囩殑URL鍒楄〃锛屽疄鐜扮偣鍑讳换鎰忓浘鐗囨煡鐪嬫墍鏈夊浘鐗�
+ return this.allImageUrls;
+ },
+
+ getFileIcon(fileName) {
+ if (!fileName) return "el-icon-document";
+ const ext = fileName
+ .split(".")
+ .pop()
+ .toLowerCase();
+ const iconMap = {
+ pdf: "el-icon-document",
+ doc: "el-icon-document",
+ docx: "el-icon-document",
+ xls: "el-icon-document",
+ xlsx: "el-icon-document",
+ jpg: "el-icon-picture",
+ jpeg: "el-icon-picture",
+ png: "el-icon-picture",
+ gif: "el-icon-picture"
+ };
+ return iconMap[ext] || "el-icon-document";
+ },
+
+ getFileTypeText(fileName) {
+ if (!fileName) return "鏂囦欢";
+ const ext = fileName
+ .split(".")
+ .pop()
+ .toLowerCase();
+ const typeMap = {
+ pdf: "PDF鏂囨。",
+ doc: "Word鏂囨。",
+ docx: "Word鏂囨。",
+ xls: "Excel琛ㄦ牸",
+ xlsx: "Excel琛ㄦ牸",
+ jpg: "鍥剧墖",
+ jpeg: "鍥剧墖",
+ png: "鍥剧墖",
+ gif: "鍥剧墖"
+ };
+ return typeMap[ext] || "鏂囦欢";
+ },
+
+ canPreview(fileName) {
+ if (!fileName) return false;
+ const previewableExtensions = ["pdf", "jpg", "jpeg", "png", "gif"];
+ const extension = fileName
+ .split(".")
+ .pop()
+ .toLowerCase();
+ return previewableExtensions.includes(extension);
+ },
+
+ // 鏂囦欢棰勮
+ handlePreview(file) {
+ this.currentPreviewFile = {
+ fileName: file.fileName,
+ fileUrl: this.getFileUrl(file),
+ fileType: this.getFileType(file.fileName)
+ };
+ this.previewVisible = true;
+ },
+
getFileType(fileName) {
+ if (!fileName) return "other";
const extension = fileName
.split(".")
.pop()
.toLowerCase();
const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
const pdfTypes = ["pdf"];
+ const officeTypes = ["doc", "docx", "xls", "xlsx"];
+
if (imageTypes.includes(extension)) return "image";
if (pdfTypes.includes(extension)) return "pdf";
+ if (officeTypes.includes(extension)) return "office";
return "other";
},
- handlePreview(file) {
- this.currentFile = file;
- this.previewTitle = `棰勮 - ${file.fileName}`;
- this.previewUrl = file.fileUrl;
- const fileType = this.getFileType(file.fileName);
-
- switch (fileType) {
- case "pdf":
- this.previewPdf(file);
- break;
- case "image":
- this.previewImage(file);
- break;
- default:
- this.previewUnsupported(file);
- break;
- }
- },
-
- previewPdf(file) {
- this.pdfPreviewVisible = true;
- this.pdfLoading = true;
- this.currentPage = 1;
- this.scale = 100;
- this.pageRotate = 0;
- this.pdfUrl = file.fileUrl;
- },
-
- loadPdfHandler() {
- this.pdfLoading = false;
- this.currentPage = 1;
- },
-
- pdfErrorHandler(error) {
- console.error("PDF鍔犺浇澶辫触:", error);
- this.pdfLoading = false;
- this.$message.error("PDF鏂囦欢鍔犺浇澶辫触锛岃灏濊瘯涓嬭浇鍚庢煡鐪�");
- this.pdfPreviewVisible = false;
- },
-
- changePage(newPage) {
- if (newPage < 1 || newPage > this.pageCount) return;
- this.currentPage = newPage;
- },
-
- zoomIn() {
- if (this.scale >= 200) return;
- this.scale += 10;
- },
-
- zoomOut() {
- if (this.scale <= 50) return;
- this.scale -= 10;
- },
-
- resetZoom() {
- this.scale = 100;
- },
-
- previewImage(file) {
- this.imagePreviewVisible = true;
- },
-
- previewUnsupported(file) {
- this.unsupportedPreviewVisible = true;
- },
-
- handlePdfDialogClose() {
- this.pdfUrl = "";
- this.currentPage = 1;
- this.pageCount = 0;
- },
-
+ // 鏂囦欢涓嬭浇
handleDownload(file) {
- const link = document.createElement("a");
- link.href = file.fileUrl;
- link.download = file.fileName;
- link.style.display = "none";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- this.$message.success("寮�濮嬩笅杞芥枃浠�");
- },
+ const fileUrl = this.getFileUrl(file);
+ const fileName = file.fileName;
- downloadPdf(file) {
- this.handleDownload(file);
- },
-
- formatFileSize(bytes) {
- if (bytes === 0) return "0 B";
- const k = 1024;
- const sizes = ["B", "KB", "MB", "GB"];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+ if (fileUrl) {
+ const link = document.createElement("a");
+ link.href = fileUrl;
+ link.download = fileName;
+ link.style.display = "none";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ this.$message.success("寮�濮嬩笅杞芥枃浠�");
+ } else {
+ this.$message.warning("鏂囦欢璺緞涓嶅瓨鍦紝鏃犳硶涓嬭浇");
+ }
}
}
};
@@ -667,83 +745,144 @@
padding: 0 20px;
}
-/* PDF棰勮瀵硅瘽妗嗘牱寮� */
-.pdf-preview-dialog {
- margin-top: 5vh !important;
+.detail-section {
+ margin-bottom: 16px;
}
-.pdf-preview-dialog >>> .el-dialog {
- min-height: 80vh;
- display: flex;
- flex-direction: column;
-}
-
-.pdf-preview-dialog >>> .el-dialog__body {
- flex: 1;
- padding: 0;
- display: flex;
- flex-direction: column;
-}
-
-.pdf-preview-container {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-/* PDF宸ュ叿鏍忔牱寮� */
-.pdf-toolbar {
- padding: 15px 20px;
- background: #f5f7fa;
- border-bottom: 1px solid #ebeef5;
+.section-header {
display: flex;
justify-content: space-between;
align-items: center;
- flex-wrap: wrap;
- gap: 10px;
}
-.zoom-controls {
- margin: 0 15px;
+.section-title {
+ font-size: 16px;
+ font-weight: bold;
+ color: #303133;
}
-/* PDF瑙嗗浘鍖哄煙鏍峰紡 */
-.pdf-viewport {
- flex: 1;
- overflow: auto;
- padding: 20px;
- background: #f8f9fa;
+/* 闄勪欢鏍峰紡 */
+.detail-attachments {
+ padding: 10px 0;
+}
+
+.attachment-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 16px;
+}
+
+.attachment-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* 鍥剧墖闄勪欢鏍峰紡 */
+.image-attachment {
+ border-radius: 4px;
+ border: 1px solid #ebeef5;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 8px;
+}
+
+.image-attachment:hover {
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+}
+
+.image-info {
+ text-align: center;
+ width: 100%;
+}
+
+.image-info .file-name {
+ font-size: 12px;
+ color: #606266;
+ margin-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 120px;
+}
+
+.image-info .file-actions {
display: flex;
justify-content: center;
- align-items: flex-start;
+ gap: 8px;
}
-/* 鍥剧墖棰勮鏍峰紡 */
-.image-preview-container {
+.image-loading,
+.image-error {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ color: #909399;
+ font-size: 12px;
+}
+
+.image-loading i,
+.image-error i {
+ font-size: 20px;
+ margin-bottom: 4px;
+}
+
+/* 鏂囦欢鍗＄墖鏍峰紡 */
+.file-card {
+ width: 100%;
+ min-height: 60px;
+ margin-bottom: 8px;
+}
+
+.file-content {
+ display: flex;
+ align-items: center;
+ padding: 8px;
+}
+
+.file-icon {
+ font-size: 24px;
+ margin-right: 12px;
+ color: #409eff;
+ flex-shrink: 0;
+}
+
+.file-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.file-name {
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.file-meta {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ color: #909399;
+}
+
+.file-actions {
text-align: center;
- padding: 20px;
+ padding: 8px;
+ border-top: 1px solid #f0f0f0;
}
-.preview-image {
- max-width: 100%;
- max-height: 70vh;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-/* 鍝嶅簲寮忚璁� */
-@media (max-width: 768px) {
- .pdf-toolbar {
- flex-direction: column;
- gap: 10px;
- }
-
- .zoom-controls {
- margin: 10px 0;
- }
-
- .pdf-preview-dialog {
- width: 95% !important;
- }
+/* 澶囨敞鏍峰紡 */
+.remark-content {
+ padding: 12px;
+ line-height: 1.6;
+ color: #606266;
+ white-space: pre-line;
}
.detail-footer {
@@ -758,4 +897,19 @@
background-color: #f5f7fa;
font-weight: bold;
}
+/* 杞繍淇℃伅鏍峰紡 */
+.transport-info {
+ padding: 10px;
+}
+
+.transport-item {
+ margin-bottom: 8px;
+ line-height: 1.6;
+}
+
+.transport-item strong {
+ display: inline-block;
+ width: 100px;
+ color: #606266;
+}
</style>
--
Gitblit v1.9.3