From 6623e51d0b1edb191ca50201c0130cb5ed1beda8 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期五, 08 五月 2026 14:03:02 +0800
Subject: [PATCH] 青岛推送

---
 src/views/business/OrganUtilization/OrganUtilizationInfo.vue | 2330 ++++++++++++++++++++++++++++++++++-------------------------
 1 files changed, 1,326 insertions(+), 1,004 deletions(-)

diff --git a/src/views/business/OrganUtilization/OrganUtilizationInfo.vue b/src/views/business/OrganUtilization/OrganUtilizationInfo.vue
index a6f977e..416b83c 100644
--- a/src/views/business/OrganUtilization/OrganUtilizationInfo.vue
+++ b/src/views/business/OrganUtilization/OrganUtilizationInfo.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="organ-utilization-detail">
+    <case-basic-info :case-id="caseId" :show-attachment="true" />
+
     <!-- 鍩烘湰淇℃伅 -->
     <el-card class="detail-card">
       <div slot="header" class="clearfix">
@@ -11,7 +13,8 @@
           <el-button
             type="success"
             @click="handleComplete"
-            :disabled="form.utilizationStatus === 'completed'"
+            :disabled="form.recordstate === 'completed'"
+            :loading="confirmLoading"
           >
             瀹屾垚鍒╃敤
           </el-button>
@@ -20,76 +23,9 @@
 
       <el-form :model="form" ref="form" :rules="rules" label-width="120px">
         <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="浣忛櫌鍙�" prop="hospitalNo">
-              <el-input v-model="form.hospitalNo" readonly />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="浣忛櫌鍙�" prop="caseNo">
-              <el-input v-model="form.caseNo" readonly />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="鎹愮尞鑰呭鍚�" prop="donorName">
-              <el-input v-model="form.donorName" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="鎬у埆" prop="gender">
-              <el-select v-model="form.gender" style="width: 100%">
-                <el-option label="鐢�" value="0" />
-                <el-option label="濂�" value="1" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="骞撮緞" prop="age">
-              <el-input v-model="form.age" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="鍑虹敓鏃ユ湡" prop="birthDate">
-              <el-date-picker
-                v-model="form.birthDate"
-                type="date"
-                value-format="yyyy-MM-dd"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="鐤剧梾璇婃柇" prop="diagnosis">
-              <el-input
-                type="textarea"
-                :rows="2"
-                v-model="form.diagnosis"
-                placeholder="璇疯緭鍏ョ柧鐥呰瘖鏂俊鎭�"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="鍒嗛厤鏃堕棿" prop="allocationTime">
-              <el-date-picker
-                v-model="form.allocationTime"
-                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="6">
-            <el-form-item align="left" label="閬椾綋鎹愮尞" prop="isBodyDonation">
-              <el-radio-group v-model="form.isBodyDonation">
+            <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"
@@ -100,11 +36,11 @@
             </el-form-item>
           </el-col>
           <el-col :span="18">
-            <el-form-item align="left" label="鎺ユ敹鍗曚綅" prop="receivingUnit">
+            <el-form-item align="left" label="鎺ユ敹鍗曚綅" prop="receivingunit">
               <el-input
-                v-model="form.receivingUnit"
+                v-model="form.receivingunit"
                 placeholder="璇疯緭鍏ユ帴鏀跺崟浣�"
-                :disabled="form.isBodyDonation !== '1'"
+                :disabled="form.isbodydonation !== '1'"
               />
             </el-form-item>
           </el-col>
@@ -112,61 +48,37 @@
 
         <el-row :gutter="20">
           <el-col :span="6">
-            <el-form-item label="璐熻矗浜�" prop="responsibleUserId">
-              <el-select
-                v-model="form.responsibleUserId"
-                placeholder="璇烽�夋嫨璐熻矗浜�"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in leaderList"
-                  :key="item.reportNo"
-                  :label="item.reportName"
-                  :value="item.reportNo"
-                />
-              </el-select>
+            <el-form-item label="璐熻矗浜�" prop="responsibleusername">
+              <el-input
+                v-model="form.responsibleusername"
+                placeholder="璇疯緭鍏ヨ礋璐d汉濮撳悕"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="鍗忚皟鍛樹竴" prop="coordinatedUserId1">
-              <el-select
-                v-model="form.coordinatedUserId1"
-                placeholder="璇烽�夋嫨鍗忚皟鍛�"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in coordinatorList"
-                  :key="item.reportNo"
-                  :label="item.reportName"
-                  :value="item.reportNo"
-                />
-              </el-select>
+            <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="coordinatedUserId2">
-              <el-select
-                v-model="form.coordinatedUserId2"
-                placeholder="璇烽�夋嫨鍗忚皟鍛�"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in coordinatorList"
-                  :key="item.reportNo"
-                  :label="item.reportName"
-                  :value="item.reportNo"
-                />
-              </el-select>
+            <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="completionTime">
+            <el-form-item label="瀹屾垚鏃堕棿" prop="completetime">
               <el-date-picker
-                v-model="form.completionTime"
+                v-model="form.completetime"
                 type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 style="width: 100%"
-                :disabled="form.utilizationStatus !== 'completed'"
+                :disabled="form.recordstate === 'completed'"
               />
             </el-form-item>
           </el-col>
@@ -174,14 +86,14 @@
 
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="鐧昏浜�" prop="registrant">
-              <el-input v-model="form.registrant" />
+            <el-form-item label="鐧昏浜�" prop="createBy">
+              <el-input v-model="form.createBy" readonly />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="鐧昏鏃堕棿" prop="registrationTime">
+            <el-form-item label="鐧昏鏃堕棿" prop="createTime">
               <el-date-picker
-                v-model="form.registrationTime"
+                v-model="form.createTime"
                 type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 style="width: 100%"
@@ -193,13 +105,13 @@
       </el-form>
     </el-card>
 
-    <!-- 鍣ㄥ畼鍒╃敤璁板綍閮ㄥ垎 -->
+    <!-- 鍣ㄥ畼鍒╃敤璁板綍閮ㄥ垎 - 鏁村悎鍙楄�呰鎯� -->
     <el-card class="utilization-card">
       <div slot="header" class="clearfix">
         <span class="detail-title">鍣ㄥ畼鍒╃敤璁板綍</span>
         <div style="float: right;">
-          <el-tag :type="getStatusTagType(form.utilizationStatus)">
-            {{ getStatusText(form.utilizationStatus) }}
+          <el-tag :type="getStatusTagType(form.recordstate)">
+            {{ getStatusText(form.recordstate) }}
           </el-tag>
         </div>
       </div>
@@ -213,12 +125,15 @@
         <el-row>
           <el-col>
             <el-form-item label-width="100px" label="绉绘鍣ㄥ畼">
-              <el-checkbox-group v-model="selectedOrgans" @change="handleOrganSelectionChange">
+              <el-checkbox-group
+                v-model="selectedOrgans"
+                @change="handleOrganSelectionChange"
+              >
                 <el-checkbox
                   v-for="dict in dict.type.sys_Organ || []"
                   :key="dict.value"
                   :label="dict.value"
-                  :disabled="form.utilizationStatus === 'completed'"
+                  :disabled="form.recordstate === 'completed'"
                 >
                   {{ dict.label }}
                 </el-checkbox>
@@ -231,38 +146,236 @@
           <el-col>
             <el-form-item>
               <el-table
-                :data="utilizationData.records"
+                :data="utilizationData.serviceDonatecomporganList"
                 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-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="璇疯緭鍏ュ彈鑰呭鍚�"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </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%"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                              <el-form-item label="鎬у埆">
+                                <el-select
+                                  v-model="scope.row.sex"
+                                  placeholder="璇烽�夋嫨鎬у埆"
+                                  style="width: 100%"
+                                  :disabled="form.recordstate === 'completed'"
+                                >
+                                  <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="骞撮緞"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                              <el-form-item label="璇佷欢绫诲瀷">
+                                <el-select
+                                  v-model="scope.row.idcardtype"
+                                  placeholder="璇烽�夋嫨璇佷欢绫诲瀷"
+                                  style="width: 100%"
+                                  :disabled="form.recordstate === 'completed'"
+                                >
+                                  <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="璇佷欢鍙风爜"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </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="璇疯緭鍏ョЩ妞嶄腑蹇冨悕绉�"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                              <el-form-item label="鑱旂郴鐢佃瘽">
+                                <el-input
+                                  v-model="scope.row.phone"
+                                  placeholder="鑱旂郴鐢佃瘽"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </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="璇疯緭鍏ヨ缁嗗湴鍧�"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </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%"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                              <el-form-item label="绉绘鍖荤敓">
+                                <el-input
+                                  v-model="scope.row.transplantdoct"
+                                  placeholder="璇疯緭鍏ョЩ妞嶅尰鐢�"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </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="璇疯緭鍏ユ湭绉绘鍘熷洜"
+                                  :disabled="form.recordstate === 'completed'"
+                                />
+                              </el-form-item>
+                            </el-col>
+                          </el-row>
+                        </div>
+                      </el-form>
+                    </div>
+                  </template>
+                </el-table-column>
+
                 <el-table-column
                   label="鍣ㄥ畼鍚嶇О"
                   align="center"
-                  width="120"
-                  prop="organName"
+                  prop="organname"
                 >
                   <template slot-scope="scope">
                     <el-input
-                      v-model="scope.row.organName"
+                      v-model="scope.row.organname"
                       placeholder="鍣ㄥ畼鍚嶇О"
                       :disabled="true"
                     />
                   </template>
                 </el-table-column>
 
-                <el-table-column
-                  label="绯荤粺缂栧彿"
-                  align="center"
-                  width="120"
-                  prop="caseNo"
-                >
+                <el-table-column label="绯荤粺缂栧彿" align="center" prop="caseNo">
                   <template slot-scope="scope">
                     <el-input
                       v-model="scope.row.caseNo"
                       placeholder="绯荤粺缂栧彿"
-                      :disabled="form.utilizationStatus === 'completed'"
                     />
                   </template>
                 </el-table-column>
@@ -270,15 +383,14 @@
                 <el-table-column
                   label="绉绘鍖婚櫌"
                   align="center"
-                  width="200"
-                  prop="hospitalNo"
+                  width="260"
+                  prop="hospitalno"
                 >
                   <template slot-scope="scope">
                     <el-select
-                      v-model="scope.row.hospitalNo"
+                      v-model="scope.row.hospitalno"
                       placeholder="璇烽�夋嫨绉绘鍖婚櫌"
                       style="width: 100%"
-                      :disabled="form.utilizationStatus === 'completed'"
                       @change="handleHospitalChange(scope.row, $event)"
                     >
                       <el-option
@@ -292,67 +404,16 @@
                 </el-table-column>
 
                 <el-table-column
-                  label="鍙椾綋濮撴皬"
-                  align="center"
-                  width="120"
-                  prop="recipientName"
-                >
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.recipientName"
-                      placeholder="鍙椾綋濮撴皬"
-                      :disabled="form.utilizationStatus === 'completed'"
-                    />
-                  </template>
-                </el-table-column>
-
-                <el-table-column
-                  label="绉绘璐熻矗浜�"
-                  align="center"
-                  width="120"
-                  prop="transplantDoctor"
-                >
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.transplantDoctor"
-                      placeholder="鍖诲笀濮撳悕"
-                      :disabled="form.utilizationStatus === 'completed'"
-                    />
-                  </template>
-                </el-table-column>
-
-                <el-table-column
-                  label="绉绘鏃堕棿"
-                  align="center"
-                  width="150"
-                  prop="transplantTime"
-                >
-                  <template slot-scope="scope">
-                    <el-date-picker
-                      clearable
-                      size="small"
-                      style="width: 100%"
-                      v-model="scope.row.transplantTime"
-                      type="date"
-                      value-format="yyyy-MM-dd"
-                      placeholder="閫夋嫨绉绘鏃堕棿"
-                      :disabled="form.utilizationStatus === 'completed'"
-                    />
-                  </template>
-                </el-table-column>
-
-                <el-table-column
                   label="绉绘鐘舵��"
                   align="center"
-                  width="120"
-                  prop="transplantStatus"
+                  prop="transplantstate"
                 >
                   <template slot-scope="scope">
                     <el-select
-                      v-model="scope.row.transplantStatus"
+                      v-model="scope.row.transplantstate"
                       placeholder="璇烽�夋嫨绉绘鐘舵��"
                       style="width: 100%"
-                      :disabled="form.utilizationStatus === 'completed'"
+                      @change="handleTransplantStatusChange(scope.row, $event)"
                     >
                       <el-option
                         v-for="dict in transplantStatusList"
@@ -365,18 +426,43 @@
                 </el-table-column>
 
                 <el-table-column
-                  label="璇存槑"
+                  label="绉绘鏃堕棿"
                   align="center"
-                  prop="abandonReason"
-                  min-width="200"
+                  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
-                      type="textarea"
-                      clearable
-                      v-model="scope.row.abandonReason"
-                      placeholder="璇疯緭鍏ュ純鐢ㄨ鏄�"
-                      :disabled="form.utilizationStatus === 'completed'"
+                      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="鍙楄�呭鍚�"
+                      :disabled="form.recordstate === 'completed'"
                     />
                   </template>
                 </el-table-column>
@@ -384,9 +470,8 @@
                 <el-table-column
                   label="鎿嶄綔"
                   align="center"
-                  width="120"
                   class-name="small-padding fixed-width"
-                  v-if="form.utilizationStatus !== 'completed'"
+                  v-if="form.recordstate !== 'completed'"
                 >
                   <template slot-scope="scope">
                     <el-button
@@ -397,6 +482,16 @@
                     >
                       缂栬緫
                     </el-button>
+                    <el-button
+                      size="mini"
+                      type="text"
+                      icon="el-icon-delete"
+                      style="color: #F56C6C;"
+                      @click="handleRemoveOrgan(scope.$index)"
+                      v-if="!scope.row.id"
+                    >
+                      鍒犻櫎
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -404,279 +499,100 @@
           </el-col>
         </el-row>
 
-        <!-- 鍒╃敤缁熻淇℃伅 -->
-        <div class="utilization-stats" v-if="utilizationData.records.length > 0">
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <div class="stat-item">
-                <span class="stat-label">宸插埄鐢ㄥ櫒瀹�:</span>
-                <span class="stat-value">{{ utilizationData.records.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="getStatusTagType(form.utilizationStatus)">
-                    {{ getStatusText(form.utilizationStatus) }}
-                  </el-tag>
-                </span>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
+        <!-- 缁熻淇℃伅 -->
 
-        <div v-else class="empty-utilization">
+        <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 class="dialog-footer" v-if="form.utilizationStatus !== 'completed'">
-        <el-button
-          type="primary"
-          @click="handleSaveUtilization"
-          :loading="saveLoading"
-          :disabled="utilizationData.records.length === 0"
-        >
-          淇濆瓨鍒╃敤璁板綍
-        </el-button>
-        <el-button
-          type="success"
-          @click="handleConfirmUtilization"
-          :loading="confirmLoading"
-          :disabled="incompleteRecords > 0"
-        >
-          纭瀹屾垚鍒╃敤
-        </el-button>
-      </div>
-    </el-card>
-
-    <!-- 鍙楄�呰缁嗕俊鎭儴鍒� -->
-    <el-card class="recipient-card" v-if="utilizationData.records.length > 0">
-      <div slot="header" class="clearfix">
-        <span class="detail-title">鍙楄�呰缁嗕俊鎭�</span>
-      </div>
-
-      <el-tabs v-model="activeRecipientTab" type="card">
-        <el-tab-pane
-          v-for="record in utilizationData.records"
-          :key="record.organNo"
-          :label="record.organName"
-          :name="record.organNo"
-        >
-          <el-form :model="record" label-width="140px">
-            <el-row :gutter="20">
-              <el-col :span="8">
-                <el-form-item label="鍙楄�呭鍚�">
-                  <el-input v-model="record.recipientName" placeholder="璇疯緭鍏ュ彈鑰呭鍚�" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="鍑虹敓骞存湀">
-                  <el-date-picker
-                    v-model="record.recipientBirthDate"
-                    type="month"
-                    value-format="yyyy-MM"
-                    placeholder="閫夋嫨鍑虹敓骞存湀"
-                    style="width: 100%"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="鎬у埆">
-                  <el-select v-model="record.recipientGender" 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="12">
-                <el-form-item label="绉绘涓績鍚嶇О">
-                  <el-input v-model="record.transplantCenter" placeholder="璇疯緭鍏ョЩ妞嶄腑蹇冨悕绉�" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="鎵�鍦ㄥ湴">
-                  <el-input v-model="record.location" placeholder="璇疯緭鍏ユ墍鍦ㄥ湴" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="绉绘鏃ユ湡">
-                  <el-date-picker
-                    v-model="record.transplantTime"
-                    type="date"
-                    value-format="yyyy-MM-dd"
-                    placeholder="閫夋嫨绉绘鏃ユ湡"
-                    style="width: 100%"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="鍘熷彂鐥�">
-                  <el-input v-model="record.originalDisease" 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="3"
-                    v-model="record.testIndicators"
-                    placeholder="璇疯緭鍏ュ悇绫诲繀瑕佺殑妫�娴嬫寚鏍�"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-
-    <!-- 闅忚璁板綍閮ㄥ垎 -->
-    <el-card class="followup-card">
-      <div slot="header" class="clearfix">
-        <span class="detail-title">闅忚璁板綍</span>
-        <el-button
-          type="primary"
-          size="mini"
-          icon="el-icon-plus"
-          @click="handleAddFollowup"
-          style="float: right;"
-        >
-          鏂板闅忚
-        </el-button>
-      </div>
-
-      <el-table :data="followupData.records" v-loading="loading" border>
-        <el-table-column label="鍣ㄥ畼鍚嶇О" align="center" width="120" prop="organName" />
-        <el-table-column label="闅忚鏃堕棿" align="center" width="160" prop="followupTime">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.followupTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="闅忚绫诲瀷" align="center" width="100" prop="followupType">
-          <template slot-scope="scope">
-            <el-tag :type="getFollowupTypeTag(scope.row.followupType)">
-              {{ getFollowupTypeText(scope.row.followupType) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="鍙楄�呮儏鍐�" align="center" prop="recipientCondition" min-width="200" show-overflow-tooltip />
-        <el-table-column label="闅忚鍖荤敓" align="center" width="120" prop="followupDoctor" />
-        <el-table-column label="涓嬫闅忚鏃堕棿" align="center" width="160" prop="nextFollowupTime">
-          <template slot-scope="scope">
-            <span>{{ scope.row.nextFollowupTime || '-' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="鎿嶄綔" align="center" width="150">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-view"
-              @click="handleViewFollowup(scope.row)"
-            >鏌ョ湅</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleEditFollowup(scope.row)"
-            >缂栬緫</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              style="color: #F56C6C;"
-              @click="handleDeleteFollowup(scope.row)"
-            >鍒犻櫎</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </el-card>
 
     <!-- 闄勪欢绠$悊閮ㄥ垎 -->
+    <!-- 闄勪欢绠$悊閮ㄥ垎 - 浼樺寲涓哄畬鏁村姛鑳� -->
     <el-card class="attachment-card">
-      <div slot="header" class="clearfix">
-        <span class="detail-title">鐩稿叧闄勪欢</span>
-        <el-button
-          type="primary"
-          size="mini"
-          icon="el-icon-upload"
-          @click="handleUploadAttachment"
+      <div class="attachment-header">
+        <i class="el-icon-paperclip"></i>
+        <span class="attachment-title">鐩稿叧闄勪欢</span>
+        <span class="attachment-tip"
+          >鏀寔涓婁紶鍣ㄥ畼鍒╃敤鐩稿叧鏂囦欢 (鏈�澶歿{ attachmentLimit }}涓�)</span
         >
-          涓婁紶闄勪欢
-        </el-button>
       </div>
 
-      <div class="attachment-list">
-        <el-table :data="attachments" style="width: 100%">
-          <el-table-column label="鏂囦欢鍚嶇О" min-width="200">
+      <!-- 浣跨敤 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">
-              <div class="file-info">
-                <i :class="getFileIcon(scope.row.fileName)" style="margin-right: 8px; color: #409EFF;"></i>
-                <span>{{ scope.row.fileName }}</span>
-              </div>
+              <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" align="center">
+          <el-table-column label="鏂囦欢绫诲瀷" width="100">
             <template slot-scope="scope">
-              <el-tag size="small">{{ getFileType(scope.row.fileName) }}</el-tag>
+              <el-tag :type="getFileTagType(scope.row.fileName)" size="small">
+                {{ getFileTypeText(scope.row.fileName) }}
+              </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="鏂囦欢澶у皬" width="100" align="center">
+          <el-table-column label="涓婁紶鏃堕棿" width="200">
+            <template slot-scope="scope">
+              <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="鏂囦欢澶у皬" width="180">
             <template slot-scope="scope">
               <span>{{ formatFileSize(scope.row.fileSize) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="涓婁紶鏃堕棿" width="160" align="center">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.uploadTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="鎿嶄綔" width="150" align="center">
+          <el-table-column label="鎿嶄綔" width="260" fixed="right">
             <template slot-scope="scope">
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-view"
-                @click="handlePreviewAttachment(scope.row)"
-              >棰勮</el-button>
+                type="primary"
+                @click="handlePreview(scope.row)"
+                :disabled="!isPreviewable(scope.row.fileName)"
+              >
+                棰勮
+              </el-button>
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-download"
+                type="success"
                 @click="handleDownloadAttachment(scope.row)"
-              >涓嬭浇</el-button>
+              >
+                涓嬭浇
+              </el-button>
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-delete"
-                style="color: #F56C6C;"
-                @click="handleRemoveAttachment(scope.row)"
-              >鍒犻櫎</el-button>
+                type="danger"
+                @click="handleRemoveAttachment(scope.$index)"
+              >
+                鍒犻櫎
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -693,12 +609,15 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="鍣ㄥ畼鍚嶇О">
-              <el-input v-model="currentRecord.organName" readonly />
+              <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.transplantStatus" style="width: 100%">
+              <el-select
+                v-model="currentRecord.transplantstate"
+                style="width: 100%"
+              >
                 <el-option
                   v-for="dict in transplantStatusList"
                   :key="dict.value"
@@ -709,13 +628,39 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item label="寮冪敤璇存槑" v-if="currentRecord.transplantStatus === '0'">
+        <el-form-item
+          label="鏈Щ妞嶅師鍥�"
+          v-if="currentRecord.transplantstate === '0'"
+        >
           <el-input
             type="textarea"
             :rows="3"
-            v-model="currentRecord.abandonReason"
-            placeholder="璇疯緭鍏ュ純鐢ㄧ殑鍘熷洜璇存槑"
+            v-model="currentRecord.abandonreason"
+            placeholder="璇疯緭鍏ユ湭绉绘鍘熷洜"
           />
+        </el-form-item>
+        <el-form-item
+          label="绉绘鍖婚櫌"
+          v-if="currentRecord.transplantstate === '1'"
+        >
+          <el-select
+            v-model="currentRecord.hospitalno"
+            placeholder="璇烽�夋嫨绉绘鍖婚櫌"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="hospital in hospitalList"
+              :key="hospital.hospitalNo"
+              :label="hospital.hospitalName"
+              :value="hospital.hospitalNo"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="鍙楄�呭鍚�"
+          v-if="currentRecord.transplantstate === '1'"
+        >
+          <el-input v-model="currentRecord.name" placeholder="璇疯緭鍏ュ彈鑰呭鍚�" />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -724,139 +669,82 @@
       </div>
     </el-dialog>
 
-    <!-- 闅忚璁板綍瀵硅瘽妗� -->
-    <el-dialog
-      :title="followupDialogTitle"
-      :visible.sync="followupDialogVisible"
-      width="700px"
-    >
-      <el-form :model="currentFollowup" label-width="120px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="鍣ㄥ畼鍚嶇О">
-              <el-select v-model="currentFollowup.organNo" style="width: 100%">
-                <el-option
-                  v-for="organ in utilizationData.records"
-                  :key="organ.organNo"
-                  :label="organ.organName"
-                  :value="organ.organNo"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="闅忚绫诲瀷">
-              <el-select v-model="currentFollowup.followupType" style="width: 100%">
-                <el-option label="甯歌闅忚" value="routine" />
-                <el-option label="绱ф�ラ殢璁�" value="emergency" />
-                <el-option label="鐗规畩闅忚" value="special" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="闅忚鏃堕棿">
-              <el-date-picker
-                v-model="currentFollowup.followupTime"
-                type="datetime"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="闅忚鍖荤敓">
-              <el-input v-model="currentFollowup.followupDoctor" placeholder="璇疯緭鍏ラ殢璁垮尰鐢�" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="鍙楄�呮儏鍐�">
-          <el-input
-            type="textarea"
-            :rows="3"
-            v-model="currentFollowup.recipientCondition"
-            placeholder="璇疯緭鍏ュ彈鑰呭綋鍓嶆儏鍐�"
-          />
-        </el-form-item>
-        <el-form-item label="鐢ㄨ嵂鎯呭喌">
-          <el-input
-            type="textarea"
-            :rows="2"
-            v-model="currentFollowup.medicationSituation"
-            placeholder="璇疯緭鍏ョ敤鑽儏鍐�"
-          />
-        </el-form-item>
-        <el-form-item label="妫�鏌ョ粨鏋�">
-          <el-input
-            type="textarea"
-            :rows="2"
-            v-model="currentFollowup.testResults"
-            placeholder="璇疯緭鍏ユ鏌ョ粨鏋�"
-          />
-        </el-form-item>
-        <el-form-item label="涓嬫闅忚鏃堕棿">
-          <el-date-picker
-            v-model="currentFollowup.nextFollowupTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button @click="followupDialogVisible = false">鍙栨秷</el-button>
-        <el-button type="primary" @click="handleSaveFollowup">淇濆瓨</el-button>
-      </div>
-    </el-dialog>
+    <!-- 鏂囦欢棰勮瀵硅瘽妗� -->
+    <FilePreviewDialog
+      :visible="filePreviewVisible"
+      :file="currentPreviewFile"
+      @close="filePreviewVisible = false"
+      @download="handleDownloadAttachment"
+    />
   </div>
 </template>
 
 <script>
 import {
-  getOrganUtilizationDetail,
-  updateOrganUtilization,
-  addOrganUtilization,
-  saveUtilizationRecords,
-  saveFollowupRecord,
-  getHospitalList,
-  getLeaderList,
-  getCoordinatorList
-} from "./organUtilization";
+  completionList,
+  completionadd,
+  completionedit
+} from "@/api/businessApi";
+import UploadAttachment from "@/components/UploadAttachment"; // 鏂板瀵煎叆
+import FilePreviewDialog from "@/components/FilePreviewDialog"; // 鏂板瀵煎叆
+import CaseBasicInfo from "@/components/CaseBasicInfo";
+import dayjs from "dayjs"; // 鏂板瀵煎叆锛岀敤浜庢椂闂村鐞�
 
 export default {
   name: "OrganUtilizationDetail",
-  dicts: ["sys_user_sex", "sys_Organ", "sys_0_1"],
+  components: {
+    UploadAttachment,
+    FilePreviewDialog,
+    CaseBasicInfo
+  },
+  dicts: ["sys_BloodType", "sys_Organ", "sys_0_1"],
   data() {
     return {
-      // 琛ㄥ崟鏁版嵁
+      caseId: null,
+
+      // 琛ㄥ崟鏁版嵁 - 鏍规嵁鎺ュ彛鍙傛暟璋冩暣
       form: {
         id: undefined,
-        hospitalNo: "",
+        infoid: undefined,
+        inpatientno: "",
+        recordstate: "pending",
         caseNo: "",
-        donorName: "",
-        gender: "",
+        donorno: "",
+        treatmenthospitalname: "",
+        treatmenthospitalno: "",
+        sex: "",
+        name: "",
         age: "",
-        birthDate: "",
-        diagnosis: "",
-        utilizationStatus: "pending",
-        allocationTime: "",
-        registrant: "",
-        registrationTime: "",
-        isBodyDonation: "0",
-        receivingUnit: "",
-        responsibleUserId: "",
-        coordinatedUserId1: "",
-        coordinatedUserId2: "",
-        completionTime: ""
+        bloodtype: "",
+        idcardno: "",
+        diagnosisname: "",
+        completetime: "",
+        responsibleuserid: "",
+        responsibleusername: "",
+        coordinateduserido: "",
+        coordinatedusernameo: "",
+        coordinateduseridt: "",
+        coordinatedusernamet: "",
+        assessannex: "",
+        donateorgan: "",
+        isbodydonation: "0",
+        receivingunit: "",
+        createBy: "",
+        createTime: "",
+        updateBy: "",
+        updateTime: "",
+        attachments: []
       },
       // 琛ㄥ崟楠岃瘉瑙勫垯
       rules: {
-        donorName: [
+        name: [
           { required: true, message: "鎹愮尞鑰呭鍚嶄笉鑳戒负绌�", trigger: "blur" }
         ],
-        diagnosis: [
+        diagnosisname: [
           { required: true, message: "鐤剧梾璇婃柇涓嶈兘涓虹┖", trigger: "blur" }
+        ],
+        donorno: [
+          { required: true, message: "鎹愮尞鑰呯紪鍙蜂笉鑳戒负绌�", trigger: "blur" }
         ]
       },
       // 鍒╃敤璁板綍楠岃瘉瑙勫垯
@@ -870,10 +758,6 @@
       selectedOrgans: [],
       // 鍖婚櫌鍒楄〃
       hospitalList: [],
-      // 璐熻矗浜哄垪琛�
-      leaderList: [],
-      // 鍗忚皟鍛樺垪琛�
-      coordinatorList: [],
       // 绉绘鐘舵�佸垪琛�
       transplantStatusList: [
         { value: "1", label: "宸茬Щ妞�" },
@@ -882,7 +766,7 @@
       ],
       // 鍒╃敤璁板綍鏁版嵁
       utilizationData: {
-        records: []
+        serviceDonatecomporganList: []
       },
       // 闅忚璁板綍鏁版嵁
       followupData: {
@@ -890,15 +774,21 @@
       },
       // 闄勪欢鏁版嵁
       attachments: [],
-      // 褰撳墠婵�娲荤殑鍙楄�呮爣绛�
-      activeRecipientTab: "",
+      // 灞曞紑鐨勮keys
+      expandedRows: [],
       // 缂栬緫瀵硅瘽妗�
       editDialogVisible: false,
       currentRecord: {},
       currentEditIndex: -1,
-      // 闅忚瀵硅瘽妗�
-      followupDialogVisible: false,
-      followupDialogTitle: "鏂板闅忚璁板綍",
+      // 闄勪欢鐩稿叧閰嶇疆 - 鏂板
+      attachmentFileList: [],
+      attachmentLimit: 10,
+      attachmentAccept:
+        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+
+      // 鏂囦欢棰勮鐩稿叧 - 鏂板
+      filePreviewVisible: false,
+      currentPreviewFile: null,
       currentFollowup: {},
       isEditingFollowup: false
     };
@@ -908,140 +798,179 @@
     currentUser() {
       return JSON.parse(sessionStorage.getItem("user") || "{}");
     },
-    // 涓嶅畬鏁寸殑璁板綍鏁伴噺
-    incompleteRecords() {
-      return this.utilizationData.records.filter(
-        record =>
-          !record.caseNo ||
-          !record.hospitalNo ||
-          !record.recipientName ||
-          !record.transplantTime
+    // 宸茬Щ妞嶆暟閲�
+    transplantedCount() {
+      if (!this.utilizationData.serviceDonatecomporganList) return 0;
+      return this.utilizationData.serviceDonatecomporganList.filter(
+        record => record.transplantstate === "1"
       ).length;
     },
     // 鍞竴鍖婚櫌鏁伴噺
     uniqueHospitals() {
-      const hospitals = this.utilizationData.records
-        .map(record => record.hospitalNo)
+      if (!this.utilizationData.serviceDonatecomporganList) return 0;
+      const hospitals = this.utilizationData.serviceDonatecomporganList
+        .map(record => record.hospitalno)
         .filter(Boolean);
       return new Set(hospitals).size;
+    },
+    // 鑾峰彇鍣ㄥ畼瀛楀吀
+    organDict() {
+      return this.dict.type.sys_Organ || [];
     }
   },
   created() {
-    const id = this.$route.query.id;
-    if (id) {
-      this.getDetail(id);
-    } else {
-      this.generateCaseNo();
-      this.form.registrant = this.currentUser.username || "褰撳墠鐢ㄦ埛";
-      this.form.registrationTime = new Date()
+    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: {
+    // 鍒濆鍖栨暟鎹�
+    initData() {
+      this.caseId = this.$route.query.infoid;
+
+      if (!this.caseId) {
+        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.getHospitalData();
-    this.getLeaderData();
-    this.getCoordinatorData();
-  },
-  methods: {
-    // 鐢熸垚浣忛櫌鍙�
-    generateCaseNo() {
+
+      this.generateDonorNo();
+      this.getDetail();
+      this.getHospitalData();
+    },
+
+    // 鐢熸垚鎹愮尞鑰呯紪鍙�
+    generateDonorNo() {
       const timestamp = Date.now().toString();
-      this.form.hospitalNo = "D" + timestamp.slice(-6);
-      this.form.caseNo = "C" + timestamp.slice(-6);
+      this.form.donorno = "D" + timestamp.slice(-8);
+      this.form.caseNo = "CASE" + timestamp.slice(-6);
+      this.form.inpatientno = "IP" + timestamp.slice(-6);
     },
+
     // 鑾峰彇璇︽儏
-    getDetail(id) {
+    async getDetail() {
       this.loading = true;
-      getOrganUtilizationDetail(id)
-        .then(response => {
-          if (response.code === 200) {
-            this.form = response.data;
-            if (response.data.utilizationRecords) {
-              this.utilizationData.records = response.data.utilizationRecords;
-              this.selectedOrgans = response.data.utilizationRecords.map(
-                item => item.organNo
-              );
-              if (this.utilizationData.records.length > 0) {
-                this.activeRecipientTab = this.utilizationData.records[0].organNo;
-              }
-            }
-            if (response.data.followupRecords) {
-              this.followupData.records = response.data.followupRecords;
-            }
+      try {
+        const response = await completionList({ infoid: this.caseId });
+        if (
+          response.code === 200 &&
+          response.data &&
+          response.data.length > 0
+        ) {
+          const data = response.data[0];
+          // 濉厖琛ㄥ崟鏁版嵁
+          Object.assign(this.form, data);
+
+          // 澶勭悊鎹愮尞鍣ㄥ畼瀛楁
+          if (data.donateorgan) {
+            const organArray = Array.isArray(data.donateorgan)
+              ? data.donateorgan
+              : (data.donateorgan || "").split(",").filter(item => item);
+            this.selectedOrgans = organArray;
           }
-          this.loading = false;
-        })
-        .catch(error => {
-          console.error("鑾峰彇鍣ㄥ畼鍒╃敤璇︽儏澶辫触:", error);
-          this.loading = false;
-          this.$message.error("鑾峰彇璇︽儏澶辫触");
-        });
+
+          // 澶勭悊鍣ㄥ畼鍒╃敤璁板綍
+          if (data.serviceDonatecomporganList) {
+            this.utilizationData.serviceDonatecomporganList = Array.isArray(
+              data.serviceDonatecomporganList
+            )
+              ? data.serviceDonatecomporganList.map(record => ({
+                  ...record,
+                  transplantstate: record.transplantstate
+                    ? record.transplantstate.toString()
+                    : "1"
+                }))
+              : [];
+          }
+
+          // 鍒濆鍖栭檮浠�
+          if (this.form.assessannex) {
+            this.form.attachments = JSON.parse(this.form.assessannex);
+            this.attachments = Array.isArray(this.form.attachments)
+              ? [...this.form.attachments]
+              : [];
+          }
+
+          this.$message.success("鏁版嵁鍔犺浇鎴愬姛");
+        } else {
+          this.$message.warning("鏈壘鍒板搴旂殑鍣ㄥ畼鍒╃敤鏁版嵁");
+        }
+      } catch (error) {
+        console.error("鑾峰彇鍣ㄥ畼鍒╃敤璇︽儏澶辫触:", error);
+        this.$message.error("鑾峰彇璇︽儏澶辫触");
+      } finally {
+        this.loading = false;
+      }
     },
+
     // 鑾峰彇鍖婚櫌鏁版嵁
-    getHospitalData() {
-      getHospitalList().then(response => {
-        if (response.code === 200) {
-          this.hospitalList = response.data;
-        }
-      });
+    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("鑾峰彇鍖婚櫌鏁版嵁澶辫触");
+      }
     },
-    // 鑾峰彇璐熻矗浜烘暟鎹�
-    getLeaderData() {
-      getLeaderList().then(response => {
-        if (response.code === 200) {
-          this.leaderList = response.data;
-        }
-      });
-    },
-    // 鑾峰彇鍗忚皟鍛樻暟鎹�
-    getCoordinatorData() {
-      getCoordinatorList().then(response => {
-        if (response.code === 200) {
-          this.coordinatorList = response.data;
-        }
-      });
-    },
+
     // 鍣ㄥ畼閫夋嫨鐘舵�佸彉鍖�
     handleOrganSelectionChange(selectedValues) {
-      const currentOrganNos = this.utilizationData.records.map(
-        item => item.organNo
+      if (!this.utilizationData.serviceDonatecomporganList) {
+        this.utilizationData.serviceDonatecomporganList = [];
+      }
+
+      const currentOrganValues = this.utilizationData.serviceDonatecomporganList.map(
+        item => item.organno
       );
+
+      // 澶勭悊浜掓枼閫昏緫
+      this.handleExclusiveSelections(selectedValues);
+
+      // 鏇存柊鎹愮尞鍣ㄥ畼瀛楁
+      this.form.donateorgan = selectedValues.join(",");
 
       // 鏂板閫夋嫨鐨勫櫒瀹�
       selectedValues.forEach(organValue => {
-        if (!currentOrganNos.includes(organValue)) {
-          const organInfo = this.dict.type.sys_Organ.find(
-            item => item.value === organValue
-          );
-          if (organInfo) {
-            this.utilizationData.records.push({
-              organName: organInfo.label,
-              organNo: organValue,
-              id: null,
-              utilizationId: this.form.id,
-              caseNo: "",
-              hospitalNo: "",
-              hospitalName: "",
-              recipientName: "",
-              transplantDoctor: "",
-              transplantTime: "",
-              transplantStatus: "1",
-              abandonReason: "",
-              recipientBirthDate: "",
-              recipientGender: "",
-              transplantCenter: "",
-              location: "",
-              originalDisease: "",
-              testIndicators: ""
-            });
-          }
+        if (!currentOrganValues.includes(organValue)) {
+          this.createOrganRecord(organValue);
         }
       });
 
       // 绉婚櫎鍙栨秷閫夋嫨鐨勫櫒瀹�
-      this.utilizationData.records = this.utilizationData.records.filter(
+      this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter(
         record => {
-          if (selectedValues.includes(record.organNo)) {
+          if (selectedValues.includes(record.organno)) {
             return true;
           } else {
             if (record.id) {
@@ -1055,13 +984,13 @@
                 }
               )
                 .then(() => {
-                  this.utilizationData.records = this.utilizationData.records.filter(
-                    r => r.organNo !== record.organNo
+                  this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter(
+                    r => r.organno !== record.organno
                   );
                   this.$message.success("鍒犻櫎鎴愬姛");
                 })
                 .catch(() => {
-                  this.selectedOrgans.push(record.organNo);
+                  this.selectedOrgans.push(record.organno);
                 });
               return true;
             } else {
@@ -1071,19 +1000,115 @@
         }
       );
     },
+
+    // 澶勭悊浜掓枼閫夋嫨
+    handleExclusiveSelections(selectedValues) {
+      // 濡傛灉閫夋嫨浜�"鍙岃偩"(鍋囪瀛楀吀鍊间负C64)锛岃嚜鍔ㄥ彇娑堝崟鐙殑"宸﹁偩"(C64L)鍜�"鍙宠偩"(C64R)閫夋嫨
+      if (selectedValues.includes("C64")) {
+        this.selectedOrgans = selectedValues.filter(
+          item => item !== "C64L" && item !== "C64R"
+        );
+      }
+      // 濡傛灉閫夋嫨浜�"宸﹁偩"鎴�"鍙宠偩"锛屽彇娑�"鍙岃偩"閫夋嫨
+      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 (
+        selectedValues.includes("C34L") ||
+        selectedValues.includes("C34R")
+      ) {
+        this.selectedOrgans = selectedValues.filter(item => item !== "C34");
+      }
+    },
+
+    // 鍒涘缓鍣ㄥ畼璁板綍
+    createOrganRecord(organValue) {
+      const organName = this.getOrganLabel(organValue);
+
+      this.utilizationData.serviceDonatecomporganList.push({
+        organname: organName,
+        organno: organValue,
+        caseNo: "",
+        hospitalno: "",
+        hospitalname: "",
+        name: "",
+        transplantdoct: "",
+        transplanttime: "",
+        transplantstate: "1",
+        abandonreason: "",
+        sex: "",
+        age: "",
+        birthday: "",
+        phone: "",
+        residenceaddress: "",
+        residenceprovince: "",
+        residenceprovincename: "",
+        residencecity: "",
+        residencecityname: "",
+        residencetown: "",
+        residencetownname: "",
+        residencecommunity: "",
+        residencecommunityname: "",
+        residencecountycode: "",
+        residencecountyname: "",
+        idcardtype: "",
+        idcardno: "",
+        ageunit: ""
+      });
+    },
+
+    // 鏍规嵁瀛楀吀value鑾峰彇label
+    getOrganLabel(organValue) {
+      const dictItem = this.organDict.find(item => item.value === organValue);
+      return dictItem ? dictItem.label : organValue;
+    },
+
     // 鍖婚櫌閫夋嫨鍙樺寲
     handleHospitalChange(row, hospitalNo) {
       const hospital = this.hospitalList.find(
         item => item.hospitalNo === hospitalNo
       );
       if (hospital) {
-        row.hospitalName = hospital.hospitalName;
+        row.hospitalname = hospital.hospitalName;
       }
     },
+
+    // 绉绘鐘舵�佸彉鍖栧鐞�
+    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];
+        }
+      }
+    },
+
+    // 琛屽睍寮�浜嬩欢
+    handleExpandChange(row, expandedRows) {
+      this.expandedRows = expandedRows.map(item => item.organno);
+    },
+
     // 缂栬緫鍒╃敤璁板綍
     handleEditUtilization(row) {
-      const index = this.utilizationData.records.findIndex(
-        item => item.organNo === row.organNo
+      const index = this.utilizationData.serviceDonatecomporganList.findIndex(
+        item => item.organno === row.organno
       );
       if (index !== -1) {
         this.currentRecord = { ...row };
@@ -1091,46 +1116,77 @@
         this.editDialogVisible = true;
       }
     },
+
     // 纭缂栬緫
     handleEditConfirm() {
       if (this.currentEditIndex !== -1) {
-        this.utilizationData.records[this.currentEditIndex] = {
+        this.utilizationData.serviceDonatecomporganList[
+          this.currentEditIndex
+        ] = {
           ...this.currentRecord
         };
         this.$message.success("鍒╃敤璁板綍鏇存柊鎴愬姛");
         this.editDialogVisible = false;
       }
     },
+
+    // 鍒犻櫎鍣ㄥ畼璁板綍
+    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(() => {});
+    },
+
     // 鍣ㄥ畼琛屾牱寮�
     getOrganRowClassName({ row }) {
       if (
-        !row.caseNo ||
-        !row.hospitalNo ||
-        !row.recipientName ||
-        !row.transplantTime
+        row.transplantstate === "1" &&
+        (!row.caseNo || !row.hospitalno || !row.name || !row.transplanttime)
       ) {
+        return "warning-row";
+      }
+      if (row.transplantstate === "0" && !row.abandonreason) {
         return "warning-row";
       }
       return "";
     },
+
     // 鑾峰彇鐘舵�佹爣绛剧被鍨�
     getStatusTagType(status) {
       const typeMap = {
         completed: "success",
-        in_progress: "warning",
+        processing: "warning",
         pending: "info"
       };
       return typeMap[status] || "info";
     },
+
     // 鑾峰彇鐘舵�佹枃鏈�
     getStatusText(status) {
       const textMap = {
         completed: "宸插畬鎴�",
-        in_progress: "杩涜涓�",
+        processing: "杩涜涓�",
         pending: "寰呭鐞�"
       };
       return textMap[status] || "鏈煡";
     },
+
     // 鑾峰彇闅忚绫诲瀷鏍囩
     getFollowupTypeTag(type) {
       const typeMap = {
@@ -1140,6 +1196,7 @@
       };
       return typeMap[type] || "info";
     },
+
     // 鑾峰彇闅忚绫诲瀷鏂囨湰
     getFollowupTypeText(type) {
       const textMap = {
@@ -1149,62 +1206,102 @@
       };
       return textMap[type] || "鏈煡";
     },
+
     // 淇濆瓨鍩烘湰淇℃伅
-    handleSave() {
-      this.$refs.form.validate(valid => {
+    async handleSave() {
+      this.$refs.form.validate(async valid => {
         if (valid) {
           this.saveLoading = true;
-          const apiMethod = this.form.id
-            ? updateOrganUtilization
-            : addOrganUtilization;
+          try {
+            const saveData = {
+              ...this.form,
+              assessannex: JSON.stringify(this.attachments),
+              donateorgan: this.selectedOrgans.join(","),
+              serviceDonatecomporganList:
+                this.utilizationData.serviceDonatecomporganList || []
+            };
 
-          apiMethod(this.form)
-            .then(response => {
-              if (response.code === 200) {
-                this.$message.success("淇濆瓨鎴愬姛");
-                if (!this.form.id) {
-                  this.form.id = response.data.id;
-                  this.$router.replace({
-                    query: { ...this.$route.query, id: this.form.id }
-                  });
-                }
+            const apiMethod = this.form.id ? completionedit : completionadd;
+            const response = await apiMethod(saveData);
+
+            if (response.code === 200) {
+              this.$message.success("淇濆瓨鎴愬姛");
+              if (!this.form.id && response.data && response.data.id) {
+                this.form.id = response.data.id;
+                this.$router.replace({
+                  query: { ...this.$route.query, id: this.form.id }
+                });
               }
-            })
-            .catch(error => {
-              console.error("淇濆瓨澶辫触:", error);
-              this.$message.error("淇濆瓨澶辫触");
-            })
-            .finally(() => {
-              this.saveLoading = false;
-            });
+            } else {
+              this.$message.error("淇濆瓨澶辫触锛�" + (response.msg || "鏈煡閿欒"));
+            }
+          } catch (error) {
+            console.error("淇濆瓨澶辫触:", error);
+            this.$message.error("淇濆瓨澶辫触");
+          } finally {
+            this.saveLoading = false;
+          }
         }
       });
     },
+
     // 淇濆瓨鍒╃敤璁板綍
-    handleSaveUtilization() {
-      if (!this.form.id) {
-        this.$message.warning("璇峰厛淇濆瓨鍩烘湰淇℃伅");
+    async handleSaveUtilization() {
+      if (
+        !this.utilizationData.serviceDonatecomporganList ||
+        this.utilizationData.serviceDonatecomporganList.length === 0
+      ) {
+        this.$message.warning("璇峰厛娣诲姞鍒╃敤璁板綍");
         return;
       }
 
       this.saveLoading = true;
-      saveUtilizationRecords(this.form.id, this.utilizationData.records)
-        .then(response => {
-          if (response.code === 200) {
-            this.$message.success("鍒╃敤璁板綍淇濆瓨鎴愬姛");
-          }
-        })
-        .catch(error => {
-          console.error("淇濆瓨鍒╃敤璁板綍澶辫触:", error);
-          this.$message.error("淇濆瓨鍒╃敤璁板綍澶辫触");
-        })
-        .finally(() => {
-          this.saveLoading = false;
-        });
+      try {
+        const saveData = {
+          ...this.form,
+          attachments: this.attachments,
+          donateorgan: this.selectedOrgans.join(","),
+          serviceDonatecomporganList:
+            this.utilizationData.serviceDonatecomporganList || []
+        };
+
+        const response = await completionedit(saveData);
+
+        if (response.code === 200) {
+          this.$message.success("鍒╃敤璁板綍淇濆瓨鎴愬姛");
+        } else {
+          this.$message.error(
+            "淇濆瓨鍒╃敤璁板綍澶辫触锛�" + (response.msg || "鏈煡閿欒")
+          );
+        }
+      } catch (error) {
+        console.error("淇濆瓨鍒╃敤璁板綍澶辫触:", error);
+        this.$message.error("淇濆瓨鍒╃敤璁板綍澶辫触");
+      } finally {
+        this.saveLoading = false;
+      }
     },
+
     // 纭瀹屾垚鍒╃敤
-    handleConfirmUtilization() {
-      if (this.incompleteRecords > 0) {
+    async handleConfirmUtilization() {
+      // 妫�鏌ュ埄鐢ㄨ褰曟槸鍚﹀畬鏁�
+      const incompleteRecords = this.utilizationData.serviceDonatecomporganList.filter(
+        record => {
+          if (record.transplantstate === "1") {
+            return (
+              !record.caseNo ||
+              !record.hospitalno ||
+              !record.name ||
+              !record.transplanttime
+            );
+          } else if (record.transplantstate === "0") {
+            return !record.abandonreason;
+          }
+          return false;
+        }
+      );
+
+      if (incompleteRecords.length > 0) {
         this.$message.warning("璇峰厛瀹屽杽鎵�鏈夊埄鐢ㄨ褰曠殑淇℃伅");
         return;
       }
@@ -1214,81 +1311,53 @@
         cancelButtonText: "鍙栨秷",
         type: "warning"
       })
-        .then(() => {
+        .then(async () => {
           this.confirmLoading = true;
-          this.form.utilizationStatus = "completed";
-          this.form.completionTime = new Date()
-            .toISOString()
-            .replace("T", " ")
-            .substring(0, 19);
+          this.form.recordstate = "completed";
+          this.form.completetime =
+            this.form.completetime ||
+            new Date()
+              .toISOString()
+              .replace("T", " ")
+              .substring(0, 19);
 
-          updateOrganUtilization(this.form)
-            .then(response => {
-              if (response.code === 200) {
-                this.$message.success("鍣ㄥ畼鍒╃敤宸插畬鎴�");
-              }
-            })
-            .catch(error => {
-              console.error("纭鍒╃敤澶辫触:", error);
-              this.$message.error("纭鍒╃敤澶辫触");
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        })
-        .catch(() => {});
-    },
-    // 瀹屾垚鍒╃敤
-    handleComplete() {
-      this.handleConfirmUtilization();
-    },
-    // 鏂板闅忚璁板綍
-    handleAddFollowup() {
-      this.followupDialogTitle = "鏂板闅忚璁板綍";
-      this.isEditingFollowup = false;
-      this.currentFollowup = {
-        organNo: this.utilizationData.records.length > 0 ? this.utilizationData.records[0].organNo : "",
-        followupTime: new Date().toISOString().replace("T", " ").substring(0, 19),
-        followupType: "routine",
-        recipientCondition: "",
-        medicationSituation: "",
-        testResults: "",
-        nextFollowupTime: "",
-        followupDoctor: ""
-      };
-      this.followupDialogVisible = true;
-    },
-    // 鏌ョ湅闅忚璁板綍
-    handleViewFollowup(record) {
-      this.currentFollowup = { ...record };
-      this.followupDialogTitle = "鏌ョ湅闅忚璁板綍";
-      this.followupDialogVisible = true;
-    },
-    // 缂栬緫闅忚璁板綍
-    handleEditFollowup(record) {
-      this.followupDialogTitle = "缂栬緫闅忚璁板綍";
-      this.isEditingFollowup = true;
-      this.currentFollowup = { ...record };
-      this.followupDialogVisible = true;
-    },
-    // 鍒犻櫎闅忚璁板綍
-    handleDeleteFollowup(record) {
-      this.$confirm("纭畾瑕佸垹闄よ繖鏉¢殢璁胯褰曞悧锛�", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          const index = this.followupData.records.findIndex(
-            item => item.id === record.id
-          );
-          if (index !== -1) {
-            this.followupData.records.splice(index, 1);
-            this.$message.success("闅忚璁板綍鍒犻櫎鎴愬姛");
+          try {
+            const saveData = {
+              ...this.form,
+              attachments: this.attachments,
+              donateorgan: this.selectedOrgans.join(","),
+              serviceDonatecomporganList:
+                this.utilizationData.serviceDonatecomporganList || []
+            };
+
+            const response = await completionedit(saveData);
+
+            if (response.code === 200) {
+              this.$message.success("鍣ㄥ畼鍒╃敤宸插畬鎴�");
+            } else {
+              this.$message.error(
+                "纭鍒╃敤澶辫触锛�" + (response.msg || "鏈煡閿欒")
+              );
+              this.form.recordstate = "pending";
+              this.form.completetime = "";
+            }
+          } catch (error) {
+            console.error("纭鍒╃敤澶辫触:", error);
+            this.$message.error("纭鍒╃敤澶辫触");
+            this.form.recordstate = "pending";
+            this.form.completetime = "";
+          } finally {
+            this.confirmLoading = false;
           }
         })
         .catch(() => {});
     },
+
+    // 瀹屾垚鍒╃敤
+    handleComplete() {
+      this.handleConfirmUtilization();
+    },
+
     // 淇濆瓨闅忚璁板綍
     handleSaveFollowup() {
       if (!this.currentFollowup.organNo) {
@@ -1304,10 +1373,10 @@
       this.saveLoading = true;
 
       // 鑾峰彇鍣ㄥ畼鍚嶇О
-      const organRecord = this.utilizationData.records.find(
-        item => item.organNo === this.currentFollowup.organNo
+      const organRecord = this.utilizationData.serviceDonatecomporganList.find(
+        item => item.organno === this.currentFollowup.organNo
       );
-      const organName = organRecord ? organRecord.organName : "";
+      const organName = organRecord ? organRecord.organname : "";
 
       const followupData = {
         ...this.currentFollowup,
@@ -1315,165 +1384,198 @@
         utilizationId: this.form.id
       };
 
-      saveFollowupRecord(followupData)
-        .then(response => {
-          if (response.code === 200) {
-            if (this.isEditingFollowup) {
-              // 鏇存柊鐜版湁璁板綍
-              const index = this.followupData.records.findIndex(
-                item => item.id === this.currentFollowup.id
-              );
-              if (index !== -1) {
-                this.followupData.records[index] = response.data;
-              }
-            } else {
-              // 娣诲姞鏂拌褰�
-              this.followupData.records.push(response.data);
-            }
-            this.$message.success("闅忚璁板綍淇濆瓨鎴愬姛");
-            this.followupDialogVisible = false;
+      // 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
+            };
           }
-        })
-        .catch(error => {
-          console.error("淇濆瓨闅忚璁板綍澶辫触:", error);
-          this.$message.error("淇濆瓨闅忚璁板綍澶辫触");
-        })
-        .finally(() => {
-          this.saveLoading = false;
-        });
+        } else {
+          // 娣诲姞鏂拌褰�
+          this.followupData.records.push({ ...followupData, id: Date.now() });
+        }
+        this.$message.success("闅忚璁板綍淇濆瓨鎴愬姛");
+        this.followupDialogVisible = false;
+        this.saveLoading = false;
+      }, 1000);
     },
-    // 涓婁紶闄勪欢
-    handleUploadAttachment() {
-      this.$message.info("闄勪欢涓婁紶鍔熻兘");
+    /** 闄勪欢鍙樺寲澶勭悊 */
+    handleAttachmentChange(fileList) {
+      this.attachmentFileList = fileList;
     },
-    // 棰勮闄勪欢
-    handlePreviewAttachment(attachment) {
-      this.$message.info("闄勪欢棰勮鍔熻兘");
-    },
-    // 涓嬭浇闄勪欢
-    handleDownloadAttachment(attachment) {
-      this.$message.info("闄勪欢涓嬭浇鍔熻兘");
-    },
-    // 鍒犻櫎闄勪欢
-    handleRemoveAttachment(attachment) {
-      this.$confirm("纭畾瑕佸垹闄よ繖涓檮浠跺悧锛�", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
+
+    /** 闄勪欢绉婚櫎澶勭悊 */
+    handleAttachmentRemove(file) {
+      if (file.url) {
+        const index = this.attachments.findIndex(
+          item => item.path === file.url || item.fileUrl === file.url
+        );
+        if (index > -1) {
+          this.attachments.splice(index, 1);
           this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
-        })
-        .catch(() => {});
+        }
+      }
     },
-    // 鑾峰彇鏂囦欢鍥炬爣
-    getFileIcon(fileName) {
-      const ext = fileName
-        .split(".")
-        .pop()
-        .toLowerCase();
-      const iconMap = {
-        pdf: "el-icon-document",
-        doc: "el-icon-document",
-        docx: "el-icon-document",
-        xls: "el-icon-document",
-        xlsx: "el-icon-document",
-        jpg: "el-icon-picture",
-        jpeg: "el-icon-picture",
-        png: "el-icon-picture"
+    /** 涓婁紶鎴愬姛澶勭悊 */
+    handleUploadSuccess({ file, fileList, response }) {
+      if (response.code === 200) {
+        const attachmentObj = {
+          fileName: file.name,
+          path: response.fileUrl || file.url,
+          fileUrl: response.fileUrl || file.url,
+          fileType: this.getFileExtension(file.name),
+          fileSize: file.size,
+          uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
+        };
+
+        if (!Array.isArray(this.attachments)) {
+          this.attachments = [];
+        }
+
+        this.attachments.push(attachmentObj);
+        this.attachmentFileList = fileList;
+        this.$message.success("鏂囦欢涓婁紶鎴愬姛");
+      }
+    },
+
+    /** 涓婁紶閿欒澶勭悊 */
+    handleUploadError({ file, fileList, error }) {
+      console.error("闄勪欢涓婁紶澶辫触:", error);
+      this.$message.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+    },
+
+    /** 鎵嬪姩鍒犻櫎闄勪欢 */
+    handleRemoveAttachment(index) {
+      this.attachments.splice(index, 1);
+      this.attachmentFileList.splice(index, 1);
+      this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+    },
+
+    /** 鏂囦欢棰勮 */
+    handlePreview(file) {
+      this.currentPreviewFile = {
+        fileName: file.fileName,
+        fileUrl: file.path || file.fileUrl,
+        fileType: this.getFileType(file.fileName)
       };
-      return iconMap[ext] || "el-icon-document";
+      this.filePreviewVisible = true;
     },
-    // 鑾峰彇鏂囦欢绫诲瀷
+    /** 鏂囦欢涓嬭浇 */
+    handleDownloadAttachment(file) {
+      const fileUrl = file.path || file.fileUrl;
+      const fileName = file.fileName;
+
+      if (fileUrl) {
+        const link = document.createElement("a");
+        link.href = fileUrl;
+        link.download = fileName;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        this.$message.success("寮�濮嬩笅杞芥枃浠�");
+      } else {
+        this.$message.warning("鏂囦欢璺緞涓嶅瓨鍦紝鏃犳硶涓嬭浇");
+      }
+    },
+
+    /** 鑾峰彇鏂囦欢绫诲瀷 */
     getFileType(fileName) {
-      const ext = fileName
+      if (!fileName) return "other";
+      const extension = fileName
         .split(".")
         .pop()
         .toLowerCase();
-      const typeMap = {
-        pdf: "PDF",
-        doc: "DOC",
-        docx: "DOCX",
-        xls: "XLS",
-        xlsx: "XLSX",
-        jpg: "JPG",
-        jpeg: "JPEG",
-        png: "PNG"
-      };
-      return typeMap[ext] || ext.toUpperCase();
+      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
+      const pdfTypes = ["pdf"];
+      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
+      if (imageTypes.includes(extension)) return "image";
+      if (pdfTypes.includes(extension)) return "pdf";
+      if (officeTypes.includes(extension)) return "office";
+      return "other";
     },
-    // 鏂囦欢澶у皬鏍煎紡鍖�
-    formatFileSize(size) {
-      if (size === 0) return "0 B";
+
+    /** 鑾峰彇鏂囦欢鍥炬爣棰滆壊 */
+    getFileIconColor(fileName) {
+      const type = this.getFileType(fileName);
+      const colorMap = {
+        image: "#67C23A",
+        pdf: "#F56C6C",
+        office: "#409EFF",
+        other: "#909399"
+      };
+      return colorMap[type] || "#909399";
+    },
+
+    /** 鑾峰彇鏂囦欢鏍囩绫诲瀷 */
+    getFileTagType(fileName) {
+      const type = this.getFileType(fileName);
+      const typeMap = {
+        image: "success",
+        pdf: "danger",
+        office: "primary",
+        other: "info"
+      };
+      return typeMap[type] || "info";
+    },
+
+    /** 鑾峰彇鏂囦欢绫诲瀷鏂囨湰 */
+    getFileTypeText(fileName) {
+      const type = this.getFileType(fileName);
+      const textMap = {
+        image: "鍥剧墖",
+        pdf: "PDF",
+        office: "鏂囨。",
+        other: "鍏朵粬"
+      };
+      return textMap[type] || "鏈煡";
+    },
+
+    /** 妫�鏌ユ槸鍚﹀彲棰勮 */
+    isPreviewable(fileName) {
+      const type = this.getFileType(fileName);
+      return ["image", "pdf"].includes(type);
+    },
+
+    /** 鑾峰彇鏂囦欢鎵╁睍鍚� */
+    getFileExtension(filename) {
+      return filename
+        .split(".")
+        .pop()
+        .toLowerCase();
+    },
+
+    /** 鏍煎紡鍖栨枃浠跺ぇ灏� */
+    formatFileSize(bytes) {
+      if (!bytes || bytes === 0) return "0 B";
       const k = 1024;
       const sizes = ["B", "KB", "MB", "GB"];
-      const i = Math.floor(Math.log(size) / Math.log(k));
-      return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
     },
-    // 鏃堕棿鏍煎紡鍖�
-    parseTime(time) {
-      if (!time) return "";
-      const date = new Date(time);
-      return `${date.getFullYear()}-${(date.getMonth() + 1)
-        .toString()
-        .padStart(2, "0")}-${date
-        .getDate()
-        .toString()
-        .padStart(2, "0")} ${date
-        .getHours()
-        .toString()
-        .padStart(2, "0")}:${date
-        .getMinutes()
-        .toString()
-        .padStart(2, "0")}`;
-    },
-    // 鎻愪氦褰掓。
-    handleSubmitArchive() {
-      this.$confirm("纭鎻愪氦褰掓。鍚楋紵褰掓。鍚庡皢鏃犳硶淇敼鏁版嵁銆�", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          this.$message.success("鎻愪氦褰掓。鎴愬姛");
-        })
-        .catch(() => {});
-    },
-    // 鎾ら攢褰掓。
-    handleRevokeArchive() {
-      this.$confirm("纭鎾ら攢褰掓。鍚楋紵", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          this.$message.success("鎾ら攢褰掓。鎴愬姛");
-        })
-        .catch(() => {});
-    },
-    // 缁堟妗堜緥
-    handleTerminateCase() {
-      this.$confirm("纭缁堟妗堜緥鍚楋紵", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          this.$message.success("妗堜緥宸茬粓姝�");
-        })
-        .catch(() => {});
-    },
-    // 鎭㈠妗堜緥
-    handleRestoreCase() {
-      this.$confirm("纭鎭㈠妗堜緥鍚楋紵", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          this.$message.success("妗堜緥宸叉仮澶�");
-        })
-        .catch(() => {});
+
+    /** 鏃ユ湡鏃堕棿鏍煎紡鍖� */
+    formatDateTime(dateTime) {
+      if (!dateTime) return "";
+      try {
+        const date = new Date(dateTime);
+        if (isNaN(date.getTime())) return dateTime;
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        return `${year}-${month}-${day} ${hours}:${minutes}`;
+      } catch (error) {
+        return dateTime;
+      }
     }
   }
 };
@@ -1486,29 +1588,81 @@
   min-height: 100vh;
 }
 
-.detail-card, .utilization-card, .recipient-card, .followup-card, .attachment-card {
+.detail-card,
+.utilization-card,
+.followup-card,
+.attachment-card {
   margin-bottom: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border: 1px solid #e4e7ed;
 }
 
+/* 鏂板闄勪欢澶撮儴鏍峰紡 */
+.attachment-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.attachment-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 16px;
+}
+
+.attachment-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-left: auto;
+}
+
+.attachment-list {
+  margin-top: 20px;
+}
+
+.list-title {
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: #303133;
+  font-size: 14px;
+}
+
+.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;
   color: #303133;
   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;
@@ -1518,6 +1672,7 @@
 :deep(.el-table__row.warning-row) {
   background-color: #fdf6ec;
 }
+
 :deep(.el-table__row.default-row) {
   background-color: #f0f9ff;
 }
@@ -1535,6 +1690,7 @@
   border-radius: 8px;
   color: white;
 }
+
 .stat-item {
   display: flex;
   flex-direction: column;
@@ -1542,84 +1698,238 @@
   padding: 10px;
   text-align: center;
 }
+
 .stat-label {
-  font-size: 18px;
+  font-size: 12px;
   opacity: 0.9;
   margin-bottom: 5px;
+  color: rgba(255, 255, 255, 0.9);
 }
+
 .stat-value {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
+  color: white;
 }
+
+/* 灞曞紑琛屾牱寮� */
+.recipient-detail-expand {
+  padding: 20px;
+  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) {
-  border-radius: 4px;
-  transition: border-color 0.3s ease;
-}
+
 :deep(.el-input__inner:focus) {
-  border-color: #409EFF;
+  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%);
+  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);
 }
 
-/* 鏍囩椤垫牱寮� */
-:deep(.el-tabs__item) {
-  font-weight: 500;
-}
-:deep(.el-tabs__active-bar) {
-  background: linear-gradient(135deg, #409EFF 0%, #3375e0 100%);
-}
-/* 骞虫澘璁惧閫傞厤 */
-@media (max-width: 1024px) {
-  .organ-utilization-detail {
-    padding: 15px;
-  }
-  :deep(.el-col) {
-    margin-bottom: 10px;
-  }
+/* 搴曢儴鎿嶄綔鎸夐挳 */
+.dialog-footer {
+  margin-top: 20px;
+  text-align: center;
+  padding-top: 20px;
+  border-top: 1px solid #e4e7ed;
 }
 
-/* 鎵嬫満璁惧閫傞厤 */
-@media (max-width: 768px) {
-  .organ-utilization-detail {
-    padding: 10px;
-  }
-  .detail-title {
-    font-size: 16px;
-  }
-  :deep(.el-table .cell) {
-    padding: 8px 4px;
-    font-size: 12px;
-  }
-  :deep(.el-form-item__label) {
-    font-size: 12px;
-  }
+.dialog-footer .el-button {
+  margin: 0 10px;
+  min-width: 120px;
 }
 
-/* 瓒呭皬灞忓箷璁惧 */
-@media (max-width: 480px) {
-  .organ-utilization-detail {
-    padding: 5px;
-  }
-  :deep(.el-card__header) {
-    padding: 10px 15px;
-  }
-}
 /* 绌虹姸鎬佹牱寮� */
 .empty-utilization {
   text-align: center;
@@ -1630,27 +1940,39 @@
   margin: 20px 0;
 }
 
-/* 鍔犺浇鐘舵�� */
-:deep(.el-loading-mask) {
-  border-radius: 4px;
-}
-
 /* 鏂囦欢淇℃伅鏍峰紡 */
 .file-info {
   display: flex;
   align-items: center;
   padding: 5px 0;
 }
+
 .file-info i {
   font-size: 18px;
   margin-right: 10px;
 }
 
-/* 鍔ㄧ敾鏁堟灉 */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
+/* 骞虫澘璁惧閫傞厤 */
+@media (max-width: 1024px) {
+  .organ-utilization-detail {
+    padding: 15px;
+  }
+
+  :deep(.el-col) {
+    margin-bottom: 10px;
+  }
 }
-.fade-enter, .fade-leave-to {
-  opacity: 0;
+
+/* 鎵嬫満璁惧閫傞厤 */
+
+/* 瓒呭皬灞忓箷璁惧 */
+@media (max-width: 480px) {
+  .organ-utilization-detail {
+    padding: 5px;
+  }
+
+  :deep(.el-card__header) {
+    padding: 10px 15px;
+  }
 }
 </style>

--
Gitblit v1.9.3