wangyizhe/his
3
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(PatientList): 重构患者列表卡片布局结构

Browse Source 
- 将原有的 header-top 和 header-bottom 结构替换为 info-row 统一布局
- 新增姓名、性别年龄、房间床号、住院号、保险类型等独立信息行
- 使用 el-text 组件优化姓名显示效果
- 为性别标签添加女性样式标识
- 调整床位信息展示方式，支持溢出省略
- 修改溢出属性从 hidden 为 visible 确保内容正常显示
- 优化标签样式和间距布局
- 隐藏已废弃的旧布局元素
- 调整 pending 患者列表的换行和对齐方式
This commit is contained in:
chenqi
2026-01-21 17:50:51 +08:00
parent a0b546266d
commit 1c07108e58
2 changed files with 159 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
openhis-ui-vue3/src/components/PatientList/index.vue
View File

@@ -33,18 +33,32 @@
:class="{ actived: activeCardId === item.encounterId }"
>
<div class="patient-card-header">
<div class="header-top">
<div class="bed-container">
<div class="bed">
<div class="bed-info">
<div v-if="item.houseName" class="house-name">{{ item.houseName }}</div>
<div class="bed-name">{{ item.bedName || '未分床' }}</div>
</div>
</div>
<!-- 第1行：姓名 -->
<div class="info-row name-row">
<div class="name">
<el-text :text="item.patientName" tclass="name" width="auto">
{{ item.patientName || '-' }}
</el-text>
</div>
<el-space>
</div>
<!-- 第2行：性别 年龄 + 入院状态 -->
<div class="info-row gender-age-row">
<div class="age">
<el-tag
size="small"
class="age-tag"
effect="plain"
:class="{ 'age-tag-female': item.genderEnum_enumText === '女性' }"
>
{{ item.genderEnum_enumText || '-' }}
<span v-if="item.age"> · {{ item.age }}</span>
</el-tag>
</div>
<!-- 入院状态放在性别年龄旁边 -->
<div class="status-inline" v-if="item.statusEnum_enumText">
<el-tag
v-if="item.statusEnum_enumText"
size="small"
class="payer-tag-status"
effect="light"
@@ -52,22 +66,31 @@
>
{{ item.statusEnum_enumText }}
</el-tag>
<el-tag
v-if="item.contractName"
size="small"
class="payer-tag"
effect="light"
>
{{ item.contractName }}
</el-tag>
</el-space>
</div>
</div>
<div class="header-bottom">
<!-- 第3行：房间号-分床状态 -->
<div class="info-row room-bed-row">
<div class="bed-info">
<div v-if="item.houseName" class="house-name">{{ item.houseName }}</div>
<div class="bed-name">{{ item.bedName || '未分床' }}</div>
</div>
</div>
<!-- 第4行：住院号 -->
<div class="info-row busno-row">
<span class="bus-no">住院号：{{ item.busNo || '-' }}</span>
<span class="insurance-type" v-if="item.insutype_dictText">
险种类型：{{ item.insutype_dictText }}
</span>
</div>
<!-- 第5行：居民保险类型 -->
<div class="info-row insurance-row" v-if="item.contractName">
<el-tag
size="small"
class="payer-tag"
effect="light"
>
{{ item.contractName }}
</el-tag>
</div>
</div>
@@ -360,7 +383,7 @@ watch(
<style lang="scss" scoped>
.patient-card {
width: 100%;
overflow: hidden;
overflow: visible; /* 改为visible以确保内容可见 */
background-color: #fff;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.04);
@@ -383,77 +406,128 @@ watch(
display: flex;
flex-direction: column;
padding: 10px 12px 4px;
overflow: visible; /* 确保内容可见 */
gap: 4px; /* 行与行之间的间距 */
.header-top {
.info-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.bed-container {
display: flex;
flex: 1;
&.room-bed-row {
align-items: center;
min-width: 0;
font-weight: 600;
font-size: 16px;
color: #1f2933;
.bed {
flex-grow: 0;
flex-shrink: 1;
min-width: 0;
.bed-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
min-width: 0; /* 允许收缩 */
.bed-info {
display: flex;
flex-direction: column;
line-height: 1.4;
.house-name {
color: #1f2933;
font-weight: 600;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.house-name {
color: #1f2933;
font-weight: 600;
font-size: 16px;
white-space: normal;
word-break: break-all;
}
.bed-name {
color: #1f2933;
font-weight: 600;
font-size: 16px;
white-space: normal;
word-break: break-all;
}
.bed-name {
color: #1f2933;
font-weight: 600;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.payer-tag {
max-width: 120px;
font-size: 12px;
border-radius: 999px;
font-weight: bolder;
&.insurance-row {
align-items: center;
margin-left: 8px; /* 添加一点左边距，与第一行对齐 */
}
.payer-tag-status {
font-weight: bolder;
border-radius: 999px;
&.busno-row {
color: #6b7280;
font-size: 12px;
align-items: center;
.bus-no {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&.name-row {
align-items: center;
color: #111827;
.name {
color: #111827;
font-weight: 700 !important; /* 更粗的字体，使用important确保优先级 */
font-size: 18px !important; /* 更大的字体，使用important确保优先级 */
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
:deep(.el-text),
:deep(.el-text__inner) {
font-weight: 700 !important; /* 确保el-text组件也应用粗体 */
font-size: 18px !important; /* 确保el-text组件也应用更大字体 */
}
}
}
&.gender-age-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.age {
flex-shrink: 0;
.age-tag {
border-radius: 999px;
padding: 0 8px;
}
.age-tag-female {
border-color: rgb(255, 55, 158);
color: rgb(255, 126, 184);
}
}
.status-inline {
flex-shrink: 0;
margin-left: 8px;
}
}
}
.header-bottom {
margin-top: 4px;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
color: #6b7280;
.payer-tag {
max-width: 100%;
font-size: 12px;
border-radius: 999px;
font-weight: bolder;
}
.payer-tag-status {
font-weight: bolder;
border-radius: 999px;
}
.bus-no {
white-space: nowrap;
}
.insurance-type {
white-space: nowrap;
}
/* 隐藏旧的布局结构，因为已被新的info-row结构替代 */
.header-top,
.header-bottom,
.bed-container,
.tags-container {
display: none;
}
}
@@ -476,6 +550,7 @@ watch(
justify-content: space-between;
gap: 8px;
width: 100%;
display: none; /* 新的布局中，name-container已在header中显示，这里隐藏 */
.name {
color: #111827;
@@ -522,15 +597,16 @@ watch(
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
border-right: 1px solid #ebeef5;
background-color: #ffffff;
width: 240px;
min-width: 240px;
&-unexpand {
width: 84px;
min-width: 84px;
}
.patientList-operate {
display: flex;
align-items: center;
@@ -551,22 +627,14 @@ watch(
flex-direction: column;
height: 0;
width: 240px;
&-unexpand {
width: 84px;
}
.search-operate {
padding: 0 8px;
height: 48px;
display: flex;
align-items: center;
flex: none;
}
.patient-cards {
flex: 1;
padding: 0 8px;
overflow: hidden;
:deep(.patient-cards-scrollbar) {
@@ -610,6 +678,7 @@ watch(
display: flex;
justify-content: flex-end;
padding: 4px 16px 8px;
&-unexpand {
justify-content: center;
}

4
openhis-ui-vue3/src/components/PendingPatientList/index.vue
View File

@@ -187,6 +187,7 @@ const getStatusClass = (item: any) => {
align-items: center;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap; /* 防止换行 */
.bed-container {
display: flex;
@@ -216,9 +217,10 @@ const getStatusClass = (item: any) => {
.header-tags {
flex-shrink: 0;
display: flex;
align-items: flex-end;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: nowrap; /* 防止换行 */
}
}