From 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 29 十二月 2025 20:06:22 +0800
Subject: [PATCH] 项目页面优化
---
src/views/business/appear/caseDetail.vue | 315 ++++++++++++++++++++++++++-------------------------
1 files changed, 161 insertions(+), 154 deletions(-)
diff --git a/src/views/business/appear/caseDetail.vue b/src/views/business/appear/caseDetail.vue
index fb7c54c..db0dc01 100644
--- a/src/views/business/appear/caseDetail.vue
+++ b/src/views/business/appear/caseDetail.vue
@@ -1,163 +1,166 @@
<template>
<div class="case-detail">
- <el-tabs v-model="activeTab">
- <el-tab-pane label="鍩烘湰淇℃伅" name="basic">
- <el-descriptions :column="2" border>
- <el-descriptions-item label="鎹愮尞缂栧彿">{{
- caseData.donorNo
- }}</el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鑰呭鍚�">{{
- caseData.donorName
- }}</el-descriptions-item>
- <el-descriptions-item label="鎬у埆">
- <dict-tag :options="genderOptions" :value="caseData.gender" />
- </el-descriptions-item>
- <el-descriptions-item label="骞撮緞"
- >{{ caseData.age }}宀�</el-descriptions-item
- >
- <el-descriptions-item label="琛�鍨�">
- <dict-tag :options="bloodTypeOptions" :value="caseData.bloodType" />
- </el-descriptions-item>
- <el-descriptions-item label="璇佷欢鍙风爜">{{
- caseData.idCardNo
- }}</el-descriptions-item>
- <el-descriptions-item label="姘戞棌">{{
- caseData.nation
- }}</el-descriptions-item>
- <el-descriptions-item label="鑱旂郴鐢佃瘽">{{
- caseData.phone
- }}</el-descriptions-item>
- <el-descriptions-item label="浣忓潃" :span="2">{{
- caseData.address
- }}</el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
+ <!-- 鍩烘湰淇℃伅妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <span class="section-title">鍩烘湰淇℃伅</span>
+ </div>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="鎹愮尞缂栧彿">{{
+ caseData.donorNo
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鎹愮尞鑰呭鍚�">{{
+ caseData.donorName
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鎬у埆">
+ <dict-tag :options="genderOptions" :value="caseData.gender" />
+ </el-descriptions-item>
+ <el-descriptions-item label="骞撮緞"
+ >{{ caseData.age }}宀�</el-descriptions-item
+ >
+ <el-descriptions-item label="琛�鍨�">
+ <dict-tag :options="bloodTypeOptions" :value="caseData.bloodType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="璇佷欢鍙风爜">{{
+ caseData.idCardNo
+ }}</el-descriptions-item>
+ <el-descriptions-item label="姘戞棌">{{
+ caseData.nation
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴鐢佃瘽">{{
+ caseData.phone
+ }}</el-descriptions-item>
+ <el-descriptions-item label="浣忓潃" :span="2">{{
+ caseData.address
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <el-tab-pane label="鍖荤枟淇℃伅" name="medical">
- <el-descriptions :column="1" border>
- <el-descriptions-item label="鐤剧梾璇婃柇">{{
- caseData.diagnosis
- }}</el-descriptions-item>
- <el-descriptions-item label="浣忛櫌鍙�">{{
- caseData.inpatientNo
- }}</el-descriptions-item>
- <el-descriptions-item label="鎵�鍦ㄧ瀹�">{{
- caseData.departmentName
- }}</el-descriptions-item>
- <el-descriptions-item label="涓绘不鍖荤敓">{{
- caseData.doctorName
- }}</el-descriptions-item>
- <el-descriptions-item label="浼犳煋鐥呮儏鍐�">{{
- caseData.infectiousDisease || "鏃�"
- }}</el-descriptions-item>
- <el-descriptions-item label="鍖荤枟璁板綍">{{
- caseData.medicalRecord
- }}</el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
+ <!-- 鍖荤枟淇℃伅妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <span class="section-title">鍖荤枟淇℃伅</span>
+ </div>
+ <el-descriptions :column="1" border>
+ <el-descriptions-item label="鐤剧梾璇婃柇">{{
+ caseData.diagnosis
+ }}</el-descriptions-item>
+ <el-descriptions-item label="浣忛櫌鍙�">{{
+ caseData.inpatientNo
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鎵�鍦ㄧ瀹�">{{
+ caseData.departmentName
+ }}</el-descriptions-item>
+ <el-descriptions-item label="涓绘不鍖荤敓">{{
+ caseData.doctorName
+ }}</el-descriptions-item>
+ <el-descriptions-item label="浼犳煋鐥呮儏鍐�">{{
+ caseData.infectiousDisease || "鏃�"
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍖荤枟璁板綍">{{
+ caseData.medicalRecord
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <el-tab-pane label="鍖婚櫌淇℃伅" name="hospital">
- <el-descriptions :column="2" border>
- <el-descriptions-item label="鍖婚櫌鍚嶇О">{{
- caseData.hospitalName
- }}</el-descriptions-item>
- <el-descriptions-item label="鍖婚櫌绾у埆">{{
- caseData.hospitalLevel
- }}</el-descriptions-item>
- <el-descriptions-item label="鑱旂郴浜�">{{
- caseData.contactPerson
- }}</el-descriptions-item>
- <el-descriptions-item label="鑱旂郴鐢佃瘽">{{
- caseData.contactPhone
- }}</el-descriptions-item>
- <el-descriptions-item label="鍖婚櫌鍦板潃" :span="2">{{
- caseData.hospitalAddress
- }}</el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
+ <!-- 鍖婚櫌淇℃伅妯″潡 -->
+ <el-card class="detail-section">
+ <div slot="header" class="section-header">
+ <span class="section-title">鍖婚櫌淇℃伅</span>
+ </div>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="鍖婚櫌鍚嶇О">{{
+ caseData.hospitalName
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍖婚櫌绾у埆">{{
+ caseData.hospitalLevel
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴浜�">{{
+ caseData.contactPerson
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴鐢佃瘽">{{
+ caseData.contactPhone
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鍖婚櫌鍦板潃" :span="2">{{
+ caseData.hospitalAddress
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
- <!-- 鏂板闄勪欢淇℃伅鏍囩椤� -->
- <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-card class="detail-section">
+ <div slot="header" class="section-header">
+ <span class="section-title">闄勪欢淇℃伅</span>
+ <el-button type="text" icon="el-icon-upload" @click="handleUpload"
+ >涓婁紶闄勪欢</el-button
+ >
+ </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>
- </div>
+ <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-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="approval"
- v-if="caseData.status !== '0'"
- >
- <el-descriptions :column="1" border>
- <el-descriptions-item label="瀹℃壒缁撴灉">
- <el-tag :type="caseData.status | statusFilter">
- {{ caseData.status | statusTextFilter }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="瀹℃壒鏃堕棿">{{
- caseData.approveTime
- }}</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒浜�">{{
- caseData.approverName
- }}</el-descriptions-item>
- <el-descriptions-item label="瀹℃壒鎰忚">{{
- caseData.approveOpinion
- }}</el-descriptions-item>
- </el-descriptions>
- </el-tab-pane>
- </el-tabs>
+ <!-- 瀹℃壒淇℃伅妯″潡锛堝鏈夛級 -->
+ <el-card class="detail-section" v-if="caseData.status !== '0'">
+ <div slot="header" class="section-header">
+ <span class="section-title">瀹℃壒淇℃伅</span>
+ </div>
+ <el-descriptions :column="1" border>
+ <el-descriptions-item label="瀹℃壒缁撴灉">
+ <el-tag :type="caseData.status | statusFilter">
+ {{ caseData.status | statusTextFilter }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="瀹℃壒鏃堕棿">{{
+ caseData.approveTime
+ }}</el-descriptions-item>
+ <el-descriptions-item label="瀹℃壒浜�">{{
+ caseData.approverName
+ }}</el-descriptions-item>
+ <el-descriptions-item label="瀹℃壒鎰忚">{{
+ caseData.approveOpinion
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
<!-- PDF棰勮寮圭獥 -->
<el-dialog
@@ -275,7 +278,7 @@
</div>
</el-dialog>
- <div class="detail-footer">
+ <div class="detail-footer" v-if="showtitle">
<el-button @click="handleClose">鍏抽棴</el-button>
</div>
</div>
@@ -293,6 +296,10 @@
caseData: {
type: Object,
default: () => ({})
+ },
+ showtitle: {
+ type: Boolean,
+ default: true
}
},
filters: {
--
Gitblit v1.9.3