项目页面优化

WXL

2025-12-29 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2

 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>

    <!-- 图片预览弹窗（使用Element 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 {