各表单布局调整

WXL

5 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

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

@@ -1,189 +1,39 @@
<template>
  <div class="organ-procurement-detail">
    <!-- <case-basic-info :case-id="caseId" :show-attachment="true":column="3" /> -->

    <!-- 基本信息 -->
    <el-card class="detail-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取基本信息</span>

      </div>

      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <!-- 手术相关信息 -->
        <el-divider content-position="left">手术信息</el-divider>
      <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-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-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-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="腹主动脉插管时间"
              prop="abdominalaortacannulatime"
            >
              <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-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-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-descriptions title="获取机构信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="获取机构名称">{{ form.gainhospitalname || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 器官获取记录部分 -->
@@ -191,7 +41,6 @@
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取记录</span>
        <div style="float: right;">

          <dict-tag
            :options="dict.type.Obtain_status"
            :value="form.witnessState"
@@ -199,518 +48,135 @@
        </div>
      </div>

      <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"
              >
                <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="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-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-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>
                </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>
      <div v-if="!displayOrgans.length" class="empty-procurement">
        <el-empty description="暂无获取记录" :image-size="80" />
      </div>
    </el-card>

    <!-- 附件管理部分优化 -->
    <!-- 附件管理部分 - 分类Tab展示 -->
    <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 slot="header" class="clearfix">
        <span class="detail-title">相关附件</span>
      </div>

      <!-- 附件列表 - 分类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"
        >
      </div>

      <!-- 使用 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-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">
                <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>

    <!-- 编辑获取记录对话框 -->
    <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>
    <FilePreviewDialog
      :visible="previewVisible"
      :file="currentPreviewFile"
      @close="previewVisible = false"
      @download="handleDownload"
    />
  </div>
</template>

<script>
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
import UploadAttachment from "@/components/UploadAttachment";
import FilePreviewDialog from "@/components/FilePreviewDialog";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import readonlyDescriptionsMixin from "./readonlyDescriptionsMixin";

export default {
  name: "OrganProcurementDetail",
  components: {
    UploadAttachment,
    FilePreviewDialog,
    CaseBasicInfo
  },
  mixins: [readonlyDescriptionsMixin],
  dicts: [
    "sys_BloodType",
    "Geta_hospital",
    "sys_DonationCategory",
    "sys_Organ",
    "Obtain_status"
  ],
    props: {
  props: {
    infoid: {
      type: String,
      default: true
@@ -772,6 +238,18 @@
        coordinatorSignTime: "",
        attachments: []
      },
      activeTab: "原表拍照", // 当前激活的附件分类Tab
      presetCategories: [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频"
      ], // 预设分类
      organExpansionMap: {
        C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] },
        C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] }
      },
      // 表单验证规则
      rules: {
        name: [
@@ -804,25 +282,54 @@
      },
      // 附件数据
      attachments: [],
      attachmentFileList: [],
      // 附件相关配置
      attachmentLimit: 10,
      attachmentAccept:
        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
      // 上传相关
      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      },
      uploadDialogVisible: false,
      uploadLoading: false,
      tempFileList: [],
      currentUploadCategory: "",
      // 编辑对话框
      editDialogVisible: false,
      currentRecord: {},
      currentEditIndex: -1,
      // 文件预览相关
      filePreviewVisible: false,
      currentPreviewFile: null,
      filePreviewTitle: ""
      previewVisible: false,
      currentPreviewFile: null
    };
  },
  computed: {
    // 当前用户信息
    currentUser() {
      return JSON.parse(sessionStorage.getItem("user") || "{}");
    },
    displayOrgans() {
      return (this.procurementData.serviceDonationwitnessorgans || []).filter(
        item => item.delFlag !== 1
      );
    },
    categories() {
      // 始终返回所有预设分类 + 未分类，无论是否有数据
      return [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频",
        "未分类"
      ];
    },
    organReverseMap() {
      const map = {};
      for (const key in this.organExpansionMap) {
        const { subItems } = this.organExpansionMap[key];
        subItems.forEach(item => {
          map[item] = key;
        });
      }
      return map;
    },
    // 不完整的记录数量
    incompleteRecords() {
@@ -848,22 +355,6 @@
      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;

@@ -878,7 +369,6 @@

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

      if (!infoid) {
@@ -896,13 +386,18 @@

      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);
    // },
    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;
@@ -923,10 +418,14 @@

          // 初始化附件
          if (this.form.deathjudgeannex) {
            this.form.attachments = JSON.parse(this.form.deathjudgeannex);
            this.attachments = Array.isArray(this.form.attachments)
              ? [...this.form.attachments]
              : [];
            const parsed = JSON.parse(this.form.deathjudgeannex);
            this.attachments = parsed.map(item => ({
              ...item,
              fileType: item.fileType || "" // 默认空字符串表示未分类
            }));
            this.form.attachments = this.attachments;
          } else {
            this.attachments = [];
          }

          // 处理捐献器官字段
@@ -948,6 +447,7 @@
          }

          this.$message.success("数据加载成功");
          this.syncOrgansFromSelection();
        } else {
          this.$message.warning("未找到对应的器官获取数据");
        }
@@ -957,6 +457,52 @@
      } finally {
        this.loading = false;
      }
    },
    syncOrgansFromSelection() {
      const records = this.procurementData.serviceDonationwitnessorgans || [];
      const targetNos = [];
      this.selectedOrgans.forEach(val => {
        if (this.organExpansionMap[val]) {
          targetNos.push(...this.organExpansionMap[val].subItems);
        } else {
          targetNos.push(val);
        }
      });

      // 新增或恢复
      targetNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
          if (existing.delFlag === 1) {
            existing.delFlag = 0; // 恢复显示
          }
        } else {
          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=1 的记录，但实际应该显示，强制重置
      records.forEach(r => {
        if (r.delFlag === 1) r.delFlag = 0;
      });

      this.form.organdonation = this.selectedOrgans.join(",");
    },
    // 获取医院数据
    async getHospitalData() {
@@ -975,87 +521,139 @@
        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;

      // el-autocomplete 需要 value 字段
      cb(results.map(item => ({ value: item.label })));
    },
    // 器官选择状态变化
    handleOrganSelectionChange(selectedValues) {
      if (!this.procurementData.serviceDonationwitnessorgans) {
        this.procurementData.serviceDonationwitnessorgans = [];
      }

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

      // 处理互斥逻辑
    async handleOrganSelectionChange(selectedValues) {
      // 1. 处理互斥逻辑（修改 this.selectedOrgans）
      this.handleExclusiveSelections(selectedValues);

      // 更新捐献器官字段
      this.form.organdonation = selectedValues.join(",");
      const finalSelected = this.selectedOrgans;
      const records = this.procurementData.serviceDonationwitnessorgans || [];

      // 新增选择的器官
      selectedValues.forEach(organValue => {
        if (!currentOrganValues.includes(organValue)) {
          this.createOrganRecord(organValue);
      // 2. 构建目标器官编号列表（展开组合器官）
      const targetOrganNos = [];
      finalSelected.forEach(val => {
        if (this.organExpansionMap[val]) {
          targetOrganNos.push(...this.organExpansionMap[val].subItems);
        } else {
          targetOrganNos.push(val);
        }
      });

      // 移除取消选择的器官
      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;
            }
      // 3. 新增或恢复目标器官记录（无弹窗）
      targetOrganNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
          if (existing.delFlag === 1) {
            existing.delFlag = 0; // 恢复显示
          }
        } else {
          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. 找出需要取消的记录（不在目标集合中）
      const toRemove = records.filter(r => !targetOrganNos.includes(r.organno));
      const toRemoveSaved = toRemove.filter(r => r.id); // 已保存，需确认
      const toRemoveUnsaved = toRemove.filter(r => !r.id); // 未保存，直接移除

      // 4.1 直接移除未保存的记录
      toRemoveUnsaved.forEach(r => {
        const idx = records.indexOf(r);
        if (idx !== -1) records.splice(idx, 1);
      });

      // 4.2 处理已保存的记录：弹窗确认
      if (toRemoveSaved.length > 0) {
        const organNames = toRemoveSaved.map(r => r.organname).join("、");
        try {
          await this.$confirm(
            `您确定要取消以下已保存的器官获取记录吗？\n${organNames}\n取消后，这些记录将从列表中移除（数据仍保留，可恢复）。`,
            "提示",
            {
              confirmButtonText: "确定移除",
              cancelButtonText: "取消",
              type: "warning"
            }
          );
          // 用户确认：标记 delFlag=1
          toRemoveSaved.forEach(r => {
            r.delFlag = 1;
          });
        } catch (error) {
          // 用户取消：恢复选中状态
          const parentToRestore = new Set();
          toRemoveSaved.forEach(r => {
            const parent = this.organReverseMap[r.organno];
            if (parent) {
              parentToRestore.add(parent);
            } else {
              parentToRestore.add(r.organno);
            }
          });
          parentToRestore.forEach(val => {
            if (!this.selectedOrgans.includes(val)) {
              this.selectedOrgans.push(val);
            }
          });
          this.$message.info("已取消删除操作");
          // 更新表单字段（保持一致性）
          this.form.organdonation = this.selectedOrgans.join(",");
          return; // 退出方法，避免继续执行
        }
      }

      // 5. 更新表单字段
      this.form.organdonation = this.selectedOrgans.join(",");
    },

    // 处理互斥选择
    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")
      ) {
@@ -1135,13 +733,19 @@
        if (valid) {
          this.saveLoading = true;
          try {
            console.log(this.procurementData.serviceDonationwitnessorgans);

            const saveData = {
              ...this.form,
              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 ? witnessedit : witnessadd;
            const response = await apiMethod(saveData);
@@ -1257,72 +861,163 @@
      this.handleConfirmProcurement();
    },

    // 附件相关方法
    /** 附件变化处理 */
    handleAttachmentChange(fileList) {
      this.attachmentFileList = fileList;
    // ===== 附件相关方法 =====
    // 打开上传对话框
    openUploadDialog(category) {
      this.currentUploadCategory = category;
      this.tempFileList = [];
      this.uploadDialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs.uploadRef) {
          this.$refs.uploadRef.clearFiles();
        }
      });
    },

    /** 附件移除处理 */
    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;
    },

    // 文件选择变化
    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 => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      }).length;
    },

    // 获取某分类的文件列表
    getCategoryFiles(category) {
      return this.attachments.filter(item => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      });
    },

    // 更新附件分类（下拉修改时触发）
    updateAttachmentCategory(row, newVal) {
      const target = this.attachments.find(item => item === row);
      if (target) {
        target.fileType = newVal;
        const currentTabHasFiles =
          this.getCategoryFiles(this.activeTab).length > 0;
        if (!currentTabHasFiles) {
          const firstCategory = this.categories[0];
          if (firstCategory) this.activeTab = firstCategory;
        }
      }
    },

    /** 上传成功处理 */
    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("文件上传成功");
      }
    // 按文件对象删除（用于表格中的删除按钮）
    handleRemoveAttachmentByFile(file) {
      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(() => {});
    },

    /** 上传错误处理 */
    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;
      this.previewVisible = true;
    },

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