api封装档案、上报、转运接入

WXL

5 天以前 631c8f37b449b09d19345b76400a39abdb7800f6

 src/views/business/transfer/transportDetail.vue

@@ -1,193 +1,193 @@
<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.reportId || transportData.id
        }}</el-descriptions-item>
        <el-descriptions-item label="案例编号">{{
          transportData.caseNo
        }}</el-descriptions-item>
        <el-descriptions-item label="患者姓名">{{
          transportData.patName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <dict-tag
            :options="dict.type.sys_user_sex"
            :value="parseInt(transportData.sex)"
          />
        </el-descriptions-item>
        <el-descriptions-item label="年龄"
          >{{ transportData.age }}岁</el-descriptions-item
        >
        <el-descriptions-item label="疾病诊断">{{
          transportData.diagnosisname
        }}</el-descriptions-item>
        <el-descriptions-item label="治疗医院">{{
          transportData.treatmentHospitalName
        }}</el-descriptions-item>
        <el-descriptions-item label="治疗科室">{{
          transportData.treatmentDeptName
        }}</el-descriptions-item>
        <el-descriptions-item label="出发地点">{{
          transportData.transportStartPlace
        }}</el-descriptions-item>
        <el-descriptions-item label="计划转运时间">{{
          transportData.transportStartTime
        }}</el-descriptions-item>
        <el-descriptions-item label="负责协调员">{{
          transportData.contactPerson
        }}</el-descriptions-item>
        <el-descriptions-item label="转运状态">
          <el-tag :type="getStatusTagType(transportData.transitStatus)">
            {{ getStatusText(transportData.transitStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          transportData.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          transportData.updateTime
        }}</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.transportStartPlace
        }}</el-descriptions-item>
        <el-descriptions-item label="目的医院">{{
          transportData.treatmentHospitalName
        }}</el-descriptions-item>
        <el-descriptions-item label="治疗科室">{{
          transportData.treatmentDeptName
        }}</el-descriptions-item>
        <el-descriptions-item label="出发时间">{{
          transportData.transportStartTime
        }}</el-descriptions-item>
        <el-descriptions-item label="转运状态">
          <el-tag :type="getStatusTagType(transportData.transitStatus)">
            {{ getStatusText(transportData.transitStatus) }}
          </el-tag>
        </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-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.contactPerson
        }}</el-descriptions-item>
        <el-descriptions-item label="协调员电话">{{
          transportData.contactPhone || "未填写"
        }}</el-descriptions-item>
        <el-descriptions-item label="急诊科医生">{{
          transportData.doctor
        }}</el-descriptions-item>
        <el-descriptions-item label="急诊医生电话">{{
          transportData.doctorPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="护士">{{
          transportData.nurse
        }}</el-descriptions-item>
        <el-descriptions-item label="护士电话">{{
          transportData.nursePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="驾驶员">{{
          transportData.driver
        }}</el-descriptions-item>
        <el-descriptions-item label="驾驶员电话">{{
          transportData.driverPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="ICU评估医生">{{
          transportData.icuDoctor
        }}</el-descriptions-item>
        <el-descriptions-item label="ICU医生电话">{{
          transportData.icuDoctorPhone
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 附件信息模块 -->
    <el-card
      class="detail-section"
      v-if="
        transportData.annexfilesList && transportData.annexfilesList.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.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="文件地址" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <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
            >
          </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="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="transportData.remark">
      <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.remark }}
      </div>
    </el-card>

    <!-- PDF预览弹窗 -->
    <el-dialog
      :title="previewTitle"
@@ -200,7 +200,6 @@
      @close="handlePdfDialogClose"
    >
      <div class="pdf-preview-container" v-loading="pdfLoading">
        <!-- PDF控制工具栏 -->
        <div class="pdf-toolbar">
          <el-button-group>
            <el-button
@@ -247,7 +246,6 @@
          </el-button>
        </div>

        <!-- PDF渲染区域 -->
        <div class="pdf-viewport">
          <pdf
            ref="pdf"
@@ -268,9 +266,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 +301,7 @@
        </div>
      </div>
    </el-dialog>

    <div class="detail-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
@@ -311,60 +310,27 @@

<script>
import pdf from "vue-pdf";
import UploadAttachment from "@/components/UploadAttachment";

export default {
  name: "TransportDetail",
  components: {
    pdf
  },
  components: {
    UploadAttachment
  },
  dicts: ["sys_user_sex"],
  props: {
    transportData: {
      type: Object,
      default: () => ({})
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        pending: "warning",
        transporting: "primary",
        completed: "success",
        cancelled: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeTab: "basic",
      // 附件相关数据
      attachmentList: [
        {
          id: 1,
          fileName: "转运交接单.jpg",
          fileType: "docx",
          fileSize: 102400,
          uploadTime: "2024-12-19 10:30:00",
          fileUrl: "https://img95.699pic.com/photo/40142/8262.jpg_wh860.jpg"
        },
        {
          id: 2,
          fileName: "医疗记录.pdf",
          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"
        },
        {
          id: 3,
          fileName: "患者照片.jpg",
          fileType: "jpg",
          fileSize: 512000,
          uploadTime: "2024-12-19 14:15:00",
          fileUrl: "https://img95.699pic.com/photo/40019/3490.jpg_wh860.jpg"
        }
      ],
      attachmentList: [],
      // PDF预览相关数据
      pdfPreviewVisible: false,
      pdfLoading: false,
@@ -373,34 +339,80 @@
      pageCount: 0,
      scale: 100,
      pageRotate: 0,

      // 图片预览相关
      imagePreviewVisible: false,

      // 不支持预览相关
      unsupportedPreviewVisible: false,

      // 通用预览数据
      previewTitle: "",
      previewUrl: "",
      currentFile: null
    };
  },
  watch: {
    transportData: {
      handler(newVal) {
        this.transformAttachmentData(newVal.annexfilesList);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 获取联系方式
    getContactPhone(role) {
      if (this.transportData.contacts) {
        const contact = this.transportData.contacts.find(
          item => item.role === role
        );
        return contact ? contact.phone : "未填写";
    /** 转换附件数据 */
    transformAttachmentData(annexfilesList) {
      if (!annexfilesList || !Array.isArray(annexfilesList)) {
        this.attachmentList = [];
        return;
      }
      return "未填写";

      this.attachmentList = annexfilesList;
      // this.attachmentList = annexfilesList.map((fileUrl, index) => {
      //   const fileName = this.getFileNameFromUrl(fileUrl);
      //   return {
      //     id: index + 1,
      //     fileName: fileName,
      //     fileType: this.getFileType(fileName),
      //     fileUrl: fileUrl
      //   };
      // });
    },

    /** 从URL中提取文件名 */
    getFileNameFromUrl(url) {
      if (!url) return "未知文件";
      return url.split("/").pop() || "未知文件";
    },

    /** 获取状态标签类型 */
    getStatusTagType(transitStatus) {
      const statusMap = {
        1: "warning", // 待转运
        2: "primary", // 转运中
        3: "success", // 转运完成
        4: "danger", // 转运取消
        5: "info" // 暂存
      };
      return statusMap[transitStatus] || "info";
    },

    /** 获取状态文本 */
    getStatusText(transitStatus) {
      const statusMap = {
        1: "待转运",
        2: "转运中",
        3: "转运完成",
        4: "转运取消",
        5: "暂存"
      };
      return statusMap[transitStatus] || "未知状态";
    },

    // 关闭弹框
    handleClose() {
      this.$emit("close");
    },

    // 获取文件类型
    getFileType(fileName) {
      const extension = fileName
@@ -419,8 +431,9 @@
    handlePreview(file) {
      this.currentFile = file;
      this.previewTitle = `预览 - ${file.fileName}`;
      this.previewUrl = file.fileUrl;
      this.previewUrl = file.path;
      const fileType = this.getFileType(file.fileName);
      console.log(this.previewUrl, "this.previewUrl");

      switch (fileType) {
        case "pdf":
@@ -435,24 +448,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;
      this.pdfUrl = file.path;
    },

    // 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 +472,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("已放大到最大比例");
@@ -508,13 +519,12 @@
    // 文件下载
    handleDownload(file) {
      const link = document.createElement("a");
      link.href = file.fileUrl;
      link.href = file.path;
      link.download = file.fileName;
      link.style.display = "none";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      this.$message.success("开始下载文件");
    },

@@ -523,40 +533,8 @@
      this.handleDownload(file);
    },

    // 文件删除
    handleDelete(file) {
      this.$confirm("确定要删除这个附件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.attachmentList = this.attachmentList.filter(
          item => item.id !== file.id
        );
        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) return "未知大小";
      if (bytes === 0) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
@@ -568,11 +546,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 +598,6 @@
  height: 100%;
}

/* PDF工具栏样式 */
.pdf-toolbar {
  padding: 15px 20px;
  background: #f5f7fa;
@@ -612,7 +613,6 @@
  margin: 0 15px;
}

/* PDF视图区域样式 */
.pdf-viewport {
  flex: 1;
  overflow: auto;
@@ -623,7 +623,6 @@
  align-items: flex-start;
}

/* 图片预览样式 */
.image-preview-container {
  text-align: center;
  padding: 20px;
@@ -635,8 +634,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 +655,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 {