Yajentine/his
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决诊断目录数据展示不全问题

Browse Source
This commit is contained in:
suizihe
2025-11-07 14:08:28 +08:00
parent 43f3d1ba94
commit 08f7e35042
1 changed files with 153 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
openhis-ui-vue3/src/views/catalog/disease/index.vue
View File

@@ -86,84 +86,90 @@
</el-col> -->
</el-row>
<el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="编码" align="center" key="conditionCode" prop="conditionCode" />
<el-table-column
label="名称"
align="center"
key="name"
prop="name"
:show-overflow-tooltip="true"
/>
<el-table-column
label="疾病分类"
align="center"
key="sourceEnum_enumText"
prop="sourceEnum_enumText"
:show-overflow-tooltip="true"
/>
<el-table-column
label="拼音助记码"
align="center"
key="pyStr"
prop="pyStr"
:show-overflow-tooltip="true"
/>
<el-table-column
label="类型"
align="center"
key="typeCode_dictText"
prop="typeCode_dictText"
:show-overflow-tooltip="true"
/>
<el-table-column
label="医保编码 "
align="center"
key="ybNo"
prop="ybNo"
:show-overflow-tooltip="true"
/>
<el-table-column
label="医保标记"
align="center"
key="ybMatchFlag"
prop="ybMatchFlag_enumText"
/>
<el-table-column
label="医保对码标志"
align="center"
key="ybMatchFlag"
prop="ybMatchFlag_enumText"
/>
<el-table-column
label="状态"
align="center"
key="statusEnum_enumText"
prop="statusEnum_enumText"
width="160"
/>
<el-table-column
label="描述"
align="center"
key="description"
prop="description"
width="160"
/>
<el-table-column
label="操作"
align="center"
width="150"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
<!-- 添加外层滚动容器，确保表格可以水平滚动 -->
<div class="table-scroll-container">
<!-- 移除style="width: 100%"，让Element UI表格根据内容自动调整 -->
<el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange" border resizable>
<el-table-column type="selection" width="50" align="center" />
<!-- 使用prop属性并设置合适的最小宽度，启用列宽调整 -->
<el-table-column label="编码" align="center" prop="conditionCode" min-width="150" />
<!-- 名称列保留自定义模板以处理长文本 -->
<el-table-column
label="名称"
align="center"
prop="name"
min-width="280"
>
<template #default="scope">
<div class="name-cell">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<!-- 其他列使用标准配置 -->
<el-table-column
label="疾病分类"
align="center"
prop="sourceEnum_enumText"
min-width="180"
/>
<el-table-column
label="拼音助记码"
align="center"
prop="pyStr"
min-width="220"
/>
<el-table-column
label="类型"
align="center"
prop="typeCode_dictText"
min-width="120"
/>
<el-table-column
label="医保编码"
align="center"
prop="ybNo"
min-width="180"
/>
<el-table-column
label="医保标记"
align="center"
prop="ybMatchFlag_enumText"
min-width="150"
/>
<el-table-column
label="医保对码标志"
align="center"
prop="ybMatchFlag_enumText"
min-width="150"
/>
<el-table-column
label="状态"
align="center"
prop="statusEnum_enumText"
min-width="150"
/>
<el-table-column
label="描述"
align="center"
prop="description"
min-width="250"
/>
<el-table-column
label="操作"
align="center"
min-width="120"
class-name="small-padding"
>
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
@@ -504,4 +510,73 @@ getList();
display: flex;
align-items: center;
}
/* 表格外层滚动容器，确保表格整体可以水平滚动 */
.table-scroll-container {
width: 100%;
overflow-x: auto;
margin-bottom: 10px;
}
/* 表格样式调整，移除默认的最大宽度限制 */
.table-scroll-container >>> .el-table {
min-width: 100%;
width: auto;
}
/* 名称列的单元格样式，确保长文本可以水平滚动 */
.name-cell {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 4px 8px;
height: 32px;
min-width: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
/* 美化名称列的滚动条 */
.name-cell::-webkit-scrollbar {
height: 8px;
}
.name-cell::-webkit-scrollbar-thumb {
background: rgba(0, 120, 215, 0.6);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s ease;
}
.name-cell::-webkit-scrollbar-thumb:hover {
background: rgba(0, 120, 215, 0.8);
}
.name-cell::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* 表格外层容器的滚动条样式 */
.table-scroll-container::-webkit-scrollbar {
height: 12px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
background: rgba(0, 120, 215, 0.7);
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s ease;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover {
background: rgba(0, 120, 215, 0.9);
}
.table-scroll-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
border: 2px solid rgba(0, 0, 0, 0.05);
}
</style>