近期调试

WXL

2026-05-17 3453ba7e5243022ad4388da1515dc75ad8d81f94

 src/views/business/course/components/OrganProcurementStage.vue

@@ -1,499 +1,1584 @@
<template>
  <base-stage :stage-data="stageData" :case-info="caseInfo">
    <template #header>
      <el-alert
        :title="`器官获取 - ${getStatusText()}`"
        :type="getAlertType()"
        :description="getAlertDescription()"
        show-icon
        :closable="false"
      />
    </template>
  <div class="organ-procurement-detail">

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header">
            <span>获取手术信息</span>
          </div>
          <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="手术时间">
              {{ formatTime(procurementDetails.surgeryTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="手术地点">
              {{ procurementDetails.location }}
            </el-descriptions-item>
            <el-descriptions-item label="主刀医生">
              {{ procurementDetails.surgeon }}
            </el-descriptions-item>
            <el-descriptions-item label="麻醉医生">
              {{ procurementDetails.anesthesiologist }}
            </el-descriptions-item>
            <el-descriptions-item label="手术状态">
              <el-tag :type="procurementDetails.status === 'completed' ? 'success' : 'warning'">
                {{ procurementDetails.status === 'completed' ? '已完成' : '进行中' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    <!-- 基本信息 -->
    <el-card class="detail-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取基本信息</span>

      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header">
            <span>器官获取统计</span>
          </div>
          <div class="procurement-stats">
            <div class="stat-item">
              <span class="label">计划获取:</span>
              <span class="value">{{ procurementStats.planned }} 个</span>
            </div>
            <div class="stat-item">
              <span class="label">实际获取:</span>
              <span class="value">{{ procurementStats.actual }} 个</span>
            </div>
            <div class="stat-item">
              <span class="label">获取成功率:</span>
              <el-progress
                :percentage="procurementStats.successRate"
                :status="procurementStats.successRate > 90 ? 'success' : 'warning'"
              />
            </div>
            <div class="stat-item">
              <span class="label">质量评估:</span>
              <el-rate
                v-model="procurementStats.qualityRating"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value} 星"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header">
            <span>保存与运输</span>
          </div>
          <div class="preservation-info">
            <div class="info-item">
              <span class="label">保存方式:</span>
              <span>{{ preservationDetails.method }}</span>
            </div>
            <div class="info-item">
              <span class="label">保存温度:</span>
              <span>{{ preservationDetails.temperature }}</span>
            </div>
            <div class="info-item">
              <span class="label">灌注液:</span>
              <span>{{ preservationDetails.perfusionSolution }}</span>
            </div>
            <div class="info-item">
              <span class="label">预计存活时间:</span>
              <el-tag :type="getSurvivalTimeType()">
                {{ preservationDetails.survivalTime }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top: 20px;">
      <div slot="header" class="card-header">
        <span>器官获取详情</span>
        <el-button type="primary" size="small" @click="handleStartProcurement">
          开始获取手术
        </el-button>
      </div>
      <el-table :data="organProcurementData" border>
        <el-table-column label="器官名称" prop="organName" width="120" align="center" />
        <el-table-column label="获取状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getProcurementStatusTag(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="获取时间" width="160" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.procurementTime) || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="重量(g)" prop="weight" width="100" align="center" />
        <el-table-column label="质量评估" width="120" align="center">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.qualityScore"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            />
          </template>
        </el-table-column>
        <el-table-column label="灌注情况" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.perfusionStatus ? 'success' : 'warning'">
              {{ scope.row.perfusionStatus ? '已完成' : '待灌注' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="保存方式" prop="preservationMethod" width="120" />
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewOrgan(scope.row)">
              查看详情
            </el-button>
            <el-button
              v-if="scope.row.status !== '已获取'"
              type="text"
              size="small"
              @click="handleRecordProcurement(scope.row)"

      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <!-- 手术相关信息 -->
        <el-divider content-position="left">手术信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="手术医生" prop="operationdoctor">
              <el-input v-model="form.operationdoctor" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手术开始时间" prop="operationbegtime">
              <el-date-picker
                v-model="form.operationbegtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手术结束时间" prop="operationendtime">
              <el-date-picker
                v-model="form.operationendtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="腹主动脉插管时间"
              prop="abdominalaortacannulatime"
            >
              记录获取
            </el-button>
          </template>
        </el-table-column>
      </el-table>
              <el-date-picker
                v-model="form.abdominalaortacannulatime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="腹主动脉灌注时间"
              prop="abdominalaortaperfusiontime"
            >
              <el-date-picker
                v-model="form.abdominalaortaperfusiontime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="门静脉插管时间" prop="portalveincannulatime">
              <el-date-picker
                v-model="form.portalveincannulatime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门静脉灌注时间" prop="portalveinperfusiontime">
              <el-date-picker
                v-model="form.portalveinperfusiontime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 协调员信息 -->
        <el-divider content-position="left">协调员信息</el-divider>

        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <el-form-item label="协调员姓名" prop="coordinatorName">
              <el-input v-model="form.coordinatorName" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="进手术室时间" prop="coordinatorInOperating">
              <el-date-picker
                v-model="form.coordinatorInOperating"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出手术室时间" prop="coordinatorOutOperating">
              <el-date-picker
                v-model="form.coordinatorOutOperating"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="协调员签字" prop="coordinatorSign">
              <el-input v-model="form.coordinatorSign" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签字时间" prop="coordinatorSignTime">
              <el-date-picker
                v-model="form.coordinatorSignTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 负责人信息 -->
        <el-divider content-position="left">负责人信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="负责人姓名" prop="responsibleusername">
              <el-input v-model="form.responsibleusername" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联络人一" prop="coordinatedusernameo">
              <el-input v-model="form.coordinatedusernameo" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联络人二" prop="coordinatedusernamet">
              <el-input v-model="form.coordinatedusernamet" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 获取机构信息 -->
        <el-divider content-position="left">获取机构信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="获取机构名称" prop="gainhospitalname">
              <el-input
                v-model="form.gainhospitalname"
                placeholder="请输入获取机构名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="获取机构编码" prop="gainhospitalno">
              <el-input
                v-model="form.gainhospitalno"
                placeholder="请输入获取机构编码"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div slot="header" class="card-header">
        <span>手术记录与影像</span>
    <!-- 器官获取记录部分 -->
    <el-card class="procurement-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取记录</span>
        <div style="float: right;">

          <dict-tag
            :options="dict.type.Obtain_status"
            :value="form.witnessState"
          />
        </div>
      </div>
      <el-tabs v-model="activeMedicalTab">
        <el-tab-pane label="手术记录" name="surgeryRecord">
          <div class="surgery-record">
            <el-timeline>
              <el-timeline-item
                v-for="record in surgeryRecords"
                :key="record.time"
                :timestamp="formatTime(record.time)"
                :type="record.type"
                :icon="record.icon"

      <el-form
        ref="procurementForm"
        :rules="procurementRules"
        :model="procurementData"
        label-position="right"
      >
        <el-row>
          <el-col>
            <el-form-item label-width="100px" label="捐献器官">
              <el-checkbox-group
                v-model="selectedOrgans"
                @change="handleOrganSelectionChange"
              >
                <p>{{ record.content }}</p>
                <div v-if="record.images && record.images.length > 0" class="record-images">
                  <el-image
                    v-for="(img, index) in record.images"
                    :key="index"
                    :src="img"
                    :preview-src-list="record.images"
                    style="width: 100px; height: 100px; margin-right: 10px;"
                  />
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
                <el-checkbox
                  v-for="dict in dict.type.sys_Organ || []"
                  :key="dict.value"
                  :label="dict.value"
                >
                  {{ dict.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-tab-pane label="器官影像" name="organImages">
          <div class="organ-images">
            <el-row :gutter="15">
              <el-col v-for="organ in organImages" :key="organ.name" :span="8">
                <el-card shadow="hover">
                  <div slot="header" class="image-header">
                    <span>{{ organ.name }}</span>
                  </div>
                  <el-image
                    :src="organ.image"
                    :preview-src-list="[organ.image]"
                    fit="cover"
                    style="width: 100%; height: 200px;"
                  />
                  <div style="padding: 10px;">
                    <p>{{ organ.description }}</p>
                    <el-tag size="small">{{ organ.status }}</el-tag>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-row>
          <el-col>
            <el-form-item>
              <el-table
                :data="procurementData.serviceDonationwitnessorgans"
                v-loading="loading"
                border
                style="width: 100%"
                :row-class-name="getOrganRowClassName"
              >
                <el-table-column
                  label="器官名称"
                  align="center"
                  width="120"
                  prop="organname"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.organname"
                      placeholder="器官名称"
                      :disabled="true"
                    />
                  </template>
                </el-table-column>

        <el-tab-pane label="质量检测报告" name="qualityReport">
          <div class="quality-report">
            <el-table :data="qualityReports" border>
              <el-table-column label="检测项目" prop="item" width="150" />
              <el-table-column label="检测结果" prop="result" width="120">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.pass ? 'success' : 'danger'">
                    {{ scope.row.pass ? '合格' : '不合格' }}
                <el-table-column
                  label="获取开始时间"
                  align="center"
                  width="180"
                  prop="organStartTime"
                >
                  <template slot-scope="scope">
                    <el-date-picker
                      clearable
                      size="small"
                      style="width: 100%"
                      v-model="scope.row.organStartTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择获取开始时间"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="器官离体时间"
                  align="center"
                  width="180"
                  prop="organgettime"
                >
                  <template slot-scope="scope">
                    <el-date-picker
                      clearable
                      size="small"
                      style="width: 100%"
                      v-model="scope.row.organgettime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择器官离体时间"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="获取医院"
                  align="center"
                  width="200"
                  prop="gainhospitalno"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.gainhospitalno"
                      placeholder="请选择获取医院"
                      style="width: 100%"
                      @change="handleHospitalChange(scope.row, $event)"
                    >
                      <el-option
                        v-for="hospital in hospitalList"
                        :key="hospital.hospitalNo"
                        :label="hospital.hospitalName"
                        :value="hospital.hospitalNo"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="获取医师"
                  align="center"
                  width="120"
                  prop="organgetdoct"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.organgetdoct"
                      placeholder="获取医师"
                    />
                  </template>
                </el-table-column>

                <!-- <el-table-column
                  label="助手"
                  align="center"
                  width="120"
                  prop="assistant"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.assistant"
                      placeholder="助手"

                    />
                  </template>
                </el-table-column> -->

                <!-- <el-table-column
                  label="获取护士"
                  align="center"
                  width="120"
                  prop="procurementNurse"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.procurementNurse"
                      placeholder="获取护士"

                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="手术室护士"
                  align="center"
                  width="120"
                  prop="operatingRoomNurse"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.operatingRoomNurse"
                      placeholder="手术室护士"

                    />
                  </template>
                </el-table-column> -->

                <el-table-column
                  label="获取状态"
                  align="center"
                  width="120"
                  prop="organstate"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.organstate"
                      placeholder="请选择获取状态"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="dict in dict.type.Obtain_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                  label="说明"
                  align="center"
                  prop="notgetreason"
                  min-width="200"
                >
                  <template slot-scope="scope">
                    <el-input
                      type="textarea"
                      clearable
                      v-model="scope.row.notgetreason"
                      placeholder="请输入未获取说明"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  width="120"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleEditProcurement(scope.row)"
                    >
                      编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 获取统计信息 -->
        <!-- <div
          class="procurement-stats"
          v-if="
            procurementData.serviceDonationwitnessorgans &&
              procurementData.serviceDonationwitnessorgans.length > 0
          "
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">已获取器官:</span>
                <span class="stat-value"
                  >{{
                    procurementData.serviceDonationwitnessorgans.length
                  }}
                  个</span
                >
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">待完善信息:</span>
                <span class="stat-value">{{ incompleteRecords }} 个</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">涉及医院:</span>
                <span class="stat-value">{{ uniqueHospitals }} 家</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">获取状态:</span>
                <span class="stat-value">
                  <el-tag
                    :type="
                      form.witnessState === 'completed' ? 'success' : 'warning'
                    "
                  >
                    {{ form.witnessState === "completed" ? "已完成" : "进行中" }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="参考范围" prop="reference" width="120" />
              <el-table-column label="检测值" prop="value" width="100" />
              <el-table-column label="检测时间" width="160">
                <template slot-scope="scope">
                  {{ formatTime(scope.row.testTime) }}
                </template>
              </el-table-column>
              <el-table-column label="检测医生" prop="doctor" width="120" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
                </span>
              </div>
            </el-col>
          </el-row>
        </div> -->

        <div
          v-if="!procurementData.serviceDonationwitnessorgans"
          class="empty-procurement"
        >
          <el-empty description="暂无获取记录" :image-size="80">
            <span>请先选择要获取的器官</span>
          </el-empty>
        </div>
      </el-form>
    </el-card>

    <template #footer>
      <div class="action-buttons" style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="handleCompleteProcurement">
          完成器官获取
        </el-button>
        <el-button type="success" @click="handleGenerateReport">
          生成获取报告
        </el-button>
        <el-button type="warning" @click="handleUploadEvidence">
          上传手术证据
        </el-button>
    <!-- 附件管理部分优化 -->
    <el-card class="attachment-card">
      <div class="attachment-header">
        <i class="el-icon-paperclip"></i>
        <span class="attachment-title">相关附件</span>
        <span class="attachment-tip"
          >支持上传器官获取相关文件 (最多{{ attachmentLimit }}个)</span
        >
      </div>
    </template>
  </base-stage>

      <!-- 使用 UploadAttachment 组件 -->
      <UploadAttachment
        ref="uploadAttachment"
        :file-list="attachmentFileList"
        :limit="attachmentLimit"
        :accept="attachmentAccept"
        :multiple="true"
        @change="handleAttachmentChange"
        @upload-success="handleUploadSuccess"
        @upload-error="handleUploadError"
        @remove="handleAttachmentRemove"
      />

      <!-- 附件列表展示 -->
      <div class="attachment-list" v-if="attachments && attachments.length > 0">
        <div class="list-title">已上传附件 ({{ attachments.length }})</div>
        <el-table :data="attachments" style="width: 100%" size="small">
          <el-table-column label="文件名" min-width="200">
            <template slot-scope="scope">
              <i
                class="el-icon-document"
                :style="{ color: getFileIconColor(scope.row.fileName) }"
              ></i>
              <span class="file-name">{{ scope.row.fileName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件类型" width="100">
            <template slot-scope="scope">
              <el-tag :type="getFileTagType(scope.row.fileName)" size="small">
                {{ getFileTypeText(scope.row.fileName) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" width="160">
            <template slot-scope="scope">
              <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
            </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="200" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handlePreview(scope.row)"
                :disabled="!isPreviewable(scope.row.fileName)"
              >
                预览
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="handleDownload(scope.row)"
              >
                下载
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleRemoveAttachment(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 编辑获取记录对话框 -->
    <el-dialog
      title="编辑器官获取记录"
      :visible.sync="editDialogVisible"
      width="600px"
    >
      <el-form :model="currentRecord" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="器官名称">
              <el-input v-model="currentRecord.organname" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获取状态">
              <el-select v-model="currentRecord.organstate" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.Obtain_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="获取医师">
              <el-input
                v-model="currentRecord.organgetdoct"
                placeholder="请输入获取医师"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助手">
              <el-input
                v-model="currentRecord.assistant"
                placeholder="请输入助手姓名"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="获取护士">
              <el-input
                v-model="currentRecord.procurementNurse"
                placeholder="请输入获取护士"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手术室护士">
              <el-input
                v-model="currentRecord.operatingRoomNurse"
                placeholder="请输入手术室护士"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="麻醉医生">
          <el-input
            v-model="currentRecord.anesthesiologist"
            placeholder="请输入麻醉医生"
          />
        </el-form-item>

        <el-form-item
          label="未获取说明"
          v-if="currentRecord.organstate === '0'"
        >
          <el-input
            type="textarea"
            :rows="3"
            v-model="currentRecord.notgetreason"
            placeholder="请输入未获取的原因说明"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditConfirm">确认</el-button>
      </div>
    </el-dialog>

    <!-- 文件预览弹窗 -->
    <el-dialog
      :title="filePreviewTitle"
      :visible.sync="filePreviewVisible"
      width="800px"
      @close="filePreviewVisible = false"
    >
      <div v-if="currentPreviewFile">
        <div v-if="currentPreviewFile.fileType === 'image'">
          <img
            :src="currentPreviewFile.fileUrl"
            style="max-width: 100%; max-height: 500px;"
          />
        </div>
        <div v-else-if="currentPreviewFile.fileType === 'pdf'">
          <iframe
            :src="currentPreviewFile.fileUrl"
            width="100%"
            height="500px"
          ></iframe>
        </div>
        <div v-else>
          <p>不支持预览此文件类型，请下载查看</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseStage from './BaseStage.vue';
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
import UploadAttachment from "@/components/UploadAttachment";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import dayjs from "dayjs";

export default {
  name: 'OrganProcurementStage',
  components: { BaseStage },
  props: {
    stageData: {
      type: Object,
      default: () => ({})
    },
    caseInfo: {
      type: Object,
      default: () => ({})
  name: "OrganProcurementDetail",
  components: {
    UploadAttachment,
    CaseBasicInfo
  },
  dicts: [
    "sys_BloodType",
    "sys_DonationCategory",
    "sys_Organ",
    "Obtain_status"
  ],
    props: {
    infoid: {
      type: String,
      default: true
    }
  },
  data() {
    return {
      activeMedicalTab: 'surgeryRecord',
      procurementDetails: {
        surgeryTime: '2023-12-04 14:00:00',
        location: '手术室一号',
        surgeon: '张主任',
        anesthesiologist: '王医生',
        status: 'in_progress'
      caseId: null,
      // 表单数据
      form: {
        id: undefined,
        infoid: undefined,
        name: "",
        inpatientno: "",
        witnessState: "2",
        caseNo: "",
        donorno: "",
        treatmenthospitalname: "",
        treatmenthospitalno: "",
        sex: "",
        age: "",
        bloodtype: "",
        idcardno: "",
        diagnosisname: "",
        coordinatorName: "",
        gainhospitalno: "",
        gainhospitalname: "",
        deathtime: "",
        deathreason: "",
        deathjudgedocto: "",
        deathjudgedoctt: "",
        deathjudgeannex: "",
        operationbegtime: "",
        operationendtime: "",
        operationdoctor: "",
        isspendremember: 1,
        isrestoreremains: 1,
        rememberannex: "",
        responsibleuserid: "",
        responsibleusername: "",
        coordinateduserido: "",
        coordinatedusernameo: "",
        coordinateduseridt: "",
        coordinatedusernamet: "",
        abdominalaortacannulatime: "",
        abdominalaortaperfusiontime: "",
        portalveincannulatime: "",
        portalveinperfusiontime: "",
        pulmonaryarterycannulatime: "",
        pulmonaryarteryperfusiontime: "",
        aortacannulatime: "",
        aortaperfusiontime: "",
        organdonation: "",
        organdonationOther: "",
        donationcategory: "",
        coordinatorInOperating: "",
        coordinatorOutOperating: "",
        coordinatorSign: "",
        coordinatorSignTime: "",
        attachments: []
      },
      procurementStats: {
        planned: 3,
        actual: 0,
        successRate: 0,
        qualityRating: 0
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "捐献者姓名不能为空", trigger: "blur" }
        ],
        diagnosisname: [
          { required: true, message: "疾病诊断不能为空", trigger: "blur" }
        ],
        donationcategory: [
          { required: true, message: "捐献类别不能为空", trigger: "change" }
        ],
        operationdoctor: [
          { required: true, message: "手术医生不能为空", trigger: "blur" }
        ]
      },
      preservationDetails: {
        method: '低温机械灌注[9](@ref)',
        temperature: '4°C',
        perfusionSolution: 'UW保存液',
        survivalTime: '肝脏12小时[1](@ref)'
      // 获取记录验证规则
      procurementRules: {},
      // 保存加载状态
      saveLoading: false,
      confirmLoading: false,
      // 加载状态
      loading: false,
      // 选中的器官
      selectedOrgans: [],
      // 医院列表
      hospitalList: [],
      // 获取记录数据
      procurementData: {
        serviceDonationwitnessorgans: []
      },
      organProcurementData: [
        {
          organName: '肝脏',
          status: '获取中',
          procurementTime: '',
          weight: 1500,
          qualityScore: 0,
          perfusionStatus: false,
          preservationMethod: '低温保存'
        },
        {
          organName: '肾脏',
          status: '待获取',
          procurementTime: '',
          weight: 0,
          qualityScore: 0,
          perfusionStatus: false,
          preservationMethod: ''
        },
        {
          organName: '心脏',
          status: '待获取',
          procurementTime: '',
          weight: 0,
          qualityScore: 0,
          perfusionStatus: false,
          preservationMethod: ''
        }
      ],
      surgeryRecords: [
        {
          time: '2023-12-04 14:00:00',
          content: '手术开始，患者体位摆放，消毒铺巾',
          type: 'primary',
          icon: 'el-icon-video-play'
        },
        {
          time: '2023-12-04 14:30:00',
          content: '开腹手术，暴露腹腔器官',
          type: 'success',
          icon: 'el-icon-scissors'
        },
        {
          time: '2023-12-04 15:00:00',
          content: '肝脏游离，血管解剖分离',
          type: 'warning',
          icon: 'el-icon-medal'
        }
      ],
      organImages: [
        {
          name: '肝脏',
          image: '/images/liver-procurement.jpg',
          description: '获取的肝脏器官，形态完整',
          status: '质量良好'
        }
      ],
      qualityReports: [
        {
          item: '肝功能酶学',
          result: true,
          reference: '<40 U/L',
          value: '35 U/L',
          testTime: '2023-12-04 16:00:00',
          doctor: '李检验师'
        },
        {
          item: '组织完整性',
          result: true,
          reference: '完整',
          value: '完整',
          testTime: '2023-12-04 16:15:00',
          doctor: '张病理师'
        }
      ]
      // 附件数据
      attachments: [],
      attachmentFileList: [],
      // 附件相关配置
      attachmentLimit: 10,
      attachmentAccept:
        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
      // 编辑对话框
      editDialogVisible: false,
      currentRecord: {},
      currentEditIndex: -1,
      // 文件预览相关
      filePreviewVisible: false,
      currentPreviewFile: null,
      filePreviewTitle: ""
    };
  },
  computed: {
    // 当前用户信息
    currentUser() {
      return JSON.parse(sessionStorage.getItem("user") || "{}");
    },
    // 不完整的记录数量
    incompleteRecords() {
      if (!this.procurementData.serviceDonationwitnessorgans) return 0;
      return this.procurementData.serviceDonationwitnessorgans.filter(
        record =>
          !record.organStartTime ||
          !record.organgettime ||
          !record.gainhospitalno ||
          !record.organgetdoct
      ).length;
    },
    // 唯一医院数量
    uniqueHospitals() {
      if (!this.procurementData.serviceDonationwitnessorgans) return 0;
      const hospitals = this.procurementData.serviceDonationwitnessorgans
        .map(record => record.gainhospitalno)
        .filter(Boolean);
      return new Set(hospitals).size;
    },
    // 获取器官字典
    organDict() {
      return this.dict.type.sys_Organ || [];
    }
  },
  watch: {
    // 监听附件数据变化
    attachments: {
      handler(newAttachments) {
        this.attachmentFileList = newAttachments.map(item => ({
          uid: item.id || Math.random(),
          name: item.fileName,
          fileSize: item.fileSize,
          url: item.path || item.fileUrl,
          uploadTime: item.uploadTime,
          status: "success"
        }));
      },
      deep: true
    }
  },
  created() {
    this.caseId = this.infoid;

    this.initData();
  },
  methods: {
    getStatusText() {
      const status = this.stageData.status;
      return status === 'completed' ? '已完成' :
             status === 'in_progress' ? '进行中' : '未开始';
    // 根据字典value获取label
    getOrganLabel(organValue) {
      const dictItem = this.organDict.find(item => item.value === organValue);
      return dictItem ? dictItem.label : organValue;
    },
    getAlertType() {
      const status = this.stageData.status;
      return status === 'completed' ? 'success' :
             status === 'in_progress' ? 'warning' : 'info';
    },
    getAlertDescription() {
      const status = this.stageData.status;
      if (status === 'completed') {
        return '器官获取手术已完成，所有器官均已成功获取并保存';
      } else if (status === 'in_progress') {
        return '器官获取手术进行中，请密切关注手术进展';

    // 初始化数据
    initData() {
     const id = null;
      const infoid = this.infoid;

      if (!infoid) {
        this.$message.error("缺少必要的路由参数 infoid");
        this.$router.back();
        return;
      }
      return '等待开始器官获取手术';
    },
    getProcurementStatusTag(status) {
      const map = {
        '已获取': 'success',
        '获取中': 'warning',
        '待获取': 'info'
      };
      return map[status] || 'info';
    },
    getSurvivalTimeType() {
      return this.preservationDetails.survivalTime.includes('小时') ? 'success' : 'danger';
    },
    handleStartProcurement() {
      this.$confirm('确认开始器官获取手术吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('器官获取手术已开始');
      });
    },
    handleRecordProcurement(row) {
      this.$prompt('请输入器官重量(g)', '记录器官获取', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d+$/,
        inputErrorMessage: '请输入有效的重量数字'
      }).then(({ value }) => {
        row.status = '已获取';
        row.procurementTime = new Date().toISOString().replace('T', ' ').substring(0, 19);
        row.weight = parseInt(value);
        row.qualityScore = 4.5;
        row.perfusionStatus = true;

        this.procurementStats.actual++;
        this.procurementStats.successRate = Math.round(
          (this.procurementStats.actual / this.procurementStats.planned) * 100
      this.form.infoid = infoid;
      // this.generateDonorNo();

      if (infoid) {
        this.getDetail(infoid);
      }

      this.getHospitalData();
    },
    // 生成捐献者编号
    // generateDonorNo() {
    //   const timestamp = Date.now().toString();
    //   this.form.donorno = "D" + timestamp.slice(-8);
    //   this.form.caseNo = "CASE" + timestamp.slice(-6);
    //   this.form.inpatientno = "IP" + timestamp.slice(-6);
    // },
    // 获取详情
    async getDetail(infoid) {
      this.loading = true;
      try {
        const response = await witnessList({ infoid });
        if (
          response.code === 200 &&
          response.data &&
          response.data.length > 0
        ) {
          const data = response.data[0];
          if (!data.witnessState || data.witnessState == 1) {
            data.witnessState = "2";
          }

          // 填充表单数据
          Object.assign(this.form, data);

          // 初始化附件
          if (this.form.deathjudgeannex) {
            this.form.attachments = JSON.parse(this.form.deathjudgeannex);
            this.attachments = Array.isArray(this.form.attachments)
              ? [...this.form.attachments]
              : [];
          }

          // 处理捐献器官字段
          if (data.organdonation) {
            const organArray = Array.isArray(data.organdonation)
              ? data.organdonation
              : (data.organdonation || "").split(",").filter(item => item);
            this.selectedOrgans = organArray;
            this.form.organdonationOther = data.organdonationOther || "";
          }

          // 处理器官获取记录
          if (data.serviceDonationwitnessorgans) {
            this.procurementData.serviceDonationwitnessorgans = Array.isArray(
              data.serviceDonationwitnessorgans
            )
              ? data.serviceDonationwitnessorgans
              : [];
          }

          this.$message.success("数据加载成功");
        } else {
          this.$message.warning("未找到对应的器官获取数据");
        }
      } catch (error) {
        console.error("获取器官获取详情失败:", error);
        this.$message.error("获取详情失败");
      } finally {
        this.loading = false;
      }
    },
    // 获取医院数据
    async getHospitalData() {
      try {
        // TODO: 替换为实际的医院列表接口
        // 暂时使用模拟数据
        this.hospitalList = [
          { hospitalNo: "H001", hospitalName: "北京协和医院" },
          { hospitalNo: "H002", hospitalName: "上海华山医院" },
          { hospitalNo: "H003", hospitalName: "广州中山医院" },
          { hospitalNo: "H004", hospitalName: "武汉同济医院" },
          { hospitalNo: "H005", hospitalName: "成都华西医院" }
        ];
      } catch (error) {
        console.error("获取医院数据失败:", error);
        this.$message.error("获取医院数据失败");
      }
    },
    // 器官选择状态变化
    handleOrganSelectionChange(selectedValues) {
      if (!this.procurementData.serviceDonationwitnessorgans) {
        this.procurementData.serviceDonationwitnessorgans = [];
      }

      const currentOrganValues = this.procurementData.serviceDonationwitnessorgans.map(
        item => item.organno
      );

      // 处理互斥逻辑
      this.handleExclusiveSelections(selectedValues);

      // 更新捐献器官字段
      this.form.organdonation = selectedValues.join(",");

      // 新增选择的器官
      selectedValues.forEach(organValue => {
        if (!currentOrganValues.includes(organValue)) {
          this.createOrganRecord(organValue);
        }
      });

      // 移除取消选择的器官
      this.procurementData.serviceDonationwitnessorgans = this.procurementData.serviceDonationwitnessorgans.filter(
        record => {
          if (selectedValues.includes(record.organno)) {
            return true;
          } else {
            if (record.id) {
              this.$confirm(
                "删除器官获取数据后将无法恢复，您确认删除该条记录吗？",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }
              )
                .then(() => {
                  this.procurementData.serviceDonationwitnessorgans = this.procurementData.serviceDonationwitnessorgans.filter(
                    r => r.organno !== record.organno
                  );
                  this.$message.success("删除成功");
                })
                .catch(() => {
                  this.selectedOrgans.push(record.organno);
                });
              return true;
            } else {
              return false;
            }
          }
        }
      );
    },

    // 处理互斥选择
    handleExclusiveSelections(selectedValues) {
      // 如果选择了"双肾"(假设字典值为C64)，自动取消单独的"左肾"(C64L)和"右肾"(C64R)选择
      if (selectedValues.includes("C64")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C64L" && item !== "C64R"
        );
        this.procurementStats.qualityRating = 4.2;
      }
      // 如果选择了"左肾"或"右肾"，取消"双肾"选择
      else if (
        selectedValues.includes("C64L") ||
        selectedValues.includes("C64R")
      ) {
        this.selectedOrgans = selectedValues.filter(item => item !== "C64");
      }

        this.$message.success(`${row.organName}获取记录已保存`);
      // 如果选择了"全肺"(假设字典值为C34)，自动取消单独的"左肺"(C34L)和"右肺"(C34R)选择
      if (selectedValues.includes("C34")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C34L" && item !== "C34R"
        );
      }
      // 如果选择了"左肺"或"右肺"，取消"全肺"选择
      else if (
        selectedValues.includes("C34L") ||
        selectedValues.includes("C34R")
      ) {
        this.selectedOrgans = selectedValues.filter(item => item !== "C34");
      }
    },

    // 创建器官记录
    createOrganRecord(organValue) {
      const organName = this.getOrganLabel(organValue);

      this.procurementData.serviceDonationwitnessorgans.push({
        id: null,
        organname: organName,
        organno: organValue,
        organStartTime: "",
        organgettime: "",
        gainhospitalno: "",
        gainhospitalname: "",
        organgetdoct: "",
        assistant: "",
        procurementNurse: "",
        operatingRoomNurse: "",
        anesthesiologist: "",
        organstate: "1",
        notgetreason: ""
      });
    },
    handleViewOrgan(row) {
      this.$message.info(`查看${row.organName}的详细信息`);

    // 医院选择变化
    handleHospitalChange(row, hospitalNo) {
      const hospital = this.hospitalList.find(
        item => item.hospitalNo === hospitalNo
      );
      if (hospital) {
        row.gainhospitalname = hospital.hospitalName;
      }
    },
    handleCompleteProcurement() {
      this.$confirm('确认完成所有器官获取吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message.success('器官获取阶段已完成');
    // 编辑获取记录
    handleEditProcurement(row) {
      const index = this.procurementData.serviceDonationwitnessorgans.findIndex(
        item => item.organno === row.organno
      );
      if (index !== -1) {
        this.currentRecord = { ...row };
        this.currentEditIndex = index;
        this.editDialogVisible = true;
      }
    },
    // 确认编辑
    handleEditConfirm() {
      if (this.currentEditIndex !== -1) {
        this.procurementData.serviceDonationwitnessorgans[
          this.currentEditIndex
        ] = {
          ...this.currentRecord
        };
        this.$message.success("获取记录更新成功");
        this.editDialogVisible = false;
      }
    },
    // 器官行样式
    getOrganRowClassName({ row }) {
      if (
        !row.organStartTime ||
        !row.organgettime ||
        !row.gainhospitalno ||
        !row.organgetdoct
      ) {
        return "warning-row";
      }
      return "";
    },
    // 保存基本信息
    async handleSave() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          try {
            const saveData = {
              ...this.form,
              deathjudgeannex: JSON.stringify(this.attachments),
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorganList:
                this.procurementData.serviceDonationwitnessorgans || []
            };

            const apiMethod = this.form.id ? witnessedit : witnessadd;
            const response = await apiMethod(saveData);

            if (response.code === 200) {
              this.$message.success("保存成功");
              if (!this.form.id && response.data && response.data.id) {
                this.form.id = response.data.id;
                this.$router.replace({
                  query: { ...this.$route.query, id: this.form.id }
                });
              }
            } else {
              this.$message.error("保存失败：" + (response.msg || "未知错误"));
            }
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败");
          } finally {
            this.saveLoading = false;
          }
        }
      });
    },
    handleGenerateReport() {
      this.$message.info('生成器官获取报告');
    // 保存获取记录
    async handleSaveProcurement() {
      if (!this.form.id) {
        this.$message.warning("请先保存基本信息");
        return;
      }

      this.saveLoading = true;
      try {
        const saveData = {
          ...this.form,
          attachments: this.attachments,
          organdonation: this.selectedOrgans.join(","),
          serviceDonationwitnessorgans:
            this.procurementData.serviceDonationwitnessorgans || []
        };

        const response = await witnessedit(saveData);

        if (response.code === 200) {
          this.$message.success("获取记录保存成功");
        } else {
          this.$message.error(
            "保存获取记录失败：" + (response.msg || "未知错误")
          );
        }
      } catch (error) {
        console.error("保存获取记录失败:", error);
        this.$message.error("保存获取记录失败");
      } finally {
        this.saveLoading = false;
      }
    },
    handleUploadEvidence() {
      this.$message.info('上传手术证据材料');
    // 确认完成获取
    async handleConfirmProcurement() {
      if (this.incompleteRecords > 0) {
        this.$message.warning("请先完善所有获取记录的信息");
        return;
      }

      this.$confirm("确认完成器官获取吗？完成后将无法修改获取信息。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.confirmLoading = true;
          this.form.witnessState = "3";
          this.form.operationendtime =
            this.form.operationendtime ||
            new Date()
              .toISOString()
              .replace("T", " ")
              .substring(0, 19);

          try {
            const saveData = {
              ...this.form,
              attachments: this.attachments,
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorgans:
                this.procurementData.serviceDonationwitnessorgans || []
            };

            const response = await witnessedit(saveData);

            if (response.code === 200) {
              this.$message.success("器官获取已完成");
            } else {
              this.$message.error(
                "确认获取失败：" + (response.msg || "未知错误")
              );
              this.form.witnessState = "2";
              this.form.operationendtime = "";
            }
          } catch (error) {
            console.error("确认获取失败:", error);
            this.$message.error("确认获取失败");
            this.form.witnessState = "2";
            this.form.operationendtime = "";
          } finally {
            this.confirmLoading = false;
          }
        })
        .catch(() => {});
    },
    // 确认获取按钮别名
    handleProcure() {
      this.handleConfirmProcurement();
    },

    // 附件相关方法
    /** 附件变化处理 */
    handleAttachmentChange(fileList) {
      this.attachmentFileList = fileList;
    },

    /** 附件移除处理 */
    handleAttachmentRemove(file) {
      if (file.url) {
        const index = this.attachments.findIndex(
          item => item.path === file.url || item.fileUrl === file.url
        );
        if (index > -1) {
          this.attachments.splice(index, 1);
          this.$message.success("附件删除成功");
        }
      }
    },

    /** 上传成功处理 */
    handleUploadSuccess({ file, fileList, response }) {
      if (response.code === 200) {
        const attachmentObj = {
          fileName: file.name,
          path: response.fileUrl || file.url,
          fileUrl: response.fileUrl || file.url,
          fileType: this.getFileExtension(file.name),
          fileSize: file.size,
          uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
        };

        if (!Array.isArray(this.attachments)) {
          this.attachments = [];
        }

        this.attachments.push(attachmentObj);
        this.attachmentFileList = fileList;
        this.$message.success("文件上传成功");
      }
    },

    /** 上传错误处理 */
    handleUploadError({ file, fileList, error }) {
      console.error("附件上传失败:", error);
      this.$message.error("文件上传失败，请重试");
    },

    /** 手动删除附件 */
    handleRemoveAttachment(index) {
      this.attachments.splice(index, 1);
      this.attachmentFileList.splice(index, 1);
      this.$message.success("附件删除成功");
    },

    /** 文件预览 */
    handlePreview(file) {
      this.currentPreviewFile = {
        fileName: file.fileName,
        fileUrl: file.path || file.fileUrl,
        fileType: this.getFileType(file.fileName)
      };
      this.filePreviewTitle = file.fileName;
      this.filePreviewVisible = true;
    },

    /** 文件下载 */
    handleDownload(file) {
      const fileUrl = file.path || file.fileUrl;
      const fileName = file.fileName;

      if (fileUrl) {
        const link = document.createElement("a");
        link.href = fileUrl;
        link.download = fileName;
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$message.success("开始下载文件");
      } else {
        this.$message.warning("文件路径不存在，无法下载");
      }
    },

    /** 获取文件类型 */
    getFileType(fileName) {
      if (!fileName) return "other";
      const extension = fileName
        .split(".")
        .pop()
        .toLowerCase();
      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
      const pdfTypes = ["pdf"];
      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
      if (imageTypes.includes(extension)) return "image";
      if (pdfTypes.includes(extension)) return "pdf";
      if (officeTypes.includes(extension)) return "office";
      return "other";
    },

    /** 获取文件图标颜色 */
    getFileIconColor(fileName) {
      const type = this.getFileType(fileName);
      const colorMap = {
        image: "#67C23A",
        pdf: "#F56C6C",
        office: "#409EFF",
        other: "#909399"
      };
      return colorMap[type] || "#909399";
    },

    /** 获取文件标签类型 */
    getFileTagType(fileName) {
      const type = this.getFileType(fileName);
      const typeMap = {
        image: "success",
        pdf: "danger",
        office: "primary",
        other: "info"
      };
      return typeMap[type] || "info";
    },

    /** 获取文件类型文本 */
    getFileTypeText(fileName) {
      const type = this.getFileType(fileName);
      const textMap = {
        image: "图片",
        pdf: "PDF",
        office: "文档",
        other: "其他"
      };
      return textMap[type] || "未知";
    },

    /** 检查是否可预览 */
    isPreviewable(fileName) {
      const type = this.getFileType(fileName);
      return ["image", "pdf"].includes(type);
    },

    /** 获取文件扩展名 */
    getFileExtension(filename) {
      return filename
        .split(".")
        .pop()
        .toLowerCase();
    },

    /** 格式化文件大小 */
    formatFileSize(bytes) {
      if (!bytes || bytes === 0) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    },

    /** 日期时间格式化 */
    formatDateTime(dateTime) {
      if (!dateTime) return "";
      try {
        const date = new Date(dateTime);
        if (isNaN(date.getTime())) return dateTime;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        return dateTime;
      }
    }
  }
};
</script>

<style scoped>
.procurement-stats, .preservation-info {
  padding: 10px 0;
}

.stat-item, .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item .label, .info-item .label {
  color: #606266;
  font-weight: 500;
  min-width: 100px;
}

.stat-item .value {
  font-weight: 600;
  color: #409EFF;
}

.surgery-record {
.organ-procurement-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.record-images {
  margin-top: 10px;
.detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.image-header {
.procurement-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.attachment-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  padding: 20px;
  background: #fafafa;
}

.attachment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.attachment-title {
  font-weight: 600;
  color: #303133;
}

.quality-report {
  padding: 10px 0;
.attachment-tip {
  font-size: 12px;
  color: #909399;
  margin-left: auto;
}

.attachment-list {
  margin-top: 16px;
}

.list-title {
  font-weight: bold;
  margin-bottom: 12px;
  color: #303133;
  font-size: 14px;
}

.file-name {
  font-size: 13px;
  margin-left: 8px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

/* 统计信息样式 */
.procurement-stats {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #a6b2e7 0%, #8a66ad 100%);
  border-radius: 8px;
  color: white;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.9);
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

/* 空状态样式 */
.empty-procurement {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  background: #fafafa;
  border-radius: 4px;
  margin: 20px 0;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin-top: 20px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  margin: 0 10px;
  min-width: 120px;
}

/* 表格行样式 */
:deep(.warning-row) {
  background-color: #fff7e6 !important;
}

:deep(.warning-row:hover) {
  background-color: #ffecc2 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .organ-procurement-detail {
    padding: 10px;
  }

  .procurement-stats .el-col {
    margin-bottom: 10px;
  }
}
</style>