style(ui): 统一界面样式标准并优化组件布局

- 引入 ui-standard.scss 样式文件以统一界面标准
- 为查询表单添加 query-form 样式类
- 为搜索按钮组添加 search-buttons 样式类
- 为按钮组容器添加 button-group 样式类
- 为字典标签添加 dict-tag 样式类以统一样式
- 为操作按钮添加 action-button 样式类
- 为分页组件添加 pagination-container 容器
- 优化患者管理页面表格列的字典标签显示
- 调整公告页面布局结构并添加容器样式
- 优化表格单元格间距和样式显示

openhis-ui-vue3/src/views/patientmanagement/patientmanagement/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <!-- 患者添加对话框组件 -->
     <patient-add-dialog ref="patientAddRef" @submit="handlePatientAdded" />
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
       <el-form-item label="病人名称" prop="searchKey">
         <el-input
           v-model="queryParams.searchKey"
@@ -22,43 +22,67 @@
           end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="search-buttons">
         <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="button-group">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="Plus" @click="handleAdd">新增患者</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table :data="patientList" border style="width: 100%">
+    <el-table :data="patientList" border>
       <el-table-column prop="idCard" label="身份证号" width="180" />
       <el-table-column prop="busNo" label="病人ID" width="180" />
       <el-table-column prop="name" label="病人名称" width="180" />
-      <el-table-column prop="genderEnum_enumText" label="性别" width="180" />
+      <el-table-column prop="genderEnum_enumText" label="性别" width="180">
+        <template #default="scope">
+          <dict-tag :options="patient_gender_enum" :value="scope.row.genderEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column
         prop="maritalStatusEnum_enumText"
         label="婚姻状况"
         width="180"
-      /><!--:formatter="formatMaritalStatus"-->
+      >
+        <template #default="scope">
+          <dict-tag :options="marital_status_enum" :value="scope.row.maritalStatusEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="nationalityCode" label="民族" width="180">
         <template #default="scope">
-          {{ nationalityDict(scope.row.nationalityCode) }}
+          <dict-tag :options="nationality_code" :value="scope.row.nationalityCode" class="dict-tag" />
         </template>
       </el-table-column>
       <el-table-column prop="birthDate" label="生日" width="160" />
       <el-table-column prop="phone" label="电话" width="140" />
-      <el-table-column prop="bloodAbo_enumText" label="血型ABO" width="140" />
-      <el-table-column prop="bloodRh_enumText" label="血型RH" width="140" />
+      <el-table-column prop="bloodAbo_enumText" label="血型ABO" width="140">
+        <template #default="scope">
+          <dict-tag :options="blood_abo" :value="scope.row.bloodAbo" class="dict-tag" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="bloodRh_enumText" label="血型RH" width="140">
+        <template #default="scope">
+          <dict-tag :options="blood_rh" :value="scope.row.bloodRh" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="linkName" label="联系人" width="180" />
       <el-table-column prop="linkTelcom" label="联系人电话" width="180" />
-      <el-table-column prop="linkRelationCode_enumText" label="联系人关系" width="180" />
+      <el-table-column prop="linkRelationCode_enumText" label="联系人关系" width="180">
+        <template #default="scope">
+          <dict-tag :options="link_relation_code" :value="scope.row.linkRelationCode" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="address" label="家庭地址" width="180" />
-      <el-table-column prop="prfsEnum_enumText" label="职业" width="180" />
+      <el-table-column prop="prfsEnum_enumText" label="职业" width="180">
+        <template #default="scope">
+          <dict-tag :options="prfs_enum" :value="scope.row.prfsEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="workCompany" label="工作单位" width="180" />
       <el-table-column prop="organizationName" label="登记医院" width="180" />
       <el-table-column prop="deceasedDate" label="死亡时间" width="180" />
@@ -67,24 +91,23 @@
         label="操作"
         align="center"
         width="210"
-        fixed="right"
         class-name="small-padding fixed-width"
       >  
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-            >修改</el-button
-          >
-          <el-button link type="primary" icon="View" @click="handleSee(scope.row)">查看</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" class="action-button">修改</el-button>
+          <el-button link type="primary" icon="View" @click="handleSee(scope.row)" class="action-button">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <div class="pagination-container">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
@@ -666,4 +689,26 @@ onMounted(() => {
 });
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+// 患者列表页面统一样式
+
+// 优化按钮组间距
+.button-group {
+  margin-bottom: 16px;
+}
+
+// 优化表格样式
+.el-table {
+  // 移除固定宽度，让列自适应
+  :deep(th) {
+    background-color: #f8f9fa;
+    color: #606266;
+    font-weight: 600;
+    padding: 12px 0;
+  }
+
+  :deep(td) {
+    padding: 12px 0;
+  }
+}
+</style>