From 5b029270cf70190941b660e07a3707e84f2e73fd Mon Sep 17 00:00:00 2001
From: Ranyunqiao <2499115710@qq.com>
Date: Sat, 9 May 2026 09:36:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82111?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../impl/NursingRecordAppServiceImpl.java     |  14 +-
 .../inpatientmanage/dto/NursingPageDto.java   |   3 +-
 .../dto/NursingSearchParam.java               |   3 +
 .../NursingRecordAppMapper.xml                |  63 +-
 .../components/addNursingRecordDialog.vue     | 801 +++++++++-------
 .../components/nursingCodeReference.vue       |  73 ++
 .../inpatientNurse/nursingRecord/index.vue    | 865 ++++++++++++++----
 7 files changed, 1301 insertions(+), 521 deletions(-)
 create mode 100644 openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/nursingCodeReference.vue

diff --git a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/appservice/impl/NursingRecordAppServiceImpl.java b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/appservice/impl/NursingRecordAppServiceImpl.java
index e4e6b804..347f36b1 100755
--- a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/appservice/impl/NursingRecordAppServiceImpl.java
+++ b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/appservice/impl/NursingRecordAppServiceImpl.java
@@ -75,11 +75,19 @@ public class NursingRecordAppServiceImpl implements INursingRecordAppService {
     public R<?> getPatientInfoPage(NursingSearchParam nursingSearchParam, String searchKey, Integer pageNo,
         Integer pageSize, HttpServletRequest request) {
 
-        // 构建查询条件
-        QueryWrapper<NursingSearchParam> queryWrapper = HisQueryUtils.buildQueryWrapper(nursingSearchParam, searchKey,
-            new HashSet<>(Arrays.asList(CommonConstants.FieldName.PatientName, CommonConstants.FieldName.PatientBusNo)),
+        // 构建查询条件（租户ID）
+        QueryWrapper<NursingSearchParam> queryWrapper = HisQueryUtils.buildQueryWrapper(nursingSearchParam, null, null,
             request);
 
+        // 搜索条件：姓名、病历号、床位号（全部放入一个 and() 块，避免 AND 重复）
+        if (searchKey != null && !searchKey.isEmpty()) {
+            queryWrapper.and(wrapper -> {
+                wrapper.or().like("T5.patient_name", searchKey);
+                wrapper.or().like("T5.patient_bus_no", searchKey);
+                wrapper.or().like("T5.bed_location_name", searchKey);
+            });
+        }
+
         // 分页查询,查询患者信息
         IPage<NursingPageDto> NursingInfoPage = nursingRecordAppMapper.getPatientPage(new Page<>(pageNo, pageSize),
             EncounterClass.IMP.getValue(), LocationForm.BED.getValue(), LocationForm.WARD.getValue(),
diff --git a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingPageDto.java b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingPageDto.java
index ceb35413..48d87bf9 100755
--- a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingPageDto.java
+++ b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingPageDto.java
@@ -62,7 +62,8 @@ public class NursingPageDto {
     @JsonSerialize(using = ToStringSerializer.class)
     @Dict(dictTable = "adm_location", dictCode = "id", dictText = "name")
     private Long bedLocationId;
-    private String bedLocationId_dictText;
+    /** 床位号名称（用于搜索） */
+    private String bedLocationName;
 
     /** 病区 */
     @JsonSerialize(using = ToStringSerializer.class)
diff --git a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingSearchParam.java b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingSearchParam.java
index 9235f0e1..5c1dbcb1 100755
--- a/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingSearchParam.java
+++ b/openhis-server-new/openhis-application/src/main/java/com/openhis/web/inpatientmanage/dto/NursingSearchParam.java
@@ -17,6 +17,9 @@ public class NursingSearchParam {
     /** 床位号 */
     private Long bedLocationId;
 
+    /** 床位名称（用于模糊搜索） */
+    private String bedLocationName;
+
     /** 科室ID */
     private Long orgId;
 
diff --git a/openhis-server-new/openhis-application/src/main/resources/mapper/inpatientmanage/NursingRecordAppMapper.xml b/openhis-server-new/openhis-application/src/main/resources/mapper/inpatientmanage/NursingRecordAppMapper.xml
index b0bfcd12..c36a03f6 100755
--- a/openhis-server-new/openhis-application/src/main/resources/mapper/inpatientmanage/NursingRecordAppMapper.xml
+++ b/openhis-server-new/openhis-application/src/main/resources/mapper/inpatientmanage/NursingRecordAppMapper.xml
@@ -15,7 +15,8 @@
                T5.admissionDate,
                T5.wardAdmissionDate,
                T5.ward_location_id,
-               T5.bed_location_id
+               T5.bed_location_id,
+               T5.bed_location_name
         FROM (SELECT T1.tenant_id,
                       T1.id              AS patient_id,       --患者ID
                       T1.name            AS patient_name,     --患者姓名
@@ -27,7 +28,8 @@
                      T2.start_time      AS admissionDate,    --入院日期
                      T3.ward_admission_date AS wardAdmissionDate, --入科日期
                      T3.location_id     AS ward_location_id, --病区
-                     T4.location_id     AS bed_location_id   --床号
+                     T4.location_id     AS bed_location_id,  --床号
+                     T4L.name           AS bed_location_name  --床位号名称（用于搜索）
               FROM adm_patient AS T1
                        INNER JOIN adm_encounter AS T2
                                   ON T2.patient_id = T1.id
@@ -55,13 +57,32 @@
                                          ) ranked
                                     WHERE rn = 1) AS T3
                                    ON T3.encounter_id = T2.ID
-                        LEFT JOIN adm_encounter_location AS T4
+                        LEFT JOIN (SELECT encounter_id,
+                                          location_id,
+                                          form_enum,
+                                          delete_flag
+                                   FROM (SELECT encounter_id,
+                                                location_id,
+                                                form_enum,
+                                                delete_flag,
+                                                ROW_NUMBER() OVER (PARTITION BY encounter_id
+                                                   ORDER BY
+                                                   CASE
+                                                       WHEN update_time IS NULL THEN create_time
+                                                       ELSE update_time
+                                                   END DESC) AS rn
+                                         FROM adm_encounter_location
+                                         WHERE form_enum = #{bed}
+                                           AND status_enum = #{active}
+                                           AND delete_flag = '0'
+                                        ) ranked
+                                   WHERE rn = 1) AS T4
                                   ON T4.encounter_id = T2.ID
-                                      AND T4.form_enum = #{bed}
-                                      AND T4.status_enum = #{active}
-                                      AND T4.delete_flag = '0'
-               WHERE T1.delete_flag = '0'
-               ORDER BY T4.location_id ASC) AS T5
+                        LEFT JOIN adm_location AS T4L
+                                  ON T4L.id = T4.location_id
+                                      AND T4L.delete_flag = '0'
+              WHERE T1.delete_flag = '0'
+              ORDER BY T4.location_id ASC) AS T5
             ${ew.customSqlSegment}
     </select>
 
@@ -121,11 +142,27 @@
                                          ) ranked
                                     WHERE rn = 1) AS T3
                                    ON T3.encounter_id = T2.ID
-                        LEFT JOIN adm_encounter_location AS T4
+                        LEFT JOIN (SELECT encounter_id,
+                                          location_id,
+                                          form_enum,
+                                          delete_flag
+                                   FROM (SELECT encounter_id,
+                                                location_id,
+                                                form_enum,
+                                                delete_flag,
+                                                ROW_NUMBER() OVER (PARTITION BY encounter_id
+                                                   ORDER BY
+                                                   CASE
+                                                       WHEN update_time IS NULL THEN create_time
+                                                       ELSE update_time
+                                                   END DESC) AS rn
+                                         FROM adm_encounter_location
+                                         WHERE form_enum = #{bed}
+                                           AND status_enum = #{active}
+                                           AND delete_flag = '0'
+                                        ) ranked
+                                   WHERE rn = 1) AS T4
                                   ON T4.encounter_id = T2.ID
-                                      AND T4.form_enum = #{bed}
-                                      AND T4.status_enum = #{active}
-                                      AND T4.delete_flag = '0'
                         LEFT JOIN doc_emr AS T5
                                  ON T5.patient_id = T1.id
                                      AND T5.encounter_id = T2.ID
@@ -166,4 +203,4 @@
             ${ew.customSqlSegment}
     </select>
 
-</mapper>
\ No newline at end of file
+</mapper>
diff --git a/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/addNursingRecordDialog.vue b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/addNursingRecordDialog.vue
index ce0b5620..b618db21 100755
--- a/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/addNursingRecordDialog.vue
+++ b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/addNursingRecordDialog.vue
@@ -1,183 +1,295 @@
 <template>
   <div>
     <el-dialog
-      :title="title"
+      :title="dialogTitle"
       v-model="props.open"
-      width="1400px"
+      width="900px"
       append-to-body
-      destroy-on-close
-      @close="close"
+      :close-on-click-modal="false"
+      @close="handleDialogClose"
     >
-      <div style="display: flex; justify-content: space-between; width: 100%">
-        <div style="width: 40%">
-          <el-row :gutter="24">
-            <el-col :span="24" :xs="24">
-              <el-input
-                v-model="searchKey"
-                placeholder="模板名称"
-                clearable
-                style="width: 100%; margin-bottom: 10px"
-                @keyup.enter="getTemplateListInfo"
-              >
-                <template #append>
-                  <el-button icon="Search" @click="getTemplateListInfo" />
-                </template>
-              </el-input>
-              <el-button size="default" type="primary" @click="openTemplateDialog"
-                >新增模板</el-button
-              >
-              <el-button type="danger" plain @click="deleteTemplate()" :disabled="false">
-                删除
-              </el-button>
-              <el-table
-                ref="patientListRef"
-                height="680"
-                :data="templateList"
-                row-key="id"
-                highlight-current-row
-                @row-click="setTemplate"
-                @selection-change="handleSelectionChange"
-              >
-                <el-table-column type="selection" width="55" />
-                <el-table-column prop="templateName" label="模板名称" width="180" />
-                <el-table-column prop="contextJson" label="模板内容" width="80" />
-                <el-table-column prop="useScopeCodeText" label="使用范围" width="80" />
-                <el-table-column label="操作" min-width="150" fixed="right">
-                  <template #default="scope">
-                    <el-button
-                      link
-                      type="primary"
-                      icon="Edit"
-                      @click="handleEditTemplate(scope.row)"
-                      >编辑</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <pagination
-                v-show="templateTotal > 0"
-                :total="templateTotal"
-                v-model:page="templateQueryParams.pageNo"
-                v-model:limit="templateQueryParams.pageSize"
-                @pagination="getTemplateListInfo"
-                style="margin-bottom: 20px"
-              />
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
+        <!-- 基础信息 -->
+        <div class="form-section">
+          <h4 class="section-title">基础信息</h4>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="日期" prop="recordDate">
+                <el-date-picker
+                  v-model="form.recordDate"
+                  type="date"
+                  placeholder="选择日期"
+                  value-format="YYYY-MM-DD"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="时间" prop="recordTime">
+                <el-time-picker
+                  v-model="form.recordTime"
+                  placeholder="选择时间"
+                  format="HH:mm"
+                  value-format="HH:mm:ss"
+                  style="width: 100%"
+                />
+              </el-form-item>
             </el-col>
           </el-row>
         </div>
-        <div
-          style="display: flex; justify-content: space-between; width: 69%"
-          class="app-container"
-        >
-          <el-form ref="formRef" :model="form" label-width="100px">
-            <el-form-item class="changeMajorFromItem" label-width="100px" label="记录时间：">
-              <el-date-picker
-                v-model="form.recordingTime"
-                type="datetime"
-                placeholder="选择日期"
-                style="width: 30%"
-                value-format="YYYY-MM-DD HH:mm:ss"
-              />
-            </el-form-item>
-            <el-form-item label="生命体征：" class="changeMajorFromItem" />
-            <el-form-item class="changeMajorFromItem" label-width="10px">
-              <el-row :span="24">
-                <!-- 第一个表单项 -->
-                <el-col :span="5">
-                  <el-form-item label="体温：" prop="tw" label-width="80px">
-                    <el-input v-model="form.tw" style="width: 80%" /> ℃
-                  </el-form-item>
-                </el-col>
-                <!-- 第二个表单项 -->
-                <el-col :span="5">
-                  <el-form-item label="脉搏：" prop="mb" label-width="80px">
-                    <el-input v-model="form.mb" style="width: 80%" /> 次
-                  </el-form-item>
-                </el-col>
-                <!-- 第三个表单项 -->
-                <el-col :span="5">
-                  <el-form-item label="呼吸：" prop="hx" label-width="80px">
-                    <el-input v-model="form.hx" style="width: 80%" /> 次
-                  </el-form-item>
-                </el-col>
-                <!-- 第四个表单项 -->
-                <el-col :span="9">
-                  <el-form-item label="血压：" prop="bloodPressure" label-width="80px">
-                    <div class="xy-container" style="display: flex; align-items: center">
-                      <el-input v-model="form.systolicBloodPressure" style="width: 25%" />
-                      <span>/</span>
-                      <el-input v-model="form.diastolicBloodPressure" style="width: 25%" />
-                      (高/低)mmHg
-                    </div>
-                  </el-form-item>
-                </el-col>
-                <!-- 第一个表单项 -->
-                <el-col :span="5" style="margin-top: 10px">
-                  <el-form-item label="心率：" prop="xl" label-width="80px">
-                    <el-input v-model="form.xl" style="width: 80%" />
-                  </el-form-item>
-                </el-col>
-                <!-- 第二个表单项 -->
-                <el-col :span="5" style="margin-top: 10px">
-                  <el-form-item label="血氧：" prop="xy" label-width="80px">
-                    <el-input v-model="form.xy" style="width: 80%" />
-                  </el-form-item>
-                </el-col>
-                <!-- 第五个表单项 -->
-                <el-col :span="4" style="margin-top: 10px">
-                  <el-form-item style="margin-left: 20px">
-                    <el-checkbox
-                      v-model="form.vitalSignsSyncFlag"
-                      label="同步到体征表"
-                      name="SYP"
-                    />
-                    <!-- @change="checkTimeValidity" -->
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form-item>
-            <el-form-item
-              label="病情观察与护理记录："
-              label-width="90px"
-              class="changeMajorFromItem"
-              prop="column081"
-            >
-              <el-input
-                v-model="form.bqgcOther"
-                type="textarea"
-                :rows="8"
-                :autosize="{ minRows: 3, maxRows: 8 }"
-                class="el-textarea"
-                style="width: 95%"
-              />
-            </el-form-item>
-          </el-form>
+
+        <!-- 生命体征 -->
+        <div class="form-section">
+          <h4 class="section-title">生命体征</h4>
+          <el-row :gutter="16">
+            <el-col :span="8">
+              <el-form-item label="意识" prop="consciousnessCode">
+                <el-select v-model="form.consciousnessCode" placeholder="请选择" style="width: 100%">
+                  <el-option label="清醒" value="1" />
+                  <el-option label="嗜睡" value="2" />
+                  <el-option label="意识模糊" value="3" />
+                  <el-option label="昏睡" value="4" />
+                  <el-option label="谵妄" value="5" />
+                  <el-option label="浅昏迷" value="6" />
+                  <el-option label="中度昏迷" value="7" />
+                  <el-option label="深昏迷" value="8" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="体温(°C)" prop="temperature">
+                <el-input-number
+                  v-model="form.temperature"
+                  :precision="1"
+                  :step="0.1"
+                  :min="35"
+                  :max="42"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="脉搏(次/分)" prop="pulseRate">
+                <el-input-number v-model="form.pulseRate" :min="0" :max="300" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="心率(次/分)" prop="heartRate">
+                <el-input-number v-model="form.heartRate" :min="0" :max="300" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="呼吸(次/分)" prop="breathRate">
+                <el-input-number v-model="form.breathRate" :min="0" :max="100" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="血氧饱和度(%)" prop="bloodOxygen">
+                <el-input-number
+                  v-model="form.bloodOxygen"
+                  :min="0"
+                  :max="100"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="血压(mmHg)" prop="bloodPressure">
+                <div style="display: flex; align-items: center; gap: 8px">
+                  <el-input-number
+                    v-model="form.systolicBloodPressure"
+                    :min="0"
+                    :max="300"
+                    placeholder="收缩压"
+                    style="width: 100px"
+                  />
+                  <span>/</span>
+                  <el-input-number
+                    v-model="form.diastolicBloodPressure"
+                    :min="0"
+                    :max="200"
+                    placeholder="舒张压"
+                    style="width: 100px"
+                  />
+                  <span>mmHg</span>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="吸氧(升/分)" prop="oxygen">
+                <div style="display: flex; gap: 8px">
+                  <el-select v-model="form.oxygenMethod" placeholder="方式" style="width: 120px">
+                    <el-option label="鼻导管" value="1" />
+                    <el-option label="面罩" value="2" />
+                    <el-option label="高流量" value="3" />
+                    <el-option label="机械通气" value="4" />
+                  </el-select>
+                  <el-input-number
+                    v-model="form.oxygenFlow"
+                    :min="0"
+                    :max="20"
+                    placeholder="流量"
+                    style="width: 100px"
+                  />
+                  <span>L</span>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="16">
+            <el-col :span="24">
+              <el-form-item>
+                <el-checkbox v-model="form.vitalSignsSyncFlag" label="同步到体征表" />
+              </el-form-item>
+            </el-col>
+          </el-row>
         </div>
-      </div>
+
+        <!-- 入量记录 -->
+        <div class="form-section">
+          <h4 class="section-title">入量记录</h4>
+          <el-row :gutter="16">
+            <el-col :span="10">
+              <el-form-item label="入量名称" prop="inputName">
+                <el-input v-model="form.inputName" placeholder="请输入入量名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="量(ml)" prop="inputAmount">
+                <el-input-number v-model="form.inputAmount" :min="0" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="途径" prop="inputRoute">
+                <el-select v-model="form.inputRoute" placeholder="请选择" style="width: 100%">
+                  <el-option label="口服" value="1" />
+                  <el-option label="静脉" value="2" />
+                  <el-option label="鼻饲" value="3" />
+                  <el-option label="肛门" value="4" />
+                  <el-option label="皮下" value="5" />
+                  <el-option label="其他" value="6" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 出量记录 -->
+        <div class="form-section">
+          <h4 class="section-title">出量记录</h4>
+          <el-row :gutter="16">
+            <el-col :span="10">
+              <el-form-item label="出量名称" prop="outputName">
+                <el-select v-model="form.outputName" placeholder="请选择" style="width: 100%">
+                  <el-option label="尿量" value="尿量" />
+                  <el-option label="大便" value="大便" />
+                  <el-option label="呕吐" value="呕吐" />
+                  <el-option label="引流量" value="引流量" />
+                  <el-option label="出血" value="出血" />
+                  <el-option label="其他" value="其他" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="量(ml)" prop="outputAmount">
+                <el-input-number v-model="form.outputAmount" :min="0" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 专科护理 -->
+        <div class="form-section">
+          <h4 class="section-title">专科护理</h4>
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="皮肤情况" prop="skinConditionCode">
+                <el-select v-model="form.skinConditionCode" placeholder="请选择" style="width: 100%">
+                  <el-option label="完好" value="1" />
+                  <el-option label="压疮" value="2" />
+                  <el-option label="出血点" value="3" />
+                  <el-option label="破损" value="4" />
+                  <el-option label="水肿" value="5" />
+                  <el-option label="瘀斑" value="6" />
+                  <el-option label="过敏" value="7" />
+                  <el-option label="其他" value="8" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="管路护理" prop="pipelineCare">
+                <el-select v-model="form.pipelineCare" multiple placeholder="请选择" style="width: 100%">
+                  <el-option label="尿管" value="2" />
+                  <el-option label="胃管" value="1" />
+                  <el-option label="引流管" value="5" />
+                  <el-option label="静脉置管" value="3" />
+                  <el-option label="吸氧管" value="4" />
+                  <el-option label="T管" value="5" />
+                  <el-option label="胸腔引流管" value="6" />
+                  <el-option label="腹腔引流管" value="7" />
+                  <el-option label="伤口引流管" value="8" />
+                  <el-option label="脑室引流管" value="9" />
+                  <el-option label="其他" value="10" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 综合描述 -->
+        <div class="form-section">
+          <h4 class="section-title">综合描述</h4>
+          <el-form-item label="病情观察及措施" prop="conditionObservation">
+            <el-input
+              v-model="form.conditionObservation"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入病情观察及护理措施..."
+              style="width: 100%"
+            />
+          </el-form-item>
+        </div>
+
+        <!-- 签章 -->
+        <div class="form-section">
+          <h4 class="section-title">签章</h4>
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="护士签名" prop="nurseSignature">
+                <el-select
+                  v-model="form.nurseSignature"
+                  placeholder="请选择或自动获取当前登录人"
+                  style="width: 100%"
+                  :value-key="String"
+                >
+                  <el-option :label="userStore.nickName || '当前用户'" :value="String(userStore.id)" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submit">保存</el-button>
-          <el-button @click="close">取 消</el-button>
+          <el-button type="primary" @click="submit" :disabled="submitting">保存</el-button>
+          <el-button @click="handleDialogClose" :disabled="submitting">取 消</el-button>
         </div>
       </template>
     </el-dialog>
-    <record-template
-      ref="recordRemplateDialogRef"
-      :open="openRecordTemplate"
-      :patientId="patientId"
-      :editData="editData"
-      :recordTitle="recordTitle"
-      @close="closeRecordTemplateDialog"
-    />
   </div>
 </template>
 
 <script setup>
-import recordTemplate from './recordTemplate.vue';
-import {nextTick, ref} from 'vue';
-import {deleteRecordTemplate, getRecordTemplateList, saveRecord, updateRecord} from './api';
+import moment from 'moment';
+import useUserStore from '@/store/modules/user';
+import { saveRecord, updateRecord } from './api';
 
+const userStore = useUserStore();
 const { proxy } = getCurrentInstance();
+
 const props = defineProps({
   open: {
     type: Boolean,
@@ -200,220 +312,285 @@ const props = defineProps({
     default: () => {},
   },
 });
-const searchKey = ref('');
+
 const emit = defineEmits(['close']);
-const templateQueryParams = ref({
-  pageNum: 1,
-  pageSize: 10,
-  searchKey: undefined, // 患者id
+
+const formRef = ref(null);
+const submitting = ref(false); // 防止重复提交
+const form = ref({
+  recordDate: '',
+  recordTime: '',
+  consciousnessCode: undefined,
+  temperature: undefined,
+  pulseRate: undefined,
+  heartRate: undefined,
+  breathRate: undefined,
+  systolicBloodPressure: undefined,
+  diastolicBloodPressure: undefined,
+  bloodOxygen: undefined,
+  oxygenMethod: undefined,
+  oxygenFlow: undefined,
+  vitalSignsSyncFlag: false,
+  inputName: '',
+  inputAmount: undefined,
+  inputRoute: undefined,
+  outputName: undefined,
+  outputAmount: undefined,
+  skinConditionCode: undefined,
+  pipelineCare: [],
+  conditionObservation: '',
+  nurseSignature: String(userStore.id),
 });
-const templateTotal = ref(0);
-const templateList = ref([]);
 
-const patientInfo = ref({});
-const form = ref({});
-const templateIds = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const editData = ref({});
+const rules = ref({
+  recordDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
+  recordTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
+});
 
-const title = ref('');
-
-const recordTitle = ref('');
-const openRecordTemplate = ref(false);
+const dialogTitle = computed(() => {
+  return props.title === '新增' ? '护理记录 - 新增' : '护理记录 - 编辑';
+});
 
 /**
- * 取得患者信息详细
+ * 显示弹窗
  */
 function show() {
-  patientInfo.value = props.patientInfo;
-  console.log(props, 'props', props.patientInfo);
   reset();
-  title.value = '';
-  title.value = props.title;
-  if (title.value === '编辑') {
-    form.value = props.editData.content;
-  }
-  console.log(props, 'props', title.value);
-  getTemplateListInfo();
-}
+  if (props.title === '编辑' && props.editData.content) {
+    const content = props.editData.content;
+    // 从 recordingTime 或 recordTime 中正确提取日期和时间
+    let recordDate = '';
+    let recordTime = '';
 
-/** 选择删除模板条数  */
-function handleSelectionChange(selection) {
-  console.log(selection, '选择条数');
-  templateIds.value = selection.map((item) => item.id);
-  console.log(templateIds.value, '选择条数');
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/**
- * 模板列表
- */
-function getTemplateListInfo() {
-  console.log(searchKey.value, '搜索关键字');
-  templateQueryParams.value.searchKey = searchKey.value;
-  getRecordTemplateList(templateQueryParams.value).then((res) => {
-    console.log('模板列表', res);
-    templateList.value = res.data.records;
-    templateTotal.value = res.data.total;
-  });
+    // 优先使用 recordingTime（格式: "YYYY-MM-DD HH:mm:ss"）
+    const fullDateTime = content.recordingTime || content.recordTime || '';
+    if (fullDateTime) {
+      const parts = fullDateTime.split(' ');
+      if (parts.length >= 2) {
+        recordDate = parts[0];
+        recordTime = parts[1];
+      } else if (fullDateTime.includes(':')) {
+        // 纯时间格式
+        recordTime = fullDateTime;
+      } else {
+        // 纯日期格式
+        recordDate = fullDateTime;
+      }
+    }
+
+    form.value = {
+      recordDate: recordDate,
+      recordTime: recordTime,
+      consciousnessCode: content.consciousnessCode,
+      temperature: content.temperature,
+      pulseRate: content.pulseRate || content.mb,
+      heartRate: content.heartRate || content.xl,
+      breathRate: content.breathRate || content.hx,
+      systolicBloodPressure: content.systolicBloodPressure,
+      diastolicBloodPressure: content.diastolicBloodPressure,
+      bloodOxygen: content.bloodOxygen || content.xy,
+      oxygenMethod: content.oxygenMethod,
+      oxygenFlow: content.oxygenFlow,
+      vitalSignsSyncFlag: content.vitalSignsSyncFlag || false,
+      inputName: content.inputName || '',
+      inputAmount: content.inputAmount,
+      inputRoute: content.inputRoute,
+      outputName: content.outputName,
+      outputAmount: content.outputAmount,
+      skinConditionCode: content.skinConditionCode,
+      pipelineCare: content.pipelineCare || [],
+      conditionObservation: content.conditionObservation || content.bqgcOther || '',
+      nurseSignature: content.nurseSignature || String(userStore.id),
+    };
+  } else {
+    // 默认值 - 新增时自动获取当前日期时间
+    const now = new Date();
+    form.value.recordDate = moment(now).format('YYYY-MM-DD');
+    form.value.recordTime = moment(now).format('HH:mm:ss');
+    // 其他字段设为空或默认值
+    form.value.consciousnessCode = undefined;
+    form.value.temperature = undefined;
+    form.value.pulseRate = undefined;
+    form.value.heartRate = undefined;
+    form.value.breathRate = undefined;
+    form.value.systolicBloodPressure = undefined;
+    form.value.diastolicBloodPressure = undefined;
+    form.value.bloodOxygen = undefined;
+    form.value.oxygenMethod = undefined;
+    form.value.oxygenFlow = undefined;
+    form.value.vitalSignsSyncFlag = false;
+    form.value.inputName = '';
+    form.value.inputAmount = undefined;
+    form.value.inputRoute = undefined;
+    form.value.outputName = undefined;
+    form.value.outputAmount = undefined;
+    form.value.skinConditionCode = undefined;
+    form.value.pipelineCare = [];
+    form.value.conditionObservation = '';
+    form.value.nurseSignature = String(userStore.id);
+  }
 }
 
 /**
- * 删除模板
- *
- * @param index - 要删除的处方在列表中的索引
+ * 重置表单
  */
-function deleteTemplate(index) {
-  console.log(templateIds.value, '删除记录单模板');
-  if (templateIds.value.length == 0) {
-    proxy.$modal.msgWarning('请选择要删除的数据信息！');
-    return;
-  }
-  proxy.$modal
-    .confirm('是否确认删除以上数据！')
-    .then(function () {
-      return deleteRecordTemplate(templateIds.value);
-    })
-    .then(() => {
-      getTemplateListInfo();
-      proxy.$modal.msgSuccess('删除成功');
-    })
-    .catch(() => {});
-}
-function close() {
-  reset();
-  emit('close');
-}
-/** 重置操作表单 */
 function reset() {
+  submitting.value = false;
   form.value = {
-    tw: undefined,
-    mb: undefined,
-    hx: undefined,
+    recordDate: '',
+    recordTime: '',
+    consciousnessCode: undefined,
+    temperature: undefined,
+    pulseRate: undefined,
+    heartRate: undefined,
+    breathRate: undefined,
     systolicBloodPressure: undefined,
     diastolicBloodPressure: undefined,
-    xl: undefined,
-    xy: undefined,
+    bloodOxygen: undefined,
+    oxygenMethod: undefined,
+    oxygenFlow: undefined,
     vitalSignsSyncFlag: false,
-    bqgc: undefined,
-    bqgcOther: undefined,
+    inputName: '',
+    inputAmount: undefined,
+    inputRoute: undefined,
+    outputName: undefined,
+    outputAmount: undefined,
+    skinConditionCode: undefined,
+    pipelineCare: [],
+    conditionObservation: '',
+    nurseSignature: String(userStore.id),
   };
   proxy.resetForm('formRef');
 }
 
 /**
- * 保存记录单
+ * 关闭弹窗
+ */
+function close() {
+  emit('close');
+}
+
+/**
+ * Dialog 关闭回调
+ */
+function handleDialogClose() {
+  emit('close');
+}
+
+/**
+ * 提交表单
  */
 function submit() {
-  if (title.value === '新增') {
+  if (submitting.value) return;
+  submitting.value = true;
+
+  // 验证表单
+  proxy.$refs['formRef'].validate((valid) => {
+    if (!valid) {
+      submitting.value = false;
+      return;
+    }
+
+  // 组合日期和时间
+  const recordingTime = `${form.value.recordDate} ${form.value.recordTime}`;
+
+  const submitData = {
+    ...form.value,
+    recordingTime: recordingTime,
+    // 兼容旧字段
+    mb: form.value.pulseRate,
+    xl: form.value.heartRate,
+    hx: form.value.breathRate,
+    xy: form.value.bloodOxygen,
+    bqgcOther: form.value.conditionObservation,
+  };
+
+  console.log('提交数据:', submitData);
+
+  if (props.title === '新增') {
     const insertParam = {
       encounterId: props.patientInfo.encounterId,
       patientId: props.patientInfo.patientId,
       orgId: props.patientInfo.orgId,
-      recordingTime: form.value.recordingTime,
-      vitalSignsSyncFlag: form.value.vitalSignsSyncFlag ? form.value.vitalSignsSyncFlag : false,
-      contextJson: JSON.stringify(form.value),
+      recordingTime: recordingTime,
+      vitalSignsSyncFlag: form.value.vitalSignsSyncFlag,
+      contextJson: JSON.stringify(submitData),
     };
-    console.log(insertParam, 'insertParam');
+    console.log('新增数据:', insertParam);
     saveRecord(insertParam).then((res) => {
+      console.log('保存结果:', res);
+      submitting.value = false;
       if (res.code == 200) {
         emit('close', 'success');
-        reset();
+      } else {
+        proxy.$modal.msgError(res.msg || '保存失败');
       }
+    }).catch((err) => {
+      console.error('保存错误:', err);
+      submitting.value = false;
     });
   } else {
-    const updateParamParam = {
+    const updateParam = {
       recordId: props.editData.recordId,
       encounterId: props.patientInfo.encounterId,
       patientId: props.patientInfo.patientId,
       orgId: props.patientInfo.orgId,
-      recordingTime: form.value.recordingTime,
-      vitalSignsSyncFlag: form.value.vitalSignsSyncFlag ? form.value.vitalSignsSyncFlag : false,
-      contextJson: JSON.stringify(form.value),
+      recordingTime: recordingTime,
+      vitalSignsSyncFlag: form.value.vitalSignsSyncFlag,
+      contextJson: JSON.stringify(submitData),
     };
-    console.log(updateParamParam, 'updateParamParam');
-    updateRecord(updateParamParam).then((res) => {
+    console.log('更新数据:', updateParam);
+    updateRecord(updateParam).then((res) => {
+      console.log('更新结果:', res);
+      submitting.value = false;
       if (res.code == 200) {
         emit('close', 'success');
-        reset();
+      } else {
+        proxy.$modal.msgError(res.msg || '更新失败');
       }
+    }).catch((err) => {
+      console.error('更新错误:', err);
+      submitting.value = false;
     });
   }
-}
-
-/**
- * 设定病情观测
- */
-function setTemplate(row) {
-  console.log(row, '设定病情观测');
-  form.value.bqgcOther = row.contextJson;
-}
-
-/**
- * 新增护理模板
- */
-function openTemplateDialog() {
-  recordTitle.value = '新增模板';
-  openRecordTemplate.value = true;
-  nextTick(() => {
-    proxy.$refs['recordRemplateDialogRef'].show();
   });
 }
 
-/**
- * 编辑护理模板
- */
-function handleEditTemplate(row) {
-  recordTitle.value = '编辑模板';
-  openRecordTemplate.value = true;
-  editData.value = row;
-  nextTick(() => {
-    proxy.$refs['recordRemplateDialogRef'].show();
-  });
-}
-
-/**
- * 关闭记录模板对话框
- *
- * 该函数用于关闭记录模板对话框。
- */
-function closeRecordTemplateDialog(str) {
-  openRecordTemplate.value = false;
-  getTemplateListInfo();
-  if (str === 'success') {
-    proxy.$modal.msgSuccess('操作成功！');
-  }
-}
 defineExpose({
   show,
 });
 </script>
 
 <style scoped>
-:deep(.pagination-container .el-pagination) {
-  right: 20px !important;
+.form-section {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #ebeef5;
 }
 
-.input-select-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.form-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 
-.input-select-container .el-input__inner,
-.input-select-container .el-select {
+.section-title {
+  margin: 0 0 12px 0;
+  color: #409eff;
+  font-weight: 600;
+  font-size: 14px;
+  padding-left: 8px;
+  border-left: 3px solid #409eff;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+:deep(.el-input-number) {
   width: 100%;
 }
 
-.flex-container {
-  display: flex;
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: flex-start; /* 水平起始对齐 */
-  gap: 8px; /* 两个输入框之间的间距 */
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
 }
-
-.flex-container label {
-  margin: 0 8px; /* 标签的间距 */
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/nursingCodeReference.vue b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/nursingCodeReference.vue
new file mode 100644
index 00000000..7b600fcd
--- /dev/null
+++ b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/components/nursingCodeReference.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="nursing-code-reference">
+    <div class="reference-section">
+      <h5>一、意识</h5>
+      <span class="code-item">1.意识清</span>
+      <span class="code-item">2.嗜睡</span>
+      <span class="code-item">3.意识模糊</span>
+      <span class="code-item">4.昏睡</span>
+      <span class="code-item">5.浅昏迷</span>
+      <span class="code-item">6.深昏迷</span>
+    </div>
+    <div class="reference-section">
+      <h5>二、管路</h5>
+      <span class="code-item">1.尿管</span>
+      <span class="code-item">2.鼻饲管</span>
+      <span class="code-item">3.胃肠减压管</span>
+      <span class="code-item">4.外周静脉置管</span>
+      <span class="code-item">5.中心静脉置管</span>
+      <span class="code-item">6.胸腔闭式引流管</span>
+      <span class="code-item">7.腹腔引流管</span>
+      <span class="code-item">8.头部引流管</span>
+      <span class="code-item">9.其他引流管</span>
+      <span class="code-item">10.其他置管</span>
+    </div>
+    <div class="reference-section">
+      <h5>三、皮肤</h5>
+      <span class="code-item">1.完好</span>
+      <span class="code-item">2.压疮</span>
+      <span class="code-item">3.出血点</span>
+      <span class="code-item">4.破损</span>
+      <span class="code-item">5.水肿</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.nursing-code-reference {
+  background: #fafafa;
+  padding: 12px 16px;
+  border-radius: 4px;
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  border: 1px solid #ebeef5;
+}
+
+.reference-section {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.reference-section h5 {
+  margin: 0;
+  color: #606266;
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.code-item {
+  color: #909399;
+  font-size: 12px;
+  padding: 2px 6px;
+  background: #f4f4f5;
+  border-radius: 3px;
+}
+</style>
diff --git a/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/index.vue b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/index.vue
index 0e9f86bd..4f8e0b58 100755
--- a/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/index.vue
+++ b/openhis-ui-vue3/src/views/inpatientNurse/nursingRecord/index.vue
@@ -1,107 +1,189 @@
 <template>
-  <div class="business-temperature" style="display: flex; justify-content: space-evenly">
-    <el-card style="width: 35%">
-      <template #header>
-        <span style="vertical-align: middle">患者列表</span>
-      </template>
-      <div style="width: 100%">
-        <el-input
-          v-model="queryParams.searchKey"
-          placeholder="请输入患者名/病历号"
-          clearable
-          style="width: 48%; margin-bottom: 10px; margin-right: 10px"
-          @keyup.enter="getPatientListInfo"
-        >
-        </el-input>
-        <el-button type="primary" style="margin-bottom: 10px" @click="getPatientListInfo">
-          搜索
-        </el-button>
-        <el-table
-          ref="patientListRef"
-          height="672"
-          :data="patientList"
-          row-key="encounterId"
-          @row-click="viewPatient"
-          highlight-current-row
-        >
-          <el-table-column prop="bedLocationId_dictText" label="床号" min-width="50" />
-          <el-table-column label="病历号" align="center" prop="patientBusNo" />
-          <el-table-column label="姓名" align="center" prop="patientName" />
-          <el-table-column label="性别" align="center" prop="genderEnum_enumText" />
-          <el-table-column label="年龄" align="center" prop="ageString" />
-        </el-table>
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          v-model:page="queryParams.pageNo"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getPatientListInfo"
-          style="margin-bottom: 20px"
-        />
+  <div class="nursing-record-container">
+    <!-- 左侧患者列表 - 可调节宽度 -->
+    <div class="patient-list-panel" :style="{ width: leftWidth + 'px' }">
+      <div class="resize-handle" @mousedown="startResize"></div>
+      <div class="panel-header">
+        <span>患者列表</span>
+        <el-button icon="Refresh" circle size="small" @click="refreshPatientList" />
       </div>
-    </el-card>
-    <el-card style="width: 60%">
-      <template #header>
-        <span style="vertical-align: middle">护理记录</span>
-      </template>
-      <div style="width: 100%">
-        <div style="width: 100%">
-          <el-date-picker
-            v-model="recordingTime"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placement="bottom"
-            value-format="YYYY-MM-DD"
-            style="width: 64%; margin-bottom: 10px; margin-right: 10px"
-          />
-          <el-button type="primary" style="margin-bottom: 10px" @click="viewPatient(patientData)">
-            搜索
-          </el-button>
-        </div>
-        <div style="margin-bottom: 10px">
-          <el-button size="default" type="primary" @click="openAddTprDialog">新增</el-button>
-          <el-button type="danger" plain @click="deletePrescription()" :disabled="false">
-            删除
-          </el-button>
-        </div>
-        <el-table
-          ref="patientListRef"
-          height="680"
-          :data="recordList"
-          row-key="recordId"
-          highlight-current-row
-          @selection-change="handleSelectionChange"
+      <el-input
+        v-model="queryParams.searchKey"
+        placeholder="床号/住院号/姓名"
+        clearable
+        style="width: 100%; margin-bottom: 10px"
+        @keyup.enter="getPatientListInfo"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <el-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getPatientListInfo">
+        搜索
+      </el-button>
+      <!-- 患者卡片列表 -->
+      <div class="patient-card-list">
+        <div
+          v-for="patient in patientList"
+          :key="patient.encounterId"
+          class="patient-card"
+          :class="{ 'is-active': patientData.encounterId === patient.encounterId }"
+          @click="viewPatient(patient)"
         >
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="content.recordingTime" label="记录时间" width="180" />
-          <el-table-column prop="content.tw" label="体温" width="80" />
-          <el-table-column prop="content.systolicBloodPressure" label="收缩压" min-width="80" />
-          <el-table-column prop="content.diastolicBloodPressure" label="舒张压" width="80" />
-          <el-table-column prop="content.xl" label="心率" min-width="120" />
-          <el-table-column prop="content.mb" label="脉搏" width="80" />
-          <el-table-column prop="content.hx" label="呼吸" min-width="120" />
-          <el-table-column prop="content.xy" label="血氧" width="80" />
-          <el-table-column prop="content.bqgcOther" label="病情观察与护理记录" min-width="80" />
-          <el-table-column label="操作" min-width="150" fixed="right">
-            <template #default="scope">
-              <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)"
-                >编辑</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-        <pagination
-          v-show="recordsTotal > 0"
-          :total="recordsTotal"
-          v-model:page="recordQueryParams.pageNo"
-          v-model:limit="recordQueryParams.pageSize"
-          @pagination="viewPatient(patientData)"
-          style="margin-bottom: 20px"
-        />
+          <div class="card-top">
+            <div class="bed-info">
+              <span class="bed-label">{{ patient.bedLocationName || patient.bedLocationId_dictText || '-' }}</span>
+              <span class="status-tag" :class="getStatusClass(patient)">
+                {{ getStatusText(patient) }}
+              </span>
+            </div>
+          </div>
+          <div class="card-divider"></div>
+          <div class="card-bottom">
+            <div class="patient-info-row">
+              <span class="patient-name">{{ patient.patientName }}</span>
+              <span class="gender-age-tag">
+                {{ patient.genderEnum_enumText }} · {{ patient.ageString }}
+              </span>
+            </div>
+            <div class="patient-no">住院号：{{ patient.patientBusNo }}</div>
+          </div>
+        </div>
+        <div v-if="patientList.length === 0" class="empty-tip">暂无患者数据</div>
       </div>
-    </el-card>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getPatientListInfo"
+      />
+    </div>
+
+    <!-- 右侧护理记录区域 -->
+    <div class="record-panel">
+      <!-- 顶部患者信息栏 -->
+      <div class="patient-info-bar" v-if="patientData.patientId">
+        <div class="info-item">
+          <span class="label">科别：</span>
+          <span class="value">{{ patientData.deptName || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">姓名：</span>
+          <span class="value">{{ patientData.patientName || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">年龄：</span>
+          <span class="value">{{ patientData.ageString || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">性别：</span>
+          <span class="value">{{ patientData.genderEnum_enumText || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">床号：</span>
+          <span class="value">{{ patientData.bedLocationName || patientData.bedLocationId_dictText || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">住院号：</span>
+          <span class="value">{{ patientData.patientBusNo || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">入院日期：</span>
+          <span class="value">{{ patientData.encounterTime || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">诊断：</span>
+          <span class="value">{{ patientData.diagnosis || '-' }}</span>
+        </div>
+      </div>
+
+      <!-- 操作按钮栏 -->
+      <div class="operation-bar">
+        <el-date-picker
+          v-model="recordingTime"
+          type="daterange"
+          range-separator="~"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          placement="bottom"
+          value-format="YYYY-MM-DD"
+          style="width: 280px"
+        />
+        <el-button type="primary" @click="searchRecord">搜索</el-button>
+        <el-button type="primary" @click="openAddTprDialog">新增</el-button>
+        <el-button type="default" @click="handlePrint">打印</el-button>
+      </div>
+
+      <!-- 护理记录表格 -->
+      <el-table
+        ref="recordTableRef"
+        height="calc(100vh - 380px)"
+        :data="recordList"
+        :row-key="(row) => row.recordId + '-' + row._index"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+        border
+        stripe
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column prop="recordingTime" label="日期/时间" width="150" />
+        <el-table-column prop="consciousnessCodeText" label="意识" width="100" />
+        <el-table-column prop="temperature" label="体温(°C)" width="90" />
+        <el-table-column prop="pulseRate" label="脉搏(次/分)" width="100" />
+        <el-table-column prop="breathRate" label="呼吸(次/分)" width="100" />
+        <el-table-column label="血压(mmHg)" width="110">
+          <template #default="{ row }">
+            {{ row.systolicBloodPressure || '-' }}/{{ row.diastolicBloodPressure || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="bloodOxygen" label="血氧饱和度(%)" width="110" />
+        <el-table-column label="吸氧(升/分)" width="100">
+          <template #default="{ row }">
+            {{ row.oxygenMethodText || '' }}{{ row.oxygenFlow ? row.oxygenFlow + 'L' : '' }}
+          </template>
+        </el-table-column>
+        <!-- 入量 -->
+        <el-table-column label="入量" align="center">
+          <el-table-column prop="inputName" label="名称用法" width="120" />
+          <el-table-column prop="inputAmount" label="量(ml)" width="80" />
+        </el-table-column>
+        <!-- 出量 -->
+        <el-table-column label="出量" align="center">
+          <el-table-column prop="outputName" label="名称" width="100" />
+          <el-table-column prop="outputAmount" label="量(ml)" width="80" />
+        </el-table-column>
+        <el-table-column prop="skinConditionCodeText" label="皮肤情况" width="100" />
+        <el-table-column prop="pipelineCareText" label="管路护理" width="150" />
+        <el-table-column prop="conditionObservation" label="病情观察及措施" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="nurseSignatureText" label="护士签名" width="100" />
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="scope">
+            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="recordsTotal > 0"
+        :total="recordsTotal"
+        v-model:page="recordQueryParams.pageNo"
+        v-model:limit="recordQueryParams.pageSize"
+        @pagination="getRecordList"
+      />
+
+      <!-- 批量操作栏 -->
+      <div class="batch-operation-bar" v-if="selectedData.length > 0">
+        <span>已选择 {{ selectedData.length }} 条记录</span>
+        <el-button type="danger" plain @click="batchDelete">批量删除</el-button>
+      </div>
+
+      <!-- 底部备注说明区 -->
+      <nursing-code-reference />
+    </div>
+
+    <!-- 新增/编辑弹窗 -->
     <add-nursing-record-dialog
       ref="addNursingRecordDialogRef"
       :open="openAddTpr"
@@ -111,32 +193,34 @@
       :title="title"
       @close="closePatientDetialDialog"
     />
-    <!-- </div> -->
   </div>
 </template>
 
 <script setup>
+import { Search } from '@element-plus/icons-vue';
+import moment from 'moment';
 import addNursingRecordDialog from './components/addNursingRecordDialog.vue';
-import {delRecord, getNursingPatientPage, listPatient} from './components/api';
+import nursingCodeReference from './components/nursingCodeReference.vue';
+import { delRecord, getNursingPatientPage, listPatient } from './components/api';
 import useUserStore from '@/store/modules/user';
 
 const userStore = useUserStore();
+const { proxy } = getCurrentInstance();
+
 // 响应式数据
 const patientId = ref('');
-const data = ref(undefined);
 const openAddTpr = ref(false);
 const total = ref(0);
 const recordsTotal = ref(0);
 const recordList = ref([]);
 const contextJson = ref(undefined);
 const editData = ref({});
-const { proxy } = getCurrentInstance();
 const print = ref(null);
 const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
   searchKey: undefined,
-  orgId: userStore.orgId,  // 按当前用户科室过滤
+  orgId: userStore.orgId,
 });
 
 const recordQueryParams = ref({
@@ -145,19 +229,21 @@ const recordQueryParams = ref({
 });
 
 const patientData = ref({});
-const recordingTime = ref([
-  // formatDateStr(new Date(), 'YYYY-MM-DD'),
-  // formatDateStr(new Date(), 'YYYY-MM-DD'),
-]);
+const recordingTime = ref([]);
 const title = ref('');
 const patientList = ref([]);
 const addNursingRecordDialogRef = ref(null);
 const selectedData = ref([]);
-
-const ids = ref([]); // 存储选择的药品信息行数据
+const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 
+// 左侧面板宽度控制
+const leftWidth = ref(350);
+const isResizing = ref(false);
+const recordTableRef = ref(null);
+const currentRequestId = ref(0); // 用于防止竞态条件
+
 getPatientListInfo();
 
 /**
@@ -165,24 +251,65 @@ getPatientListInfo();
  */
 function getPatientListInfo() {
   listPatient(queryParams.value).then((res) => {
-    console.log(userStore, 'userStore', res);
     patientList.value = res.data.records;
     total.value = res.data.total;
   });
 }
 
+/**
+ * 刷新患者列表（清空搜索条件）
+ */
+function refreshPatientList() {
+  queryParams.value.searchKey = undefined;
+  getPatientListInfo();
+}
+
+/**
+ * 开始拖拽调整宽度
+ */
+function startResize(e) {
+  isResizing.value = true;
+  document.addEventListener('mousemove', doResize);
+  document.addEventListener('mouseup', stopResize);
+  e.preventDefault();
+}
+
+/**
+ * 拖拽中
+ */
+function doResize(e) {
+  if (isResizing.value) {
+    const containerLeft = document.querySelector('.nursing-record-container').getBoundingClientRect().left;
+    const newWidth = e.clientX - containerLeft;
+    leftWidth.value = Math.max(250, Math.min(500, newWidth));
+  }
+}
+
+/**
+ * 停止拖拽
+ */
+function stopResize() {
+  isResizing.value = false;
+  document.removeEventListener('mousemove', doResize);
+  document.removeEventListener('mouseup', stopResize);
+}
+
 /**
  * 查看患者护理记录单
- *
- * @param row 患者数据对象
  */
 function viewPatient(row) {
+  // 先清空列表，避免显示旧数据
+  recordList.value = [];
+
   patientData.value = row;
   patientData.value.orgId = userStore.orgId;
 
-  // recordQueryParams
+  // 重置分页参数
+  recordQueryParams.value.pageNo = 1;
+  recordQueryParams.value.pageSize = 10;
   recordQueryParams.value.encounterId = row.encounterId;
-  if (recordingTime.value.length > 0) {
+
+  if (recordingTime.value && recordingTime.value.length > 0) {
     recordQueryParams.value.recordingTimeSTime = recordingTime.value[0] + ' 00:00:00';
     recordQueryParams.value.recordingTimeETime = recordingTime.value[1] + ' 23:59:59';
   } else {
@@ -190,52 +317,198 @@ function viewPatient(row) {
     recordQueryParams.value.recordingTimeETime = undefined;
   }
 
+  getRecordList();
+}
+
+/**
+ * 获取护理记录列表
+ */
+function getRecordList() {
+  // 生成新的请求 ID，防止竞态条件
+  const requestId = ++currentRequestId.value;
   recordList.value = [];
+
   getNursingPatientPage(recordQueryParams.value).then((response) => {
-    recordList.value = [];
-    // recordList.value = res.data.records;
-    if (response.data && response.data.records.length > 0) {
-      for (let i = 0; i < response.data.records.length; i++) {
-        console.log(
-          typeof response.data.records[i].contextJson,
-          'typeofcontextJson',
-          response.data.records[i]
-        );
-        if (typeof response.data.records[i].contextJson === 'string') {
-          console.log('Parsing string...');
+    // 如果请求 ID 不匹配，说明有更新的请求，丢弃这个响应
+    if (requestId !== currentRequestId.value) {
+      console.log('请求已过期，丢弃响应');
+      return;
+    }
+
+    console.log('API 返回数据:', response.data);
+    console.log('原始记录数:', response.data?.records?.length);
+
+    if (response.data && response.data.records && response.data.records.length > 0) {
+      // 用于去重
+      const seenIds = new Set();
+      const uniqueRecords = response.data.records.filter((item) => {
+        console.log('处理记录, recordId:', item.recordId, 'index:', response.data.records.indexOf(item));
+        if (seenIds.has(item.recordId)) {
+          console.warn('发现重复 recordId:', item.recordId);
+          return false;
+        }
+        seenIds.add(item.recordId);
+        return true;
+      });
+
+      console.log('去重后记录数:', uniqueRecords.length);
+
+      for (let i = 0; i < uniqueRecords.length; i++) {
+        const record = uniqueRecords[i];
+        let content = record.contextJson;
+        if (typeof content === 'string') {
           try {
-            contextJson.value = JSON.parse(response.data.records[i].contextJson);
+            content = JSON.parse(content);
           } catch (error) {
             console.error('Parsing error:', error);
+            continue;
           }
-        } else {
-          contextJson.value = response.data.records[i].contextJson; // 如果已经是对象
         }
 
-        contextJson.value.recordTime = contextJson.value.recordTime
-          ? moment(contextJson.value.recordTime).format('YYYY-MM-DD HH:mm:ss')
-          : '';
+        // 格式化时间
+        let rawTime = content.recordingTime;
+        if (!rawTime && (content.recordDate || content.recordTime)) {
+          rawTime = `${content.recordDate || ''} ${content.recordTime || ''}`.trim();
+        }
+        if (rawTime) {
+          const parsedTime = moment(rawTime);
+          if (parsedTime.isValid()) {
+            content.recordTime = parsedTime.format('YYYY-MM-DD HH:mm');
+          } else {
+            content.recordTime = rawTime || '-';
+          }
+        } else {
+          content.recordTime = '-';
+        }
+
+        // 转换代码为文本
+        content.consciousnessCodeText = getConsciousnessText(content.consciousnessCode);
+        content.skinConditionCodeText = getSkinConditionText(content.skinConditionCode);
+        content.pipelineCareText = getPipelineCareText(content.pipelineCare);
+        content.oxygenMethodText = getOxygenMethodText(content.oxygenMethod);
+        // 护士签名：优先使用 nurseSignatureText，否则使用 recorderId_dictText
+        content.nurseSignatureText = content.nurseSignatureText || record.recorderId_dictText || '-';
+
         const tableItems = {
-          content: contextJson.value,
-          recordId: response.data.records[i].recordId,
-          patientId: response.data.records[i].patientId,
-          encounterId: response.data.records[i].encounterId,
-          recordingTime: response.data.records[i].recordingTime,
+          _index: i,
+          content: content,
+          recordId: record.recordId,
+          patientId: record.patientId,
+          encounterId: record.encounterId,
+          recordingTime: content.recordTime || content.recordingTime,
+          consciousnessCodeText: content.consciousnessCodeText,
+          temperature: content.temperature,
+          pulseRate: content.pulseRate,
+          breathRate: content.breathRate,
+          systolicBloodPressure: content.systolicBloodPressure,
+          diastolicBloodPressure: content.diastolicBloodPressure,
+          bloodOxygen: content.bloodOxygen,
+          oxygenMethod: content.oxygenMethod,
+          oxygenMethodText: content.oxygenMethodText,
+          oxygenFlow: content.oxygenFlow,
+          inputName: content.inputName,
+          inputAmount: content.inputAmount,
+          inputRoute: content.inputRoute,
+          outputName: content.outputName,
+          outputAmount: content.outputAmount,
+          skinConditionCode: content.skinConditionCode,
+          skinConditionCodeText: content.skinConditionCodeText,
+          pipelineCare: content.pipelineCare,
+          pipelineCareText: content.pipelineCareText,
+          conditionObservation: content.conditionObservation || content.bqgcOther,
+          nurseSignature: content.nurseSignature,
+          nurseSignatureText: content.nurseSignatureText,
         };
         recordList.value.push(tableItems);
       }
     } else {
       recordList.value = [];
     }
-    console.log(recordList.value, 'recordList');
-    recordsTotal.value = response.data.total;
+    recordsTotal.value = response.data.total || 0;
+  }).catch((err) => {
+    console.error('获取记录列表失败:', err);
   });
-  console.log('查看患者体温单', row);
-  proxy.$refs.addNursingRecordDialogRef.show(row);
 }
 
 /**
- * 打开体征录入
+ * 搜索记录
+ */
+function searchRecord() {
+  if (patientData.value.encounterId) {
+    viewPatient(patientData.value);
+  } else {
+    proxy.$modal.msgWarning('请先选择患者');
+  }
+}
+
+/**
+ * 意识代码转文本
+ */
+function getConsciousnessText(code) {
+  const map = {
+    '1': '清醒', '2': '嗜睡', '3': '意识模糊', '4': '昏睡',
+    '5': '浅昏迷', '6': '深昏迷', '7': '谵妄', '8': '中度昏迷'
+  };
+  return map[code] || code || '-';
+}
+
+/**
+ * 获取患者状态文本
+ */
+function getStatusText(patient) {
+  // 根据患者状态返回标签文本
+  if (patient.dischargeDate) {
+    return '待出院结算';
+  }
+  return '已入院';
+}
+
+/**
+ * 获取患者状态样式类
+ */
+function getStatusClass(patient) {
+  if (patient.dischargeDate) {
+    return 'status-pending';
+  }
+  return 'status-admitted';
+}
+
+/**
+ * 皮肤情况代码转文本
+ */
+function getSkinConditionText(code) {
+  const map = {
+    '1': '完好', '2': '压疮', '3': '出血点', '4': '破损', '5': '水肿', '6': '瘀斑'
+  };
+  return map[code] || code || '-';
+}
+
+/**
+ * 管路护理代码转文本
+ */
+function getPipelineCareText(codes) {
+  if (!codes) return '-';
+  const codeList = Array.isArray(codes) ? codes : [codes];
+  const map = {
+    '1': '胃管', '2': '导尿管', '3': '静脉置管', '4': '吸氧管',
+    '5': 'T管', '6': '胸腔引流管', '7': '腹腔引流管', '8': '伤口引流管',
+    '9': '脑室引流管', '10': '其他'
+  };
+  return codeList.map(c => map[c] || c).join('、') || '-';
+}
+
+/**
+ * 氧疗方式代码转文本
+ */
+function getOxygenMethodText(code) {
+  const map = {
+    '1': '鼻导管', '2': '面罩', '3': '高流量', '4': '机械通气'
+  };
+  return map[code] || (code ? '吸氧' : '');
+}
+
+/**
+ * 打开新增弹窗
  */
 function openAddTprDialog() {
   if (!patientData.value.patientId) {
@@ -243,32 +516,34 @@ function openAddTprDialog() {
     return;
   }
   title.value = '新增';
+  editData.value = {};
   openAddTpr.value = true;
-
   nextTick(() => {
-    proxy.$refs['addNursingRecordDialogRef'].show();
+    proxy.$refs['addNursingRecordDialogRef']?.show();
   });
-  console.log(openAddTpr.value, '打开体征录入对话框');
 }
 
 /**
- * 关闭新增体征弹窗
+ * 关闭弹窗回调
  */
 function closePatientDetialDialog(str) {
   openAddTpr.value = false;
-  viewPatient(patientData.value);
+  editData.value = {};
+  if (patientData.value.encounterId) {
+    getRecordList();
+  }
   if (str === 'success') {
     proxy.$modal.msgSuccess('操作成功！');
   }
 }
 
-/** 选择条数  */
+/**
+ * 选择条数
+ */
 function handleSelectionChange(selection) {
-  console.log(selection, '选择条数');
-  selectedData.value = selection.map((item) => ({ ...item })); // 存储选择的行数据
+  selectedData.value = selection.map((item) => ({ ...item }));
   ids.value = selection.map((item) => item.recordId);
-  console.log(ids.value, '选择条数');
-  single.value = selection.length != 1;
+  single.value = selection.length !== 1;
   multiple.value = !selection.length;
 }
 
@@ -278,67 +553,273 @@ function handleSelectionChange(selection) {
 function handleEdit(row) {
   title.value = '编辑';
   openAddTpr.value = true;
-  editData.value = row;
+  editData.value = {
+    recordId: row.recordId,
+    content: row.content,
+  };
   nextTick(() => {
-    proxy.$refs['addNursingRecordDialogRef'].show();
+    proxy.$refs['addNursingRecordDialogRef']?.show();
   });
-  console.log(openAddTpr.value, '打开体征录入对话框');
 }
 
 /**
- * 删除记录单
- *
- * @param index - 要删除的处方在列表中的索引
+ * 删除单条记录
  */
-function deletePrescription(index) {
-  console.log(selectedData.value, '删除记录单');
-  if (selectedData.value.length == 0) {
-    proxy.$modal.msgWarning('请选择要删除的数据信息！');
-    return;
-  }
-  console.log('deletePrescription删除', data);
+function handleDelete(row) {
   proxy.$modal
-    .confirm('是否确认删除以上数据！')
-    .then(function () {
-      return delRecord(selectedData.value);
+    .confirm('是否确认删除该记录？')
+    .then(() => {
+      return delRecord([{ recordId: row.recordId }]);
     })
     .then(() => {
-      viewPatient(patientData.value);
+      getRecordList();
       proxy.$modal.msgSuccess('删除成功');
     })
     .catch(() => {});
 }
+
+/**
+ * 批量删除
+ */
+function batchDelete() {
+  if (selectedData.value.length === 0) {
+    proxy.$modal.msgWarning('请选择要删除的数据');
+    return;
+  }
+  proxy.$modal
+    .confirm(`是否确认删除选中的 ${selectedData.value.length} 条记录？`)
+    .then(() => {
+      return delRecord(selectedData.value.map(item => ({ recordId: item.recordId })));
+    })
+    .then(() => {
+      getRecordList();
+      proxy.$modal.msgSuccess('删除成功');
+    })
+    .catch(() => {});
+}
+
+/**
+ * 打印
+ */
+function handlePrint() {
+  if (!patientData.value.patientId) {
+    proxy.$modal.msgWarning('请先选择患者');
+    return;
+  }
+  proxy.$modal.msgWarning('打印功能开发中');
+}
 </script>
 
 <style lang="scss" scoped>
-.business-temperature {
-  grid-template-columns: 100%;
-  background-color: white;
+.nursing-record-container {
+  display: flex;
+  height: 100%;
+  background: #f5f7fa;
+  padding: 12px;
+  gap: 12px;
 }
 
-:deep(.business-temperature .el-icon-arrow-down) {
-  font-size: 12px;
-}
-.business1 {
+.patient-list-panel {
+  position: relative;
+  min-width: 250px;
+  max-width: 500px;
   background: white;
-  padding: 10px 16px;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 10;
+}
+
+.resize-handle:hover {
+  background: #409eff;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 患者卡片列表 */
+.patient-card-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.patient-card {
+  background: white;
+  border: 1px solid #ebeef5;
   border-radius: 6px;
-  height: 40%;
-  justify-content: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+  }
+
+  &.is-active {
+    border: 2px solid #409eff;
+    background: linear-gradient(135deg, #ecf5ff 0%, #f5f9ff 100%);
+  }
 }
-.layui-form-label {
-  line-height: 35px;
-  text-align: right;
-  padding-right: 10px;
+
+.card-top {
+  margin-bottom: 8px;
 }
-.layui-input-inline {
-  display: inline-block;
+
+.bed-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.business-temperature-sheet {
-  display: grid;
-  grid-template-columns: 59px 1px 780px;
+
+.bed-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
 }
-:deep(.business-temperature-sheet .el-icon-arrow-down) {
-  font-size: 12px;
+
+.status-tag {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+
+  &.status-admitted {
+    background: #e6f7ed;
+    color: #52c41a;
+  }
+
+  &.status-pending {
+    background: #f5f5f5;
+    color: #8c8c8c;
+  }
 }
-</style>
\ No newline at end of file
+
+.card-divider {
+  height: 1px;
+  border-top: 1px dashed #e4e7ed;
+  margin: 8px 0;
+}
+
+.card-bottom {
+  .patient-info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 4px;
+  }
+
+  .patient-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .gender-age-tag {
+    font-size: 11px;
+    padding: 2px 8px;
+    border: 1px solid #409eff;
+    border-radius: 10px;
+    color: #409eff;
+  }
+
+  .patient-no {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.record-panel {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.patient-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid #d9ecff;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  .label {
+    color: #606266;
+    font-size: 13px;
+  }
+  .value {
+    color: #303133;
+    font-weight: 500;
+    font-size: 13px;
+  }
+}
+
+.operation-bar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.batch-operation-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  background: #fef0f0;
+  border-radius: 4px;
+  margin-top: 12px;
+  color: #f56c6c;
+}
+
+:deep(.el-table) {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+:deep(.el-table th) {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+}
+
+:deep(.el-pagination) {
+  margin-top: 12px;
+}
+</style>