From e2eb5acfb3961315df21abfe6f33a959699b562b Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 30 十二月 2025 09:49:07 +0800
Subject: [PATCH] 页面维护
---
src/views/business/transfer/transportDetail.vue | 413 ++++++++++++++++++++++++----------------------------------
1 files changed, 172 insertions(+), 241 deletions(-)
diff --git a/src/views/business/transfer/transportDetail.vue b/src/views/business/transfer/transportDetail.vue
index 1f66b4b..1bd298a 100644
--- a/src/views/business/transfer/transportDetail.vue
+++ b/src/views/business/transfer/transportDetail.vue
@@ -1,193 +1,132 @@
<template>
- <div class="transport-detail">
- <el-tabs v-model="activeTab">
- <!-- 鍩虹淇℃伅 -->
- <el-tab-pane label="鍩虹淇℃伅" name="basic">
- <el-descriptions :column="2" border>
- <el-descriptions-item label="杞繍鍗曞彿">{{
- transportData.id
- }}</el-descriptions-item>
- <el-descriptions-item label="妗堜緥缂栧彿">{{
- transportData.caseNo
- }}</el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鑰呭鍚�">{{
- transportData.donorName
- }}</el-descriptions-item>
- <el-descriptions-item label="鎬у埆">{{
- transportData.gender
- }}</el-descriptions-item>
- <el-descriptions-item label="骞撮緞"
- >{{ transportData.age }}宀�</el-descriptions-item
- >
- <el-descriptions-item label="鐤剧梾璇婃柇">{{
- transportData.diagnosis
- }}</el-descriptions-item>
- <el-descriptions-item label="鍑哄彂鍖婚櫌">{{
- transportData.hospitalName
- }}</el-descriptions-item>
- <el-descriptions-item label="鐩殑鍖婚櫌">{{
- transportData.destinationHospital
- }}</el-descriptions-item>
- <el-descriptions-item label="璁″垝杞繍鏃堕棿">{{
- transportData.transportTime
- }}</el-descriptions-item>
- <el-descriptions-item label="璐熻矗鍗忚皟鍛�">{{
- transportData.coordinator
- }}</el-descriptions-item>
- <el-descriptions-item label="杞繍鐘舵��">
- <el-tag :type="transportData.status | statusFilter">
- {{ transportData.statusText }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="鍒涘缓鏃堕棿">{{
- transportData.createTime
- }}</el-descriptions-item>
- <el-descriptions-item
- label="瀹屾垚鏃堕棿"
- v-if="transportData.completedTime"
- >
- {{ transportData.completedTime }}
- </el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
+ <div class="transport-detail-container">
+ <!-- 鍩虹淇℃伅妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <i class="el-icon-document" style="color: #409EFF; margin-right: 8px;"></i>
+ <span class="section-title">鍩虹淇℃伅</span>
+ </div>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="杞繍鍗曞彿">{{ transportData.id }}</el-descriptions-item>
+ <el-descriptions-item label="浣忛櫌鍙�">{{ transportData.caseNo }}</el-descriptions-item>
+ <el-descriptions-item label="鎹愮尞鑰呭鍚�">{{ transportData.donorName }}</el-descriptions-item>
+ <el-descriptions-item label="鎬у埆">{{ transportData.gender }}</el-descriptions-item>
+ <el-descriptions-item label="骞撮緞">{{ transportData.age }}宀�</el-descriptions-item>
+ <el-descriptions-item label="鐤剧梾璇婃柇">{{ transportData.diagnosis }}</el-descriptions-item>
+ <el-descriptions-item label="鍑哄彂鍖婚櫌">{{ transportData.hospitalName }}</el-descriptions-item>
+ <el-descriptions-item label="鐩殑鍖婚櫌">{{ transportData.destinationHospital }}</el-descriptions-item>
+ <el-descriptions-item label="璁″垝杞繍鏃堕棿">{{ transportData.transportTime }}</el-descriptions-item>
+ <el-descriptions-item label="璐熻矗鍗忚皟鍛�">{{ transportData.coordinator }}</el-descriptions-item>
+ <el-descriptions-item label="杞繍鐘舵��">
+ <el-tag :type="transportData.status | statusFilter">
+ {{ transportData.statusText }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍒涘缓鏃堕棿">{{ transportData.createTime }}</el-descriptions-item>
+ <el-descriptions-item label="瀹屾垚鏃堕棿" v-if="transportData.completedTime">
+ {{ transportData.completedTime }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <!-- 杞繍璇︽儏 -->
- <el-tab-pane label="杞繍璇︽儏" name="transport">
- <el-descriptions :column="1" border>
- <el-descriptions-item label="鍑哄彂鍦扮偣">{{
- transportData.departureLocation
- }}</el-descriptions-item>
- <el-descriptions-item label="鐩殑鍦�">{{
- transportData.destinationHospital
- }}</el-descriptions-item>
- <el-descriptions-item
- label="褰撳墠浣嶇疆"
- v-if="transportData.currentLocation"
- >
- {{ transportData.currentLocation }}
- </el-descriptions-item>
- <el-descriptions-item
- label="棰勮鍒拌揪鏃堕棿"
- v-if="transportData.estimatedTime"
- >
- {{ transportData.estimatedTime }}
- </el-descriptions-item>
- <el-descriptions-item label="杞繍璺濈" v-if="transportData.distance">
- {{ transportData.distance }}
- </el-descriptions-item>
- <el-descriptions-item label="杞繍鏃堕暱" v-if="transportData.duration">
- {{ transportData.duration }}
- </el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
+ <!-- 杞繍璇︽儏妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <i class="el-icon-location-information" style="color: #67C23A; margin-right: 8px;"></i>
+ <span class="section-title">杞繍璇︽儏</span>
+ </div>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="鍑哄彂鍦扮偣">{{ transportData.departureLocation }}</el-descriptions-item>
+ <el-descriptions-item label="鐩殑鍦�">{{ transportData.destinationHospital }}</el-descriptions-item>
+ <el-descriptions-item label="褰撳墠浣嶇疆" v-if="transportData.currentLocation">
+ {{ transportData.currentLocation }}
+ </el-descriptions-item>
+ <el-descriptions-item label="棰勮鍒拌揪鏃堕棿" v-if="transportData.estimatedTime">
+ {{ transportData.estimatedTime }}
+ </el-descriptions-item>
+ <el-descriptions-item label="杞繍璺濈" v-if="transportData.distance">
+ {{ transportData.distance }}
+ </el-descriptions-item>
+ <el-descriptions-item label="杞繍鏃堕暱" v-if="transportData.duration">
+ {{ transportData.duration }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <!-- 鍥㈤槦鎴愬憳 -->
- <el-tab-pane label="鍥㈤槦鎴愬憳" name="team">
- <el-descriptions :column="2" border>
- <el-descriptions-item label="鍗忚皟鍛�">{{
- transportData.coordinator
- }}</el-descriptions-item>
- <el-descriptions-item label="鍗忚皟鍛樼數璇�">
- {{ getContactPhone("鍗忚皟鍛樼數璇�") }}
- </el-descriptions-item>
- <el-descriptions-item
- label="鎬ヨ瘖绉戝尰鐢�"
- v-if="transportData.emergencyDoctor"
- >
- {{ transportData.emergencyDoctor }}
- </el-descriptions-item>
- <el-descriptions-item label="鎬ヨ瘖鍖荤敓鐢佃瘽">
- {{ getContactPhone("鎬ヨ瘖鍖荤敓鐢佃瘽") }}
- </el-descriptions-item>
- <el-descriptions-item label="鎶ゅ＋" v-if="transportData.nurse">
- {{ transportData.nurse }}
- </el-descriptions-item>
- <el-descriptions-item label="鎶ゅ＋鐢佃瘽">
- {{ getContactPhone("鎶ゅ＋鐢佃瘽") }}
- </el-descriptions-item>
- <el-descriptions-item label="鍙告満" v-if="transportData.driver">
- {{ transportData.driver }}
- </el-descriptions-item>
- <el-descriptions-item label="鍙告満鐢佃瘽">
- {{ getContactPhone("鍙告満鐢佃瘽") }}
- </el-descriptions-item>
- <el-descriptions-item
- label="ICU璇勪及鍖荤敓"
- v-if="transportData.icuDoctor"
- >
- {{ transportData.icuDoctor }}
- </el-descriptions-item>
- <el-descriptions-item label="ICU鍖荤敓鐢佃瘽">
- {{ getContactPhone("ICU鍖荤敓鐢佃瘽") }}
- </el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
- <el-tab-pane label="闄勪欢淇℃伅" name="attachments">
- <el-card class="attachment-card">
- <div slot="header" class="clearfix">
- <span>闄勪欢鍒楄〃</span>
- <!-- <el-button
- style="float: right; padding: 3px 0"
- type="text"
- @click="handleUpload"
- >
- 涓婁紶闄勪欢
- </el-button> -->
- </div>
+ <!-- 鍥㈤槦鎴愬憳妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <i class="el-icon-user" style="color: #E6A23C; margin-right: 8px;"></i>
+ <span class="section-title">鍥㈤槦鎴愬憳</span>
+ </div>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="鍗忚皟鍛�">{{ transportData.coordinator }}</el-descriptions-item>
+ <el-descriptions-item label="鍗忚皟鍛樼數璇�">{{ getContactPhone("鍗忚皟鍛樼數璇�") }}</el-descriptions-item>
+ <el-descriptions-item label="鎬ヨ瘖绉戝尰鐢�" v-if="transportData.emergencyDoctor">
+ {{ transportData.emergencyDoctor }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎬ヨ瘖鍖荤敓鐢佃瘽">{{ getContactPhone("鎬ヨ瘖鍖荤敓鐢佃瘽") }}</el-descriptions-item>
+ <el-descriptions-item label="鎶ゅ＋" v-if="transportData.nurse">{{ transportData.nurse }}</el-descriptions-item>
+ <el-descriptions-item label="鎶ゅ＋鐢佃瘽">{{ getContactPhone("鎶ゅ＋鐢佃瘽") }}</el-descriptions-item>
+ <el-descriptions-item label="鍙告満" v-if="transportData.driver">{{ transportData.driver }}</el-descriptions-item>
+ <el-descriptions-item label="鍙告満鐢佃瘽">{{ getContactPhone("鍙告満鐢佃瘽") }}</el-descriptions-item>
+ <el-descriptions-item label="ICU璇勪及鍖荤敓" v-if="transportData.icuDoctor">
+ {{ transportData.icuDoctor }}
+ </el-descriptions-item>
+ <el-descriptions-item label="ICU鍖荤敓鐢佃瘽">{{ getContactPhone("ICU鍖荤敓鐢佃瘽") }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <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
- >
- <el-button
- size="mini"
- type="danger"
- @click="handleDelete(scope.row)"
- >鍒犻櫎</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- </el-card>
- </el-tab-pane>
- <!-- 澶囨敞淇℃伅 -->
- <el-tab-pane label="澶囨敞淇℃伅" name="remarks" v-if="transportData.remarks">
- <el-card>
- <div class="remarks-content">
- {{ transportData.remarks }}
- </div>
- </el-card>
- </el-tab-pane>
- </el-tabs>
+ <!-- 闄勪欢淇℃伅妯″潡 -->
+ <el-card class="detail-section" v-if="attachmentList.length > 0">
+ <div slot="header" class="section-header">
+ <i class="el-icon-folder" style="color: #F56C6C; margin-right: 8px;"></i>
+ <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>
+ <el-button size="mini" type="danger" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 澶囨敞淇℃伅妯″潡 -->
+ <el-card class="detail-section" v-if="transportData.remarks">
+ <div slot="header" class="section-header">
+ <i class="el-icon-edit" style="color: #909399; margin-right: 8px;"></i>
+ <span class="section-title">澶囨敞淇℃伅</span>
+ </div>
+ <div class="remarks-content">
+ {{ transportData.remarks }}
+ </div>
+ </el-card>
+
+ <!-- 棰勮寮圭獥锛堜繚鎸佷笉鍙橈級 -->
<!-- PDF棰勮寮圭獥 -->
<el-dialog
:title="previewTitle"
@@ -268,9 +207,9 @@
</div>
</el-dialog>
- <!-- 鍥剧墖棰勮寮圭獥锛堜娇鐢‥lement UI鑷甫棰勮锛� -->
+ <!-- 鍥剧墖棰勮寮圭獥 -->
<el-dialog
- :append-to-body="true"
+ :append-to-body="true"
:title="previewTitle"
:visible.sync="imagePreviewVisible"
width="60%"
@@ -303,6 +242,7 @@
</div>
</div>
</el-dialog>
+
<div class="detail-footer">
<el-button @click="handleClose">鍏抽棴</el-button>
</div>
@@ -336,7 +276,6 @@
},
data() {
return {
- activeTab: "basic",
// 闄勪欢鐩稿叧鏁版嵁
attachmentList: [
{
@@ -353,8 +292,7 @@
fileType: "pdf",
fileSize: 2048000,
uploadTime: "2024-12-19 11:20:00",
- fileUrl:
- "http://192.168.100.10:8080/profile/upload/2025/12/19/(鍚撮緳8.7)姣忔棩宸ヤ綔鎬荤粨1766131266142.pdf"
+ fileUrl: "http://192.168.100.10:8080/profile/upload/2025/12/19/(鍚撮緳8.7)姣忔棩宸ヤ綔鎬荤粨1766131266142.pdf"
},
{
id: 3,
@@ -435,24 +373,23 @@
}
},
- // PDF棰勮鏂规硶 [1,2](@ref)
+ // PDF棰勮鏂规硶
previewPdf(file) {
this.pdfPreviewVisible = true;
this.pdfLoading = true;
this.currentPage = 1;
this.scale = 100;
this.pageRotate = 0;
- // 璁剧疆PDF婧� [4](@ref)
this.pdfUrl = file.fileUrl;
},
- // PDF鍔犺浇瀹屾垚鍥炶皟 [1,2](@ref)
+ // PDF鍔犺浇瀹屾垚鍥炶皟
loadPdfHandler() {
this.pdfLoading = false;
this.currentPage = 1;
},
- // PDF鍔犺浇閿欒澶勭悊 [4](@ref)
+ // PDF鍔犺浇閿欒澶勭悊
pdfErrorHandler(error) {
console.error("PDF鍔犺浇澶辫触:", error);
this.pdfLoading = false;
@@ -460,14 +397,13 @@
this.pdfPreviewVisible = false;
},
- // 缈婚〉鍔熻兘 [2](@ref)
+ // 缈婚〉鍔熻兘
changePage(newPage) {
if (newPage < 1 || newPage > this.pageCount) return;
-
this.currentPage = newPage;
},
- // 缂╂斁鍔熻兘 [2,3](@ref)
+ // 缂╂斁鍔熻兘
zoomIn() {
if (this.scale >= 200) {
this.$message.info("宸叉斁澶у埌鏈�澶ф瘮渚�");
@@ -514,7 +450,6 @@
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
-
this.$message.success("寮�濮嬩笅杞芥枃浠�");
},
@@ -536,25 +471,6 @@
this.$message.success("鍒犻櫎鎴愬姛");
});
},
- // 涓婁紶闄勪欢
- handleUpload() {
- this.$message.info("涓婁紶鍔熻兘寰呭疄鐜�");
- },
-
- // 鍘熸湁鏂规硶淇濇寔涓嶅彉
- getContactPhone(role) {
- if (this.transportData.contacts) {
- const contact = this.transportData.contacts.find(
- item => item.role === role
- );
- return contact ? contact.phone : "鏈～鍐�";
- }
- return "鏈～鍐�";
- },
-
- handleClose() {
- this.$emit("close");
- },
formatFileSize(bytes) {
if (bytes === 0) return "0 B";
@@ -568,11 +484,35 @@
</script>
<style scoped>
-.transport-detail {
- padding: 0 20px;
+.transport-detail-container {
+ max-height: 70vh;
+ overflow-y: auto;
+ padding: 0 10px;
}
-/* PDF棰勮瀵硅瘽妗嗘牱寮� */
+.detail-section {
+ margin-bottom: 16px;
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+}
+
+.section-title {
+ font-size: 16px;
+ font-weight: bold;
+ color: #303133;
+}
+
+.remarks-content {
+ padding: 15px;
+ line-height: 1.6;
+ color: #606266;
+ white-space: pre-line;
+}
+
+/* PDF棰勮鐩稿叧鏍峰紡淇濇寔涓嶅彉 */
.pdf-preview-dialog {
margin-top: 5vh !important;
}
@@ -596,7 +536,6 @@
height: 100%;
}
-/* PDF宸ュ叿鏍忔牱寮� */
.pdf-toolbar {
padding: 15px 20px;
background: #f5f7fa;
@@ -612,7 +551,6 @@
margin: 0 15px;
}
-/* PDF瑙嗗浘鍖哄煙鏍峰紡 */
.pdf-viewport {
flex: 1;
overflow: auto;
@@ -623,7 +561,6 @@
align-items: flex-start;
}
-/* 鍥剧墖棰勮鏍峰紡 */
.image-preview-container {
text-align: center;
padding: 20px;
@@ -635,8 +572,19 @@
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
+.detail-footer {
+ text-align: center;
+ margin-top: 20px;
+ padding-top: 20px;
+ border-top: 1px solid #ebeef5;
+}
+
/* 鍝嶅簲寮忚璁� */
@media (max-width: 768px) {
+ .transport-detail-container {
+ padding: 0 5px;
+ }
+
.pdf-toolbar {
flex-direction: column;
gap: 10px;
@@ -645,23 +593,6 @@
.zoom-controls {
margin: 10px 0;
}
-
- .pdf-preview-dialog {
- width: 95% !important;
- }
-}
-
-.detail-footer {
- text-align: center;
- margin-top: 20px;
- padding-top: 20px;
- border-top: 1px solid #ebeef5;
-}
-
-.remarks-content {
- padding: 15px;
- line-height: 1.6;
- color: #606266;
}
::v-deep .el-descriptions__label {
--
Gitblit v1.9.3