WXL
5 天以前 631c8f37b449b09d19345b76400a39abdb7800f6
src/views/business/transfer/transportDetail.vue
@@ -3,84 +3,145 @@
    <!-- 基础信息模块 -->
    <el-card class="detail-section">
      <div slot="header" class="section-header">
        <i class="el-icon-document" style="color: #409EFF; margin-right: 8px;"></i>
        <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="转运单号">{{
          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="transportData.status | statusFilter">
            {{ transportData.statusText }}
          <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="完成时间" v-if="transportData.completedTime">
          {{ transportData.completedTime }}
        </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-card class="detail-section">
      <div slot="header" class="section-header">
        <i class="el-icon-location-information" style="color: #67C23A; margin-right: 8px;"></i>
        <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 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-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>
        <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-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="attachmentList.length > 0">
    <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>
        <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%">
@@ -92,41 +153,41 @@
        </el-table-column>
        <el-table-column label="文件类型" width="120">
          <template slot-scope="scope">
            <el-tag size="small">{{ scope.row.fileType }}</el-tag>
            <el-tag size="small">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="大小" width="100">
        <el-table-column label="文件地址" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ formatFileSize(scope.row.fileSize) }}</span>
            <span>{{ scope.row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上传时间" width="180">
        <el-table-column label="操作" width="200">
          <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>
            <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>
    </el-card>
    <!-- 备注信息模块 -->
    <el-card class="detail-section" v-if="transportData.remarks">
    <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.remarks }}
        {{ transportData.remark }}
      </div>
    </el-card>
    <!-- 预览弹窗(保持不变) -->
    <!-- PDF预览弹窗 -->
    <el-dialog
      :title="previewTitle"
@@ -139,7 +200,6 @@
      @close="handlePdfDialogClose"
    >
      <div class="pdf-preview-container" v-loading="pdfLoading">
        <!-- PDF控制工具栏 -->
        <div class="pdf-toolbar">
          <el-button-group>
            <el-button
@@ -186,7 +246,6 @@
          </el-button>
        </div>
        <!-- PDF渲染区域 -->
        <div class="pdf-viewport">
          <pdf
            ref="pdf"
@@ -251,58 +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 {
      // 附件相关数据
      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,
@@ -311,34 +339,80 @@
      pageCount: 0,
      scale: 100,
      pageRotate: 0,
      // 图片预览相关
      imagePreviewVisible: false,
      // 不支持预览相关
      unsupportedPreviewVisible: false,
      // 通用预览数据
      previewTitle: "",
      previewUrl: "",
      currentFile: null
    };
  },
  methods: {
    // 获取联系方式
    getContactPhone(role) {
      if (this.transportData.contacts) {
        const contact = this.transportData.contacts.find(
          item => item.role === role
        );
        return contact ? contact.phone : "未填写";
      }
      return "未填写";
  watch: {
    transportData: {
      handler(newVal) {
        this.transformAttachmentData(newVal.annexfilesList);
    },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /** 转换附件数据 */
    transformAttachmentData(annexfilesList) {
      if (!annexfilesList || !Array.isArray(annexfilesList)) {
        this.attachmentList = [];
        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
@@ -357,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":
@@ -380,7 +455,7 @@
      this.currentPage = 1;
      this.scale = 100;
      this.pageRotate = 0;
      this.pdfUrl = file.fileUrl;
      this.pdfUrl = file.path;
    },
    // PDF加载完成回调
@@ -444,7 +519,7 @@
    // 文件下载
    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);
@@ -458,21 +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("删除成功");
      });
    },
    formatFileSize(bytes) {
      if (!bytes) return "未知大小";
      if (bytes === 0) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
@@ -512,7 +574,7 @@
  white-space: pre-line;
}
/* PDF预览相关样式保持不变 */
/* PDF预览相关样式 */
.pdf-preview-dialog {
  margin-top: 5vh !important;
}