各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

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

@@ -1,673 +1,254 @@
<template>
  <div class="organ-utilization-detail">
    <el-form :model="form" ref="form" :rules="rules" label-width="120px">
      <!-- 基本信息 -->
      <el-card class="detail-card">
        <div slot="header" class="clearfix">
          <span class="detail-title">器官利用基本信息</span>
        </div>
  <div class="organ-procurement-detail">
    <!-- <case-basic-info :case-id="caseId" :show-attachment="true":column="3" /> -->

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="负责人" prop="responsibleusername">
              <el-input
                v-model="form.responsibleusername"
                placeholder="请输入负责人姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="协调员一" prop="coordinatedusernameo">
              <el-input
                v-model="form.coordinatedusernameo"
                placeholder="请输入协调员一姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="协调员二" prop="coordinatedusernamet">
              <el-input
                v-model="form.coordinatedusernamet"
                placeholder="请输入协调员二姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="完成时间" prop="completetime">
              <el-date-picker
                v-model="form.completetime"
                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="12">
            <el-form-item label="登记人" prop="createBy">
              <el-input v-model="form.createBy" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记时间" prop="createTime">
              <el-date-picker
                v-model="form.createTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-card>
      <el-card class="detail-card">
        <div slot="header" class="clearfix">
          <span class="detail-title">遗体捐献信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item align="left" label="遗体接收" prop="isbodydonation">
              <el-radio-group v-model="form.isbodydonation">
                <el-radio
                  v-for="dict in dict.type.sys_0_1 || []"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item align="left" label="接收家属" prop="relationname">
              <el-input
                v-model="form.relationname"
                placeholder="请输入接收家属"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="与捐献者关系" prop="signfamilyrelations">
              <el-select
                v-model="form.signfamilyrelations"
                placeholder="请选择与捐献者关系"
              >
                <el-option
                  v-for="dict in dict.type.sys_FamilyRelation || []"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <!-- 器官利用记录部分 - 整合受者详情 -->
    <el-card class="utilization-card">
    <!-- 基本信息 -->
    <el-card class="detail-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官利用记录</span>
        <span class="detail-title">器官获取基本信息</span>
      </div>

      <el-descriptions title="手术信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="手术医生">{{ form.operationdoctor || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手术开始时间">{{ form.operationbegtime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手术结束时间">{{ form.operationendtime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="腹主动脉插管时间">{{ form.abdominalaortacannulatime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="腹主动脉灌注时间">{{ form.abdominalaortaperfusiontime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="门静脉插管时间">{{ form.portalveincannulatime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="门静脉灌注时间">{{ form.portalveinperfusiontime || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="协调员信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="进手术室时间">{{ form.coordinatorInOperating || '-' }}</el-descriptions-item>
        <el-descriptions-item label="出手术室时间">{{ form.coordinatorOutOperating || '-' }}</el-descriptions-item>
        <el-descriptions-item label="是否默哀缅怀">{{ form.isspendremember === 1 ? '是' : form.isspendremember === 0 ? '否' : '-' }}</el-descriptions-item>
        <el-descriptions-item label="恢复遗体仪容">{{ form.isrestoreremains === 1 ? '是' : form.isrestoreremains === 0 ? '否' : '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="负责人信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="负责人姓名">{{ form.responsibleusername || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协调员一">{{ form.coordinatedusernameo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协调员二">{{ form.coordinatedusernamet || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="获取机构信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="获取机构名称">{{ form.gainhospitalname || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 器官获取记录部分 -->
    <el-card class="procurement-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取记录</span>
        <div style="float: right;">
          <dict-tag
            :options="dict.type.utilize_statue"
            :value="form.completeState"
            :options="dict.type.Obtain_status"
            :value="form.witnessState"
          />
        </div>
      </div>

      <el-form
        ref="utilizationForm"
        :rules="utilizationRules"
        :model="utilizationData"
        label-position="right"
      >
        <el-row>
          <el-col>
            <el-form-item label-width="100px" label="移植器官">
              <el-checkbox-group
                v-model="selectedOrgans"
                @change="handleOrganSelectionChange"
              >
                <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-descriptions title="捐献器官" :column="1" border size="small" style="margin-bottom: 16px;">
        <el-descriptions-item label="捐献器官">
          <template v-if="selectedOrgans && selectedOrgans.length">
            <span v-for="(v, i) in selectedOrgans" :key="v">
              {{ getOrganLabel(v) }}<span v-if="i < selectedOrgans.length - 1">、</span>
            </span>
          </template>
          <template v-else>-</template>
        </el-descriptions-item>
      </el-descriptions>

        <el-row>
          <el-col>
            <el-form-item>
              <el-table
                :data="displayOrgans"
                v-loading="loading"
                border
                style="width: 100%"
                :row-class-name="getOrganRowClassName"
                :expand-row-keys="expandedRows"
                @expand-change="handleExpandChange"
                row-key="organno"
              >
                <el-table-column type="expand" width="60">
                  <template slot-scope="scope">
                    <!-- 展开行内容 - 受者详细信息 -->
                    <div class="recipient-detail-expand">
                      <div class="recipient-header">
                        <span class="recipient-title">受者详细信息</span>
                        <el-tag
                          v-if="scope.row.transplantstate === '1'"
                          type="success"
                          size="small"
                        >
                          已移植
                        </el-tag>
                        <el-tag
                          v-else-if="scope.row.transplantstate === '0'"
                          type="warning"
                          size="small"
                        >
                          未移植
                        </el-tag>
                        <el-tag v-else type="info" size="small">
                          移植中
                        </el-tag>
                      </div>
      <el-table :data="displayOrgans" v-loading="loading" border style="width: 100%">
        <el-table-column label="器官名称" align="center" prop="organname" />
        <el-table-column label="获取开始时间" align="center" prop="organStartTime" />
        <el-table-column label="器官离体时间" align="center" prop="organgettime" />
        <el-table-column label="获取医院" align="center" prop="gainhospitalname" show-overflow-tooltip />
        <el-table-column label="获取医师" align="center" prop="organgetdoct" />
        <el-table-column label="说明" align="center" prop="notgetreason" min-width="200" show-overflow-tooltip />
      </el-table>

                      <el-form
                        :model="scope.row"
                        label-width="140px"
                        class="recipient-form"
                      >
                        <!-- 基本信息部分 -->
                        <div class="form-section">
                          <h4 class="section-title">基本信息</h4>
                          <el-row :gutter="20">
                            <el-col :span="8">
                              <el-form-item label="受者姓名">
                                <el-input
                                  v-model="scope.row.name"
                                  placeholder="请输入受者姓名"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="出生日期">
                                <el-date-picker
                                  v-model="scope.row.birthday"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择出生日期"
                                  style="width: 100%"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="性别">
                                <el-select
                                  v-model="scope.row.sex"
                                  placeholder="请选择性别"
                                  style="width: 100%"
                                >
                                  <el-option label="男" :value="0" />
                                  <el-option label="女" :value="1" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                          </el-row>

                          <el-row :gutter="20">
                            <el-col :span="8">
                              <el-form-item label="年龄">
                                <el-input
                                  v-model="scope.row.age"
                                  placeholder="年龄"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="证件类型">
                                <el-select
                                  v-model="scope.row.idcardtype"
                                  placeholder="请选择证件类型"
                                  style="width: 100%"
                                >
                                  <el-option label="身份证" :value="1" />
                                  <el-option label="护照" :value="2" />
                                  <el-option label="军官证" :value="3" />
                                  <el-option label="其他" :value="4" />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item label="证件号码">
                                <el-input
                                  v-model="scope.row.idcardno"
                                  placeholder="证件号码"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>

                        <!-- 联系信息部分 -->
                        <div class="form-section">
                          <h4 class="section-title">联系信息</h4>
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="移植中心名称">
                                <el-input
                                  v-model="scope.row.hospitalname"
                                  placeholder="请输入移植中心名称"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="联系电话">
                                <el-input
                                  v-model="scope.row.phone"
                                  placeholder="联系电话"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>

                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-form-item label="现住地址">
                                <el-input
                                  type="textarea"
                                  :rows="2"
                                  v-model="scope.row.residenceaddress"
                                  placeholder="请输入详细地址"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>

                        <!-- 移植信息部分 -->
                        <div
                          class="form-section"
                          v-if="scope.row.transplantstate === '1'"
                        >
                          <h4 class="section-title">移植信息</h4>
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="移植时间">
                                <el-date-picker
                                  v-model="scope.row.transplanttime"
                                  type="datetime"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  placeholder="选择移植日期"
                                  style="width: 100%"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="移植医生">
                                <el-input
                                  v-model="scope.row.transplantdoct"
                                  placeholder="请输入移植医生"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>

                        <!-- 未移植原因 -->
                        <div
                          class="form-section"
                          v-if="scope.row.transplantstate === '0'"
                        >
                          <h4 class="section-title">未移植信息</h4>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-form-item label="未移植原因">
                                <el-input
                                  type="textarea"
                                  :rows="3"
                                  v-model="scope.row.abandonreason"
                                  placeholder="请输入未移植原因"
                                />
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-form>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="器官名称"
                  align="center"
                  prop="organname"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.organname"
                      placeholder="器官名称"
                      :disabled="true"
                    />
                  </template>
                </el-table-column>

                <!-- <el-table-column label="系统编号" align="center" prop="caseNo">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.caseNo"
                      placeholder="系统编号"
                    />
                  </template>
                </el-table-column> -->

                <el-table-column
                  label="移植医院"
                  align="center"
                  width="260"
                  prop="hospitalno"
                >
                  <template slot-scope="scope">
                    <el-autocomplete
                      v-model="scope.row.hospitalname"
                      :fetch-suggestions="queryHospitalSearch"
                      placeholder="请选择或输入移植医院"
                      style="width: 100%"
                      clearable
                    ></el-autocomplete>
                  </template>
                </el-table-column>
                <el-table-column
                  label="移植状态"
                  align="center"
                  prop="transplantstate"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.transplantstate"
                      placeholder="请选择移植状态"
                      style="width: 100%"
                      @change="handleTransplantStatusChange(scope.row, $event)"
                    >
                      <el-option
                        v-for="dict in transplantStatusList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>

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

                <el-table-column
                  label="移植医生"
                  align="center"
                  prop="transplantdoct"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.transplantdoct"
                      placeholder="医师姓名"
                    />
                  </template>
                </el-table-column>

                <el-table-column label="受者姓名" align="center" prop="name">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="受者姓名" />
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 统计信息 -->

        <div
          v-if="
            !utilizationData.serviceDonatecomporganList ||
              utilizationData.serviceDonatecomporganList.length == 0
          "
          class="empty-utilization"
        >
          <el-empty description="暂无利用记录" :image-size="80">
            <span>请先选择要利用的器官</span>
          </el-empty>
        </div>
      </el-form>
      <div v-if="!displayOrgans.length" class="empty-procurement">
        <el-empty description="暂无获取记录" :image-size="80" />
      </div>
    </el-card>

    <!-- 附件管理部分 -->
    <!-- 附件管理部分 - 分类Tab展示 -->
    <el-card class="attachment-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">相关附件</span>
      </div>

      <!-- 上传区域（无分类选择，由Tab控制） -->
      <div class="upload-wrapper">
        <UploadAttachment
          ref="uploadAttachment"
          :file-list="attachmentFileList"
          :limit="attachmentLimit"
          :accept="attachmentAccept"
          :multiple="true"
          @change="handleAttachmentChange"
          @upload-success="handleUploadSuccess"
          @upload-error="handleUploadError"
          @remove="handleAttachmentRemove"
        />
        <div style="font-size:12px; color:#909399; margin-top:4px;">
          当前上传分类：<el-tag size="small" type="info">{{
            activeTab === "未分类" ? "未分类" : activeTab
          }}</el-tag>
          （切换 Tab 可改变上传分类）
        </div>
      </div>

      <!-- 附件列表 - 分类Tab展示，支持修改分类 -->
      <div class="attachment-list" v-if="attachments && attachments.length > 0">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane
            v-for="category in categories"
            :key="category"
            :label="category + '(' + getCategoryCount(category) + ')'"
            :name="category"
      <!-- 附件列表 - 分类Tab展示 -->
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane
          v-for="category in categories"
          :key="category"
          :label="category + '(' + getCategoryCount(category) + ')'"
          :name="category"
        >
          <el-table
            :data="getCategoryFiles(category)"
            style="width: 100%"
            size="small"
            border
          >
            <el-table
              :data="getCategoryFiles(category)"
              style="width: 100%"
              size="small"
              border
            >
              <el-table-column label="文件名" min-width="180">
                <template #default="scope">
                  <i
                    class="el-icon-document"
                    style="margin-right: 8px; color: #409EFF;"
                  ></i>
                  <span class="file-name">{{ scope.row.fileName }}</span>
                </template>
              </el-table-column>
              <!-- 可编辑分类下拉 -->
              <el-table-column label="分类" width="150">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.fileType"
                    size="small"
                    @change="updateAttachmentCategory(scope.row, $event)"
                    placeholder="选择分类"
                  >
                    <el-option label="原表拍照" value="原表拍照" />
                    <el-option label="接受确认书" value="接受确认书" />
                    <el-option label="弃用说明" value="弃用说明" />
                    <el-option label="捐献证书照片" value="捐献证书照片" />
                    <el-option label="未分类" value="" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="文件类型" width="100">
                <template #default="scope">
                  <el-tag size="small">{{
                    getFileTypeText(scope.row.fileName)
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="上传时间" width="160">
                <template #default="scope">
                  <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="文件大小" width="120">
                <template #default="scope">
                  <span>{{ formatFileSize(scope.row.fileSize) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handlePreview(scope.row)"
                    >预览</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleRemoveAttachmentByFile(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 无附件时显示 -->
      <div v-else style="text-align:center; padding:20px; color:#909399;">
        暂无附件，请上传
      </div>
            <el-table-column label="文件名" min-width="180">
              <template #default="scope">
                <i
                  class="el-icon-document"
                  style="margin-right: 8px; color: #409EFF;"
                ></i>
                <span class="file-name">{{ scope.row.fileName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类" width="150">
              <template #default="scope">
                <span>{{ scope.row.fileType || '未分类' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件类型" width="100">
              <template #default="scope">
                <el-tag size="small">{{
                  getFileTypeText(scope.row.fileName)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" width="160">
              <template #default="scope">
                <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件大小" width="100">
              <template #default="scope">
                <span>{{ formatFileSize(scope.row.fileSize) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handlePreview(scope.row)"
                  >预览</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div
            v-if="getCategoryFiles(category).length === 0"
            style="text-align:center; padding:20px; color:#909399;"
          >
            暂无附件
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div style="text-align: center; margin: 30px 0;">
      <el-button type="primary" @click="handleSave" :loading="saveLoading">
        保存
      </el-button>
      <el-button
        type="success"
        @click="handleComplete"
        :loading="confirmLoading"
      >
        完成利用
      </el-button>
    </div>
    <!-- 文件预览对话框 -->
    <!-- 文件预览弹窗 -->
    <FilePreviewDialog
      :visible="filePreviewVisible"
      :visible="previewVisible"
      :file="currentPreviewFile"
      @close="filePreviewVisible = false"
      @download="handleDownloadAttachment"
      @close="previewVisible = false"
      @download="handleDownload"
    />
  </div>
</template>

<script>
import {
  completionList,
  completionadd,
  completionedit
} from "@/api/businessApi";
import UploadAttachment from "@/components/UploadAttachment"; // 新增导入
import FilePreviewDialog from "@/components/FilePreviewDialog"; // 新增导入
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
import FilePreviewDialog from "@/components/FilePreviewDialog";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import dayjs from "dayjs"; // 新增导入，用于时间处理
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import readonlyDescriptionsMixin from "./readonlyDescriptionsMixin";

export default {
  name: "OrganUtilizationDetail",
  name: "OrganProcurementDetail",
  components: {
    UploadAttachment,
    FilePreviewDialog,
    CaseBasicInfo
  },
    props: {
  mixins: [readonlyDescriptionsMixin],
  dicts: [
    "sys_BloodType",
    "Geta_hospital",
    "sys_DonationCategory",
    "sys_Organ",
    "Obtain_status"
  ],
  props: {
    infoid: {
      type: String,
      default: true
    }
  },
  dicts: [
    "Geta_hospital",
    "sys_BloodType",
    "sys_Organ",
    "sys_FamilyRelation",
    "sys_0_1",
    "utilize_statue"
  ],
  data() {
    return {
      caseId: null,
      activeTab: "原表拍照", // 当前激活的附件分类Tab
      presetCategories: ["原表拍照", "接受确认书", "弃用说明", "捐献证书照片"], // 预设分类
      // 表单数据 - 根据接口参数调整
      // 表单数据
      form: {
        id: undefined,
        infoid: undefined,
        name: "",
        inpatientno: "",
        completeState: "2",
        witnessState: "2",
        caseNo: "",
        donorno: "",
        treatmenthospitalname: "",
        treatmenthospitalno: "",
        sex: "",
        name: "",
        age: "",
        bloodtype: "",
        idcardno: "",
        diagnosisname: "",
        completetime: "",
        coordinatorName: "",
        gainhospitalno: "",
        gainhospitalname: "",
        deathtime: "",
        deathreason: "",
        deathjudgedocto: "",
        deathjudgedoctt: "",
        deathjudgeannex: "",
        operationbegtime: "",
        operationendtime: "",
        operationdoctor: "",
        isspendremember: 1,
        isrestoreremains: 1,
        rememberannex: "",
        responsibleuserid: "",
        responsibleusername: "",
        coordinateduserido: "",
        coordinatedusernameo: "",
        coordinateduseridt: "",
        coordinatedusernamet: "",
        assessannex: "",
        donateorgan: "",
        isbodydonation: "1",
        receivingunitname: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
        abdominalaortacannulatime: "",
        abdominalaortaperfusiontime: "",
        portalveincannulatime: "",
        portalveinperfusiontime: "",
        pulmonaryarterycannulatime: "",
        pulmonaryarteryperfusiontime: "",
        aortacannulatime: "",
        aortaperfusiontime: "",
        organdonation: "",
        organdonationOther: "",
        donationcategory: "",
        coordinatorInOperating: "",
        coordinatorOutOperating: "",
        coordinatorSign: "",
        coordinatorSignTime: "",
        attachments: []
      },
      activeTab: "原表拍照", // 当前激活的附件分类Tab
      presetCategories: [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频"
      ], // 预设分类
      organExpansionMap: {
        C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] },
        C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] }
      },
      // 表单验证规则
      rules: {
@@ -677,12 +258,15 @@
        diagnosisname: [
          { required: true, message: "疾病诊断不能为空", trigger: "blur" }
        ],
        donorno: [
          { required: true, message: "捐献者编号不能为空", trigger: "blur" }
        donationcategory: [
          { required: true, message: "捐献类别不能为空", trigger: "change" }
        ],
        operationdoctor: [
          { required: true, message: "手术医生不能为空", trigger: "blur" }
        ]
      },
      // 利用记录验证规则
      utilizationRules: {},
      // 获取记录验证规则
      procurementRules: {},
      // 保存加载状态
      saveLoading: false,
      confirmLoading: false,
@@ -692,44 +276,28 @@
      selectedOrgans: [],
      // 医院列表
      hospitalList: [],
      // 移植状态列表
      transplantStatusList: [
        { value: "1", label: "已移植" },
        { value: "0", label: "未移植" },
        { value: "2", label: "移植中" },
        { value: "3", label: "库存" }
      ],
      organExpansionMap: {
        C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] },
        C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] }
      },
      // 利用记录数据
      utilizationData: {
        serviceDonatecomporganList: []
      },
      // 随访记录数据
      followupData: {
        records: []
      // 获取记录数据
      procurementData: {
        serviceDonationwitnessorgans: []
      },
      // 附件数据
      attachments: [],
      // 展开的行keys
      expandedRows: [],
      // 上传相关
      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      },
      uploadDialogVisible: false,
      uploadLoading: false,
      tempFileList: [],
      currentUploadCategory: "",
      // 编辑对话框
      editDialogVisible: false,
      currentRecord: {},
      currentEditIndex: -1,
      // 附件相关配置 - 新增
      attachmentFileList: [],
      attachmentLimit: 10,
      attachmentAccept:
        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",

      // 文件预览相关 - 新增
      filePreviewVisible: false,
      currentPreviewFile: null,
      currentFollowup: {},
      isEditingFollowup: false
      // 文件预览相关
      previewVisible: false,
      currentPreviewFile: null
    };
  },
  computed: {
@@ -737,25 +305,21 @@
    currentUser() {
      return JSON.parse(sessionStorage.getItem("user") || "{}");
    },
    displayOrgans() {
      return (this.procurementData.serviceDonationwitnessorgans || []).filter(
        item => item.delFlag !== 1
      );
    },
    categories() {
     // 始终返回所有预设分类 + 未分类，即使没有数据也显示
    const allCategories = ['原表拍照', '接受确认书', '弃用说明', '捐献证书照片', '未分类'];
    return allCategories;
    },
    // 已移植数量
    transplantedCount() {
      if (!this.utilizationData.serviceDonatecomporganList) return 0;
      return this.utilizationData.serviceDonatecomporganList.filter(
        record => record.transplantstate === "1"
      ).length;
    },
    // 唯一医院数量
    uniqueHospitals() {
      if (!this.utilizationData.serviceDonatecomporganList) return 0;
      const hospitals = this.utilizationData.serviceDonatecomporganList
        .map(record => record.hospitalno)
        .filter(Boolean);
      return new Set(hospitals).size;
      // 始终返回所有预设分类 + 未分类，无论是否有数据
      return [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频",
        "未分类"
      ];
    },
    organReverseMap() {
      const map = {};
@@ -767,11 +331,24 @@
      }
      return map;
    },
    // 过滤掉 delFlag=1 的记录（用于表格展示）
    displayOrgans() {
      return (this.utilizationData.serviceDonatecomporganList || []).filter(
        item => item.delFlag !== 1
      );
    // 不完整的记录数量
    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() {
@@ -779,47 +356,110 @@
    }
  },
  created() {
    this.caseId = this.infoid;

    this.initData();
  },
  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
    }
  },
  methods: {
    // 根据字典value获取label
    getOrganLabel(organValue) {
      const dictItem = this.organDict.find(item => item.value === organValue);
      return dictItem ? dictItem.label : organValue;
    },

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

      if (!this.caseId) {
      if (!infoid) {
        this.$message.error("缺少必要的路由参数 infoid");
        this.$router.back();
        return;
      }

      this.form.infoid = this.caseId;
      this.form.createBy =
        this.currentUser.username || this.currentUser.name || "当前用户";
      this.form.createTime = new Date()
        .toISOString()
        .replace("T", " ")
        .substring(0, 19);
      this.form.infoid = infoid;
      // this.generateDonorNo();

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

      this.getHospitalData();
    },
    getOrganNameByNo(organno) {
      // 检查是否在映射的子项中
      for (const key in this.organExpansionMap) {
        const { subItems, subNames } = this.organExpansionMap[key];
        const idx = subItems.indexOf(organno);
        if (idx !== -1) {
          return subNames[idx];
        }
      }
      // 否则从字典中获取
      return this.getOrganLabel(organno);
    },
    // 获取详情
    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) {
            const parsed = JSON.parse(this.form.deathjudgeannex);
            this.attachments = parsed.map(item => ({
              ...item,
              fileType: item.fileType || "" // 默认空字符串表示未分类
            }));
            this.form.attachments = this.attachments;
          } else {
            this.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("数据加载成功");
          this.syncOrgansFromSelection();
        } else {
          this.$message.warning("未找到对应的器官获取数据");
        }
      } catch (error) {
        console.error("获取器官获取详情失败:", error);
        this.$message.error("获取详情失败");
      } finally {
        this.loading = false;
      }
    },
    syncOrgansFromSelection() {
      const records = this.utilizationData.serviceDonatecomporganList || [];
      const records = this.procurementData.serviceDonationwitnessorgans || [];
      const targetNos = [];
      this.selectedOrgans.forEach(val => {
        if (this.organExpansionMap[val]) {
@@ -829,125 +469,77 @@
        }
      });

      // 新增或恢复
      targetNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
          if (existing.delFlag === 1) existing.delFlag = 0;
          if (existing.delFlag === 1) {
            existing.delFlag = 0; // 恢复显示
          }
        } else {
          // 使用创建方法，自动包含 delFlag:0
          this.createOrganRecord(no);
          records.push({
            id: null,
            organname: this.getOrganNameByNo(no),
            organno: no,
            organStartTime: "",
            organgettime: "",
            gainhospitalno: "",
            gainhospitalname: "",
            organgetdoct: "",
            assistant: "",
            procurementNurse: "",
            operatingRoomNurse: "",
            anesthesiologist: "",
            organstate: "1",
            notgetreason: "",
            delFlag: 0
          });
        }
      });

      // 强制所有记录 delFlag=0（加载时应该全部有效）
      records.forEach(r => (r.delFlag = 0));
      this.form.donateorgan = this.selectedOrgans.join(",");
      // （可选）如果加载时后端返回了 delFlag=1 的记录，但实际应该显示，强制重置
      records.forEach(r => {
        if (r.delFlag === 1) r.delFlag = 0;
      });

      this.form.organdonation = this.selectedOrgans.join(",");
    },
    // 获取详情
    async getDetail() {
      this.loading = true;
    // 获取医院数据
    async getHospitalData() {
      try {
        const response = await completionList({ infoid: this.caseId });
        if (
          response.code === 200 &&
          response.data &&
          response.data.length > 0
        ) {
          const data = response.data[0];
          if (!data.completeState || data.completeState == 1) {
            data.completeState = "2";
          }
          this.form = data;
          // 填充表单数据
          // Object.assign(this.form, data);
          this.form.signfamilyrelations = this.form.signfamilyrelations || "";
          // 处理捐献器官字段
          if (data.donateorgan) {
            const organArray = Array.isArray(data.donateorgan)
              ? data.donateorgan
              : (data.donateorgan || "").split(",").filter(item => item);
            this.selectedOrgans = organArray;
          }

          // 处理器官利用记录
          if (data.serviceDonatecomporganList) {
            this.utilizationData.serviceDonatecomporganList = Array.isArray(
              data.serviceDonatecomporganList
            )
              ? data.serviceDonatecomporganList.map(record => ({
                  ...record,
                  transplanttime: record.transplanttime || "",
                  transplantstate: record.transplantstate
                    ? record.transplantstate.toString()
                    : "1"
                }))
              : [];
          }
          console.log(this.utilizationData.serviceDonatecomporganList);

          // 初始化附件
          // 改为（确保每个附件都有 fileType 字段）
          if (this.form.assessannex) {
            const parsed = JSON.parse(this.form.assessannex);
            this.attachments = parsed.map(item => ({
              ...item,
              fileType: item.fileType || "" // 默认空字符串表示未分类
            }));
            this.form.attachments = this.attachments;
            // 同步 attachmentFileList
            this.attachmentFileList = this.attachments.map(item => ({
              uid: item.id || Math.random(),
              name: item.fileName,
              url: item.path || item.fileUrl,
              fileSize: item.fileSize,
              uploadTime: item.uploadTime,
              status: "success",
              raw: item
            }));
          } else {
            this.attachments = [];
            this.attachmentFileList = [];
          }

          this.$message.success("数据加载成功");
          this.syncOrgansFromSelection();
        } else {
          this.$message.warning("未找到对应的器官利用数据");
        }
        // 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("获取详情失败");
      } finally {
        this.loading = false;
        console.error("获取医院数据失败:", error);
        this.$message.error("获取医院数据失败");
      }
    },
    // 移植医院模糊搜索
    queryHospitalSearch(queryString, cb) {
      const hospitals = this.dict.type.Geta_hospital || [];
      const results = queryString
        ? hospitals.filter(item =>
            item.label.toLowerCase().includes(queryString.toLowerCase())
          )
        : hospitals;

    // 获取医院数据
    // async getHospitalData() {
    //   try {
    //     // TODO: 替换为实际的医院列表接口
    //     // 暂时使用模拟数据
    //     this.hospitalList = [
    //       { hospitalNo: "H001", hospitalName: "北京协和医院" },
    //       { hospitalNo: "H002", hospitalName: "上海华山医院" },
    //       { hospitalNo: "H003", hospitalName: "上海瑞金医院" },
    //       { hospitalNo: "H004", hospitalName: "广州中山医院" },
    //       { hospitalNo: "H005", hospitalName: "武汉同济医院" },
    //       { hospitalNo: "H006", hospitalName: "成都华西医院" }
    //     ];
    //   } catch (error) {
    //     console.error("获取医院数据失败:", error);
    //     this.$message.error("获取医院数据失败");
    //   }
    // },

      // el-autocomplete 需要 value 字段
      cb(results.map(item => ({ value: item.label })));
    },
    // 器官选择状态变化
    async handleOrganSelectionChange(selectedValues) {
      // 1. 处理互斥逻辑（修改 this.selectedOrgans）
      this.handleExclusiveSelections(selectedValues);

      const finalSelected = this.selectedOrgans;
      const records = this.utilizationData.serviceDonatecomporganList || [];
      const records = this.procurementData.serviceDonationwitnessorgans || [];

      // 2. 构建目标器官编号列表（展开组合器官）
      const targetOrganNos = [];
@@ -959,7 +551,7 @@
        }
      });

      // 3. 新增或恢复记录（无需弹窗）
      // 3. 新增或恢复目标器官记录（无弹窗）
      targetOrganNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
@@ -967,11 +559,27 @@
            existing.delFlag = 0; // 恢复显示
          }
        } else {
          this.createOrganRecord(no); // 新增记录（包含 delFlag:0）
          records.push({
            id: null,
            organname: this.getOrganNameByNo(no),
            organno: no,
            organStartTime: "",
            organgettime: "",
            gainhospitalno: "",
            gainhospitalname: "",
            organgetdoct: "",
            assistant: "",
            procurementNurse: "",
            operatingRoomNurse: "",
            anesthesiologist: "",
            organstate: "1",
            notgetreason: "",
            delFlag: 0
          });
        }
      });

      // 4. 找出需要取消的记录（不在目标集合中的）
      // 4. 找出需要取消的记录（不在目标集合中）
      const toRemove = records.filter(r => !targetOrganNos.includes(r.organno));
      const toRemoveSaved = toRemove.filter(r => r.id); // 已保存，需确认
      const toRemoveUnsaved = toRemove.filter(r => !r.id); // 未保存，直接移除
@@ -987,7 +595,7 @@
        const organNames = toRemoveSaved.map(r => r.organname).join("、");
        try {
          await this.$confirm(
            `您确定要取消以下已保存的器官利用记录吗？\n${organNames}\n取消后，这些记录将从列表中移除（数据仍保留，可恢复）。`,
            `您确定要取消以下已保存的器官获取记录吗？\n${organNames}\n取消后，这些记录将从列表中移除（数据仍保留，可恢复）。`,
            "提示",
            {
              confirmButtonText: "确定移除",
@@ -1001,7 +609,6 @@
          });
        } catch (error) {
          // 用户取消：恢复选中状态
          // 将取消的器官重新加入 this.selectedOrgans
          const parentToRestore = new Set();
          toRemoveSaved.forEach(r => {
            const parent = this.organReverseMap[r.organno];
@@ -1016,56 +623,37 @@
              this.selectedOrgans.push(val);
            }
          });
          // 提示用户操作已取消
          this.$message.info("已取消删除操作");
          // 更新表单字段（保持一致性）
          this.form.donateorgan = this.selectedOrgans.join(",");
          // 注意：此时 records 中已新增了目标器官，并且之前的记录未被标记删除，状态一致。
          // 但是，我们还需要移除之前新增但用户可能不想保留的记录？不会，因为新增的是目标器官，用户是想保留的。
          // 因此直接返回即可。
          return;
          this.form.organdonation = this.selectedOrgans.join(",");
          return; // 退出方法，避免继续执行
        }
      }

      // 5. 更新表单字段
      this.form.donateorgan = this.selectedOrgans.join(",");
      this.form.organdonation = this.selectedOrgans.join(",");
    },
    // 移植医院模糊搜索
    queryHospitalSearch(queryString, cb) {
      const hospitals = this.dict.type.Geta_hospital || [];
      const results = queryString
        ? hospitals.filter(item =>
            item.label.toLowerCase().includes(queryString.toLowerCase())
          )
        : hospitals;

      // el-autocomplete 需要 value 字段
      cb(results.map(item => ({ value: item.label })));
    },
    // 处理互斥选择
    handleExclusiveSelections(selectedValues) {
      // 如果选择了"双肾"(假设字典值为C64)，自动取消单独的"左肾"(C64L)和"右肾"(C64R)选择
      // 双肾与左右肾互斥
      if (selectedValues.includes("C64")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C64L" && item !== "C64R"
        );
      }
      // 如果选择了"左肾"或"右肾"，取消"双肾"选择
      else if (
      } else if (
        selectedValues.includes("C64L") ||
        selectedValues.includes("C64R")
      ) {
        this.selectedOrgans = selectedValues.filter(item => item !== "C64");
      }

      // 如果选择了"全肺"(假设字典值为C34)，自动取消单独的"左肺"(C34L)和"右肺"(C34R)选择
      // 全肺与左右肺互斥
      if (selectedValues.includes("C34")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C34L" && item !== "C34R"
        );
      }
      // 如果选择了"左肺"或"右肺"，取消"全肺"选择
      else if (
      } else if (
        selectedValues.includes("C34L") ||
        selectedValues.includes("C34R")
      ) {
@@ -1077,158 +665,89 @@
    createOrganRecord(organValue) {
      const organName = this.getOrganLabel(organValue);

      this.utilizationData.serviceDonatecomporganList.push({
      this.procurementData.serviceDonationwitnessorgans.push({
        id: null,
        organname: organName,
        organno: organValue,
        caseNo: "",
        hospitalno: "",
        hospitalname: "",
        name: "",
        transplantdoct: "",
        transplanttime: "",
        transplantstate: "1",
        abandonreason: "",
        delFlag: 0, // 新增
        sex: "",
        age: "",
        birthday: "",
        phone: "",
        residenceaddress: "",
        residenceprovince: "",
        residenceprovincename: "",
        residencecity: "",
        residencecityname: "",
        residencetown: "",
        residencetownname: "",
        residencecommunity: "",
        residencecommunityname: "",
        residencecountycode: "",
        residencecountyname: "",
        idcardtype: "",
        idcardno: "",
        ageunit: ""
        organStartTime: "",
        organgettime: "",
        gainhospitalno: "",
        gainhospitalname: "",
        organgetdoct: "",
        assistant: "",
        procurementNurse: "",
        operatingRoomNurse: "",
        anesthesiologist: "",
        organstate: "1",
        notgetreason: ""
      });
    },

    // 根据字典value获取label
    getOrganLabel(organValue) {
      const dictItem = this.organDict.find(item => item.value === organValue);
      return dictItem ? dictItem.label : organValue;
    },

    // 移植状态变化处理
    handleTransplantStatusChange(row, status) {
      if (status === "0") {
        // 如果状态为未移植，清除相关字段
        // row.transplanttime = "";
        // row.transplantdoct = "";
        // row.hospitalno = "";
        // row.hospitalname = "";
      } else if (status === "1") {
        // 如果状态为已移植，自动设置移植时间为当前时间
        if (!row.transplanttime) {
          row.transplanttime = new Date().toISOString().split("T")[0];
        }
    // 医院选择变化
    handleHospitalChange(row, hospitalNo) {
      const hospital = this.hospitalList.find(
        item => item.hospitalNo === hospitalNo
      );
      if (hospital) {
        row.gainhospitalname = hospital.hospitalName;
      }
    },

    // 行展开事件
    handleExpandChange(row, expandedRows) {
      this.expandedRows = expandedRows.map(item => item.organno);
    // 编辑获取记录
    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;
      }
    },

    // 删除器官记录
    handleRemoveOrgan(index) {
      this.$confirm("确认删除这条器官记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const organno = this.utilizationData.serviceDonatecomporganList[index]
            .organno;
          this.utilizationData.serviceDonatecomporganList.splice(index, 1);

          // 从选中的器官中移除
          const idx = this.selectedOrgans.indexOf(organno);
          if (idx > -1) {
            this.selectedOrgans.splice(idx, 1);
          }

          this.$message.success("器官记录删除成功");
        })
        .catch(() => {});
    // 确认编辑
    handleEditConfirm() {
      if (this.currentEditIndex !== -1) {
        this.procurementData.serviceDonationwitnessorgans[
          this.currentEditIndex
        ] = {
          ...this.currentRecord
        };
        this.$message.success("获取记录更新成功");
        this.editDialogVisible = false;
      }
    },

    // 器官行样式
    getOrganRowClassName({ row }) {
      if (
        row.transplantstate === "1" &&
        (!row.hospitalno || !row.name || !row.transplanttime)
        !row.organStartTime ||
        !row.organgettime ||
        !row.gainhospitalno ||
        !row.organgetdoct
      ) {
        return "warning-row";
      }
      if (row.transplantstate === "0" && !row.abandonreason) {
        return "warning-row";
      }
      return "";
    },

    // 获取状态标签类型
    getStatusTagType(status) {
      const typeMap = {
        3: "success",
        2: "warning",
        1: "info"
      };
      return typeMap[status] || "info";
    },

    // 获取状态文本
    getStatusText(status) {
      const textMap = {
        3: "已完成",
        2: "进行中",
        1: "待处理"
      };
      return textMap[status] || "未知";
    },

    // 获取随访类型标签
    getFollowupTypeTag(type) {
      const typeMap = {
        routine: "success",
        emergency: "danger",
        special: "warning"
      };
      return typeMap[type] || "info";
    },

    // 获取随访类型文本
    getFollowupTypeText(type) {
      const textMap = {
        routine: "常规随访",
        emergency: "紧急随访",
        special: "特殊随访"
      };
      return textMap[type] || "未知";
    },

    // 保存基本信息
    async handleSave() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          try {
            console.log(this.procurementData.serviceDonationwitnessorgans);

            const saveData = {
              ...this.form,
              assessannex: JSON.stringify(this.attachments),
              donateorgan: this.selectedOrgans.join(","),
              serviceDonatecomporganList:
                this.utilizationData.serviceDonatecomporganList || []
              deathjudgeannex: JSON.stringify(this.attachments),
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorganList:
                this.procurementData.serviceDonationwitnessorgans || [],
              serviceDonationwitnessorgans:
                this.procurementData.serviceDonationwitnessorgans || []
            };
            console.log(saveData.serviceDonationwitnessorganList);
            console.log(saveData.serviceDonationwitnessorgans);

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

            if (response.code === 200) {
@@ -1251,14 +770,10 @@
        }
      });
    },

    // 保存利用记录
    async handleSaveUtilization() {
      if (
        !this.utilizationData.serviceDonatecomporganList ||
        this.utilizationData.serviceDonatecomporganList.length === 0
      ) {
        this.$message.warning("请先添加利用记录");
    // 保存获取记录
    async handleSaveProcurement() {
      if (!this.form.id) {
        this.$message.warning("请先保存基本信息");
        return;
      }

@@ -1267,57 +782,44 @@
        const saveData = {
          ...this.form,
          attachments: this.attachments,
          donateorgan: this.selectedOrgans.join(","),
          serviceDonatecomporganList:
            this.utilizationData.serviceDonatecomporganList || []
          organdonation: this.selectedOrgans.join(","),
          serviceDonationwitnessorgans:
            this.procurementData.serviceDonationwitnessorgans || []
        };

        const response = await completionedit(saveData);
        const response = await witnessedit(saveData);

        if (response.code === 200) {
          this.$message.success("利用记录保存成功");
          this.$message.success("获取记录保存成功");
        } else {
          this.$message.error(
            "保存利用记录失败：" + (response.msg || "未知错误")
            "保存获取记录失败：" + (response.msg || "未知错误")
          );
        }
      } catch (error) {
        console.error("保存利用记录失败:", error);
        this.$message.error("保存利用记录失败");
        console.error("保存获取记录失败:", error);
        this.$message.error("保存获取记录失败");
      } finally {
        this.saveLoading = false;
      }
    },

    // 确认完成利用
    async handleConfirmUtilization() {
      // 检查利用记录是否完整
      const incompleteRecords = this.utilizationData.serviceDonatecomporganList.filter(
        record => {
          if (record.transplantstate === "1") {
            return !record.hospitalno || !record.name || !record.transplanttime;
          } else if (record.transplantstate === "0") {
            return !record.abandonreason;
          }
          return false;
        }
      );

      if (incompleteRecords.length > 0) {
        this.$message.warning("请先完善所有利用记录的信息");
    // 确认完成获取
    async handleConfirmProcurement() {
      if (this.incompleteRecords > 0) {
        this.$message.warning("请先完善所有获取记录的信息");
        return;
      }

      this.$confirm("确认完成器官利用吗？完成后将无法修改利用信息。", "提示", {
      this.$confirm("确认完成器官获取吗？完成后将无法修改获取信息。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.confirmLoading = true;
          this.form.completeState = "3";
          this.form.completetime =
            this.form.completetime ||
          this.form.witnessState = "3";
          this.form.operationendtime =
            this.form.operationendtime ||
            new Date()
              .toISOString()
              .replace("T", " ")
@@ -1327,126 +829,131 @@
            const saveData = {
              ...this.form,
              attachments: this.attachments,
              donateorgan: this.selectedOrgans.join(","),
              serviceDonatecomporganList:
                this.utilizationData.serviceDonatecomporganList || []
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorgans:
                this.procurementData.serviceDonationwitnessorgans || []
            };

            const response = await completionedit(saveData);
            const response = await witnessedit(saveData);

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

    // 完成利用
    handleComplete() {
      this.handleConfirmUtilization();
    // 确认获取按钮别名
    handleProcure() {
      this.handleConfirmProcurement();
    },

    // 保存随访记录
    handleSaveFollowup() {
      if (!this.currentFollowup.organNo) {
        this.$message.warning("请选择器官");
        return;
      }

      if (!this.currentFollowup.followupTime) {
        this.$message.warning("请选择随访时间");
        return;
      }

      this.saveLoading = true;

      // 获取器官名称
      const organRecord = this.utilizationData.serviceDonatecomporganList.find(
        item => item.organno === this.currentFollowup.organNo
      );
      const organName = organRecord ? organRecord.organname : "";

      const followupData = {
        ...this.currentFollowup,
        organName: organName,
        utilizationId: this.form.id
      };

      // TODO: 替换为实际的随访记录保存接口
      setTimeout(() => {
        if (this.isEditingFollowup) {
          // 更新现有记录
          const index = this.followupData.records.findIndex(
            item => item.id === this.currentFollowup.id
          );
          if (index !== -1) {
            this.followupData.records[index] = {
              ...followupData,
              id: this.currentFollowup.id
            };
          }
        } else {
          // 添加新记录
          this.followupData.records.push({ ...followupData, id: Date.now() });
    // ===== 附件相关方法 =====
    // 打开上传对话框
    openUploadDialog(category) {
      this.currentUploadCategory = category;
      this.tempFileList = [];
      this.uploadDialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs.uploadRef) {
          this.$refs.uploadRef.clearFiles();
        }
        this.$message.success("随访记录保存成功");
        this.followupDialogVisible = false;
        this.saveLoading = false;
      }, 1000);
    },
    /** 附件变化处理 */
    handleAttachmentChange(fileList) {
      this.attachmentFileList = fileList;
      });
    },

    /** 附件移除处理 */
    handleAttachmentRemove(file) {
      if (file.url) {
        const index = this.attachments.findIndex(
          item => item.path === file.url || item.fileUrl === file.url
    // 上传前校验
    beforeUpload(file) {
      const allowedTypes = [
        "application/pdf",
        "image/jpeg",
        "image/png",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ];
      const maxSize = 10 * 1024 * 1024;
      const isTypeOk =
        allowedTypes.includes(file.type) ||
        file.name.endsWith(".pdf") ||
        file.name.endsWith(".jpg") ||
        file.name.endsWith(".jpeg") ||
        file.name.endsWith(".png") ||
        file.name.endsWith(".doc") ||
        file.name.endsWith(".docx");
      if (!isTypeOk) {
        this.$message.error(
          "文件格式不支持，请上传pdf、jpg、png、doc或docx格式文件"
        );
        if (index > -1) {
          this.attachments.splice(index, 1);
          this.$message.success("附件删除成功");
        }
        return false;
      }
      if (file.size > maxSize) {
        this.$message.error("文件大小不能超过10MB");
        return false;
      }
      return true;
    },
    /** 上传成功处理 */
    handleUploadSuccess({ file, fileList, response }) {
      if (response.code === 200) {
        // 根据当前激活的 Tab 决定分类（未分类 Tab 对应空字符串）
        const category = this.activeTab === "未分类" ? "" : this.activeTab;
        const attachmentObj = {
          fileName: file.name,
          path: response.fileUrl || file.url,
          fileUrl: response.fileUrl || file.url,
          fileType: category, // 关键：记录分类
          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("文件上传成功");
      }
    // 文件选择变化
    handleFileChange(file, fileList) {
      this.tempFileList = fileList;
    },

    // 临时移除
    handleTempRemove(file, fileList) {
      this.tempFileList = fileList;
    },

    // 上传成功处理
    handleUploadSuccess(response, file, fileList) {
      if (response.code !== 200) {
        this.$message.error(response.msg || "上传失败");
        return;
      }
      // 未分类对应空字符串，与展示/保存逻辑一致
      const category =
        this.currentUploadCategory === "未分类"
          ? ""
          : this.currentUploadCategory;
      const attachmentObj = {
        fileName: file.name,
        path: response.fileUrl || response.url || response.data || file.url,
        fileUrl: response.fileUrl || response.url || response.data || file.url,
        fileType: category,
        fileSize: file.size,
        uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
      };
      if (!Array.isArray(this.attachments)) {
        this.attachments = [];
      }
      this.attachments.push(attachmentObj);
      this.$message.success("文件上传成功");
      this.uploadLoading = false;
      this.uploadDialogVisible = false;
      this.tempFileList = [];
    },

    // 提交上传
    submitUpload() {
      if (this.tempFileList.length === 0) {
        this.$message.warning("请先选择要上传的文件");
        return;
      }
      this.uploadLoading = true;
      this.$refs.uploadRef.submit();
    },

    // 获取某分类的文件数量
    getCategoryCount(category) {
      return this.attachments.filter(item => {
@@ -1473,16 +980,7 @@
    updateAttachmentCategory(row, newVal) {
      const target = this.attachments.find(item => item === row);
      if (target) {
        target.fileType = newVal; // 可能为空字符串
        // 同步更新 attachmentFileList
        const fileItem = this.attachmentFileList.find(
          f => f.raw === row || f.url === row.fileUrl
        );
        if (fileItem) {
          fileItem.raw.fileType = newVal;
          fileItem.fileType = newVal || "未分类";
        }
        // 如果当前激活的tab没有文件了，自动切换到第一个有文件的tab
        target.fileType = newVal;
        const currentTabHasFiles =
          this.getCategoryFiles(this.activeTab).length > 0;
        if (!currentTabHasFiles) {
@@ -1494,42 +992,33 @@

    // 按文件对象删除（用于表格中的删除按钮）
    handleRemoveAttachmentByFile(file) {
      const index = this.attachments.findIndex(item => item === file);
      if (index > -1) {
        this.attachments.splice(index, 1);
        // 同步删除 attachmentFileList
        const fileIndex = this.attachmentFileList.findIndex(
          f => f.raw === file || f.url === file.fileUrl
        );
        if (fileIndex > -1) {
          this.attachmentFileList.splice(fileIndex, 1);
        }
        this.$message.success("附件删除成功");
      }
    },
    /** 上传错误处理 */
    handleUploadError({ file, fileList, error }) {
      console.error("附件上传失败:", error);
      this.$message.error("文件上传失败，请重试");
      this.$confirm("确定要删除这个附件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.attachments.findIndex(item => item === file);
          if (index > -1) {
            this.attachments.splice(index, 1);
            this.$message.success("附件删除成功");
          }
        })
        .catch(() => {});
    },

    /** 手动删除附件 */
    handleRemoveAttachment(index) {
      // 直接调用新的删除方法
      this.handleRemoveAttachmentByFile(file.raw || file);
    },

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

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

@@ -1642,24 +1131,36 @@
};
</script>

<style lang="scss" scoped>
.organ-utilization-detail {
<style scoped>
.organ-procurement-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

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

/* 新增附件头部样式 */
.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;
@@ -1672,7 +1173,6 @@
.attachment-title {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.attachment-tip {
@@ -1682,7 +1182,7 @@
}

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

.list-title {
@@ -1695,16 +1195,8 @@
.file-name {
  font-size: 13px;
  margin-left: 8px;
  color: #606266;
}

/* 文件图标样式 */
.el-icon-document {
  font-size: 16px;
  vertical-align: middle;
}

/* 保持原有样式 */
.detail-title {
  font-size: 18px;
  font-weight: 600;
@@ -1712,42 +1204,11 @@
  line-height: 1.4;
}

/* 表格整体样式 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table .cell) {
  padding: 12px 8px;
  line-height: 1.5;
}

/* 斑马纹表格行 */
:deep(.el-table__row.warning-row) {
  background-color: #fdf6ec;
}

:deep(.el-table__row.default-row) {
  background-color: #f0f9ff;
}

/* 鼠标悬停效果 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f5f7fa !important;
}

/* 统计信息样式 */
.utilization-stats {
.procurement-stats {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: linear-gradient(135deg, #a6b2e7 0%, #8a66ad 100%);
  border-radius: 8px;
  color: white;
}
@@ -1773,214 +1234,17 @@
  color: white;
}

/* 展开行样式 */
.recipient-detail-expand {
  padding: 20px;
/* 空状态样式 */
.empty-procurement {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  background: #fafafa;
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recipient-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e4e7ed;
}

.recipient-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 表单部分样式 */
.recipient-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 表单部分标题 */
.form-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #409eff;
  margin: 0 0 15px 0;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  line-height: 1.2;
}

/* 表单行间距 */
:deep(.el-form-item) {
  margin-bottom: 20px;

  .el-form-item__label {
    font-weight: 500;
    color: #606266;
    padding-right: 10px;
  }

  .el-form-item__content {
    line-height: 1.5;
  }
}

/* 表单输入框样式 */
:deep(.el-input__inner) {
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  transition: all 0.3s ease;

  &:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }

  &:disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

/* 文本域样式 */
:deep(.el-textarea__inner) {
  min-height: 80px;
  border-radius: 4px;
  transition: all 0.3s ease;

  &:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }

  &:disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

/* 选择框样式 */
:deep(.el-select) {
  width: 100%;

  .el-input__inner {
    border-radius: 4px;
  }

  &.is-disabled {
    .el-input__inner {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
    }
  }
}

/* 日期选择器样式 */
:deep(.el-date-editor) {
  width: 100%;

  &.el-input__inner {
    border-radius: 4px;
  }

  &.is-disabled {
    .el-input__inner {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .recipient-detail-expand {
    padding: 15px;
  }

  .recipient-form {
    padding: 15px;
  }

  .attachment-header {
    flex-wrap: wrap;
  }

  .attachment-tip {
    width: 100%;
    margin-top: 8px;
    margin-left: 0;
  }

  .form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }

  :deep(.el-form-item) {
    margin-bottom: 15px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

:deep(.el-divider) {
  margin: 20px 0;
  background-color: #e4e7ed;
}

/* 表单标签和输入框样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 按钮样式优化 */
:deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #3375e0 100%);
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 底部操作按钮 */
/* 对话框底部按钮 */
.dialog-footer {
  margin-top: 20px;
  text-align: center;
@@ -1993,49 +1257,23 @@
  min-width: 120px;
}

/* 空状态样式 */
.empty-utilization {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  background: #fafafa;
  border-radius: 4px;
  margin: 20px 0;
/* 表格行样式 */
:deep(.warning-row) {
  background-color: #fff7e6 !important;
}

/* 文件信息样式 */
.file-info {
  display: flex;
  align-items: center;
  padding: 5px 0;
:deep(.warning-row:hover) {
  background-color: #ffecc2 !important;
}

.file-info i {
  font-size: 18px;
  margin-right: 10px;
}

/* 平板设备适配 */
@media (max-width: 1024px) {
  .organ-utilization-detail {
    padding: 15px;
/* 响应式设计 */
@media (max-width: 768px) {
  .organ-procurement-detail {
    padding: 10px;
  }

  :deep(.el-col) {
  .procurement-stats .el-col {
    margin-bottom: 10px;
  }
}

/* 手机设备适配 */

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .organ-utilization-detail {
    padding: 5px;
  }

  :deep(.el-card__header) {
    padding: 10px 15px;
  }
}
</style>